Merge pull request #52 from irihitech/time

feat: Add DatePicker and TimePicker.

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>

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);
+    }
+}

demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml

@@ -0,0 +1,16 @@
+<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 />
+        <TimePicker MinuteIncrement="15" />
+        <TimePicker ClockIdentifier="24HourClock" />
+        <TimePicker ClockIdentifier="12HourClock" IsEnabled="False" />
+    </StackPanel>
+</UserControl>

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);
+    }
+}

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>
@@ -81,6 +84,9 @@
         <TabItem Header="TextBox">
             <pages:TextBoxDemo />
         </TabItem>
+        <TabItem Header="TimePicker">
+            <pages:TimePickerDemo />
+        </TabItem>
         <TabItem Header="ToggleButton">
             <pages:ToggleButtonDemo />
         </TabItem>

src/Semi.Avalonia/Controls/Controls.axaml

@@ -10,6 +10,8 @@
         <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" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/GridSplitter.axaml" />
@@ -33,6 +35,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" />

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>

src/Semi.Avalonia/Controls/DateTimePickerShared.axaml

@@ -0,0 +1,129 @@
+<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"
+        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="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" />
+        <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 DateTimePickerFlyoutButtonPointeroverForeground}" />
+            <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonPressedForeground}" />
+            <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonPressedBackground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="DateTimePickerUpButton"
+        BasedOn="{StaticResource DateTimePickerButton}"
+        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="DateTimePickerDownButton"
+        BasedOn="{StaticResource DateTimePickerButton}"
+        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>

src/Semi.Avalonia/Controls/TimePicker.axaml

@@ -0,0 +1,249 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+
+    <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
+        <Setter Property="MinWidth" Value="242" />
+        <Setter Property="MaxHeight" Value="300" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="Background" Value="White" />
+        <Setter Property="CornerRadius" Value="6" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TimePickerPresenter">
+                <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>
+                            <!--  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 DateTimePickerListBoxItemHeight}"
+                                        PanelType="Hour"
+                                        ShouldLoop="True" />
+                                </ScrollViewer>
+                                <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="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                        PanelType="Minute"
+                                        ShouldLoop="True" />
+                                </ScrollViewer>
+                                <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="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                        PanelType="TimePeriod"
+                                        ShouldLoop="False" />
+                                </ScrollViewer>
+                                <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>
+
+                        <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 TimePicker}" TargetType="TimePicker">
+        <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>
+                <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                    <Button
+                        x:Name="PART_FlyoutButton"
+                        Width="242"
+                        MinWidth="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 DateTimePickerFlyoutButton}">
+                        <Grid ColumnDefinitions="*, Auto">
+                            <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
+                                <!--  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="12,4"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+
+                                <Rectangle
+                                    Name="PART_FirstColumnDivider"
+                                    Grid.Column="1"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+
+                                <Border
+                                    x:Name="PART_SecondPickerHost"
+                                    Grid.Column="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                                    <TextBlock
+                                        x:Name="PART_MinuteTextBlock"
+                                        Padding="12,4"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+
+                                <Rectangle
+                                    Name="PART_SecondColumnDivider"
+                                    Grid.Column="3"
+                                    Width="1"
+                                    Margin="0,4"
+                                    HorizontalAlignment="Center"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+
+                                <Border
+                                    x:Name="PART_ThirdPickerHost"
+                                    Grid.Column="4"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch">
+                                    <TextBlock
+                                        x:Name="PART_PeriodTextBlock"
+                                        Padding="12,4"
+                                        HorizontalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}" />
+                                </Border>
+                            </Grid>
+                            <PathIcon
+                                Name="PART_Icon"
+                                Grid.Column="1"
+                                Width="16"
+                                Height="16"
+                                Margin="0,0,8,0"
+                                Data="{DynamicResource TimePickerIconGlyph}"
+                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
+                        </Grid>
+
+                    </Button>
+
+                    <Popup
+                        Name="PART_Popup"
+                        IsLightDismissEnabled="True"
+                        PlacementMode="Bottom"
+                        PlacementTarget="{TemplateBinding}"
+                        WindowManagerAddShadowHint="False">
+                        <TimePickerPresenter Name="PART_PickerPresenter" Width="{Binding $parent[TimePicker].Bounds.Width}" />
+                    </Popup>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <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 DateTimePickerEmptyForeground}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

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>

src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml

@@ -0,0 +1,42 @@
+<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="DateTimePickerFlyoutButtonForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DateTimePickerFlyoutButtonPointeroverForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DateTimePickerFlyoutButtonPressedForeground" Color="#1C1F23" />
+
+    <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>
+    <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" />
+    <sys:Double x:Key="DateTimePickerListBoxItemHeight">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>

src/Semi.Avalonia/Themes/Light/Light.axaml

@@ -8,6 +8,8 @@
         <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" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
@@ -23,6 +25,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" />

src/Semi.Avalonia/Themes/Light/TimePicker.axaml

@@ -0,0 +1,7 @@
+<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  -->
+    <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>