From dcf557ad1aea1361bd96fd606f41d2dac26bb915 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 27 Jan 2023 01:08:57 +0800
Subject: [PATCH 1/4] feat: initialize timepicker from fluent theme.

---
 .../Pages/TimePickerDemo.axaml                |  13 +
 .../Pages/TimePickerDemo.axaml.cs             |  18 ++
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |   3 +
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Controls/TimePicker.axaml   | 274 ++++++++++++++++++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 .../Themes/Light/TimePicker.axaml             |   3 +
 7 files changed, 313 insertions(+)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/TimePicker.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/TimePicker.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
new file mode 100644
index 0000000..1c7e4f2
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -0,0 +1,13 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.TimePickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="20" Spacing="20">
+        <TimePicker />
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml.cs
new file mode 100644
index 0000000..71ec596
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TimePickerDemo : UserControl
+{
+    public TimePickerDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 4936ae5..b5b7751 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -81,6 +81,9 @@
         <TabItem Header="TextBox">
             <pages:TextBoxDemo />
         </TabItem>
+        <TabItem Header="TimePicker">
+            <pages:TimePickerDemo />
+        </TabItem>
         <TabItem Header="ToggleButton">
             <pages:ToggleButtonDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index f0f76bc..21ea127 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -33,6 +33,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabStrip.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/TimePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleSwitch.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Tooltip.axaml" />
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
new file mode 100644
index 0000000..5ca9928
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -0,0 +1,274 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="FluentTimePickerFlyoutButton" TargetType="Button">
+        <Setter Property="RenderTransform" Value="none" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Foreground="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}" />
+            <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}" />
+        </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}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
+        <Setter Property="Width" Value="242" />
+        <Setter Property="MinWidth" Value="242" />
+        <Setter Property="MaxHeight" Value="398" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Name="Background"
+                    MaxHeight="398"
+                    Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                        <Grid Name="PART_PickerContainer">
+                            <!--  Ignore col defs here, set in code  -->
+                            <Panel Name="PART_HourHost" Grid.Column="0">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_HourSelector"
+                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        PanelType="Hour"
+                                        ShouldLoop="True" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_HourUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_HourDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
+                            </Panel>
+
+                            <Panel Name="PART_MinuteHost" Grid.Column="2">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_MinuteSelector"
+                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        PanelType="Minute"
+                                        ShouldLoop="True" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_MinuteUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_MinuteDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
+                            </Panel>
+
+                            <Panel Name="PART_PeriodHost" Grid.Column="4">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_PeriodSelector"
+                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        PanelType="TimePeriod"
+                                        ShouldLoop="False" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_PeriodUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
+                            </Panel>
+
+                            <Rectangle
+                                x:Name="HighlightRect"
+                                Grid.Column="0"
+                                Grid.ColumnSpan="5"
+                                Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}"
+                                VerticalAlignment="Center"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
+                                ZIndex="-1" />
+                            <Rectangle
+                                Name="PART_FirstSpacer"
+                                Grid.Column="1"
+                                Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                HorizontalAlignment="Center"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                            <Rectangle
+                                Name="PART_SecondSpacer"
+                                Grid.Column="3"
+                                Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                HorizontalAlignment="Center"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                        </Grid>
+
+                        <Grid
+                            Name="AcceptDismissGrid"
+                            Grid.Row="1"
+                            ColumnDefinitions="*,*">
+                            <Rectangle
+                                Grid.ColumnSpan="2"
+                                Height="{DynamicResource TimePickerSpacerThemeWidth}"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                            <Button
+                                Name="PART_AcceptButton"
+                                Grid.Column="0"
+                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Theme="{StaticResource FluentDateTimePickerButton}">
+                                <Path
+                                    Data="M0.5,8.5 5,13.5 15.5,3"
+                                    Stroke="{Binding $parent[Button].Foreground}"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="0.75" />
+                            </Button>
+                            <Button
+                                Name="PART_DismissButton"
+                                Grid.Column="1"
+                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                FontSize="16"
+                                Theme="{StaticResource FluentDateTimePickerButton}">
+                                <Path
+                                    Data="M2,2 14,14 M2,14 14 2"
+                                    Stroke="{Binding $parent[Button].Foreground}"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="0.75" />
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ Panel">
+            <Style Selector="^:pointerover RepeatButton">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
+        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
+        <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <DataValidationErrors>
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                        <Button
+                            x:Name="PART_FlyoutButton"
+                            MinWidth="{DynamicResource TimePickerThemeMinWidth}"
+                            MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Top"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsEnabled="{TemplateBinding IsEnabled}"
+                            Theme="{StaticResource FluentTimePickerFlyoutButton}">
+
+                            <Grid Name="PART_FlyoutButtonContentGrid">
+                                <!--  Ignore col defs here, set in code  -->
+                                <Border
+                                    x:Name="PART_FirstPickerHost"
+                                    Grid.Column="0"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                                    <TextBlock
+                                        x:Name="PART_HourTextBlock"
+                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+
+                                <Rectangle
+                                    Name="PART_FirstColumnDivider"
+                                    Grid.Column="1"
+                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource TimePickerSpacerFill}" />
+
+                                <Border
+                                    x:Name="PART_SecondPickerHost"
+                                    Grid.Column="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                                    <TextBlock
+                                        x:Name="PART_MinuteTextBlock"
+                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+
+                                <Rectangle
+                                    Name="PART_SecondColumnDivider"
+                                    Grid.Column="3"
+                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource TimePickerSpacerFill}" />
+
+                                <Border
+                                    x:Name="PART_ThirdPickerHost"
+                                    Grid.Column="4"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                                    <TextBlock
+                                        x:Name="PART_PeriodTextBlock"
+                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+                            </Grid>
+                        </Button>
+
+                        <Popup
+                            Name="PART_Popup"
+                            IsLightDismissEnabled="True"
+                            PlacementMode="Bottom"
+                            PlacementTarget="{TemplateBinding}"
+                            WindowManagerAddShadowHint="False">
+                            <TimePickerPresenter Name="PART_PickerPresenter" />
+                        </Popup>
+
+                    </Grid>
+                </DataValidationErrors>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:disabled /template/ Rectangle">
+            <Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" />
+        </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}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index ba61480..5026287 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -23,6 +23,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TimePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleSwitch.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Tooltip.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
new file mode 100644
index 0000000..9017e8d
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
@@ -0,0 +1,3 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+</ResourceDictionary>

