From 07cce63b8bd4b009bd384e727caaab16d339bc4a Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Sun, 10 Jul 2022 16:57:55 +0200
Subject: [PATCH] Ported TimePicker to ControlTheme.

And refactored shared date/time picker components into a separate file.
---
 .../Controls/DatePicker.xaml                  | 207 +++-----
 .../Controls/DateTimePickerShared.xaml        | 116 +++++
 .../Controls/FluentControls.xaml              |   3 +-
 .../Controls/TimePicker.xaml                  | 465 ++++++++++++------
 4 files changed, 501 insertions(+), 290 deletions(-)
 create mode 100644 src/Avalonia.Themes.Fluent/Controls/DateTimePickerShared.xaml

diff --git a/src/Avalonia.Themes.Fluent/Controls/DatePicker.xaml b/src/Avalonia.Themes.Fluent/Controls/DatePicker.xaml
index 0537feb60b..0441415128 100644
--- a/src/Avalonia.Themes.Fluent/Controls/DatePicker.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/DatePicker.xaml
@@ -10,8 +10,21 @@
         xmlns:sys="clr-namespace:System;assembly=netstandard"
         x:CompileBindings="True">
   <Design.PreviewWith>
-    <Border Padding="20">
-      <DatePicker CornerRadius="10" />
+    <Border Padding="20" Height="500">
+      <StackPanel Spacing="20" VerticalAlignment="Center">
+        <DatePicker />
+        <DatePicker CornerRadius="10" />
+        <DatePicker IsEnabled="False" />
+        <DatePicker>
+          <DataValidationErrors.Error>
+            <sys:Exception>
+              <x:Arguments>
+                <x:String>Error</x:String>
+              </x:Arguments>
+            </sys:Exception>
+          </DataValidationErrors.Error>
+        </DatePicker>
+      </StackPanel>
     </Border>
   </Design.PreviewWith>
 
@@ -27,105 +40,45 @@
   <Thickness x:Key="DatePickerHostMonthPadding">9,3,0,6</Thickness>
   <x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>
 
-  <!-- Theme for the items displayed in the selectors -->
-  <ControlTheme x:Key="FluentDateTimePickerItem" TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
-    <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/>
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="HorizontalContentAlignment" Value="Center" />
-
-    <Style Selector="^:selected">
-      <Setter Property="IsHitTestVisible" Value="False"/>
-      <Style Selector="^/template/ Rectangle#PressedBackground">
-        <Setter Property="Fill" Value="Transparent"/>
-      </Style>
-      <Style Selector="^/template/ ContentPresenter">
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
-      </Style>
-    </Style>
-    <Style Selector="^.MonthItem">
-      <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"/>
-      <Setter Property="VerticalContentAlignment" Value="Center" />
-      <Setter Property="HorizontalContentAlignment" Value="Left" />
-    </Style>
-  </ControlTheme>
-
-  <!-- This is used for both the accept/dismiss & repeatbuttons in the presenter-->
-  <ControlTheme x:Key="FluentDateTimePickerButton" TargetType="Button">
-    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" />
-    <Setter Property="HorizontalContentAlignment" Value="Center"/>
-    <Setter Property="VerticalContentAlignment" Value="Center"/>
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+  <ControlTheme x:Key="FluentDatePickerFlyoutButton" TargetType="Button">
     <Setter Property="RenderTransform" Value="none" />
     <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}"
-                  Foreground="{DynamicResource SystemControlHighlightAltBaseHighBrush}"
-                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                  Padding="{TemplateBinding Padding}"
-                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                  CornerRadius="{TemplateBinding CornerRadius}"/>
-        </Border>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          Background="{TemplateBinding Background}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          Foreground="{TemplateBinding Foreground}"
+                          HorizontalContentAlignment="Stretch"
+                          VerticalContentAlignment="Stretch"
+                          CornerRadius="{TemplateBinding CornerRadius}"/>
       </ControlTemplate>
     </Setter>
