From 65f449bbec1723af94cdcc6b0eae0accb7371fee Mon Sep 17 00:00:00 2001
From: amwx <armccormickwx@gmail.com>
Date: Tue, 23 Jun 2020 00:10:11 -0500
Subject: [PATCH] Update styles

---
 .../Accents/FluentControlResourcesDark.xaml   |   2 -
 .../Accents/FluentControlResourcesLight.xaml  |   4 +-
 src/Avalonia.Themes.Fluent/DatePicker.xaml    | 251 +++++++++------
 src/Avalonia.Themes.Fluent/FluentTheme.xaml   |   3 +-
 .../LoopingSelector.xaml                      |  85 -----
 src/Avalonia.Themes.Fluent/TimePicker.xaml    | 301 ++++++++++--------
 6 files changed, 333 insertions(+), 313 deletions(-)
 delete mode 100644 src/Avalonia.Themes.Fluent/LoopingSelector.xaml

diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
index 47f2c8ffd6..e9f97fbe0a 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
@@ -682,8 +682,6 @@
     <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" />
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
index 8e0ccbcd45..df31f116b8 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
@@ -680,8 +680,6 @@
     <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" />
@@ -718,7 +716,7 @@
     <StaticResource x:Key="TimePickerLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
     <SolidColorBrush x:Key="TimePickerForegroundThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="TimePickerHeaderForegroundThemeBrush" Color="#FF000000" />
-
+    
     <!-- Resources for Pivot.xaml -->
     <FontFamily x:Key="PivotHeaderItemFontFamily">XamlAutoFontFamily</FontFamily>
     <FontFamily x:Key="PivotTitleFontFamily">XamlAutoFontFamily</FontFamily>
diff --git a/src/Avalonia.Themes.Fluent/DatePicker.xaml b/src/Avalonia.Themes.Fluent/DatePicker.xaml
index 0d6d1ba9f1..e5641a91d8 100644
--- a/src/Avalonia.Themes.Fluent/DatePicker.xaml
+++ b/src/Avalonia.Themes.Fluent/DatePicker.xaml
@@ -19,24 +19,33 @@
     <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>
+  <!-- Styles for the items displayed in the selectors -->
+  <Style Selector="ListBoxItem.DateTimePickerItem">
+    <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/>
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+  </Style>
+  <Style Selector="ListBoxItem.DateTimePickerItem:selected">
+    <Setter Property="IsHitTestVisible" Value="False"/>
+  </Style>
+  <Style Selector="ListBoxItem.DateTimePickerItem:selected /template/ Rectangle#PressedBackground">
+    <Setter Property="Fill" Value="Transparent"/>
+  </Style>
+  <Style Selector="ListBoxItem.DateTimePickerItem:selected /template/ ContentPresenter">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
+  </Style>
+  <Style Selector="ListBoxItem.DateTimePickerItem.MonthItem">
+    <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"/>
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
+  </Style>
+
 
-  <!-- This is used for both buttons on the popup & in the LoopingSelectors,
-  define LoopingSelector.xaml theme AFTER DatePicker.xaml-->
+  <!-- This is used for both the accept/dismiss & repeatbuttons in the presenter-->
   <Style Selector=":is(Button).DateTimeFlyoutButtonStyle">
     <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" />
     <Setter Property="HorizontalContentAlignment" Value="Center"/>
@@ -75,61 +84,49 @@
     <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPressed}"/>
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPressed}"/>
   </Style>
-  
-  
+
+
+  <Style Selector="RepeatButton.UpButton">
+    <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>
+  </Style>
+  <Style Selector="RepeatButton.DownButton">
+    <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>
+
   <Style Selector="DatePicker">
     <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForeground}" />
+    <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackground}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrush}"/>
+    <Setter Property="BorderThickness" Value="1"/>
     <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}"
@@ -137,29 +134,46 @@
                             MaxWidth="{DynamicResource DatePickerThemeMaxWidth}"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Top"/>
+
           <Button Name="FlyoutButton" Grid.Row="1"
                   Foreground="{TemplateBinding Foreground}"
                   Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
                   IsEnabled="{TemplateBinding IsEnabled}"
                   MinWidth="{StaticResource DatePickerThemeMinWidth}"
                   MaxWidth="{StaticResource DatePickerThemeMaxWidth}"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch"