From c8074300a08e5d52c22c224a603ce59e1f569605 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Sat, 28 Jan 2023 03:12:01 +0800
Subject: [PATCH 2/4] feat: Add more styles. pending on extacting more
 resources.

---
 .../Pages/TimePickerDemo.axaml                |   1 +
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 .../Controls/DateTimePickerShared.axaml       | 102 +++++++++++
 src/Semi.Avalonia/Controls/TimePicker.axaml   | 159 +++++++++---------
 .../Themes/Light/DateTimePickerShared.axaml   |  20 +++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 .../Themes/Light/TimePicker.axaml             |   5 +
 7 files changed, 212 insertions(+), 77 deletions(-)
 create mode 100644 src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
index 1c7e4f2..566f133 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -9,5 +9,6 @@
     mc:Ignorable="d">
     <StackPanel Margin="20" Spacing="20">
         <TimePicker />
+        <Button Content="Hello" Theme="{DynamicResource FluentTimePickerFlyoutButton}" />
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 21ea127..904d623 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -10,6 +10,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContextMenu.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DateTimePickerShared.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/GridSplitter.axaml" />
diff --git a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
new file mode 100644
index 0000000..f9bbf0c
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
@@ -0,0 +1,102 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+
+    <!--  Theme for the items displayed in the selectors  -->
+    <ControlTheme
+        x:Key="FluentDateTimePickerItem"
+        BasedOn="{StaticResource {x:Type ListBoxItem}}"
+        TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.CornerRadius" Value="0" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="Background" Value="{DynamicResource DateTimePickerListItemBackground}" />
+
+        <Style Selector="^:selected">
+            <Setter Property="IsHitTestVisible" Value="False" />
+        </Style>
+        <Style Selector="^.MonthItem">
+            <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}" />
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
+        </Style>
+    </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}" />
+        <Setter Property="Padding" Value="0 8" />
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Button">
+                <Border Background="{TemplateBinding Background}">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Background="{TemplateBinding Background}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover /template/ ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonPointeroverForeground}" />
+            <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonPressedForeground}" />
+            <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPressedBackground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="FluentDateTimePickerUpButton"
+        BasedOn="{StaticResource FluentDateTimePickerButton}"
+        TargetType="RepeatButton">
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="IsVisible" Value="False" />
+        <Setter Property="Padding" Value="0 4" />
+        <Setter Property="Content">
+            <Template>
+                <PathIcon
+                    Width="8"
+                    Height="8"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Data="{DynamicResource DateTimePickerButtonUpGlyph}"
+                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+            </Template>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="FluentDateTimePickerDownButton"
+        BasedOn="{StaticResource FluentDateTimePickerButton}"
+        TargetType="RepeatButton">
+        <Setter Property="VerticalAlignment" Value="Bottom" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="IsVisible" Value="False" />
+        <Setter Property="Padding" Value="0 4" />
+        <Setter Property="Content">
+            <Template>
+                <PathIcon
+                    Width="8"
+                    Height="8"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Data="{DynamicResource DateTimePickerButtonDownGlyph}"
+                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+            </Template>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index 5ca9928..3c30c2e 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -30,32 +30,39 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
-        <Setter Property="Width" Value="242" />
         <Setter Property="MinWidth" Value="242" />