-
-    <Style Selector="^:pointerover /template/ ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPointerOver}"/>
-      <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPointerOver}"/>
-      <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPointerOver}"/>
+    
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPointerOver}"/>
+      <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPointerOver}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPointerOver}"/>
     </Style>
-
+    
     <Style Selector="^:pressed">
       <Setter Property="RenderTransform" Value="scale(0.98)" />
     </Style>
-
-    <Style Selector="^:pressed /template/ ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPressed}"/>
-      <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPressed}"/>
-      <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPressed}"/>
+    
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPressed}"/>
+      <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPressed}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPressed}"/>
     </Style>
-  </ControlTheme>
 
-  <ControlTheme x:Key="FluentDateTimePickerUpButton" TargetType="RepeatButton" BasedOn="{StaticResource FluentDateTimePickerButton}">
-    <Setter Property="VerticalAlignment" Value="Top"/>
-    <Setter Property="Height" Value="22" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="Focusable" Value="False" />
-    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
-    <Setter Property="Content">
-      <Template>
-        <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>
-      </Template>
-    </Setter>
-  </ControlTheme>
-
-  <ControlTheme x:Key="FluentDateTimePickerDownButton" TargetType="RepeatButton" BasedOn="{StaticResource FluentDateTimePickerButton}">
-    <Setter Property="VerticalAlignment" Value="Bottom"/>
-    <Setter Property="Height" Value="22" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="Focusable" Value="False" />
-    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
-    <Setter Property="Content">
-      <Template>
-        <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>
-      </Template>
-    </Setter>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushDisabled}"/>
+      <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundDisabled}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundDisabled}"/>
+    </Style>
   </ControlTheme>
-
+  
   <ControlTheme x:Key="{x:Type DatePicker}" TargetType="DatePicker">
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForeground}" />
@@ -148,7 +101,9 @@
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Top"/>
 
-            <Button Name="FlyoutButton" Grid.Row="1"
+            <Button Name="FlyoutButton"
+                    Grid.Row="1"
+                    Theme="{StaticResource FluentDatePickerFlyoutButton}"
                     Foreground="{TemplateBinding Foreground}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -159,22 +114,7 @@
                     MaxWidth="{DynamicResource DatePickerThemeMaxWidth}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
-                    HorizontalContentAlignment="Stretch"
-                    VerticalContentAlignment="Stretch"
                     TemplatedControl.IsTemplateFocusTarget="True">
-              <Button.Template>
-                <ControlTemplate>
-                  <ContentPresenter Name="ContentPresenter"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
-                                    Background="{TemplateBinding Background}"
-                                    BorderThickness="{TemplateBinding BorderThickness}"
-                                    Content="{TemplateBinding Content}"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    HorizontalContentAlignment="Stretch"
-                                    VerticalContentAlignment="Stretch"
-                                    CornerRadius="{TemplateBinding CornerRadius}"/>
-                </ControlTemplate>
-              </Button.Template>
               <Grid Name="ButtonContentGrid" ColumnDefinitions="78*,Auto,132*,Auto,78*">
                 <TextBlock Name="DayText" Text="day" HorizontalAlignment="Center"
                            Padding="{DynamicResource DatePickerHostPadding}"
@@ -223,25 +163,7 @@
     <Style Selector="^:hasnodate /template/ Button#FlyoutButton TextBlock">
       <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
     </Style>
-    <Style Selector="^/template/ Button#FlyoutButton">
-      <Style Selector="^:pointerover">
-        <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPointerOver}"/>
-        <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPointerOver}"/>
-        <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPointerOver}"/>
-      </Style>
-
-      <Style Selector="^:pressed">
-        <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPressed}"/>
-        <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPressed}"/>
-        <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPressed}"/>
-      </Style>
-
-      <Style Selector="^:disabled">
-        <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushDisabled}"/>
-        <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundDisabled}"/>
-        <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundDisabled}"/>
-      </Style>
-    </Style>
+    
     <Style Selector="^:error /template/ Button#FlyoutButton">
       <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
     </Style>
