feat: move some resources to shared, update several pseudoclass style.

This commit is contained in:
rabbitism 2023-01-28 23:54:48 +08:00
parent c8074300a0
commit b9a8bd3a2e
5 changed files with 87 additions and 65 deletions

View File

@ -9,6 +9,8 @@
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<TimePicker />
<Button Content="Hello" Theme="{DynamicResource FluentTimePickerFlyoutButton}" />
<TimePicker MinuteIncrement="15" />
<TimePicker ClockIdentifier="24HourClock" />
<TimePicker ClockIdentifier="12HourClock" IsEnabled="False" />
</StackPanel>
</UserControl>

View File

@ -3,7 +3,7 @@
<!-- Theme for the items displayed in the selectors -->
<ControlTheme
x:Key="FluentDateTimePickerItem"
x:Key="DateTimePickerItem"
BasedOn="{StaticResource {x:Type ListBoxItem}}"
TargetType="ListBoxItem">
<Setter Property="ListBoxItem.CornerRadius" Value="0" />
@ -21,9 +21,9 @@
</ControlTheme>
<!-- This is used for both the accept/dismiss & buttons in the presenter -->
<ControlTheme x:Key="FluentDateTimePickerButton" TargetType="Button">
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
<ControlTheme x:Key="DateTimePickerButton" TargetType="Button">
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForeground}" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" />
<Setter Property="Padding" Value="0 8" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
@ -46,19 +46,19 @@
</Setter>
<Style Selector="^:pointerover /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonPointeroverForeground}" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPointeroverBackground}" />
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonPointeroverForeground}" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonPressedForeground}" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPressedBackground}" />
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonPressedForeground}" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonPressedBackground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="FluentDateTimePickerUpButton"
BasedOn="{StaticResource FluentDateTimePickerButton}"
x:Key="DateTimePickerUpButton"
BasedOn="{StaticResource DateTimePickerButton}"
TargetType="RepeatButton">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
@ -79,8 +79,8 @@
</ControlTheme>
<ControlTheme
x:Key="FluentDateTimePickerDownButton"
BasedOn="{StaticResource FluentDateTimePickerButton}"
x:Key="DateTimePickerDownButton"
BasedOn="{StaticResource DateTimePickerButton}"
TargetType="RepeatButton">
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Stretch" />

View File