-        <Setter Property="MaxHeight" Value="398" />
+        <Setter Property="Width" Value="242" />
+        <Setter Property="MaxHeight" Value="300" />
         <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
+        <Setter Property="Background" Value="White" />
         <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="TimePickerPresenter">
                 <Border
                     Name="Background"
-                    MaxHeight="398"
-                    Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
+                    Margin="8"
+                    Padding="16,0"
+                    HorizontalAlignment="Stretch"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
+                    BoxShadow="0 0 8 0 #1A000000"
                     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}" />
+                                </Style>
+                            </Grid.Styles>
                             <!--  Ignore col defs here, set in code  -->
                             <Panel Name="PART_HourHost" Grid.Column="0">
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_HourSelector"
-                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        ItemHeight="28"
                                         PanelType="Hour"
                                         ShouldLoop="True" />
                                 </ScrollViewer>
@@ -67,7 +74,7 @@
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_MinuteSelector"
-                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        ItemHeight="28"
                                         PanelType="Minute"
                                         ShouldLoop="True" />
                                 </ScrollViewer>
@@ -79,7 +86,7 @@
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_PeriodSelector"
-                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        ItemHeight="28"
                                         PanelType="TimePeriod"
                                         ShouldLoop="False" />
                                 </ScrollViewer>
@@ -87,64 +94,54 @@
                                 <RepeatButton Name="PART_PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
                             </Panel>
 
-                            <Rectangle
-                                x:Name="HighlightRect"
-                                Grid.Column="0"
-                                Grid.ColumnSpan="5"
-                                Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}"
-                                VerticalAlignment="Center"
-                                Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
-                                ZIndex="-1" />
                             <Rectangle
                                 Name="PART_FirstSpacer"
                                 Grid.Column="1"
-                                Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                Width="1"
                                 HorizontalAlignment="Center"
-                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                             <Rectangle
                                 Name="PART_SecondSpacer"
                                 Grid.Column="3"