@@ -321,20 +243,35 @@
                          Width="{DynamicResource DatePickerSpacerThemeWidth}"
                          Grid.Column="3" />
             </Grid>
-            <Grid Grid.Row="1" Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
-                  Name="AcceptDismissGrid" ColumnDefinitions="*,*">
-              <Rectangle Height="{DynamicResource DatePickerSpacerThemeWidth}" VerticalAlignment="Top"
+            
+            <Grid Name="AcceptDismissGrid"
+                  Grid.Row="1"
+                  ColumnDefinitions="*,*">
+              <Rectangle Height="{DynamicResource DatePickerSpacerThemeWidth}" 
+                         VerticalAlignment="Top"
                          Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}"
                          Grid.ColumnSpan="2"/>
-              <Button Name="AcceptButton" Grid.Column="0" Theme="{StaticResource FluentDateTimePickerButton}"
-                      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 Name="AcceptButton"
+                      Grid.Column="0"
+                      Theme="{StaticResource FluentDateTimePickerButton}"
+                      Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      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" Theme="{StaticResource FluentDateTimePickerButton}"
-                      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 Name="DismissButton" 
+                      Grid.Column="1" 
+                      Theme="{StaticResource FluentDateTimePickerButton}"
+                      Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      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>
diff --git a/src/Avalonia.Themes.Fluent/Controls/DateTimePickerShared.xaml b/src/Avalonia.Themes.Fluent/Controls/DateTimePickerShared.xaml
new file mode 100644
index 0000000000..77271a149f
--- /dev/null
+++ b/src/Avalonia.Themes.Fluent/Controls/DateTimePickerShared.xaml
@@ -0,0 +1,116 @@
+<!--
+// (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.
+-->
+
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard"
+        x:CompileBindings="True">
+  <Design.PreviewWith>
+    <Border Padding="20" Width="200">
+      <StackPanel Spacing="20">
+        <ListBoxItem Theme="{DynamicResource FluentDateTimePickerItem}">Standard Item</ListBoxItem>
+        <ListBoxItem Theme="{DynamicResource FluentDateTimePickerItem}" Classes="MonthItem">Month Item</ListBoxItem>
+        <RepeatButton Theme="{DynamicResource FluentDateTimePickerButton}">Button</RepeatButton>
+        <RepeatButton Theme="{DynamicResource FluentDateTimePickerUpButton}"/>
+        <RepeatButton Theme="{DynamicResource FluentDateTimePickerDownButton}"/>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <!-- Theme for the items displayed in the selectors -->
+  <ControlTheme x:Key="FluentDateTimePickerItem" TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
+    <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/>
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+
+    <Style Selector="^:selected">
+      <Setter Property="IsHitTestVisible" Value="False"/>
+      <Style Selector="^/template/ Rectangle#PressedBackground">
+        <Setter Property="Fill" Value="Transparent"/>
+      </Style>
+      <Style Selector="^/template/ ContentPresenter">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
+      </Style>
+    </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 & repeatbuttons in the presenter-->
+  <ControlTheme x:Key="FluentDateTimePickerButton" TargetType="Button">
+    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" />
+    <Setter Property="Height" Value="22" />
+    <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}"
+                  Foreground="{DynamicResource SystemControlHighlightAltBaseHighBrush}"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Padding="{TemplateBinding Padding}"
+                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                  CornerRadius="{TemplateBinding CornerRadius}"/>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPointerOver}"/>
+      <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPointerOver}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPointerOver}"/>
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPressed}"/>
+      <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPressed}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPressed}"/>
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentDateTimePickerUpButton" TargetType="RepeatButton" BasedOn="{StaticResource FluentDateTimePickerButton}">
+    <Setter Property="VerticalAlignment" Value="Top"/>
+    <Setter Property="Height" Value="22" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
+    <Setter Property="Content">
+      <Template>
+        <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>
+      </Template>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentDateTimePickerDownButton" TargetType="RepeatButton" BasedOn="{StaticResource FluentDateTimePickerButton}">
+    <Setter Property="VerticalAlignment" Value="Bottom"/>
+    <Setter Property="Height" Value="22" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
+    <Setter Property="Content">
+      <Template>
+        <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>
+      </Template>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
index 58c33bf26f..262007082f 100644
--- a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
@@ -59,7 +59,9 @@
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ContentControl.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ContextMenu.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/DataValidationErrors.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/DateTimePickerShared.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/DatePicker.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/DropDownButton.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/EmbeddableControlRoot.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Slider.xaml" />
@@ -72,6 +74,5 @@
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/FocusAdorner.xaml" />
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitButton.xaml" />
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/UserControl.xaml" />
-    <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml" />
     <Styles.Resources />
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/Controls/TimePicker.xaml b/src/Avalonia.Themes.Fluent/Controls/TimePicker.xaml
index dc09032a36..b5f177b985 100644
--- a/src/Avalonia.Themes.Fluent/Controls/TimePicker.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/TimePicker.xaml
@@ -1,163 +1,320 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
+<!--
 // (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" x:CompileBindings="True">