@ -1,6 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ControlTheme x:Key="FluentTimePickerFlyoutButton" TargetType="Button">
<ControlTheme x:Key="TimePickerFlyoutButton" TargetType="Button">
<Setter Property="RenderTransform" Value="none" />
<Setter Property="Template">
<ControlTemplate>
@ -17,44 +17,39 @@
</ControlTemplate>
</Setter>
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}" />
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}" />
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonPointeroverBorderBrush}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}" />
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}" />
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerButtonDisabledBackground}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
<Setter Property="MinWidth" Value="242" />
<Setter Property="Width" Value="242" />
<Setter Property="MaxHeight" Value="300" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Template">
<ControlTemplate TargetType="TimePickerPresenter">
<Border
Name="Background"
Margin="8"
Padding="16,0"
Margin="{DynamicResource DateTimePickerFlyoutBorderMargin}"
Padding="{DynamicResource DateTimePickerFlyoutPadding}"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
BoxShadow="0 0 8 0 #1A000000"
BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid Name="ContentPanel" RowDefinitions="*,Auto">
<Grid Name="PART_PickerContainer">
<Grid.Styles>
<Style Selector="DateTimePickerPanel &gt; ListBoxItem">
<Setter Property="Theme" Value="{StaticResource FluentDateTimePickerItem}" />
<Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
</Style>
</Grid.Styles>
<!-- Ignore col defs here, set in code -->
@ -62,48 +57,50 @@
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
<DateTimePickerPanel
Name="PART_HourSelector"
ItemHeight="28"
ItemHeight="{DynamicResource DateTimePickerListBoxItem}"
PanelType="Hour"
ShouldLoop="True" />
</ScrollViewer>
<RepeatButton Name="PART_HourUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
<RepeatButton Name="PART_HourDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
<RepeatButton Name="PART_HourUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
<RepeatButton Name="PART_HourDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
</Panel>
<Panel Name="PART_MinuteHost" Grid.Column="2">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
<DateTimePickerPanel
Name="PART_MinuteSelector"
ItemHeight="28"
ItemHeight="{DynamicResource DateTimePickerListBoxItem}"
PanelType="Minute"
ShouldLoop="True" />
</ScrollViewer>
<RepeatButton Name="PART_MinuteUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
<RepeatButton Name="PART_MinuteDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
<RepeatButton Name="PART_MinuteUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
<RepeatButton Name="PART_MinuteDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
</Panel>
<Panel Name="PART_PeriodHost" Grid.Column="4">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
<DateTimePickerPanel
Name="PART_PeriodSelector"
ItemHeight="28"
ItemHeight="{DynamicResource DateTimePickerListBoxItem}"
PanelType="TimePeriod"
ShouldLoop="False" />
</ScrollViewer>
<RepeatButton Name="PART_PeriodUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
<RepeatButton Name="PART_PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
<RepeatButton Name="PART_PeriodUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
<RepeatButton Name="PART_PeriodDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
</Panel>
<Rectangle
Name="PART_FirstSpacer"
Grid.Column="1"
Width="1"
Margin="0,4"
HorizontalAlignment="Center"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
<Rectangle
Name="PART_SecondSpacer"
Grid.Column="3"
Width="1"
Margin="0,4"
HorizontalAlignment="Center"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
</Grid>
@ -117,7 +114,7 @@
Grid.Column="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Theme="{StaticResource FluentDateTimePickerButton}">
Theme="{StaticResource DateTimePickerButton}">
<PathIcon
Width="12"
Height="12"
@ -130,7 +127,7 @@
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontSize="16"
Theme="{StaticResource FluentDateTimePickerButton}">
Theme="{StaticResource DateTimePickerButton}">
<PathIcon
Width="12"
Height="12"
@ -158,9 +155,9 @@
<ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
<Setter Property="FontSize" Value="14" />
<Setter Property="Height" Value="30" />
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}" />
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="3" />
<Setter Property="HorizontalAlignment" Value="Left" />
@ -170,17 +167,18 @@
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<Button
x:Name="PART_FlyoutButton"
Width="242"
MinWidth="242"
MaxWidth="242"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Cursor="Hand"
Foreground="{TemplateBinding Foreground}"
IsEnabled="{TemplateBinding IsEnabled}"
Theme="{StaticResource FluentTimePickerFlyoutButton}">
Theme="{StaticResource TimePickerFlyoutButton}">
<Grid ColumnDefinitions="*, Auto">
<Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
<!-- Ignore col defs here, set in code -->
@ -202,6 +200,7 @@
Name="PART_FirstColumnDivider"
Grid.Column="1"
Width="1"
Margin="0,4"
HorizontalAlignment="Center"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
@ -223,6 +222,7 @@
Name="PART_SecondColumnDivider"
Grid.Column="3"
Width="1"
Margin="0,4"
HorizontalAlignment="Center"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
@ -241,12 +241,13 @@
</Border>
</Grid>
<PathIcon
Name="PART_Icon"
Grid.Column="1"
Width="12"
Height="12"
Margin="0,0,8,0"
Data="{DynamicResource TimePickerIconGlyph}"
Foreground="{DynamicResource TimePickerIconForeground}" />
Foreground="{DynamicResource DateTimePickerIconForeground}" />
</Grid>
</Button>
@ -257,23 +258,18 @@
PlacementMode="Bottom"
PlacementTarget="{TemplateBinding}"
WindowManagerAddShadowHint="False">
<TimePickerPresenter Name="PART_PickerPresenter" />
<TimePickerPresenter Name="PART_PickerPresenter" Width="{Binding $parent[TimePicker].Bounds.Width}" />
</Popup>
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:disabled /template/ Rectangle">
<Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" />
<Style Selector="^:disabled /template/ PathIcon#PART_Icon">
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonDisabledIconForeground}" />
</Style>
<Style Selector="^:hasnotime /template/ Button#PART_FlyoutButton TextBlock">
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}" />
</Style>
<Style Selector="^:error /template/ Button#PART_FlyoutButton">
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -1,14 +1,17 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="DateTimePickerListItemBackground" Color="White" />
<Thickness x:Key="DateTimePickerListItemPadding">0 3 0 6</Thickness>
<SolidColorBrush x:Key="DateTimePickerButtonForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerButtonPointeroverForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerButtonPressedForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerFlyoutButtonForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerFlyoutButtonPointeroverForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerFlyoutButtonPressedForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerButtonBackground" Color="White" />
<SolidColorBrush x:Key="DateTimePickerButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="DateTimePickerButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
<SolidColorBrush x:Key="DateTimePickerFlyoutButtonBackground" Color="White" />
<SolidColorBrush x:Key="DateTimePickerFlyoutButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="DateTimePickerFlyoutButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
<PathGeometry x:Key="DateTimePickerButtonUpGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
<PathGeometry x:Key="DateTimePickerButtonDownGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
@ -17,4 +20,23 @@
<SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
<sys:Double x:Key="DateTimePickerListBoxItem">28</sys:Double>
<SolidColorBrush x:Key="DateTimePickerButtonBorderBrush" Color="#C6CACD" />
<SolidColorBrush x:Key="DateTimePickerButtonBackground" Color="Transparent" />
<SolidColorBrush x:Key="DateTimePickerButtonForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerIconForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerEmptyForeground" Opacity="0.5" Color="#1C1F23" />
<SolidColorBrush x:Key="DateTimePickerButtonPointeroverBorderBrush" Color="#0062D6" />
<SolidColorBrush x:Key="DateTimePickerButtonDisabledBorderBrush" Color="#F9F9F9" />
<SolidColorBrush x:Key="DateTimePickerButtonDisabledBackground" Color="#F9F9F9" />
<SolidColorBrush x:Key="DateTimePickerButtonDisabledIconForeground" Opacity="0.4" Color="#2E3238" />
<BoxShadows x:Key="DateTimePickerFlyoutBoxShadow">0 0 8 0 #1A000000</BoxShadows>
<Thickness x:Key="DateTimePickerFlyoutPadding">16 0</Thickness>
<Thickness x:Key="DateTimePickerFlyoutBorderMargin">8</Thickness>
</ResourceDictionary>

View File

@ -1,8 +1,10 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="TimePickerButtonBorderBrush" Color="#C6CACD" />
<SolidColorBrush x:Key="TimePickerButtonBackground" Color="Transparent" />
<SolidColorBrush x:Key="TimePickerButtonForeground" Color="#1C1F23" />
<PathGeometry x:Key="TimePickerIconGlyph">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM13.5 6.5V11.3787L17.0607 14.9393C17.6464 15.5251 17.6464 16.4749 17.0607 17.0607C16.4749 17.6464 15.5251 17.6464 14.9393 17.0607L10.9393 13.0607C10.658 12.7794 10.5 12.3978 10.5 12V6.5C10.5 5.67157 11.1716 5 12 5C12.8284 5 13.5 5.67157 13.5 6.5Z</PathGeometry>
<SolidColorBrush x:Key="TimePickerIconForeground" Opacity="0.62" Color="#1C1F23" />
</ResourceDictionary>