-                                Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                Width="1"
                                 HorizontalAlignment="Center"
-                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                         </Grid>
 
                         <Grid
                             Name="AcceptDismissGrid"
                             Grid.Row="1"
                             ColumnDefinitions="*,*">
-                            <Rectangle
-                                Grid.ColumnSpan="2"
-                                Height="{DynamicResource TimePickerSpacerThemeWidth}"
-                                VerticalAlignment="Top"
-                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
                             <Button
                                 Name="PART_AcceptButton"
                                 Grid.Column="0"
-                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Theme="{StaticResource FluentDateTimePickerButton}">
-                                <Path
-                                    Data="M0.5,8.5 5,13.5 15.5,3"
-                                    Stroke="{Binding $parent[Button].Foreground}"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="0.75" />
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource DateTimePickerAcceptGlyph}"
+                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
                             </Button>
                             <Button
                                 Name="PART_DismissButton"
                                 Grid.Column="1"
-                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 FontSize="16"
                                 Theme="{StaticResource FluentDateTimePickerButton}">
-                                <Path
-                                    Data="M2,2 14,14 M2,14 14 2"
-                                    Stroke="{Binding $parent[Button].Foreground}"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="0.75" />
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource DateTimePickerDismissGlyph}"
+                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
                             </Button>
+                            <Rectangle
+                                Grid.ColumnSpan="2"
+                                Height="1"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                         </Grid>
                     </Grid>
                 </Border>
@@ -159,33 +156,33 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
-        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <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="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="CornerRadius" Value="3" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
             <ControlTemplate>
-                <DataValidationErrors>
-                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                        <Button
-                            x:Name="PART_FlyoutButton"
-                            MinWidth="{DynamicResource TimePickerThemeMinWidth}"
-                            MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Top"
-                            Background="{TemplateBinding Background}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}"
-                            Foreground="{TemplateBinding Foreground}"
-                            IsEnabled="{TemplateBinding IsEnabled}"
-                            Theme="{StaticResource FluentTimePickerFlyoutButton}">
-
-                            <Grid Name="PART_FlyoutButtonContentGrid">
+                <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                    <Button
+                        x:Name="PART_FlyoutButton"
+                        MinWidth="242"
+                        MaxWidth="242"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Top"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        Foreground="{TemplateBinding Foreground}"
+                        IsEnabled="{TemplateBinding IsEnabled}"
+                        Theme="{StaticResource FluentTimePickerFlyoutButton}">
+                        <Grid ColumnDefinitions="*, Auto">
+                            <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
                                 <!--  Ignore col defs here, set in code  -->
                                 <Border
                                     x:Name="PART_FirstPickerHost"
@@ -194,7 +191,7 @@
                                     VerticalAlignment="Stretch">
                                     <TextBlock
                                         x:Name="PART_HourTextBlock"
-                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        Padding="12,4"
                                         HorizontalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
@@ -204,9 +201,9 @@
                                 <Rectangle
                                     Name="PART_FirstColumnDivider"
                                     Grid.Column="1"
-                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                    Width="1"
                                     HorizontalAlignment="Center"
-                                    Fill="{DynamicResource TimePickerSpacerFill}" />
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
 
                                 <Border
                                     x:Name="PART_SecondPickerHost"
@@ -215,7 +212,7 @@
                                     VerticalAlignment="Stretch">
                                     <TextBlock
                                         x:Name="PART_MinuteTextBlock"
-                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        Padding="12,4"
                                         HorizontalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
@@ -225,9 +222,9 @@
                                 <Rectangle
                                     Name="PART_SecondColumnDivider"
                                     Grid.Column="3"
-                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                    Width="1"
                                     HorizontalAlignment="Center"
-                                    Fill="{DynamicResource TimePickerSpacerFill}" />
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
 
                                 <Border
                                     x:Name="PART_ThirdPickerHost"
