From a7b9bd2876c067ad8b80a87cf54e8c4ac311b7dc Mon Sep 17 00:00:00 2001
From: amwx <armccormickwx@gmail.com>
Date: Fri, 12 Jun 2020 17:11:38 -0500
Subject: [PATCH] Add styles and control catalog page

---
 samples/ControlCatalog/MainView.xaml          |   3 +
 .../Pages/DateTimePickerPage.xaml             | 123 ++++++++
 .../Pages/DateTimePickerPage.xaml.cs          |  30 ++
 .../Accents/FluentControlResourcesDark.xaml   |  64 ++++
 .../Accents/FluentControlResourcesLight.xaml  |  64 ++++
 src/Avalonia.Themes.Fluent/DatePicker.xaml    | 277 ++++++++++++++++++
 src/Avalonia.Themes.Fluent/FluentTheme.xaml   |   3 +
 .../LoopingSelector.xaml                      |  92 ++++++
 src/Avalonia.Themes.Fluent/TimePicker.xaml    | 235 +++++++++++++++
 9 files changed, 891 insertions(+)
 create mode 100644 samples/ControlCatalog/Pages/DateTimePickerPage.xaml
 create mode 100644 samples/ControlCatalog/Pages/DateTimePickerPage.xaml.cs
 create mode 100644 src/Avalonia.Themes.Fluent/DatePicker.xaml
 create mode 100644 src/Avalonia.Themes.Fluent/LoopingSelector.xaml
 create mode 100644 src/Avalonia.Themes.Fluent/TimePicker.xaml

diff --git a/samples/ControlCatalog/MainView.xaml b/samples/ControlCatalog/MainView.xaml
index af2d093bc7..e0ebcbb15b 100644
--- a/samples/ControlCatalog/MainView.xaml
+++ b/samples/ControlCatalog/MainView.xaml
@@ -29,6 +29,9 @@
                ScrollViewer.HorizontalScrollBarVisibility="Disabled">
           <pages:DataGridPage/>
       </TabItem>
+      <TabItem Header="Date/Time Picker">
+        <pages:DateTimePickerPage/>
+      </TabItem>
       <TabItem Header="CalendarDatePicker">
         <pages:CalendarDatePickerPage/></TabItem>
       <TabItem Header="Drag+Drop"><pages:DragAndDropPage/></TabItem>