-  <Styles.Resources>
-    <x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double>
-    <x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double>
-    <Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness>
-    <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>
-    <Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
-    <Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness>
-    <ControlTheme x:Key="FluentTimePicker" TargetType="TimePicker">
-      <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
-      <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}" />
-      <Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}" />
-      <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-      <Setter Property="HorizontalAlignment" Value="Left" />
-      <Setter Property="VerticalAlignment" Value="Center" />
-      <Setter Property="Template">
-        <ControlTemplate>
-          <DataValidationErrors>
-            <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
-              <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Margin="{DynamicResource TimePickerTopHeaderMargin}" MaxWidth="{DynamicResource TimePickerThemeMaxWidth}" Foreground="{DynamicResource TimePickerHeaderForeground}" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
-              <Button x:Name="FlyoutButton" Grid.Row="1" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" IsEnabled="{TemplateBinding IsEnabled}" MinWidth="{DynamicResource TimePickerThemeMinWidth}" MaxWidth="{DynamicResource TimePickerThemeMaxWidth}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" VerticalContentAlignment="Stretch">
-                <Button.Template>
-                  <ControlTemplate>
-                    <ContentPresenter Name="ContentPresenter" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
-                  </ControlTemplate>
-                </Button.Template>
-                <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 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 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>
-              <Popup Name="Popup" WindowManagerAddShadowHint="False" IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}" PlacementMode="Bottom">
-                <TimePickerPresenter Name="PickerPresenter" />
-              </Popup>
-            </Grid>
-          </DataValidationErrors>
-        </ControlTemplate>
-      </Setter>
-      <Style Selector="^:hasnotime /template/ Button#FlyoutButton TextBlock">
-        <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}" />
-      </Style>
-      <!--<Style Selector="^:error /template/ Button#FlyoutButton /template/ ContentPresenter">
-        <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
-      </Style>
-      <Style Selector="^ /template/ Button">
-        <Style Selector="^#FlyoutButton:pointerover /template/ ContentPresenter">
-          <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}" />
-          <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}" />
-          <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}" />
-        </Style>
-        <Style Selector="^:pressed /template/ ContentPresenter">
-          <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}" />
-          <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}" />
-          <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}" />
-        </Style>
-        <Style Selector="^:disabled /template/ ContentPresenter">
-          <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}" />
-          <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}" />
-          <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}" />
-        </Style>
-      </Style>-->
-      <Style Selector="^:disabled">
-        <Style Selector="^ /template/ ContentPresenter#HeaderContentPresenter">
-          <Setter Property="Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}" />
-        </Style>
-        <Style Selector="^ /template/ Rectangle">
-          <Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" />
-        </Style>
-      </Style>
-    </ControlTheme>
-    <ControlTheme x:Key="FluentTimePickerPresenter" TargetType="TimePickerPresenter">
-      <Setter Property="Width" Value="242" />
-      <Setter Property="MinWidth" Value="242" />
-      <Setter Property="MaxHeight" Value="398" />
-      <Setter Property="FontWeight" Value="Normal" />
-      <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
-      <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
-      <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
-      <Setter Property="Template">
-        <ControlTemplate>
-          <Border Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{DynamicResource DateTimeFlyoutBorderPadding}" MaxHeight="398">
-            <Grid Name="ContentPanel" RowDefinitions="*,Auto">
-              <Grid Name="PickerContainer">
+
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard"
+        x:CompileBindings="True">
+  <Design.PreviewWith>
+    <Border Padding="20" Height="500">
+      <StackPanel Spacing="20" VerticalAlignment="Center">
+        <TimePicker />
+        <TimePicker CornerRadius="10" />
+        <TimePicker IsEnabled="False"/>
+        <TimePicker>
+          <DataValidationErrors.Error>
+            <sys:Exception>
+              <x:Arguments>
+                <x:String>Error</x:String>
+              </x:Arguments>
+            </sys:Exception>
+          </DataValidationErrors.Error>
+        </TimePicker>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double>
+  <x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double>
+  <Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness>
+  <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>
+  <Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
+  <Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness>
+
+  <ControlTheme x:Key="FluentTimePickerFlyoutButton" TargetType="Button">
+    <Setter Property="RenderTransform" Value="none" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          Background="{TemplateBinding Background}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          Foreground="{TemplateBinding Foreground}"
+                          HorizontalContentAlignment="Stretch"
+                          VerticalContentAlignment="Stretch"
+                          CornerRadius="{TemplateBinding CornerRadius}"/>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}"/>
+      <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}"/>
+      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}"/>
+    </Style>
+
+    <Style Selector="^:pressed">
+      <Setter Property="RenderTransform" Value="scale(0.98)" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}"/>
+      <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}"/>
+      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}"/>
+    </Style>
+
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/>
+      <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/>
+      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/>
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
+    <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}"/>
+    <Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}"/>
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DataValidationErrors>
+          <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
+            <ContentPresenter x:Name="HeaderContentPresenter"
+                              Grid.Row="0"
+                              Content="{TemplateBinding Header}"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}"
+                              Margin="{DynamicResource TimePickerTopHeaderMargin}"
+                              MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
+                              Foreground="{DynamicResource TimePickerHeaderForeground}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Top" />
+
+            <Button x:Name="FlyoutButton"
+                    Grid.Row="1"
+                    Theme="{StaticResource FluentTimePickerFlyoutButton}"
+                    Foreground="{TemplateBinding Foreground}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    IsEnabled="{TemplateBinding IsEnabled}"
+                    MinWidth="{DynamicResource TimePickerThemeMinWidth}"
+                    MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top">
+
+              <Grid Name="FlyoutButtonContentGrid">
                 <!--Ignore col defs here, set in code-->