@@ -236,26 +233,34 @@
                                     VerticalAlignment="Stretch">
                                     <TextBlock
                                         x:Name="PART_PeriodTextBlock"
-                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        Padding="12,4"
                                         HorizontalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
                                         FontWeight="{TemplateBinding FontWeight}" />
                                 </Border>
                             </Grid>
-                        </Button>
+                            <PathIcon
+                                Grid.Column="1"
+                                Width="12"
+                                Height="12"
+                                Margin="0,0,8,0"
+                                Data="{DynamicResource TimePickerIconGlyph}"
+                                Foreground="{DynamicResource TimePickerIconForeground}" />
+                        </Grid>
 
-                        <Popup
-                            Name="PART_Popup"
-                            IsLightDismissEnabled="True"
-                            PlacementMode="Bottom"
-                            PlacementTarget="{TemplateBinding}"
-                            WindowManagerAddShadowHint="False">
-                            <TimePickerPresenter Name="PART_PickerPresenter" />
-                        </Popup>
+                    </Button>
 
-                    </Grid>
-                </DataValidationErrors>
+                    <Popup
+                        Name="PART_Popup"
+                        IsLightDismissEnabled="True"
+                        PlacementMode="Bottom"
+                        PlacementTarget="{TemplateBinding}"
+                        WindowManagerAddShadowHint="False">
+                        <TimePickerPresenter Name="PART_PickerPresenter" />
+                    </Popup>
+
+                </Grid>
             </ControlTemplate>
         </Setter>
 
diff --git a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
new file mode 100644
index 0000000..274acc3
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
@@ -0,0 +1,20 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  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="DateTimePickerButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="DateTimePickerButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DateTimePickerButtonPressedBackground" 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>
+    <PathGeometry x:Key="DateTimePickerAcceptGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</PathGeometry>
+    <PathGeometry x:Key="DateTimePickerDismissGlyph">M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z</PathGeometry>
+
+
+    <SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 5026287..a7ec7c4 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -8,6 +8,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ButtonSpinner.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ComboBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/GridSplitter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
index 9017e8d..e808fbc 100644
--- a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
@@ -1,3 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  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>

From b9a8bd3a2e80c8771a192d0f45cdff8e43c04be9 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Sat, 28 Jan 2023 23:54:48 +0800
Subject: [PATCH 3/4] feat: move some resources to shared, update several
 pseudoclass style.

---
 .../Pages/TimePickerDemo.axaml                |  4 +-
 .../Controls/DateTimePickerShared.axaml       | 24 +++---
 src/Semi.Avalonia/Controls/TimePicker.axaml   | 76 +++++++++----------
 .../Themes/Light/DateTimePickerShared.axaml   | 36 +++++++--
 .../Themes/Light/TimePicker.axaml             | 12 +--
 5 files changed, 87 insertions(+), 65 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
index 566f133..b97b5b5 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -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>
diff --git a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
index f9bbf0c..b6c808e 100644
--- a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
@@ -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" />
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index 3c30c2e..531d565 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -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>
diff --git a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
index 274acc3..2deaece 100644
--- a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
@@ -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>
diff --git a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
index e808fbc..9df9b0b 100644
--- a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
@@ -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>

From 6674ca371508a6db619d278d6120153bbcdc29bf Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Sun, 29 Jan 2023 01:04:49 +0800
Subject: [PATCH 4/4] feat: Add DatePicker, move some common styles to shared.

---
 .../Pages/DatePickerDemo.axaml                |  15 ++
 .../Pages/DatePickerDemo.axaml.cs             |  18 ++
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |   3 +
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Controls/DatePicker.axaml   | 235 ++++++++++++++++++
 .../Controls/DateTimePickerShared.axaml       |  27 ++
 src/Semi.Avalonia/Controls/TimePicker.axaml   |  38 +--
 .../Themes/Light/DatePicker.axaml             |   4 +
 .../Themes/Light/DateTimePickerShared.axaml   |   2 +-
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 .../Themes/Light/TimePicker.axaml             |   3 -
 11 files changed, 311 insertions(+), 36 deletions(-)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/DatePicker.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/DatePicker.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