-                  Classes="DatePickerFlyoutButtonStyle"
+                  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}"
+                                  TextBlock.Foreground="{TemplateBinding Foreground}"
+                                  HorizontalContentAlignment="Stretch"
+                                  VerticalContentAlignment="Stretch"
+                                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
+              </ControlTemplate>
+            </Button.Template>
             <Grid Name="ButtonContentGrid" ColumnDefinitions="78*,Auto,132*,Auto,78*">
               <TextBlock Name="DayText" Text="day" HorizontalAlignment="Center"
-                         Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}"
+                         Padding="{DynamicResource DatePickerHostPadding}"
                          FontFamily="{TemplateBinding FontFamily}"
                          FontWeight="{TemplateBinding FontWeight}"
                          FontSize="{TemplateBinding FontSize}"/>
               <TextBlock Name="MonthText" Text="month" TextAlignment="Left"
-                         Padding="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"
+                         Padding="{DynamicResource DatePickerHostMonthPadding}"
                          FontFamily="{TemplateBinding FontFamily}"
                          FontWeight="{TemplateBinding FontWeight}"
                          FontSize="{TemplateBinding FontSize}"/>
               <TextBlock Name="YearText" Text="year" HorizontalAlignment="Center"
-                         Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}"
+                         Padding="{DynamicResource DatePickerHostPadding}"
                          FontFamily="{TemplateBinding FontFamily}"
                          FontWeight="{TemplateBinding FontWeight}"
                          FontSize="{TemplateBinding FontSize}"/>
@@ -175,6 +189,13 @@
                     Grid.Column="3" />
             </Grid>
           </Button>
+
+          <Popup Name="Popup" WindowManagerAddShadowHint="False"
+                 StaysOpen="True" PlacementTarget="{TemplateBinding}"
+                 PlacementMode="Bottom">
+            <DatePickerPresenter Name="PickerPresenter" />
+          </Popup>
+
         </Grid>
       </ControlTemplate>
     </Setter>
@@ -185,6 +206,25 @@
   <Style Selector="DatePicker:disabled /template/ Rectangle">
     <Setter Property="Fill" Value="{DynamicResource DatePickerSpacerFillDisabled}"/>
   </Style>
+
+  <Style Selector="DatePicker /template/ Button#FlyoutButton: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="DatePicker /template/ Button#FlyoutButton: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="DatePicker /template/ Button#FlyoutButton:disabled /template/ ContentPresenter">
+    <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushDisabled}"/>
+    <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundDisabled}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundDisabled}"/>
+  </Style>
+
   <!-- Changes foreground for watermark text when SelectedDate is null-->
   <Style Selector="DatePicker:hasnodate /template/ Button#FlyoutButton TextBlock">
     <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
@@ -201,43 +241,56 @@
     <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}"
+        <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"
+              <Panel Name="MonthHost">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="MonthSelector"
+                                      PanelType="Month"
+                                      ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
+                                      ShouldLoop="True" />
+                </ScrollViewer>
+                <RepeatButton Name="MonthUpButton"
+                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
+                <RepeatButton Name="MonthDownButton"
+                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
+              </Panel>
+              <Panel Name="DayHost">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="DaySelector"
+                                      PanelType="Day"
+                                      ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
+                                      ShouldLoop="True" />
+                </ScrollViewer>
+                <RepeatButton Name="DayUpButton"
+                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
+                <RepeatButton Name="DayDownButton"
+                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
+              </Panel>
+              <Panel Name="YearHost">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="YearSelector"
+                                      PanelType="Year"
+                                      ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
+                                      ShouldLoop="False" />
+                </ScrollViewer>
+                <RepeatButton Name="YearUpButton"
+                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
+                <RepeatButton Name="YearDownButton"
+                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
+              </Panel>
+              <Rectangle Name="HighlightRect" IsHitTestVisible="False" ZIndex="-1"
                          Fill="{DynamicResource DatePickerFlyoutPresenterHighlightFill}"
                          Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center"
                          Height="{DynamicResource DatePickerFlyoutPresenterHighlightHeight}" />
@@ -273,5 +326,13 @@
       </ControlTemplate>
     </Setter>
   </Style>
+
+  <Style Selector="DatePickerPresenter /template/ Panel RepeatButton">
+    <Setter Property="IsVisible" Value="False" />
+  </Style>
+
+  <Style Selector="DatePickerPresenter /template/ Panel:pointerover RepeatButton">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
   
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/FluentTheme.xaml b/src/Avalonia.Themes.Fluent/FluentTheme.xaml
index 4faed21f4d..cef9625e1d 100644
--- a/src/Avalonia.Themes.Fluent/FluentTheme.xaml
+++ b/src/Avalonia.Themes.Fluent/FluentTheme.xaml
@@ -53,7 +53,6 @@
   <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.DatePicker.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