-                <Panel Name="HourHost" Grid.Column="0">
-                  <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                    <DateTimePickerPanel Name="HourSelector" PanelType="Hour" ShouldLoop="True" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" />
-                  </ScrollViewer>
-                  <RepeatButton Name="HourUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" />
-                  <RepeatButton Name="HourDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" />
-                </Panel>
-                <Panel Name="MinuteHost" Grid.Column="2">
-                  <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                    <DateTimePickerPanel Name="MinuteSelector" PanelType="Minute" ShouldLoop="True" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" />
-                  </ScrollViewer>
-                  <RepeatButton Name="MinuteUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" />
-                  <RepeatButton Name="MinuteDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" />
-                </Panel>
-                <Panel Name="PeriodHost" Grid.Column="4">
-                  <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                    <DateTimePickerPanel Name="PeriodSelector" PanelType="TimePeriod" ShouldLoop="False" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" />
-                  </ScrollViewer>
-                  <RepeatButton Name="PeriodUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" />
-                  <RepeatButton Name="PeriodDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" />
-                </Panel>
-                <Rectangle x:Name="HighlightRect" ZIndex="-1" Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" />
-                <Rectangle Name="FirstSpacer" Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="1" />
-                <Rectangle Name="SecondSpacer" Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="3" />
-              </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>
+                <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 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 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>
+
+            <Popup Name="Popup"
+                   WindowManagerAddShadowHint="False"
+                   IsLightDismissEnabled="True"
+                   PlacementTarget="{TemplateBinding}"
+                   PlacementMode="Bottom">
+              <TimePickerPresenter Name="PickerPresenter" />
+            </Popup>
+
+          </Grid>
+        </DataValidationErrors>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:disabled /template/ ContentPresenter#HeaderContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}"/>
+    </Style>
+
+    <Style Selector="^:disabled /template/ Rectangle">
+      <Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}"/>
+    </Style>
+
+    <Style Selector="^:hasnotime /template/ Button#FlyoutButton TextBlock">
+      <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
+    </Style>
+
+    <Style Selector="^:error /template/ Button#FlyoutButton">
+      <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
+    <Setter Property="Width" Value="242" />
+    <Setter Property="MinWidth" Value="242" />
+    <Setter Property="MaxHeight" Value="398" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="Background"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
+                MaxHeight="398">
+          <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+            <Grid Name="PickerContainer">
+              <!--Ignore col defs here, set in code-->
+              <Panel Name="HourHost" Grid.Column="0">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="HourSelector"
+                                       PanelType="Hour"
+                                       ShouldLoop="True"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
+                </ScrollViewer>
+                <RepeatButton Name="HourUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="HourDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
+              </Panel>
+
+              <Panel Name="MinuteHost" Grid.Column="2">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="MinuteSelector"
+                                       PanelType="Minute"
+                                       ShouldLoop="True"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
+                </ScrollViewer>
+                <RepeatButton Name="MinuteUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="MinuteDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
+              </Panel>
+
+              <Panel Name="PeriodHost" Grid.Column="4">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="PeriodSelector"
+                                       PanelType="TimePeriod"
+                                       ShouldLoop="False"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
+                </ScrollViewer>
+                <RepeatButton Name="PeriodUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
+              </Panel>
+
+              <Rectangle x:Name="HighlightRect" ZIndex="-1"
+                         Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
+                         Grid.Column="0"
+                         Grid.ColumnSpan="5"
+                         VerticalAlignment="Center"
+                         Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" />
+              <Rectangle Name="FirstSpacer"
+                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                         HorizontalAlignment="Center"
+                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                         Grid.Column="1" />
+              <Rectangle Name="SecondSpacer"
+                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                         HorizontalAlignment="Center"
+                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                         Grid.Column="3" />
             </Grid>