new file mode 100644
index 0000000..968daa2
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
@@ -0,0 +1,15 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DatePickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="20" Spacing="20">
+        <DatePicker />
+        <DatePicker DayFormat="d (ddd)" YearVisible="False" />
+        <DatePicker IsEnabled="False" />
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml.cs
new file mode 100644
index 0000000..6f9e209
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DatePickerDemo : UserControl
+{
+    public DatePickerDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index b5b7751..e0084e2 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -36,6 +36,9 @@
         <TabItem Header="ComboBox">
             <pages:ComboBoxDemo />
         </TabItem>
+        <TabItem Header="DatePicker">
+            <pages:DatePickerDemo />
+        </TabItem>
         <TabItem Header="Expander">
             <pages:ExpanderDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 904d623..25c89e0 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -10,6 +10,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContextMenu.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/DateTimePickerShared.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
diff --git a/src/Semi.Avalonia/Controls/DatePicker.axaml b/src/Semi.Avalonia/Controls/DatePicker.axaml
new file mode 100644
index 0000000..8264ad5
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/DatePicker.axaml
@@ -0,0 +1,235 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
+        <Setter Property="Width" Value="296" />
+        <Setter Property="MinWidth" Value="296" />
+        <Setter Property="MaxHeight" Value="300" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="Background" Value="White" />
+        <Setter Property="CornerRadius" Value="6" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DatePickerPresenter">
+                <Border
+                    Name="Background"
+                    Margin="{DynamicResource DateTimePickerFlyoutBorderMargin}"
+                    Padding="{DynamicResource DateTimePickerFlyoutPadding}"
+                    HorizontalAlignment="Stretch"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    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 DateTimePickerItem}" />
+                                </Style>
+                            </Grid.Styles>
+                            <!--  Column Definitions set in code, ignore here  -->
+                            <Panel Name="PART_MonthHost">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_MonthSelector"
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                        PanelType="Month"
+                                        ShouldLoop="True" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                            </Panel>
+                            <Panel Name="PART_DayHost">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_DaySelector"
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                        PanelType="Day"
+                                        ShouldLoop="True" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                            </Panel>
+                            <Panel Name="PART_YearHost">
+                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <DateTimePickerPanel
+                                        Name="PART_YearSelector"
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                        PanelType="Year"
+                                        ShouldLoop="False" />
+                                </ScrollViewer>
+                                <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                <RepeatButton Name="PART_YearDownButton" 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>
+
+                        <Grid
+                            Name="AcceptDismissGrid"
+                            Grid.Row="1"
+                            ColumnDefinitions="*,*">
+                            <Button
+                                Name="PART_AcceptButton"
+                                Grid.Column="0"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Theme="{StaticResource DateTimePickerButton}">
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource DateTimePickerAcceptGlyph}"
+                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                            </Button>
+                            <Button
+                                Name="PART_DismissButton"
+                                Grid.Column="1"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                FontSize="16"
+                                Theme="{StaticResource DateTimePickerButton}">
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource DateTimePickerDismissGlyph}"
+                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+                            </Button>
+                            <Rectangle
+                                Grid.ColumnSpan="2"
+                                Height="1"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                        </Grid>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ Panel">
+            <Style Selector="^:pointerover RepeatButton">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type DatePicker}" TargetType="DatePicker">
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="Height" Value="30" />
+        <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" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DatePicker">
+                <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                    <Button
+                        Name="PART_FlyoutButton"
+                        Width="298"
+                        MinWidth="298"
+                        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 DateTimePickerFlyoutButton}">
+                        <Grid ColumnDefinitions="*, Auto">
+                            <Grid
+                                Name="PART_ButtonContentGrid"
+                                Grid.Column="0"
+                                ColumnDefinitions="78*,Auto,132*,Auto,78*">
+                                <TextBlock
+                                    Name="PART_DayTextBlock"
+                                    Padding="12,4"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center"
+                                    FontFamily="{TemplateBinding FontFamily}"
+                                    FontSize="{TemplateBinding FontSize}"
+                                    FontWeight="{TemplateBinding FontWeight}"
+                                    Text="day" />
+                                <TextBlock
+                                    Name="PART_MonthTextBlock"
+                                    Padding="12,4"
+                                    VerticalAlignment="Center"
+                                    FontFamily="{TemplateBinding FontFamily}"
+                                    FontSize="{TemplateBinding FontSize}"
+                                    FontWeight="{TemplateBinding FontWeight}"
+                                    Text="month"
+                                    TextAlignment="Left" />
+                                <TextBlock
+                                    Name="PART_YearTextBlock"
+                                    Padding="12,4"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center"
+                                    FontFamily="{TemplateBinding FontFamily}"
+                                    FontSize="{TemplateBinding FontSize}"
+                                    FontWeight="{TemplateBinding FontWeight}"
+                                    Text="year" />
+                                <Rectangle
+                                    x:Name="PART_FirstSpacer"
+                                    Grid.Column="1"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                <Rectangle
+                                    x:Name="PART_SecondSpacer"
+                                    Grid.Column="3"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
+                            <PathIcon
+                                Name="PART_Icon"
+                                Grid.Column="1"
+                                Width="16"
+                                Height="16"
+                                Margin="0,0,8,0"
+                                Data="{DynamicResource DatePickerIconGlyph}"
+                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
+                        </Grid>
+                    </Button>
+
+                    <Popup
+                        Name="PART_Popup"
+                        IsLightDismissEnabled="True"
+                        PlacementMode="Bottom"
+                        PlacementTarget="{TemplateBinding}"
+                        WindowManagerAddShadowHint="False">
+                        <DatePickerPresenter Name="PART_PickerPresenter" />
+                    </Popup>
+
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:disabled /template/ PathIcon#PART_Icon">
+            <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonDisabledIconForeground}" />
+        </Style>
+
+        <!--  Changes foreground for watermark text when SelectedDate is null  -->
+        <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
+            <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
+        </Style>
+    </ControlTheme>
+
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
index b6c808e..3cbb0d4 100644
--- a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
@@ -1,6 +1,33 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
 