deleted file mode 100644
index c5dc36d03d..0000000000
--- a/src/Avalonia.Themes.Fluent/LoopingSelector.xaml
+++ /dev/null
@@ -1,85 +0,0 @@
-<!--
-// (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" />
-          <RepeatButton Name="UpButton" Classes="DateTimeFlyoutButtonStyle" Height="22"
-                        Padding="0"  VerticalAlignment="Top" HorizontalAlignment="Stretch"
-                      Background="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}">
-            <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 SystemControlBackgroundChromeMediumLowBrush}">
-            <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
index 65b94ef540..44856d7c56 100644
--- a/src/Avalonia.Themes.Fluent/TimePicker.xaml
+++ b/src/Avalonia.Themes.Fluent/TimePicker.xaml
@@ -9,95 +9,77 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sys="clr-namespace:System;assembly=netstandard">
   <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>
-    <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="ListBoxItem.DateTimePickerItem.HourItem">
+    <Setter Property="Padding" Value="{DynamicResource TimePickerFlyoutPresenterItemPadding}" />
+  </Style>
+  <Style Selector="ListBoxItem.DateTimePickerItem.MinuteItem">
+    <Setter Property="Padding" Value="{DynamicResource TimePickerFlyoutPresenterItemPadding}" />
+  </Style>
+  <Style Selector="ListBoxItem.DateTimePickerItem.TimePeriodItem">
+    <Setter Property="Padding" Value="{DynamicResource TimePickerFlyoutPresenterItemPadding}" />
+  </Style>
+
   <Style Selector="TimePicker">
     <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
     <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="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}"
+                 TextBlock.Foreground="{DynamicResource TimePickerHeaderForeground}"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Top" />
 
-          <Button x:Name="FlyoutButton" Classes="TimePickerFlyoutButtonStyle"
+          <Button x:Name="FlyoutButton"
                   Grid.Row="1"
                   Foreground="{TemplateBinding Foreground}"
                   Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
                   IsEnabled="{TemplateBinding IsEnabled}"
                   MinWidth="{StaticResource TimePickerThemeMinWidth}"
                   MaxWidth="{StaticResource TimePickerThemeMaxWidth}"
                   HorizontalAlignment="Stretch"
                   HorizontalContentAlignment="Stretch"
-                  VerticalAlignment="Top">
+                  VerticalAlignment="Top"
+                  VerticalContentAlignment="Stretch">
+            <Button.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>
+            </Button.Template>
+
             <Grid Name="FlyoutButtonContentGrid">
               <!--Ignore col defs here, set in code-->
               <Border x:Name="FirstPickerHost" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
@@ -108,11 +90,13 @@
                     FontWeight="{TemplateBinding FontWeight}"
                     FontSize="{TemplateBinding FontSize}" />
               </Border>
-              <Rectangle x:Name="FirstColumnDivider"
+
+              <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"
@@ -121,11 +105,13 @@
                     FontWeight="{TemplateBinding FontWeight}"
                     FontSize="{TemplateBinding FontSize}"/>
               </Border>
-              <Rectangle x:Name="SecondColumnDivider"
+
+              <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"
@@ -136,27 +122,47 @@
               </Border>
             </Grid>
           </Button>
+
+          <Popup Name="Popup" WindowManagerAddShadowHint="False"
+                 StaysOpen="True" PlacementTarget="{TemplateBinding}"
+                 PlacementMode="Bottom">
+            <TimePickerPresenter Name="PickerPresenter" />
+          </Popup>
+
         </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 /template/ Button#FlyoutButton: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="TimePicker /template/ Button: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="TimePicker /template/ Button:disabled /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/>
+  </Style>
+
   <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" />
@@ -166,70 +172,113 @@
     <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>
+      <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="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"
+                              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>
+            </Grid>
+
+          </Grid>
+        </Border>
+      </ControlTemplate>
     </Setter>
   </Style>
- 
+
+  <Style Selector="TimePickerPresenter /template/ Panel RepeatButton">
+    <Setter Property="IsVisible" Value="False" />
+  </Style>
+
+  <Style Selector="TimePickerPresenter /template/ Panel:pointerover RepeatButton">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+  
 </Styles>