-          </Border>
-        </ControlTemplate>
-      </Setter>
-      <Style Selector="^ /template/ Panel">
-        <Style Selector="^ RepeatButton">
-          <Setter Property="IsVisible" Value="False" />
-        </Style>
-        <Style Selector="^:pointerover RepeatButton">
-          <Setter Property="IsVisible" Value="True" />
-        </Style>
+
+            <Grid Name="AcceptDismissGrid"
+                  Grid.Row="1"
+                  ColumnDefinitions="*,*">
+              <Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}" 
+                         VerticalAlignment="Top"
+                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                         Grid.ColumnSpan="2"/>
+              <Button Name="AcceptButton"
+                      Grid.Column="0"
+                      Theme="{StaticResource FluentDateTimePickerButton}"
+                      Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      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" 
+                      Theme="{StaticResource FluentDateTimePickerButton}"
+                      Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      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 Selector="^ /template/ Panel">
+      <Style Selector="^ RepeatButton">
+        <Setter Property="IsVisible" Value="False" />
+      </Style>
+
+      <Style Selector="^:pointerover RepeatButton">
+        <Setter Property="IsVisible" Value="True" />
       </Style>
-    </ControlTheme>
-  </Styles.Resources>
-  <Style Selector="TimePicker">
-    <Setter Property="Theme" Value="{StaticResource FluentTimePicker}" />
-  </Style>
-  <Style Selector="TimePickerPresenter">
-    <Setter Property="Theme" Value="{StaticResource FluentTimePickerPresenter}" />
-  </Style>
-</Styles>
+    </Style>  </ControlTheme>
+</ResourceDictionary>