+    <ControlTheme x:Key="DateTimePickerFlyoutButton" TargetType="Button">
+        <Setter Property="RenderTransform" Value="none" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Foreground="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+
+        <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 DateTimePickerButtonDisabledBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonDisabledBackground}" />
+        </Style>
+    </ControlTheme>
+
     <!--  Theme for the items displayed in the selectors  -->
     <ControlTheme
         x:Key="DateTimePickerItem"
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index 531d565..6b47b57 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -1,31 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-    <ControlTheme x:Key="TimePickerFlyoutButton" TargetType="Button">
-        <Setter Property="RenderTransform" Value="none" />
-        <Setter Property="Template">
-            <ControlTemplate>
-                <ContentPresenter
-                    Name="PART_ContentPresenter"
-                    HorizontalContentAlignment="Stretch"
-                    VerticalContentAlignment="Stretch"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    Content="{TemplateBinding Content}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Foreground="{TemplateBinding Foreground}" />
-            </ControlTemplate>
-        </Setter>
-
-        <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 DateTimePickerButtonDisabledBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonDisabledBackground}" />
-        </Style>
-    </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
         <Setter Property="MinWidth" Value="242" />
@@ -57,7 +31,7 @@
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_HourSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItem}"
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
                                         PanelType="Hour"
                                         ShouldLoop="True" />
                                 </ScrollViewer>
@@ -69,7 +43,7 @@
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_MinuteSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItem}"
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
                                         PanelType="Minute"
                                         ShouldLoop="True" />
                                 </ScrollViewer>