diff --git a/samples/ControlCatalog/Pages/DateTimePickerPage.xaml b/samples/ControlCatalog/Pages/DateTimePickerPage.xaml
new file mode 100644
index 0000000000..e2d14167e5
--- /dev/null
+++ b/samples/ControlCatalog/Pages/DateTimePickerPage.xaml
@@ -0,0 +1,123 @@
+<UserControl 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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="ControlCatalog.Pages.DateTimePickerPage">
+  <StackPanel Orientation="Vertical" Spacing="4" HorizontalAlignment="Stretch">
+    <TextBlock Classes="h1">DatePicker and TimePicker</TextBlock>
+    <TextBlock Name="DatePickerDesc" Classes="h2" TextWrapping="Wrap"/>
+    <TextBlock Name="TimePickerDesc" Classes="h2" TextWrapping="Wrap"/>
+
+    <StackPanel Orientation="Vertical"
+                Margin="16"
+                HorizontalAlignment="Stretch"
+                Spacing="16">
+      <TextBlock FontSize="18">A simple DatePicker with a header</TextBlock>
+      <StackPanel Orientation="Vertical">
+        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                BorderThickness="1" Padding="15">
+          <DatePicker Header="Pick a date" />
+        </Border>
+        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+          <TextBlock Padding="15">
+            <TextBlock.Text>
+              <x:String>
+                &lt;DatePicker Header="Pick a date" /&gt;
+              </x:String>
+            </TextBlock.Text>
+          </TextBlock>
+        </Panel>
+      </StackPanel>
+      
+      <TextBlock FontSize="18">A DatePicker with day formatted and year hidden.</TextBlock>
+      <StackPanel Orientation="Vertical">
+        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                BorderThickness="1" Padding="15">
+          <DatePicker x:Name="Control2" DayFormat="{}{day.integer} ({dayofweek.abbreviated})"
+                             YearVisible="False" />
+        </Border>
+        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+          <TextBlock Padding="15">
+            <TextBlock.Text>
+              <x:String>
+                &lt;DatePicker DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False" /&gt;
+              </x:String>
+            </TextBlock.Text>
+          </TextBlock>
+        </Panel>
+      </StackPanel>
+
+      <Border Background="{DynamicResource SystemControlHighlightBaseLowBrush}" BorderThickness="1" Margin="15" />
+
+      <TextBlock FontSize="18">A simple TimePicker.</TextBlock>
+      <StackPanel Orientation="Vertical">
+        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                BorderThickness="1" Padding="15">
+          <TimePicker />
+        </Border>
+        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+          <TextBlock Padding="15">
+            <TextBlock.Text>
+              <x:String>
+                &lt;TimePicker /&gt;
+              </x:String>
+            </TextBlock.Text>
+          </TextBlock>
+        </Panel>
+      </StackPanel>
+
+      <TextBlock FontSize="18">A TimePicker with a header and minute increments specified.</TextBlock>
+      <StackPanel Orientation="Vertical">
+        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                BorderThickness="1" Padding="15">
+          <TimePicker Header="Arrival time" MinuteIncrement="15" />
+        </Border>
+        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+          <TextBlock Padding="15">
+            <TextBlock.Text>
+              <x:String>
+                &lt;TimePicker Header="Arrival time" MinuteIncrement="15" /&gt;
+              </x:String>
+            </TextBlock.Text>
+          </TextBlock>
+        </Panel>
+      </StackPanel>
+
+      <TextBlock FontSize="18">A TimePicker using a 12-hour clock.</TextBlock>
+      <StackPanel Orientation="Vertical">
+        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                BorderThickness="1" Padding="15">
+          <TimePicker ClockIdentifier="12HourClock" Header="12 hour clock" />
+        </Border>
+        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+          <TextBlock Padding="15">
+            <TextBlock.Text>
+              <x:String>
+                &lt;TimePicker ClockIdentifier="12HourClock" Header="12 hour clock" /&gt;
+              </x:String>
+            </TextBlock.Text>
+          </TextBlock>
+        </Panel>
+      </StackPanel>
+
+      <TextBlock FontSize="18">A TimePicker using a 24-hour clock.</TextBlock>
+      <StackPanel Orientation="Vertical">
+        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                BorderThickness="1" Padding="15">
+          <TimePicker ClockIdentifier="24HourClock" Header="24 hour clock" />
+        </Border>
+        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+          <TextBlock Padding="15">
+            <TextBlock.Text>
+              <x:String>
+                &lt;TimePicker ClockIdentifier="24HourClock" Header="24 hour clock" /&gt;
+              </x:String>
+            </TextBlock.Text>
+          </TextBlock>
+        </Panel>
+      </StackPanel>
+      
+    </StackPanel>
+  </StackPanel>
+</UserControl>
diff --git a/samples/ControlCatalog/Pages/DateTimePickerPage.xaml.cs b/samples/ControlCatalog/Pages/DateTimePickerPage.xaml.cs
new file mode 100644
index 0000000000..6c7ae3437e
--- /dev/null
+++ b/samples/ControlCatalog/Pages/DateTimePickerPage.xaml.cs
@@ -0,0 +1,30 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace ControlCatalog.Pages
+{
+    public class DateTimePickerPage : UserControl
+    {
+        public DateTimePickerPage()
+        {
+            this.InitializeComponent();
+            this.FindControl<TextBlock>("DatePickerDesc").Text = "Use a DatePicker to let users set a date in your app, " +
+                "for example to schedule an appointment. The DatePicker displays three controls for month, day, and year. " +
+                "These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways. " +
+                "Order of month, day, and year is dynamically set based on user date settings";
+
+            this.FindControl<TextBlock>("TimePickerDesc").Text = "Use a TimePicker to let users set a time in your app, for example " +
+                "to set a reminder. The TimePicker displays three controls for hour, minute, and AM / PM(if necessary).These controls " +
+                "are easy to use with touch or mouse, and they can be styled and configured in several different ways. " +
+                "12 - hour or 24 - hour clock and visiblility of AM / PM is dynamically set based on user time settings, or can be overridden.";
+
+
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
index eb6cc610cc..3851c52713 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
@@ -657,5 +657,69 @@
     <SolidColorBrush x:Key="ToolTipBorderThemeBrush" Color="#FF808080" />
     <SolidColorBrush x:Key="ToolTipForegroundThemeBrush" Color="#FF666666" />
     <Thickness x:Key="ToolTipBorderThemePadding">8,5,8,7</Thickness>
+
+    <!-- Resources for DatePicker.xaml-->
+    <StaticResource x:Key="DatePickerSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="DatePickerSpacerFillDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="DatePickerHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="DatePickerHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBorderBrush" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="DatePickerButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
+    <StaticResource x:Key="DatePickerButtonBorderBrushPressed" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="DatePickerButtonBorderBrushDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBackground" ResourceKey="SystemControlBackgroundAltMediumLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBackgroundPointerOver" ResourceKey="SystemControlPageBackgroundAltMediumBrush" />
+    <StaticResource x:Key="DatePickerButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBackgroundDisabled" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBackgroundFocused" ResourceKey="SystemControlHighlightListAccentLowBrush" />
+    <StaticResource x:Key="DatePickerButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="DatePickerButtonForegroundPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="DatePickerButtonForegroundPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="DatePickerButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="DatePickerButtonForegroundFocused" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
+    <StaticResource x:Key="DatePickerFlyoutPresenterBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
+    <StaticResource x:Key="DatePickerFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <StaticResource x:Key="DatePickerFlyoutPresenterSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="DatePickerFlyoutPresenterHighlightFill" ResourceKey="SystemControlHighlightListAccentLowBrush" />
+    <StaticResource x:Key="DatePickerLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
+    <SolidColorBrush x:Key="DatePickerHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="DatePickerForegroundThemeBrush" Color="#FF000000" />
+
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBackgroundPressed" ResourceKey="SystemControlHighlightListMediumBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBorderBrush" ResourceKey="SystemControlForegroundTransparentBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBorderBrushPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonForegroundPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonForegroundPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
+    
+    <!-- Resources for TimePicker.xaml -->
+    <StaticResource x:Key="TimePickerSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="TimePickerSpacerFillDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="TimePickerHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="TimePickerHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBorderBrush" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="TimePickerButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
+    <StaticResource x:Key="TimePickerButtonBorderBrushPressed" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="TimePickerButtonBorderBrushDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBackground" ResourceKey="SystemControlBackgroundAltMediumLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBackgroundPointerOver" ResourceKey="SystemControlPageBackgroundAltMediumBrush" />
+    <StaticResource x:Key="TimePickerButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBackgroundDisabled" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBackgroundFocused" ResourceKey="SystemControlHighlightListAccentLowBrush" />
+    <StaticResource x:Key="TimePickerButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="TimePickerButtonForegroundPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="TimePickerButtonForegroundPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="TimePickerButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="TimePickerButtonForegroundFocused" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
+    <StaticResource x:Key="TimePickerFlyoutPresenterBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
+    <StaticResource x:Key="TimePickerFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <StaticResource x:Key="TimePickerFlyoutPresenterSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="TimePickerFlyoutPresenterHighlightFill" ResourceKey="SystemControlHighlightListAccentLowBrush" />
+    <StaticResource x:Key="TimePickerLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
+    <SolidColorBrush x:Key="TimePickerHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="TimePickerForegroundThemeBrush" Color="#FF000000" />
+    
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
index cba20faf7c..1a37bb6c21 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
@@ -655,5 +655,69 @@
     <SolidColorBrush x:Key="ToolTipBorderThemeBrush" Color="#FF808080" />
     <SolidColorBrush x:Key="ToolTipForegroundThemeBrush" Color="#FF666666" />
     <Thickness x:Key="ToolTipBorderThemePadding">8,5,8,7</Thickness>
+
+    <!-- Resources for DatePicker.xaml-->
+    <StaticResource x:Key="DatePickerSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="DatePickerSpacerFillDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="DatePickerHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="DatePickerHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBorderBrush" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="DatePickerButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
+    <StaticResource x:Key="DatePickerButtonBorderBrushPressed" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="DatePickerButtonBorderBrushDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBackground" ResourceKey="SystemControlBackgroundAltMediumLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBackgroundPointerOver" ResourceKey="SystemControlPageBackgroundAltMediumBrush" />
+    <StaticResource x:Key="DatePickerButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBackgroundDisabled" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+    <StaticResource x:Key="DatePickerButtonBackgroundFocused" ResourceKey="SystemControlHighlightListAccentLowBrush" />
+    <StaticResource x:Key="DatePickerButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="DatePickerButtonForegroundPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="DatePickerButtonForegroundPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="DatePickerButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="DatePickerButtonForegroundFocused" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
+    <StaticResource x:Key="DatePickerFlyoutPresenterBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
+    <StaticResource x:Key="DatePickerFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <StaticResource x:Key="DatePickerFlyoutPresenterSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="DatePickerFlyoutPresenterHighlightFill" ResourceKey="SystemControlHighlightListAccentLowBrush" />
+    <StaticResource x:Key="DatePickerLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
+    <SolidColorBrush x:Key="DatePickerHeaderForegroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="DatePickerForegroundThemeBrush" Color="#FF000000" />
+
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBackgroundPressed" ResourceKey="SystemControlHighlightListMediumBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBorderBrush" ResourceKey="SystemControlForegroundTransparentBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonBorderBrushPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonForegroundPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
+    <StaticResource x:Key="DateTimePickerFlyoutButtonForegroundPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
+    
+    <!-- Resources for TimePicker.xaml -->
+    <StaticResource x:Key="TimePickerSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="TimePickerSpacerFillDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="TimePickerHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="TimePickerHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBorderBrush" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="TimePickerButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
+    <StaticResource x:Key="TimePickerButtonBorderBrushPressed" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="TimePickerButtonBorderBrushDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBackground" ResourceKey="SystemControlBackgroundAltMediumLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBackgroundPointerOver" ResourceKey="SystemControlPageBackgroundAltMediumBrush" />
+    <StaticResource x:Key="TimePickerButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBackgroundDisabled" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+    <StaticResource x:Key="TimePickerButtonBackgroundFocused" ResourceKey="SystemControlHighlightListAccentLowBrush" />
+    <StaticResource x:Key="TimePickerButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="TimePickerButtonForegroundPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="TimePickerButtonForegroundPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="TimePickerButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="TimePickerButtonForegroundFocused" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
+    <StaticResource x:Key="TimePickerFlyoutPresenterBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
+    <StaticResource x:Key="TimePickerFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <StaticResource x:Key="TimePickerFlyoutPresenterSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="TimePickerFlyoutPresenterHighlightFill" ResourceKey="SystemControlHighlightListAccentLowBrush" />
+    <StaticResource x:Key="TimePickerLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
+    <SolidColorBrush x:Key="TimePickerForegroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="TimePickerHeaderForegroundThemeBrush" Color="#FF000000" />
+
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/DatePicker.xaml b/src/Avalonia.Themes.Fluent/DatePicker.xaml
new file mode 100644
index 0000000000..0d6d1ba9f1
--- /dev/null
+++ b/src/Avalonia.Themes.Fluent/DatePicker.xaml
@@ -0,0 +1,277 @@
+<!--
+// (c) Copyright Microsoft Corporation.
+// This source is subject to the Microsoft Public License (Ms-PL).
+// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
+// All other rights reserved.
+-->
+
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard">
+  <Styles.Resources>
+    <Thickness x:Key="DatePickerTopHeaderMargin">0,0,0,4</Thickness>
+    <x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double>
+    <x:Double x:Key="DatePickerFlyoutPresenterItemHeight">40</x:Double>
+    <x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
+    <x:Double x:Key="DatePickerThemeMinWidth">296</x:Double>
+    <x:Double x:Key="DatePickerThemeMaxWidth">456</x:Double>
+    <Thickness x:Key="DatePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
+    <Thickness x:Key="DatePickerFlyoutPresenterMonthPadding">9,3,0,6</Thickness>
+    <Thickness x:Key="DatePickerHostPadding">0,3,0,6</Thickness>
+    <Thickness x:Key="DatePickerHostMonthPadding">9,3,0,6</Thickness>
+    
+    <!-- These are technically declared in the Light/Dark resource dictionary, but are the same-->
+    <x:Double x:Key="DatePickerSelectorThemeMinWidth">80</x:Double>
+    <x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>
+    <x:Double x:Key="DatePickerSpacingThemeWidth">20</x:Double>
+    <x:Double x:Key="DatePickerSpacingThemeHeight">20</x:Double>
+    <Thickness x:Key="DatePickerHeaderThemeMargin">0,0,0,4</Thickness>
+    <FontWeight x:Key="DatePickerHeaderThemeFontWeight">Normal</FontWeight>
+  </Styles.Resources>
+
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <DatePicker />
+    </Border>
+  </Design.PreviewWith>
+
+  <!-- This is used for both buttons on the popup & in the LoopingSelectors,
+  define LoopingSelector.xaml theme AFTER DatePicker.xaml-->
+  <Style Selector=":is(Button).DateTimeFlyoutButtonStyle">
+    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" />
+    <Setter Property="HorizontalContentAlignment" Value="Center"/>
+    <Setter Property="VerticalContentAlignment" Value="Center"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <!-- 
+                The background is doubled here for the loopingselector up/down repeat buttons 
+                that appear opaque. Not sure how MS does it though I suspect this is it
+                but source isn't MIT yet, so this is my solution -->
+        <Border Background="{TemplateBinding Background}">
+          <ContentPresenter x:Name="ContentPresenter"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{DynamicResource DateTimePickerFlyoutButtonBorderBrush}"
+                  BorderThickness="{DynamicResource DateTimeFlyoutButtonBorderThickness}"
+                  Content="{TemplateBinding Content}"
+                  TextBlock.Foreground="{DynamicResource SystemControlHighlightAltBaseHighBrush}"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Padding="{TemplateBinding Padding}"
+                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector=":is(Button).DateTimeFlyoutButtonStyle:pointerover /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPointerOver}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPointerOver}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPointerOver}"/>
+  </Style>
+
+  <Style Selector=":is(Button).DateTimeFlyoutButtonStyle:pressed /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPressed}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPressed}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPressed}"/>
+  </Style>
+  
+  
+  <Style Selector="DatePicker">
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForeground}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="FocusAdorner" Value="{x:Null}"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
+          <Grid.Styles>
+            <!-- Not to be confused with the above button style, this is the
+            button on the actual DatePicker that launches the popup-->
+            <Style Selector="Button.DatePickerFlyoutButtonStyle">
+              <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackground}"/>
+              <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrush}"/>
+              <Setter Property="BorderThickness" Value="1"/>
+              <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForeground}"/>
+              <Setter Property="Template">
+                <ControlTemplate>
+                  <ContentPresenter Name="ContentPresenter"
+                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    Background="{TemplateBinding Background}"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    Content="{TemplateBinding Content}"
+                                    TextBlock.Foreground="{TemplateBinding Foreground}"
+                                    HorizontalContentAlignment="Stretch"
+                                    VerticalContentAlignment="Stretch"
+                                    CornerRadius="{DynamicResource ControlCornerRadius}"/>
+                </ControlTemplate>
+              </Setter>
+            </Style>
+            <Style Selector="Button.DatePickerFlyoutButtonStyle:pointerover /template/ ContentPresenter">
+              <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPointerOver}"/>
+              <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPointerOver}"/>
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundPointerOver}"/>
+            </Style>
+            <Style Selector="Button.DatePickerFlyoutButtonStyle:pressed /template/ ContentPresenter">
+              <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPressed}"/>
+              <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPressed}"/>
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundPressed}"/>
+            </Style>
+            <Style Selector="Button.DatePickerFlyoutButtonStyle:disabled /template/ ContentPresenter">
+              <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushDisabled}"/>
+              <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundDisabled}"/>
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundDisabled}"/>
+            </Style>
+            <!-- Need separation of keyboard & pointer focus for this to work
+            <Style Selector="Button.DatePickerFlyoutButtonStyle:focus /template/ ContentPresenter">
+              <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundFocused}"/>
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundFocused}"/>
+            </Style>-->
+          </Grid.Styles>
+          <ContentPresenter Name="HeaderContentPresenter" Grid.Row="0"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            Margin="{DynamicResource DatePickerTopHeaderMargin}"
+                            MaxWidth="{DynamicResource DatePickerThemeMaxWidth}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Top"/>
+          <Button Name="FlyoutButton" Grid.Row="1"
+                  Foreground="{TemplateBinding Foreground}"
+                  Background="{TemplateBinding Background}"
+                  IsEnabled="{TemplateBinding IsEnabled}"
+                  MinWidth="{StaticResource DatePickerThemeMinWidth}"
+                  MaxWidth="{StaticResource DatePickerThemeMaxWidth}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Classes="DatePickerFlyoutButtonStyle"
+                  TemplatedControl.IsTemplateFocusTarget="True">
+            <Grid Name="ButtonContentGrid" ColumnDefinitions="78*,Auto,132*,Auto,78*">
+              <TextBlock Name="DayText" Text="day" HorizontalAlignment="Center"
+                         Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}"
+                         FontFamily="{TemplateBinding FontFamily}"
+                         FontWeight="{TemplateBinding FontWeight}"
+                         FontSize="{TemplateBinding FontSize}"/>
+              <TextBlock Name="MonthText" Text="month" TextAlignment="Left"
+                         Padding="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"
+                         FontFamily="{TemplateBinding FontFamily}"
+                         FontWeight="{TemplateBinding FontWeight}"
+                         FontSize="{TemplateBinding FontSize}"/>
+              <TextBlock Name="YearText" Text="year" HorizontalAlignment="Center"
+                         Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}"
+                         FontFamily="{TemplateBinding FontFamily}"
+                         FontWeight="{TemplateBinding FontWeight}"
+                         FontSize="{TemplateBinding FontSize}"/>
+              <Rectangle x:Name="FirstSpacer"
+                    Fill="{DynamicResource DatePickerSpacerFill}"
+                    HorizontalAlignment="Center"
+                    Width="1"
+                    Grid.Column="1" />
+              <Rectangle x:Name="SecondSpacer"
+                    Fill="{DynamicResource DatePickerSpacerFill}"
+                    HorizontalAlignment="Center"
+                    Width="1"
+                    Grid.Column="3" />
+            </Grid>
+          </Button>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="DatePicker /template/ ContentPresenter#HeaderContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerHeaderForeground}"/>
+  </Style>
+  <Style Selector="DatePicker:disabled /template/ Rectangle">
+    <Setter Property="Fill" Value="{DynamicResource DatePickerSpacerFillDisabled}"/>
+  </Style>
+  <!-- Changes foreground for watermark text when SelectedDate is null-->
+  <Style Selector="DatePicker:hasnodate /template/ Button#FlyoutButton TextBlock">
+    <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
+  </Style>
+
+  <!--WinUI: DatePickerFlyoutPresenter-->
+  <Style Selector="DatePickerPresenter">
+    <Setter Property="Width" Value="296" />
+    <Setter Property="MinWidth" Value="296" />
+    <Setter Property="MaxHeight" Value="398" />
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="Background" Value="{DynamicResource DatePickerFlyoutPresenterBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource DatePickerFlyoutPresenterBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
+    <!-- Added properties -->
+    <Setter Property="YearSelectorItemTemplate">
+      <DataTemplate DataType="DatePickerPresenterItem">
+        <Panel>
+          <TextBlock Text="{Binding DisplayText}"
+                     HorizontalAlignment="Center" VerticalAlignment="Center"
+                     Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/>
+        </Panel>
+      </DataTemplate>
+    </Setter>
+    <Setter Property="DaySelectorItemTemplate">
+      <DataTemplate DataType="DatePickerPresenterItem">
+        <Panel>
+          <TextBlock Text="{Binding DisplayText}"
+                     HorizontalAlignment="Center" VerticalAlignment="Center"
+                     Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/>
+        </Panel>
+      </DataTemplate>
+    </Setter>
+    <Setter Property="MonthSelectorItemTemplate">
+      <DataTemplate DataType="DatePickerPresenterItem">
+        <Panel>
+          <TextBlock Text="{Binding DisplayText}"
+                     HorizontalAlignment="Left" VerticalAlignment="Center"
+                     Padding="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"/>
+        </Panel>
+      </DataTemplate>
+    </Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}" Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
+                MaxHeight="398" CornerRadius="{DynamicResource OverlayCornerRadius}">
+          <Grid Name="ContentRoot" RowDefinitions="*,Auto">
+            <Grid Name="PickerContainer">
+              <!--Column Definitions set in code, ignore here-->
+              <Rectangle Name="HighlightRect" IsHitTestVisible="False"
+                         Fill="{DynamicResource DatePickerFlyoutPresenterHighlightFill}"
+                         Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center"
+                         Height="{DynamicResource DatePickerFlyoutPresenterHighlightHeight}" />
+              <Rectangle Name="FirstSpacer"
+                         Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}"
+                         HorizontalAlignment="Center"
+                         Width="{DynamicResource DatePickerSpacerThemeWidth}"
+                         Grid.Column="1" />
+              <Rectangle Name="SecondSpacer"
+                         Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}"
+                         HorizontalAlignment="Center"
+                         Width="{DynamicResource DatePickerSpacerThemeWidth}"
+                         Grid.Column="3" />
+            </Grid>
+            <Grid Grid.Row="1" Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                  Name="AcceptDismissGrid" ColumnDefinitions="*,*">
+              <Rectangle Height="{DynamicResource DatePickerSpacerThemeWidth}" VerticalAlignment="Top"
+                         Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}"
+                         Grid.ColumnSpan="2"/>
+              <Button Name="AcceptButton" Grid.Column="0" Classes="DateTimeFlyoutButtonStyle"
+                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round"
+                      StrokeThickness="0.75" Data="M0.5,8.5 5,13.5 15.5,3" />
+              </Button>
+              <Button Name="DismissButton" Grid.Column="1" Classes="DateTimeFlyoutButtonStyle"
+                         FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round"
+                      StrokeThickness="0.75" Data="M2,2 14,14 M2,14 14 2" />
+              </Button>
+            </Grid>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  
+</Styles>
diff --git a/src/Avalonia.Themes.Fluent/FluentTheme.xaml b/src/Avalonia.Themes.Fluent/FluentTheme.xaml
index 49b2d9561b..4faed21f4d 100644
--- a/src/Avalonia.Themes.Fluent/FluentTheme.xaml
+++ b/src/Avalonia.Themes.Fluent/FluentTheme.xaml
@@ -53,4 +53,7 @@
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.NotificationCard.xaml?assembly=Avalonia.Themes.Fluent"/>
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.NativeMenuBar.xaml?assembly=Avalonia.Themes.Fluent"/>
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.ToggleSwitch.xaml?assembly=Avalonia.Themes.Fluent"/>
+  <StyleInclude Source="resm:Avalonia.Themes.Fluent.DatePicker.xaml?assembly=Avalonia.Themes.Fluent"/>
+  <StyleInclude Source="resm:Avalonia.Themes.Fluent.LoopingSelector.xaml?assembly=Avalonia.Themes.Fluent"/>
+  <StyleInclude Source="resm:Avalonia.Themes.Fluent.TimePicker.xaml?assembly=Avalonia.Themes.Fluent"/>
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/LoopingSelector.xaml b/src/Avalonia.Themes.Fluent/LoopingSelector.xaml
new file mode 100644
index 0000000000..a279f0aaae
--- /dev/null
+++ b/src/Avalonia.Themes.Fluent/LoopingSelector.xaml
@@ -0,0 +1,92 @@
+<!--
+// (c) Copyright Microsoft Corporation.
+// This source is subject to the Microsoft Public License (Ms-PL).
+// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
+// All other rights reserved.
+-->
+
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard">
+
+  <Style Selector="LoopingSelector">
+    <Setter Property="ItemHeight" Value="40"/>
+    <Setter Property="ItemTemplate">
+      <DataTemplate>
+        <Panel>
+          <TextBlock Text="{Binding DisplayText}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
+        </Panel>
+      </DataTemplate>
+    </Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid Background="Transparent">
+          <ScrollViewer Name="Scroller" HorizontalScrollBarVisibility="Disabled"
+                        VerticalScrollBarVisibility="Hidden" />
+          <!--The up/down repeatbuttons for the looping selector uses this style 
+              They appear opaque, the only base resources that don't have an alpha
+              component is the SystemChrome colors, so that's probably what's used...
+              Will use that here, as default background here is transparent.
+              SystemControlPageBackgroundChromeLowBrush is the brush/color that matched best
+              Button Style Class defined in DatePicker.xaml
+          -->
+          <RepeatButton Name="UpButton" Classes="DateTimeFlyoutButtonStyle" Height="22"
+                        Padding="0"  VerticalAlignment="Top" HorizontalAlignment="Stretch"
+                      Background="{DynamicResource SystemControlPageBackgroundChromeLowBrush}">
+            <Viewbox Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center">
+              <Path Stroke="{Binding $parent[RepeatButton].Foreground}" StrokeThickness="1" Data="M 0,9 L 9,0 L 18,9"/>
+            </Viewbox>
+          </RepeatButton>
+
+          <RepeatButton Name="DownButton" Classes="DateTimeFlyoutButtonStyle"
+                        Height="22" Padding="0" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"
+                        Background="{DynamicResource SystemControlPageBackgroundChromeLowBrush}">
+            <Viewbox Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center">
+              <Path Stroke="{Binding $parent[RepeatButton].Foreground}" StrokeThickness="1" Data="M 0,0 L 9,9 L 18,0"/>
+            </Viewbox>
+          </RepeatButton>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="LoopingSelector /template/ RepeatButton">
+    <Setter Property="IsVisible" Value="False"/>
+  </Style>
+  <Style Selector="LoopingSelector:pointerover /template/ RepeatButton">
+    <Setter Property="IsVisible" Value="True"/>
+  </Style>
+
+  <Style Selector="LoopingSelectorItem">
+    <Setter Property="HorizontalAlignment" Value="Stretch"/>
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+    <Setter Property="Background" Value="{DynamicResource SystemControlTransparentBrush}"/>
+    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel Name="Root" Background="{TemplateBinding Background}">
+          <ContentPresenter Name="ContentPresenter"
+                            TextBlock.Foreground="{TemplateBinding Foreground}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Padding="{TemplateBinding Padding}"
+                            Margin="2,0"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="LoopingSelectorItem:pointerover /template/ Panel#Root">
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundListLowBrush}"/>
+  </Style>
+  <Style Selector="LoopingSelectorItem:pressed /template/ Panel#Root">
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundBaseLowBrush}"/>
+  </Style>
+  <Style Selector="LoopingSelectorItem:selected /template/ Panel#Root">
+    <Setter Property="Background" Value="Transparent"/>
+  </Style>
+  
+  
+</Styles>
diff --git a/src/Avalonia.Themes.Fluent/TimePicker.xaml b/src/Avalonia.Themes.Fluent/TimePicker.xaml
new file mode 100644
index 0000000000..65b94ef540
--- /dev/null
+++ b/src/Avalonia.Themes.Fluent/TimePicker.xaml
@@ -0,0 +1,235 @@
+<!--
+// (c) Copyright Microsoft Corporation.
+// This source is subject to the Microsoft Public License (Ms-PL).
+// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
+// All other rights reserved.
+-->
+
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard">
+  <Styles.Resources>
+    <Thickness x:Key="TimePickerTopHeaderMargin">0,0,0,4</Thickness>
+    <x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double>
+    <x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
+    <x:Double x:Key="TimePickerThemeMinWidth">242</x:Double>
+    <x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double>
+    <x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double>
+    <Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
+    <Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness>
+
+    <!-- These are technically declared in the Light/Dark resource dictionary, but are the same-->
+    <x:Double x:Key="TimePickerSelectorThemeMinWidth">80</x:Double>
+    <x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double>
+    <Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness>
+    <Thickness x:Key="TimePickerHeaderThemeMargin">0,0,0,4</Thickness>
+    <Thickness x:Key="TimePickerFirstHostThemeMargin">0,0,20,0</Thickness>
+    <Thickness x:Key="TimePickerThirdHostThemeMargin">20,0,0,0</Thickness>
+    <FontWeight x:Key="TimePickerHeaderThemeFontWeight">Normal</FontWeight>
+  </Styles.Resources>
+
+  <Style Selector="TimePicker">
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
+          <Grid.Styles>
+            <Style Selector="Button.TimePickerFlyoutButtonStyle">
+              <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}"/>
+              <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}"/>
+              <Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}"/>
+              <Setter Property="Template">
+                <ControlTemplate>
+                  <Border Background="{TemplateBinding Background}">
+                    <ContentPresenter Name="ContentPresenter"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                Background="{TemplateBinding Background}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                Content="{TemplateBinding Content}"
+                                TextBlock.Foreground="{TemplateBinding Foreground}"
+                                HorizontalContentAlignment="Stretch"
+                                VerticalContentAlignment="Stretch"
+                                CornerRadius="{DynamicResource ControlCornerRadius}" />
+                  </Border>
+                </ControlTemplate>
+              </Setter>
+            </Style>
+            <Style Selector="Button.TimePickerFlyoutButtonStyle:pointerover /template/ ContentPresenter">
+              <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}"/>
+              <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}"/>
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}"/>
+            </Style>
+            <Style Selector="Button.TimePickerFlyoutButtonStyle:pressed /template/ ContentPresenter">
+              <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}"/>
+              <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}"/>
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}"/>
+            </Style>
+            <Style Selector="Button.TimePickerFlyoutButtonStyle:disabled /template/ ContentPresenter">
+              <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/>
+              <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/>
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/>
+            </Style>
+            <!-- Need separation of keyboard & pointer focus for this to work
+            <Style Selector="Button.TimePickerFlyoutButtonStyle:focus /template/ ContentPresenter">
+              <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundFocused}"/>
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundFocused}"/>
+            </Style>-->
+          </Grid.Styles>
+          <ContentPresenter x:Name="HeaderContentPresenter"
+                 Grid.Row="0"
+                 Content="{TemplateBinding Header}"
+                 ContentTemplate="{TemplateBinding HeaderTemplate}"
+                 Margin="{DynamicResource TimePickerTopHeaderMargin}"
+                 MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
+                 HorizontalAlignment="Stretch"
+                 VerticalAlignment="Top" />
+
+          <Button x:Name="FlyoutButton" Classes="TimePickerFlyoutButtonStyle"
+                  Grid.Row="1"
+                  Foreground="{TemplateBinding Foreground}"
+                  Background="{TemplateBinding Background}"
+                  IsEnabled="{TemplateBinding IsEnabled}"
+                  MinWidth="{StaticResource TimePickerThemeMinWidth}"
+                  MaxWidth="{StaticResource TimePickerThemeMaxWidth}"
+                  HorizontalAlignment="Stretch"
+                  HorizontalContentAlignment="Stretch"
+                  VerticalAlignment="Top">
+            <Grid Name="FlyoutButtonContentGrid">
+              <!--Ignore col defs here, set in code-->
+              <Border x:Name="FirstPickerHost" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <TextBlock x:Name="HourTextBlock"
+                    HorizontalAlignment="Center"
+                    Padding="{DynamicResource TimePickerHostPadding}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    FontSize="{TemplateBinding FontSize}" />
+              </Border>
+              <Rectangle x:Name="FirstColumnDivider"
+                  Fill="{DynamicResource TimePickerSpacerFill}"
+                  HorizontalAlignment="Center"
+                  Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                  Grid.Column="1" />
+              <Border x:Name="SecondPickerHost" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <TextBlock x:Name="MinuteTextBlock"
+                    HorizontalAlignment="Center"
+                    Padding="{DynamicResource TimePickerHostPadding}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    FontSize="{TemplateBinding FontSize}"/>
+              </Border>
+              <Rectangle x:Name="SecondColumnDivider"
+                  Fill="{DynamicResource TimePickerSpacerFill}"
+                  HorizontalAlignment="Center"
+                  Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                  Grid.Column="3" />
+              <Border x:Name="ThirdPickerHost" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <TextBlock x:Name="PeriodTextBlock"
+                    HorizontalAlignment="Center"
+                    Padding="{DynamicResource TimePickerHostPadding}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    FontSize="{TemplateBinding FontSize}" />
+              </Border>
+            </Grid>
+          </Button>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="TimePicker /template/ ContentPresenter#HeaderContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerHeaderForeground}"/>
+  </Style>
+
+  <Style Selector="TimePicker:disabled /template/ ContentPresenter#HeaderContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}"/>
+  </Style>
+  <Style Selector="TimePicker:disabled /template/ Rectangle">
+    <Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}"/>
+  </Style>
+  <!-- Changes foreground for watermark text when SelectedTime is null -->
+  <Style Selector="TimePicker:hasnotime /template/ Button#FlyoutButton TextBlock">
+    <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
+  </Style>
+  
+  <!--WinUI: TimePickerFlyoutPresenter-->
+  <Style Selector="TimePickerPresenter">
+    <Setter Property="Width" Value="242" />
+    <Setter Property="MinWidth" Value="242" />
+    <Setter Property="MaxHeight" Value="398" />
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
+    <!-- Added Property -->
+    <Setter Property="SelectorItemTemplate">
+      <DataTemplate DataType="TimePickerPresenterItem">
+        <Panel>
+          <TextBlock Text="{Binding DisplayText}"
+                     HorizontalAlignment="Center" VerticalAlignment="Center"
+                     Padding="{DynamicResource TimePickerFlyoutPresenterItemPadding}"/>
+        </Panel>
+      </DataTemplate>
+    </Setter>
+    <Setter Property="Template">
+        <ControlTemplate>
+            <Border Name="Background"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{DynamicResource OverlayCornerRadius}"
+                    Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
+                    MaxHeight="398">
+                <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                    <Grid Name="PickerHost">
+                        <!--Ignore col defs here, set in code-->
+                        <Rectangle x:Name="HighlightRect" IsHitTestVisible="False"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
+                                Grid.Column="0"
+                                Grid.ColumnSpan="5"
+                                VerticalAlignment="Center"
+                                Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" />
+                        <Border x:Name="FirstPickerHost" Grid.Column="0" />
+                        <Rectangle x:Name="FirstPickerSpacing"
+                            Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                            HorizontalAlignment="Center"
+                            Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                            Grid.Column="1" />
+                        <Border x:Name="SecondPickerHost" Grid.Column="2" />
+                        <Rectangle x:Name="SecondPickerSpacing"
+                            Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                            HorizontalAlignment="Center"
+                            Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                            Grid.Column="3" />
+                        <Border x:Name="ThirdPickerHost" Grid.Column="4" />
+                    </Grid>
+
+                    <Grid Grid.Row="1" Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                          Name="AcceptDismissHostGrid" ColumnDefinitions="*,*">
+                        <Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                                Grid.ColumnSpan="2" />
+                        <Button Name="AcceptButton" Grid.Column="0" Classes="DateTimeFlyoutButtonStyle"
+                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                            <Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round"
+                                  StrokeThickness="0.75" Data="M0.5,8.5 5,13.5 15.5,3" />
+                        </Button>
+                        <Button Name="DismissButton" Grid.Column="1" Classes="DateTimeFlyoutButtonStyle"
+                                    FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                            <Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round"
+                                  StrokeThickness="0.75" Data="M2,2 14,14 M2,14 14 2" />
+                        </Button>
+                    </Grid>
+                </Grid>
+            </Border>
+        </ControlTemplate>
+    </Setter>
+  </Style>
+ 
+</Styles>