@@ -81,7 +55,7 @@
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_PeriodSelector"
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItem}"
+                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
                                         PanelType="TimePeriod"
                                         ShouldLoop="False" />
                                 </ScrollViewer>
@@ -178,7 +152,7 @@
                         Cursor="Hand"
                         Foreground="{TemplateBinding Foreground}"
                         IsEnabled="{TemplateBinding IsEnabled}"
-                        Theme="{StaticResource TimePickerFlyoutButton}">
+                        Theme="{StaticResource DateTimePickerFlyoutButton}">
                         <Grid ColumnDefinitions="*, Auto">
                             <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
                                 <!--  Ignore col defs here, set in code  -->
@@ -243,8 +217,8 @@
                             <PathIcon
                                 Name="PART_Icon"
                                 Grid.Column="1"
-                                Width="12"
-                                Height="12"
+                                Width="16"
+                                Height="16"
                                 Margin="0,0,8,0"
                                 Data="{DynamicResource TimePickerIconGlyph}"
                                 Foreground="{DynamicResource DateTimePickerIconForeground}" />
diff --git a/src/Semi.Avalonia/Themes/Light/DatePicker.axaml b/src/Semi.Avalonia/Themes/Light/DatePicker.axaml
new file mode 100644
index 0000000..6964b5d
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/DatePicker.axaml
@@ -0,0 +1,4 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <PathGeometry x:Key="DatePickerIconGlyph">M4 20V8H20V20H4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM6 10.5C6 10.2239 6.22386 10 6.5 10H8.5C8.77614 10 9 10.2239 9 10.5V12.5C9 12.7761 8.77614 13 8.5 13H6.5C6.22386 13 6 12.7761 6 12.5V10.5ZM6.5 15C6.22386 15 6 15.2239 6 15.5V17.5C6 17.7761 6.22386 18 6.5 18H8.5C8.77614 18 9 17.7761 9 17.5V15.5C9 15.2239 8.77614 15 8.5 15H6.5ZM10.5 10.5C10.5 10.2239 10.7239 10 11 10H13C13.2761 10 13.5 10.2239 13.5 10.5V12.5C13.5 12.7761 13.2761 13 13 13H11C10.7239 13 10.5 12.7761 10.5 12.5V10.5ZM11 15C10.7239 15 10.5 15.2239 10.5 15.5V17.5C10.5 17.7761 10.7239 18 11 18H13C13.2761 18 13.5 17.7761 13.5 17.5V15.5C13.5 15.2239 13.2761 15 13 15H11ZM15 10.5C15 10.2239 15.2239 10 15.5 10H17.5C17.7761 10 18 10.2239 18 10.5V12.5C18 12.7761 17.7761 13 17.5 13H15.5C15.2239 13 15 12.7761 15 12.5V10.5ZM15.5 15C15.2239 15 15 15.2239 15 15.5V17.5C15 17.7761 15.2239 18 15.5 18H17.5C17.7761 18 18 17.7761 18 17.5V15.5C18 15.2239 17.7761 15 17.5 15H15.5Z</PathGeometry>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
index 2deaece..31737e3 100644
--- a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
+++ b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
@@ -20,7 +20,7 @@
 
 
     <SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
-    <sys:Double x:Key="DateTimePickerListBoxItem">28</sys:Double>
+    <sys:Double x:Key="DateTimePickerListBoxItemHeight">28</sys:Double>
 
 
     <SolidColorBrush x:Key="DateTimePickerButtonBorderBrush" Color="#C6CACD" />
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index a7ec7c4..f73b8b7 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -8,6 +8,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ButtonSpinner.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ComboBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/DatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/GridSplitter.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
index 9df9b0b..8f0f635 100644
--- a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
@@ -3,8 +3,5 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
     <!--  Add Resources Here  -->
-
     <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>
-
-
 </ResourceDictionary>