From a99963e3a0e4172d257ec63c3be765ac3086f389 Mon Sep 17 00:00:00 2001
From: amwx <armccormickwx@gmail.com>
Date: Fri, 29 May 2020 04:08:07 -0500
Subject: [PATCH 01/11] Fluent Calendar style

---
 .../Accents/FluentControlResourcesDark.xaml   |  28 ++
 .../Accents/FluentControlResourcesLight.xaml  |  28 ++
 src/Avalonia.Themes.Fluent/Calendar.xaml      |  13 +-
 .../CalendarButton.xaml                       | 124 ++++----
 .../CalendarDayButton.xaml                    | 156 +++++-----
 src/Avalonia.Themes.Fluent/CalendarItem.xaml  | 272 +++++++-----------
 6 files changed, 321 insertions(+), 300 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
index a0f3ef0d62..fd6203d82d 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
@@ -153,5 +153,33 @@
     <SolidColorBrush x:Key="CheckBoxPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="CheckBoxPressedBorderThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="CheckBoxPressedForegroundThemeBrush" Color="#FF000000" />
+
+    <!-- Resources for Calendar.xaml, CalendarButton.xaml, CalendarDayButton.xaml, CalendarItem.xaml -->
+    <StaticResource x:Key="CalendarViewFocusBorderBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewSelectedHoverBorderBrush" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
+    <StaticResource x:Key="CalendarViewSelectedPressedBorderBrush" ResourceKey="SystemControlHighlightListAccentHighBrush" />
+    <StaticResource x:Key="CalendarViewSelectedBorderBrush" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="CalendarViewHoverBorderBrush" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewPressedBorderBrush" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="CalendarViewTodayForeground" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
+    <StaticResource x:Key="CalendarViewBlackoutForeground" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewSelectedForeground" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewPressedForeground" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewOutOfScopeForeground" ResourceKey="SystemControlHyperlinkBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewOutOfScopeBackground" ResourceKey="SystemControlDisabledChromeMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemBackground" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <StaticResource x:Key="CalendarViewForeground" ResourceKey="SystemControlHyperlinkBaseMediumHighBrush" />
+    <StaticResource x:Key="CalendarViewBackground" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <StaticResource x:Key="CalendarViewBorderBrush" ResourceKey="SystemControlForegroundChromeMediumBrush" />
+    <StaticResource x:Key="CalendarViewWeekDayForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemRevealBorderBrush" ResourceKey="SystemControlTransparentRevealBorderBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
index ec4f35664c..436b8af3d6 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
@@ -153,5 +153,33 @@
     <SolidColorBrush x:Key="CheckBoxPressedBackgroundThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="CheckBoxPressedBorderThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="CheckBoxPressedForegroundThemeBrush" Color="#FFFFFFFF" />
+
+    <!-- Resources for Calendar.xaml, CalendarButton.xaml, CalendarDayButton.xaml, CalendarItem.xaml -->
+    <StaticResource x:Key="CalendarViewFocusBorderBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewSelectedHoverBorderBrush" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
+    <StaticResource x:Key="CalendarViewSelectedPressedBorderBrush" ResourceKey="SystemControlHighlightListAccentHighBrush" />
+    <StaticResource x:Key="CalendarViewSelectedBorderBrush" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="CalendarViewHoverBorderBrush" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewPressedBorderBrush" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="CalendarViewTodayForeground" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
+    <StaticResource x:Key="CalendarViewBlackoutForeground" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewSelectedForeground" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewPressedForeground" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewOutOfScopeForeground" ResourceKey="SystemControlHyperlinkBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewOutOfScopeBackground" ResourceKey="SystemControlDisabledChromeMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemBackground" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <StaticResource x:Key="CalendarViewForeground" ResourceKey="SystemControlHyperlinkBaseMediumHighBrush" />
+    <StaticResource x:Key="CalendarViewBackground" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <StaticResource x:Key="CalendarViewBorderBrush" ResourceKey="SystemControlForegroundChromeMediumBrush" />
+    <StaticResource x:Key="CalendarViewWeekDayForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemRevealBorderBrush" ResourceKey="SystemControlTransparentRevealBorderBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/Calendar.xaml b/src/Avalonia.Themes.Fluent/Calendar.xaml
index 6bbee4ef17..2fbc705d83 100644
--- a/src/Avalonia.Themes.Fluent/Calendar.xaml
+++ b/src/Avalonia.Themes.Fluent/Calendar.xaml
@@ -7,11 +7,12 @@
 
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="Calendar">
-    <!--<Setter Property="Focusable" Value="False" />-->
-    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
-    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
-    <Setter Property="HeaderBackground" Value="{DynamicResource ThemeAccentBrush2}" />
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewForeground}" />
+    <Setter Property="Background" Value="{DynamicResource CalendarViewBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewBorderBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
         <StackPanel Name="Root"
@@ -28,4 +29,4 @@
       </ControlTemplate>
     </Setter>
   </Style>
-</Styles>
\ No newline at end of file
+</Styles>
diff --git a/src/Avalonia.Themes.Fluent/CalendarButton.xaml b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
index 3314534b3b..2ba4489204 100644
--- a/src/Avalonia.Themes.Fluent/CalendarButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
@@ -7,75 +7,99 @@
 
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="CalendarButton">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeBorderHighBrush}" />
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
-    <Setter Property="FontSize" Value="{DynamicResource FontSizeSmall}" />
-    <Setter Property="HorizontalContentAlignment" Value="Center" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="MinWidth" Value="37" />
-    <Setter Property="MinHeight" Value="38" />
-    <Setter Property="Focusable" Value="False"/>
+    <Setter Property="ClickMode" Value="Release"/>
+    <Setter Property="MinWidth" Value="40"/>
+    <Setter Property="MinHeight" Value="40"/>
+    <Setter Property="Margin" Value="1"/>
+    <Setter Property="Padding" Value="0,0,0,4"/>
+    <!--These are actually set on the CalendarView in WinUI-->
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewCalendarItemForeground}"/>
+    <Setter Property="Background" Value="{DynamicResource CalendarViewCalendarItemRevealBackground}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewCalendarItemRevealBorderBrush}"/>
+    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="FontSize" Value="20"/>
+    <Setter Property="ClipToBounds" Value="False"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid>
+        <Panel>
+          <Border Name="Root" Background="{TemplateBinding Background}"
+                  BorderThickness="0" CornerRadius="2" ClipToBounds="True">
 
-          <Rectangle Name="SelectedBackground"
-                     Opacity="0.75"
-                     Fill="{TemplateBinding Background}"/>
+            <ContentControl Name="Content"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Content="{TemplateBinding Content}"
+                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                  FontSize="{TemplateBinding FontSize}"
+                  Margin="{TemplateBinding Padding}"/>
 
-          <Rectangle Name="Background"
-                     Opacity="0.5"
-                     Fill="{TemplateBinding Background}"/>
+          </Border>
 
-          <!--Focusable="False"-->
-          <ContentControl Name="Content"
-                          Foreground="{TemplateBinding Foreground}"
-                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                          Content="{TemplateBinding Content}"
-                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                          FontSize="{TemplateBinding FontSize}"
-                          Margin="1,0,1,1"/>
+          <!-- Drawn Border should render on top of background to preserve the 1px
+                        margin between items-->
+          <Border Name="Border"
+                  BorderThickness="2"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  CornerRadius="2"/>
 
-          <Rectangle Name="FocusVisual"
-                     StrokeThickness="1"
-                     Stroke="{DynamicResource HighlightBrush}"
-                     IsHitTestVisible="False"/>
-
-        </Grid>
+          <Border Name="FocusVisual" BorderThickness="2"
+                     BorderBrush="{DynamicResource SystemControlHighlightBaseHighBrush}"
+                     IsHitTestVisible="False"
+                     Margin="-1"  CornerRadius="2"/>
+        </Panel>
       </ControlTemplate>
     </Setter>
   </Style>
-
-  <Style Selector="CalendarButton /template/ Rectangle#Background">
+  <!--<Style Selector="CalendarButton /template/ Border#FocusVisual">
     <Setter Property="IsVisible" Value="False"/>
+  </Style>-->
+
+  <Style Selector="CalendarButton:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewHoverBorderBrush}"/>
   </Style>
-  <Style Selector="CalendarButton:pointerover /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
-  <Style Selector="CalendarButton:pressed /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarButton:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewPressedBorderBrush}"/>
   </Style>
 
-  <Style Selector="CalendarButton /template/ Rectangle#SelectedBackground">
-    <Setter Property="IsVisible" Value="False"/>
+  <!-- Adjusted :selected to look like :today from DayItem -->
+  <Style Selector="CalendarButton:selected /template/ Border#Root">
+    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
   </Style>
-  <Style Selector="CalendarButton:selected /template/ Rectangle#SelectedBackground">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarButton:selected /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}"/>
   </Style>
-
-  <Style Selector="CalendarButton /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
+  <Style Selector="CalendarButton:selected:pointerover /template/ Border#Root">
+    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
   </Style>
-  <Style Selector="CalendarButton:inactive /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}"/>
+  <Style Selector="CalendarButton:selected:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark1}"/>
+  </Style>
+  <Style Selector="CalendarButton:selected:pressed /template/ Border#Root">
+    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
+  </Style>
+  <Style Selector="CalendarButton:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark2}"/>
   </Style>
 
+  <Style Selector="CalendarButton:selected /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}"/>
+    <Setter Property="FontWeight" Value="SemiBold"/>
+  </Style>
 
-  <Style Selector="CalendarButton /template/ Rectangle#FocusVisual">
-    <Setter Property="IsVisible" Value="False"/>
+  <!-- WinUI calls this OutOfFocus -->
+  <Style Selector="CalendarButton:inactive /template/ Border#Root">
+    <!-- These are probably set in code, but consistent -->
+    <Setter Property="Background" Value="{DynamicResource CalendarViewOutOfScopeBackground}"/>
   </Style>
-  <Style Selector="CalendarButton:btnfocused /template/ Rectangle#FocusVisual">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarButton:inactive /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewOutOfScopeForeground}"/>
   </Style>
+
+  <Style Selector="CalendarButton:blackout /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewBlackoutForeground}"/>
+  </Style>
+
+  <!--<Style Selector="CalendarButton:dayfocused /template/ Border#FocusVisual">
+            <Setter Property="IsVisible" Value="True"/>
+      </Style>-->
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
index 2d79e62a75..1e5953ab2d 100644
--- a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
@@ -7,110 +7,102 @@
 
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="CalendarDayButton">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
-    <Setter Property="FontSize" Value="{DynamicResource FontSizeSmall}" />
-    <Setter Property="HorizontalContentAlignment" Value="Center" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="MinWidth" Value="5" />
-    <Setter Property="MinHeight" Value="5" />
-    <Setter Property="Focusable" Value="False"/>
+    <Setter Property="ClickMode" Value="Release"/>
+    <Setter Property="MinWidth" Value="40"/>
+    <Setter Property="MinHeight" Value="40"/>
+    <Setter Property="Margin" Value="1"/>
+    <Setter Property="Padding" Value="0,0,0,4"/>
+    <!--These are actually set on the CalendarView in WinUI-->
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewCalendarItemForeground}"/>
+    <Setter Property="Background" Value="{DynamicResource CalendarViewCalendarItemRevealBackground}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewCalendarItemRevealBorderBrush}"/>
+    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="FontSize" Value="20"/>
+    <Setter Property="ClipToBounds" Value="False"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Panel Background="Transparent">
-
-          <Rectangle Name="TodayBackground"
-                     Fill="{DynamicResource HighlightBrush}"/>
-
-          <Rectangle Name="SelectedBackground"
-                     Opacity="0.75"
-                     Fill="{TemplateBinding Background}"/>
-
-          <Rectangle Name="Background"
-                     Opacity="0.5"
-                     Fill="{TemplateBinding Background}"/>
-
-          <ContentControl Name="Content"
-                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                          Content="{TemplateBinding Content}"
-                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                          FontSize="{TemplateBinding FontSize}"
-                          Margin="5,1,5,1"/>
-
-          <Path Name="BlackoutVisual"
-                Margin="3"
-                HorizontalAlignment="Stretch"
-                VerticalAlignment="Stretch"
-                RenderTransformOrigin="0.5,0.5"
-                Fill="{DynamicResource ThemeForegroundBrush}"
-                Stretch="Fill"
-                Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z" />
-          
-          <Rectangle Name="FocusVisual"
-                     StrokeThickness="1"
-                     Stroke="{DynamicResource HighlightBrush}"
-                     IsHitTestVisible="False"/>
-
+        <Panel>
+          <!-- To mimic WinUI SystemFocusVisual 
+                        Focus visual is drawn outside the bounds of the item
+                        -->
+          <Border Name="Root" Background="{TemplateBinding Background}"
+                  BorderThickness="0" CornerRadius="2" ClipToBounds="True">
+
+            <ContentControl Name="Content"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Content="{TemplateBinding Content}"
+                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                  FontSize="{TemplateBinding FontSize}"
+                  Margin="{TemplateBinding Padding}"/>
+
+          </Border>
+
+          <!-- Drawn Border should render on top of background to preserve the 1px
+                        margin between items-->
+          <Border Name="Border"
+                  BorderThickness="2"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  CornerRadius="2"/>
+
+          <!--Removed for now...WinUI doesn't have selection follow focus, and it leads to
+              an undesired effect with both borders displayed
+                <Border Name="FocusVisual" BorderThickness="2"
+                            BorderBrush="{DynamicResource SystemControlHighlightBaseHighBrush}"
+                            IsHitTestVisible="False"
+                            Margin="-1"  CornerRadius="2"/>-->
         </Panel>
       </ControlTemplate>
     </Setter>
   </Style>
-
-  <Style Selector="CalendarDayButton /template/ Rectangle#Background">
+  <!--<Style Selector="CalendarDayButton /template/ Border#FocusVisual">
     <Setter Property="IsVisible" Value="False"/>
-  </Style>
-  <Style Selector="CalendarDayButton:pointerover /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
-  <Style Selector="CalendarDayButton:pressed /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
+  </Style>-->
 
-  <Style Selector="CalendarDayButton /template/ Rectangle#SelectedBackground">
-    <Setter Property="IsVisible" Value="False"/>
+  <Style Selector="CalendarDayButton:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewHoverBorderBrush}"/>
   </Style>
-  <Style Selector="CalendarDayButton:selected /template/ Rectangle#SelectedBackground">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarDayButton:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewPressedBorderBrush}"/>
   </Style>
-
-  <Style Selector="CalendarDayButton /template/ ContentControl#Content">
-    <Setter Property="Opacity" Value="1"/>
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
+  <Style Selector="CalendarDayButton:selected /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}"/>
   </Style>
-  <Style Selector="CalendarDayButton:disabled /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="False"/>
+  <Style Selector="CalendarDayButton:selected:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedHoverBorderBrush}"/>
   </Style>
-  <Style Selector="CalendarDayButton:disabled /template/ ContentControl#Content">
-    <Setter Property="Opacity" Value="0.3"/>
+  <Style Selector="CalendarDayButton:selected:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedPressedBorderBrush}"/>
   </Style>
 
-  <Style Selector="CalendarDayButton /template/ Rectangle#FocusVisual">
-    <Setter Property="IsVisible" Value="False"/>
+  <Style Selector="CalendarDayButton:today /template/ Border#Root">
+    <!-- These are probably set in code, but consistent -->
+    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
   </Style>
-  <Style Selector="CalendarDayButton:dayfocused /template/ Rectangle#FocusVisual">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarDayButton:today:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark1}"/>
   </Style>
-
-  <Style Selector="CalendarDayButton /template/ Rectangle#TodayBackground">
-    <Setter Property="IsVisible" Value="False"/>
+  <Style Selector="CalendarDayButton:today:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark2}"/>
   </Style>
-  <Style Selector="CalendarDayButton:today /template/ Rectangle#TodayBackground">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarDayButton:today /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}"/>
+    <Setter Property="FontWeight" Value="SemiBold"/>
   </Style>
 
-
-  <Style Selector="CalendarDayButton:inactive /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}"/>
+  <!-- WinUI calls this OutOfFocus -->
+  <Style Selector="CalendarDayButton:inactive /template/ Border#Root">
+    <Setter Property="Background" Value="{DynamicResource CalendarViewOutOfScopeBackground}"/>
   </Style>
-  <Style Selector="CalendarDayButton:today /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeControlLowBrush}"/>
+  <Style Selector="CalendarDayButton:inactive /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewOutOfScopeForeground}"/>
   </Style>
 
-  <Style Selector="CalendarDayButton /template/ Path#BlackoutVisual">
-    <Setter Property="Opacity" Value="0"/>
+  <Style Selector="CalendarDayButton:blackout /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewBlackoutForeground}"/>
   </Style>
-  <Style Selector="CalendarDayButton:blackout /template/ Path#BlackoutVisual">
-    <Setter Property="Opacity" Value="0.3"/>
-  </Style>  
 
+  <!--<Style Selector="CalendarDayButton:dayfocused /template/ Border#FocusVisual">
+            <Setter Property="IsVisible" Value="True"/>
+      </Style>-->
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/CalendarItem.xaml b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
index dfd89ed82f..41f3fcbc1f 100644
--- a/src/Avalonia.Themes.Fluent/CalendarItem.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
@@ -8,176 +8,124 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Style Selector="CalendarItem">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Panel>
-          <Border BorderThickness="{TemplateBinding BorderThickness}"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  Background="{TemplateBinding Background}"
-                  Margin="0,2,0,2"
-                  CornerRadius="1">
-
-            <Border CornerRadius="1"
-                    BorderBrush="{DynamicResource ThemeBackgroundBrush}"
-                    BorderThickness="2">
-              <Grid>
-                <Grid.RowDefinitions>
-                  <RowDefinition Height="Auto" />
-                  <RowDefinition Height="*" />
-                </Grid.RowDefinitions>
-                <Grid.ColumnDefinitions>
-                  <ColumnDefinition Width="Auto" />
-                  <ColumnDefinition Width="*" />
-                  <ColumnDefinition Width="Auto" />
-                </Grid.ColumnDefinitions>
-
-                <Grid.Styles>
-                  <Style Selector="Button.CalendarHeader">
-                    <Setter Property="Cursor" Value="Hand"/>
-                    <Setter Property="Background" Value="Transparent"/>
-                    <Setter Property="BorderThickness" Value="0"/>
-                  </Style>
-                    <Style Selector="Button.CalendarHeader:pressed  /template/ ContentPresenter">
-                    <Setter Property="Background" Value="Transparent"/>
-                  </Style>
-
-                  <Style Selector="Button.CalendarNavigation">
-                    <Setter Property="Height" Value="20"/>
-                    <Setter Property="Width" Value="28"/>
-                  </Style>
-                  <Style Selector="Button.CalendarNavigation > Path">
-                    <Setter Property="Fill" Value="{DynamicResource ThemeForegroundBrush}"/>
-                  </Style>
-                  <Style Selector="Button.CalendarNavigation:pointerover > Path">
-                    <Setter Property="Fill" Value="{DynamicResource HighlightBrush}"/>
-                  </Style>
-
-                  <Style Selector="Button#HeaderButton:pointerover">
-                    <Setter Property="Foreground" Value="{DynamicResource HighlightBrush}"/>
-                  </Style>
-                </Grid.Styles>
-
-                <Rectangle Grid.ColumnSpan="3"
-                           Fill="{TemplateBinding HeaderBackground}"
-                           Stretch="Fill"
-                           VerticalAlignment="Top"
-                           Height="22"/>
-
-                <Button Name="PreviousButton"
-                        Classes="CalendarHeader CalendarNavigation"
-                        IsVisible="False"
-                        HorizontalAlignment="Left">
-
-                  <Path Margin="14,-6,0,0"
-                        Height="10"
-                        Width="6"
-                        VerticalAlignment="Center"
-                        HorizontalAlignment="Left"
-                        Stretch="Fill"
-                        Data="M288.75,232.25 L288.75,240.625 L283,236.625 z" />
-                  
-                </Button>
-                
-                <Button Name="HeaderButton"
-                        Classes="CalendarHeader"
-                        Grid.Column="1"
-                        FontWeight="Bold"
-                        FontSize="10.5"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center" 
-                        Padding="1,5,1,9"/>
-
-                <Button Name="NextButton"
-                        Classes="CalendarHeader CalendarNavigation"
-                        Grid.Column="2"
-                        IsVisible="False"
-                        HorizontalAlignment="Right" >
-
-                  <Path Margin="0,-6,14,0"
-                        Height="10"
-                        Width="6"
-                        Stretch="Fill"
-                        VerticalAlignment="Center"
-                        HorizontalAlignment="Right"
-                        Data="M282.875,231.875 L282.875,240.375 L288.625,236 z" />
-                  
-                </Button>
-
-                <Grid Name="MonthView"
-                      Grid.Row="1"
-                      Grid.ColumnSpan="3"
-                      IsVisible="False"
-                      Margin="6,-1,6,6">
-                  <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                  </Grid.RowDefinitions>
-                  <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                  </Grid.ColumnDefinitions>
-                </Grid>
-
-                <Grid Name="YearView"
-                      Grid.Row="1"
-                      Grid.ColumnSpan="3"
-                      IsVisible="False"
-                      Margin="6,-3,7,6">
-                  <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                  </Grid.RowDefinitions>
-                  <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                  </Grid.ColumnDefinitions>
-                </Grid>
-
-              </Grid>
-            </Border>
-          </Border>
-
-
-          <Rectangle Name="DisabledVisual"
-                     Stretch="Fill"
-                     Fill="{DynamicResource ThemeControlLowBrush}"
-                     Opacity="{DynamicResource ThemeDisabledOpacity}"
-                     Margin="0,2,0,2" />
-
-        </Panel>
-      </ControlTemplate>
-    </Setter>
     <Setter Property="DayTitleTemplate">
       <Template>
-        <TextBlock FontWeight="Bold"
-                   FontSize="9.5"
-                   Margin="0,4,0,4"
+        <TextBlock Text="{Binding}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
-                   Text="{Binding}" />
+                   FontSize="12"/>
       </Template>
-
+    </Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderThickness="{TemplateBinding BorderThickness}"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                CornerRadius="2">
+          <Border.Styles>
+            <Style Selector="Button.CalendarHeader">
+              <Setter Property="HorizontalAlignment" Value="Stretch" />
+              <Setter Property="VerticalAlignment" Value="Stretch" />
+              <Setter Property="FontSize" Value="20" />
+              <Setter Property="Background" Value="{DynamicResource CalendarViewNavigationButtonBackground}"/>
+              <Setter Property="Template">
+                <ControlTemplate>
+                  <!-- HCA was changed here to ensure nav arrows display correctly -->
+                  <ContentPresenter Name="Text" Background="{TemplateBinding Background}"
+                                    BorderBrush="{DynamicResource CalendarViewNavigationButtonBorderBrush}"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    Content="{TemplateBinding Content}"
+                                    Margin="{TemplateBinding Padding}"
+                                    HorizontalContentAlignment="Stretch"
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                </ControlTemplate>
+              </Setter>
+            </Style>
+            <Style Selector="Button.CalendarNavigation > Path">
+              <Setter Property="Stroke" Value="{DynamicResource CalendarViewForeground}"/>
+            </Style>
+            <Style Selector="Button.CalendarNavigation:pointerover > Path">
+              <Setter Property="Stroke" Value="{DynamicResource CalendarViewNavigationButtonForegroundPointerOver}"/>
+            </Style>
+            <Style Selector="Button.CalendarNavigation:pressed > Path">
+              <Setter Property="Stroke" Value="{DynamicResource CalendarViewNavigationButtonForegroundPressed}"/>
+            </Style>
+            <Style Selector="Button.CalendarHeader:pointerover /template/ ContentPresenter#Text">
+              <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewNavigationButtonBorderBrushPointerOver}" />
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource CalendarViewNavigationButtonForegroundPointerOver}"/>
+              <!-- Prevent base button template:pointerover from overriding background here -->
+              <Setter Property="Background" Value="{DynamicResource CalendarViewNavigationButtonBackground}"/>
+            </Style>
+            <Style Selector="Button.CalendarHeader:pressed /template/ ContentPresenter#Text">
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource CalendarViewNavigationButtonForegroundPressed}"/>
+              <!-- Prevent base button template:pointerover from overriding background here -->
+              <Setter Property="Background" Value="{DynamicResource CalendarViewNavigationButtonBackground}"/>
+            </Style>
+          </Border.Styles>
+          <!--  To keep calendar from resizing when switching DisplayMode
+                In WinUI Min-Width from TemplateSettings
+                basically...MinWidth of DayItem = 40, 40 * 7 = 280 + margins/padding = ~294
+                Viewport height is set from # of rows displayed (2-8) in Month mode, = ~290 for 6 weeks (+ day names)
+                -->
+          <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" RowDefinitions="40,*" MinWidth="294">
+            <Grid ColumnDefinitions="5*,*,*">
+              <Button Name="HeaderButton" Classes="CalendarHeader" Foreground="{TemplateBinding Foreground}" Padding="12,0,0,0" HorizontalContentAlignment="Left" />
+              <Button Name="PreviousButton" Grid.Column="1" Classes="CalendarHeader CalendarNavigation" Foreground="{TemplateBinding Foreground}" Padding="1" HorizontalContentAlignment="Left">
+                <!--Path mimics Segoe MDL2 Assets font glyph used in WinUI-->
+                <Path StrokeThickness="1.5" Data="M 0,9 L 9,0 L 18,9"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
+              </Button>
+              <Button Name="NextButton" Grid.Column="2" Classes="CalendarHeader CalendarNavigation" Foreground="{TemplateBinding Foreground}" Padding="1" HorizontalContentAlignment="Left">
+                <!--Path mimics Segoe MDL2 Assets font glyph used in WinUI-->
+                <Path StrokeThickness="1.5" Data="M 0,0 L 9,9 L 18,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+              </Button>
+            </Grid>
+            <Border Name="BackgroundLayer" Background="{TemplateBinding BorderBrush}" Grid.Row="1" />
+            <Grid Name="MonthView" Grid.Row="1" IsVisible="False" MinHeight="290" >
+              <Grid.RowDefinitions>
+                <!--This should always be the week day names??-->
+                <RowDefinition Height="38" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+              </Grid.RowDefinitions>
+              <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+              </Grid.ColumnDefinitions>
+            </Grid>
+            <Grid Name="YearView" MinHeight="290"
+                    Grid.Row="1" IsVisible="False">
+              <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+              </Grid.RowDefinitions>
+              <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="*" />
+              </Grid.ColumnDefinitions>
+            </Grid>
+
+          </Grid>
+
+        </Border>
+      </ControlTemplate>
     </Setter>
   </Style>
 
-  <Style Selector="CalendarItem /template/ Rectangle#DisabledVisual">
-    <Setter Property="IsVisible" Value="False"/>
-  </Style>
-  <Style Selector="CalendarItem:calendardisabled /template/ Rectangle#DisabledVisual">
-    <Setter Property="IsVisible" Value="True"/>
+  <!-- BackgroundLayer shouldn't show in the week day names row-->
+  <Style Selector="Calendar[DisplayMode=Month] CalendarItem /template/ Border#BackgroundLayer">
+    <Setter Property="Margin" Value="0,38,0,0"/>
   </Style>
   
 </Styles>

From 3b48112e1d3f44beaf0df52eb738554e3bd81e57 Mon Sep 17 00:00:00 2001
From: amwx <armccormickwx@gmail.com>
Date: Fri, 29 May 2020 04:24:07 -0500
Subject: [PATCH 02/11] Fluent Calendar Style

---
 src/Avalonia.Themes.Fluent/Calendar.xaml          |  2 +-
 src/Avalonia.Themes.Fluent/CalendarButton.xaml    |  9 ++++++---
 src/Avalonia.Themes.Fluent/CalendarDayButton.xaml | 14 ++++++--------
 src/Avalonia.Themes.Fluent/CalendarItem.xaml      |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/Calendar.xaml b/src/Avalonia.Themes.Fluent/Calendar.xaml
index 2fbc705d83..6ae334dbae 100644
--- a/src/Avalonia.Themes.Fluent/Calendar.xaml
+++ b/src/Avalonia.Themes.Fluent/Calendar.xaml
@@ -5,7 +5,7 @@
 // All other rights reserved.
 -->
 
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui">  
   <Style Selector="Calendar">
     <Setter Property="Foreground" Value="{DynamicResource CalendarViewForeground}" />
     <Setter Property="Background" Value="{DynamicResource CalendarViewBackground}" />
diff --git a/src/Avalonia.Themes.Fluent/CalendarButton.xaml b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
index 2ba4489204..bd5b62a7f7 100644
--- a/src/Avalonia.Themes.Fluent/CalendarButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
@@ -22,8 +22,9 @@
     <Setter Property="Template">
       <ControlTemplate>
         <Panel>
+          <!-- To mimic WinUI SystemFocusVisual, Focus visual is drawn outside the bounds of the item -->
           <Border Name="Root" Background="{TemplateBinding Background}"
-                  BorderThickness="0" CornerRadius="2" ClipToBounds="True">
+                  BorderThickness="0" CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
 
             <ContentControl Name="Content"
                   ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -40,12 +41,14 @@
           <Border Name="Border"
                   BorderThickness="2"
                   BorderBrush="{TemplateBinding BorderBrush}"
-                  CornerRadius="2"/>
+                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
 
+          <!--Removed for now...WinUI doesn't have selection follow focus, and only uses 
+              focus visual w/ keyboard focus
           <Border Name="FocusVisual" BorderThickness="2"
                      BorderBrush="{DynamicResource SystemControlHighlightBaseHighBrush}"
                      IsHitTestVisible="False"
-                     Margin="-1"  CornerRadius="2"/>
+                     Margin="-2"  CornerRadius="{DynamicResource ControlCornerRadius}"/>-->
         </Panel>
       </ControlTemplate>
     </Setter>
diff --git a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
index 1e5953ab2d..4f6f5951d2 100644
--- a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
@@ -22,11 +22,9 @@
     <Setter Property="Template">
       <ControlTemplate>
         <Panel>
-          <!-- To mimic WinUI SystemFocusVisual 
-                        Focus visual is drawn outside the bounds of the item
-                        -->
+          <!-- To mimic WinUI SystemFocusVisual, Focus visual is drawn outside the bounds of the item -->
           <Border Name="Root" Background="{TemplateBinding Background}"
-                  BorderThickness="0" CornerRadius="2" ClipToBounds="True">
+                  BorderThickness="0" CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
 
             <ContentControl Name="Content"
                   ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -43,14 +41,14 @@
           <Border Name="Border"
                   BorderThickness="2"
                   BorderBrush="{TemplateBinding BorderBrush}"
-                  CornerRadius="2"/>
+                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
 
-          <!--Removed for now...WinUI doesn't have selection follow focus, and it leads to
-              an undesired effect with both borders displayed
+          <!--Removed for now...WinUI doesn't have selection follow focus, and only uses 
+              focus visual w/ keyboard focus
                 <Border Name="FocusVisual" BorderThickness="2"
                             BorderBrush="{DynamicResource SystemControlHighlightBaseHighBrush}"
                             IsHitTestVisible="False"
-                            Margin="-1"  CornerRadius="2"/>-->
+                            Margin="-2"  CornerRadius="2"/>-->
         </Panel>
       </ControlTemplate>
     </Setter>
diff --git a/src/Avalonia.Themes.Fluent/CalendarItem.xaml b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
index 41f3fcbc1f..7e17ee7075 100644
--- a/src/Avalonia.Themes.Fluent/CalendarItem.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
@@ -21,7 +21,7 @@
         <Border BorderThickness="{TemplateBinding BorderThickness}"
                 Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
-                CornerRadius="2">
+                CornerRadius="{DynamicResource ControlCornerRadius}">
           <Border.Styles>
             <Style Selector="Button.CalendarHeader">
               <Setter Property="HorizontalAlignment" Value="Stretch" />

From fac52ec3b4e331dc14758139ab7f1a973270f2f7 Mon Sep 17 00:00:00 2001
From: amwx <armccormickwx@gmail.com>
Date: Fri, 29 May 2020 04:08:07 -0500
Subject: [PATCH 03/11] Fluent Calendar style

---
 .../Accents/FluentControlResourcesDark.xaml   |  27 ++
 .../Accents/FluentControlResourcesLight.xaml  |  27 ++
 src/Avalonia.Themes.Fluent/Calendar.xaml      |  13 +-
 .../CalendarButton.xaml                       | 124 ++++----
 .../CalendarDayButton.xaml                    | 156 +++++-----
 src/Avalonia.Themes.Fluent/CalendarItem.xaml  | 272 +++++++-----------
 6 files changed, 319 insertions(+), 300 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
index ab83f4f474..472806800a 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
@@ -178,6 +178,33 @@
     <SolidColorBrush x:Key="CheckBoxPressedBorderThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="CheckBoxPressedForegroundThemeBrush" Color="#FF000000" />
 
+    <!-- Resources for Calendar.xaml, CalendarButton.xaml, CalendarDayButton.xaml, CalendarItem.xaml -->
+    <StaticResource x:Key="CalendarViewFocusBorderBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewSelectedHoverBorderBrush" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
+    <StaticResource x:Key="CalendarViewSelectedPressedBorderBrush" ResourceKey="SystemControlHighlightListAccentHighBrush" />
+    <StaticResource x:Key="CalendarViewSelectedBorderBrush" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="CalendarViewHoverBorderBrush" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewPressedBorderBrush" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="CalendarViewTodayForeground" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
+    <StaticResource x:Key="CalendarViewBlackoutForeground" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewSelectedForeground" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewPressedForeground" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewOutOfScopeForeground" ResourceKey="SystemControlHyperlinkBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewOutOfScopeBackground" ResourceKey="SystemControlDisabledChromeMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemBackground" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <StaticResource x:Key="CalendarViewForeground" ResourceKey="SystemControlHyperlinkBaseMediumHighBrush" />
+    <StaticResource x:Key="CalendarViewBackground" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <StaticResource x:Key="CalendarViewBorderBrush" ResourceKey="SystemControlForegroundChromeMediumBrush" />
+    <StaticResource x:Key="CalendarViewWeekDayForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemRevealBorderBrush" ResourceKey="SystemControlTransparentRevealBorderBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
     <!-- Resources for RadioButton.xaml -->
     <x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
     <StaticResource x:Key="RadioButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
index 7c132dd22f..600f66043b 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
@@ -178,6 +178,33 @@
     <SolidColorBrush x:Key="CheckBoxPressedBorderThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="CheckBoxPressedForegroundThemeBrush" Color="#FFFFFFFF" />
 
+    <!-- Resources for Calendar.xaml, CalendarButton.xaml, CalendarDayButton.xaml, CalendarItem.xaml -->
+    <StaticResource x:Key="CalendarViewFocusBorderBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewSelectedHoverBorderBrush" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
+    <StaticResource x:Key="CalendarViewSelectedPressedBorderBrush" ResourceKey="SystemControlHighlightListAccentHighBrush" />
+    <StaticResource x:Key="CalendarViewSelectedBorderBrush" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="CalendarViewHoverBorderBrush" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewPressedBorderBrush" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="CalendarViewTodayForeground" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
+    <StaticResource x:Key="CalendarViewBlackoutForeground" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewSelectedForeground" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewPressedForeground" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewOutOfScopeForeground" ResourceKey="SystemControlHyperlinkBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewOutOfScopeBackground" ResourceKey="SystemControlDisabledChromeMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemBackground" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <StaticResource x:Key="CalendarViewForeground" ResourceKey="SystemControlHyperlinkBaseMediumHighBrush" />
+    <StaticResource x:Key="CalendarViewBackground" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <StaticResource x:Key="CalendarViewBorderBrush" ResourceKey="SystemControlForegroundChromeMediumBrush" />
+    <StaticResource x:Key="CalendarViewWeekDayForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundPressed" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
+    <StaticResource x:Key="CalendarViewCalendarItemRevealBorderBrush" ResourceKey="SystemControlTransparentRevealBorderBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
+    <StaticResource x:Key="CalendarViewNavigationButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
     <!-- Resources for RadioButton.xaml -->
     <x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
     <StaticResource x:Key="RadioButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
diff --git a/src/Avalonia.Themes.Fluent/Calendar.xaml b/src/Avalonia.Themes.Fluent/Calendar.xaml
index 6bbee4ef17..2fbc705d83 100644
--- a/src/Avalonia.Themes.Fluent/Calendar.xaml
+++ b/src/Avalonia.Themes.Fluent/Calendar.xaml
@@ -7,11 +7,12 @@
 
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="Calendar">
-    <!--<Setter Property="Focusable" Value="False" />-->
-    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
-    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
-    <Setter Property="HeaderBackground" Value="{DynamicResource ThemeAccentBrush2}" />
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewForeground}" />
+    <Setter Property="Background" Value="{DynamicResource CalendarViewBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewBorderBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
         <StackPanel Name="Root"
@@ -28,4 +29,4 @@
       </ControlTemplate>
     </Setter>
   </Style>
-</Styles>
\ No newline at end of file
+</Styles>
diff --git a/src/Avalonia.Themes.Fluent/CalendarButton.xaml b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
index 3314534b3b..2ba4489204 100644
--- a/src/Avalonia.Themes.Fluent/CalendarButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
@@ -7,75 +7,99 @@
 
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="CalendarButton">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeBorderHighBrush}" />
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
-    <Setter Property="FontSize" Value="{DynamicResource FontSizeSmall}" />
-    <Setter Property="HorizontalContentAlignment" Value="Center" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="MinWidth" Value="37" />
-    <Setter Property="MinHeight" Value="38" />
-    <Setter Property="Focusable" Value="False"/>
+    <Setter Property="ClickMode" Value="Release"/>
+    <Setter Property="MinWidth" Value="40"/>
+    <Setter Property="MinHeight" Value="40"/>
+    <Setter Property="Margin" Value="1"/>
+    <Setter Property="Padding" Value="0,0,0,4"/>
+    <!--These are actually set on the CalendarView in WinUI-->
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewCalendarItemForeground}"/>
+    <Setter Property="Background" Value="{DynamicResource CalendarViewCalendarItemRevealBackground}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewCalendarItemRevealBorderBrush}"/>
+    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="FontSize" Value="20"/>
+    <Setter Property="ClipToBounds" Value="False"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid>
+        <Panel>
+          <Border Name="Root" Background="{TemplateBinding Background}"
+                  BorderThickness="0" CornerRadius="2" ClipToBounds="True">
 
-          <Rectangle Name="SelectedBackground"
-                     Opacity="0.75"
-                     Fill="{TemplateBinding Background}"/>
+            <ContentControl Name="Content"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Content="{TemplateBinding Content}"
+                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                  FontSize="{TemplateBinding FontSize}"
+                  Margin="{TemplateBinding Padding}"/>
 
-          <Rectangle Name="Background"
-                     Opacity="0.5"
-                     Fill="{TemplateBinding Background}"/>
+          </Border>
 
-          <!--Focusable="False"-->
-          <ContentControl Name="Content"
-                          Foreground="{TemplateBinding Foreground}"
-                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                          Content="{TemplateBinding Content}"
-                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                          FontSize="{TemplateBinding FontSize}"
-                          Margin="1,0,1,1"/>
+          <!-- Drawn Border should render on top of background to preserve the 1px
+                        margin between items-->
+          <Border Name="Border"
+                  BorderThickness="2"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  CornerRadius="2"/>
 
-          <Rectangle Name="FocusVisual"
-                     StrokeThickness="1"
-                     Stroke="{DynamicResource HighlightBrush}"
-                     IsHitTestVisible="False"/>
-
-        </Grid>
+          <Border Name="FocusVisual" BorderThickness="2"
+                     BorderBrush="{DynamicResource SystemControlHighlightBaseHighBrush}"
+                     IsHitTestVisible="False"
+                     Margin="-1"  CornerRadius="2"/>
+        </Panel>
       </ControlTemplate>
     </Setter>
   </Style>
-
-  <Style Selector="CalendarButton /template/ Rectangle#Background">
+  <!--<Style Selector="CalendarButton /template/ Border#FocusVisual">
     <Setter Property="IsVisible" Value="False"/>
+  </Style>-->
+
+  <Style Selector="CalendarButton:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewHoverBorderBrush}"/>
   </Style>
-  <Style Selector="CalendarButton:pointerover /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
-  <Style Selector="CalendarButton:pressed /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarButton:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewPressedBorderBrush}"/>
   </Style>
 
-  <Style Selector="CalendarButton /template/ Rectangle#SelectedBackground">
-    <Setter Property="IsVisible" Value="False"/>
+  <!-- Adjusted :selected to look like :today from DayItem -->
+  <Style Selector="CalendarButton:selected /template/ Border#Root">
+    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
   </Style>
-  <Style Selector="CalendarButton:selected /template/ Rectangle#SelectedBackground">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarButton:selected /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}"/>
   </Style>
-
-  <Style Selector="CalendarButton /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
+  <Style Selector="CalendarButton:selected:pointerover /template/ Border#Root">
+    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
   </Style>
-  <Style Selector="CalendarButton:inactive /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}"/>
+  <Style Selector="CalendarButton:selected:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark1}"/>
+  </Style>
+  <Style Selector="CalendarButton:selected:pressed /template/ Border#Root">
+    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
+  </Style>
+  <Style Selector="CalendarButton:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark2}"/>
   </Style>
 
+  <Style Selector="CalendarButton:selected /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}"/>
+    <Setter Property="FontWeight" Value="SemiBold"/>
+  </Style>
 
-  <Style Selector="CalendarButton /template/ Rectangle#FocusVisual">
-    <Setter Property="IsVisible" Value="False"/>
+  <!-- WinUI calls this OutOfFocus -->
+  <Style Selector="CalendarButton:inactive /template/ Border#Root">
+    <!-- These are probably set in code, but consistent -->
+    <Setter Property="Background" Value="{DynamicResource CalendarViewOutOfScopeBackground}"/>
   </Style>
-  <Style Selector="CalendarButton:btnfocused /template/ Rectangle#FocusVisual">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarButton:inactive /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewOutOfScopeForeground}"/>
   </Style>
+
+  <Style Selector="CalendarButton:blackout /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewBlackoutForeground}"/>
+  </Style>
+
+  <!--<Style Selector="CalendarButton:dayfocused /template/ Border#FocusVisual">
+            <Setter Property="IsVisible" Value="True"/>
+      </Style>-->
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
index 2d79e62a75..1e5953ab2d 100644
--- a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
@@ -7,110 +7,102 @@
 
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="CalendarDayButton">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
-    <Setter Property="FontSize" Value="{DynamicResource FontSizeSmall}" />
-    <Setter Property="HorizontalContentAlignment" Value="Center" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="MinWidth" Value="5" />
-    <Setter Property="MinHeight" Value="5" />
-    <Setter Property="Focusable" Value="False"/>
+    <Setter Property="ClickMode" Value="Release"/>
+    <Setter Property="MinWidth" Value="40"/>
+    <Setter Property="MinHeight" Value="40"/>
+    <Setter Property="Margin" Value="1"/>
+    <Setter Property="Padding" Value="0,0,0,4"/>
+    <!--These are actually set on the CalendarView in WinUI-->
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewCalendarItemForeground}"/>
+    <Setter Property="Background" Value="{DynamicResource CalendarViewCalendarItemRevealBackground}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewCalendarItemRevealBorderBrush}"/>
+    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="FontSize" Value="20"/>
+    <Setter Property="ClipToBounds" Value="False"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Panel Background="Transparent">
-
-          <Rectangle Name="TodayBackground"
-                     Fill="{DynamicResource HighlightBrush}"/>
-
-          <Rectangle Name="SelectedBackground"
-                     Opacity="0.75"
-                     Fill="{TemplateBinding Background}"/>
-
-          <Rectangle Name="Background"
-                     Opacity="0.5"
-                     Fill="{TemplateBinding Background}"/>
-
-          <ContentControl Name="Content"
-                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                          Content="{TemplateBinding Content}"
-                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                          FontSize="{TemplateBinding FontSize}"
-                          Margin="5,1,5,1"/>
-
-          <Path Name="BlackoutVisual"
-                Margin="3"
-                HorizontalAlignment="Stretch"
-                VerticalAlignment="Stretch"
-                RenderTransformOrigin="0.5,0.5"
-                Fill="{DynamicResource ThemeForegroundBrush}"
-                Stretch="Fill"
-                Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z" />
-          
-          <Rectangle Name="FocusVisual"
-                     StrokeThickness="1"
-                     Stroke="{DynamicResource HighlightBrush}"
-                     IsHitTestVisible="False"/>
-
+        <Panel>
+          <!-- To mimic WinUI SystemFocusVisual 
+                        Focus visual is drawn outside the bounds of the item
+                        -->
+          <Border Name="Root" Background="{TemplateBinding Background}"
+                  BorderThickness="0" CornerRadius="2" ClipToBounds="True">
+
+            <ContentControl Name="Content"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Content="{TemplateBinding Content}"
+                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                  FontSize="{TemplateBinding FontSize}"
+                  Margin="{TemplateBinding Padding}"/>
+
+          </Border>
+
+          <!-- Drawn Border should render on top of background to preserve the 1px
+                        margin between items-->
+          <Border Name="Border"
+                  BorderThickness="2"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  CornerRadius="2"/>
+
+          <!--Removed for now...WinUI doesn't have selection follow focus, and it leads to
+              an undesired effect with both borders displayed
+                <Border Name="FocusVisual" BorderThickness="2"
+                            BorderBrush="{DynamicResource SystemControlHighlightBaseHighBrush}"
+                            IsHitTestVisible="False"
+                            Margin="-1"  CornerRadius="2"/>-->
         </Panel>
       </ControlTemplate>
     </Setter>
   </Style>
-
-  <Style Selector="CalendarDayButton /template/ Rectangle#Background">
+  <!--<Style Selector="CalendarDayButton /template/ Border#FocusVisual">
     <Setter Property="IsVisible" Value="False"/>
-  </Style>
-  <Style Selector="CalendarDayButton:pointerover /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
-  <Style Selector="CalendarDayButton:pressed /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
+  </Style>-->
 
-  <Style Selector="CalendarDayButton /template/ Rectangle#SelectedBackground">
-    <Setter Property="IsVisible" Value="False"/>
+  <Style Selector="CalendarDayButton:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewHoverBorderBrush}"/>
   </Style>
-  <Style Selector="CalendarDayButton:selected /template/ Rectangle#SelectedBackground">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarDayButton:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewPressedBorderBrush}"/>
   </Style>
-
-  <Style Selector="CalendarDayButton /template/ ContentControl#Content">
-    <Setter Property="Opacity" Value="1"/>
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
+  <Style Selector="CalendarDayButton:selected /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}"/>
   </Style>
-  <Style Selector="CalendarDayButton:disabled /template/ Rectangle#Background">
-    <Setter Property="IsVisible" Value="False"/>
+  <Style Selector="CalendarDayButton:selected:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedHoverBorderBrush}"/>
   </Style>
-  <Style Selector="CalendarDayButton:disabled /template/ ContentControl#Content">
-    <Setter Property="Opacity" Value="0.3"/>
+  <Style Selector="CalendarDayButton:selected:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedPressedBorderBrush}"/>
   </Style>
 
-  <Style Selector="CalendarDayButton /template/ Rectangle#FocusVisual">
-    <Setter Property="IsVisible" Value="False"/>
+  <Style Selector="CalendarDayButton:today /template/ Border#Root">
+    <!-- These are probably set in code, but consistent -->
+    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
   </Style>
-  <Style Selector="CalendarDayButton:dayfocused /template/ Rectangle#FocusVisual">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarDayButton:today:pointerover /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark1}"/>
   </Style>
-
-  <Style Selector="CalendarDayButton /template/ Rectangle#TodayBackground">
-    <Setter Property="IsVisible" Value="False"/>
+  <Style Selector="CalendarDayButton:today:pressed /template/ Border#Border">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark2}"/>
   </Style>
-  <Style Selector="CalendarDayButton:today /template/ Rectangle#TodayBackground">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="CalendarDayButton:today /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}"/>
+    <Setter Property="FontWeight" Value="SemiBold"/>
   </Style>
 
-
-  <Style Selector="CalendarDayButton:inactive /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}"/>
+  <!-- WinUI calls this OutOfFocus -->
+  <Style Selector="CalendarDayButton:inactive /template/ Border#Root">
+    <Setter Property="Background" Value="{DynamicResource CalendarViewOutOfScopeBackground}"/>
   </Style>
-  <Style Selector="CalendarDayButton:today /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource ThemeControlLowBrush}"/>
+  <Style Selector="CalendarDayButton:inactive /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewOutOfScopeForeground}"/>
   </Style>
 
-  <Style Selector="CalendarDayButton /template/ Path#BlackoutVisual">
-    <Setter Property="Opacity" Value="0"/>
+  <Style Selector="CalendarDayButton:blackout /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewBlackoutForeground}"/>
   </Style>
-  <Style Selector="CalendarDayButton:blackout /template/ Path#BlackoutVisual">
-    <Setter Property="Opacity" Value="0.3"/>
-  </Style>  
 
+  <!--<Style Selector="CalendarDayButton:dayfocused /template/ Border#FocusVisual">
+            <Setter Property="IsVisible" Value="True"/>
+      </Style>-->
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/CalendarItem.xaml b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
index dfd89ed82f..41f3fcbc1f 100644
--- a/src/Avalonia.Themes.Fluent/CalendarItem.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
@@ -8,176 +8,124 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Style Selector="CalendarItem">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Panel>
-          <Border BorderThickness="{TemplateBinding BorderThickness}"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  Background="{TemplateBinding Background}"
-                  Margin="0,2,0,2"
-                  CornerRadius="1">
-
-            <Border CornerRadius="1"
-                    BorderBrush="{DynamicResource ThemeBackgroundBrush}"
-                    BorderThickness="2">
-              <Grid>
-                <Grid.RowDefinitions>
-                  <RowDefinition Height="Auto" />
-                  <RowDefinition Height="*" />
-                </Grid.RowDefinitions>
-                <Grid.ColumnDefinitions>
-                  <ColumnDefinition Width="Auto" />
-                  <ColumnDefinition Width="*" />
-                  <ColumnDefinition Width="Auto" />
-                </Grid.ColumnDefinitions>
-
-                <Grid.Styles>
-                  <Style Selector="Button.CalendarHeader">
-                    <Setter Property="Cursor" Value="Hand"/>
-                    <Setter Property="Background" Value="Transparent"/>
-                    <Setter Property="BorderThickness" Value="0"/>
-                  </Style>
-                    <Style Selector="Button.CalendarHeader:pressed  /template/ ContentPresenter">
-                    <Setter Property="Background" Value="Transparent"/>
-                  </Style>
-
-                  <Style Selector="Button.CalendarNavigation">
-                    <Setter Property="Height" Value="20"/>
-                    <Setter Property="Width" Value="28"/>
-                  </Style>
-                  <Style Selector="Button.CalendarNavigation > Path">
-                    <Setter Property="Fill" Value="{DynamicResource ThemeForegroundBrush}"/>
-                  </Style>
-                  <Style Selector="Button.CalendarNavigation:pointerover > Path">
-                    <Setter Property="Fill" Value="{DynamicResource HighlightBrush}"/>
-                  </Style>
-
-                  <Style Selector="Button#HeaderButton:pointerover">
-                    <Setter Property="Foreground" Value="{DynamicResource HighlightBrush}"/>
-                  </Style>
-                </Grid.Styles>
-
-                <Rectangle Grid.ColumnSpan="3"
-                           Fill="{TemplateBinding HeaderBackground}"
-                           Stretch="Fill"
-                           VerticalAlignment="Top"
-                           Height="22"/>
-
-                <Button Name="PreviousButton"
-                        Classes="CalendarHeader CalendarNavigation"
-                        IsVisible="False"
-                        HorizontalAlignment="Left">
-
-                  <Path Margin="14,-6,0,0"
-                        Height="10"
-                        Width="6"
-                        VerticalAlignment="Center"
-                        HorizontalAlignment="Left"
-                        Stretch="Fill"
-                        Data="M288.75,232.25 L288.75,240.625 L283,236.625 z" />
-                  
-                </Button>
-                
-                <Button Name="HeaderButton"
-                        Classes="CalendarHeader"
-                        Grid.Column="1"
-                        FontWeight="Bold"
-                        FontSize="10.5"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center" 
-                        Padding="1,5,1,9"/>
-
-                <Button Name="NextButton"
-                        Classes="CalendarHeader CalendarNavigation"
-                        Grid.Column="2"
-                        IsVisible="False"
-                        HorizontalAlignment="Right" >
-
-                  <Path Margin="0,-6,14,0"
-                        Height="10"
-                        Width="6"
-                        Stretch="Fill"
-                        VerticalAlignment="Center"
-                        HorizontalAlignment="Right"
-                        Data="M282.875,231.875 L282.875,240.375 L288.625,236 z" />
-                  
-                </Button>
-
-                <Grid Name="MonthView"
-                      Grid.Row="1"
-                      Grid.ColumnSpan="3"
-                      IsVisible="False"
-                      Margin="6,-1,6,6">
-                  <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                  </Grid.RowDefinitions>
-                  <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                  </Grid.ColumnDefinitions>
-                </Grid>
-
-                <Grid Name="YearView"
-                      Grid.Row="1"
-                      Grid.ColumnSpan="3"
-                      IsVisible="False"
-                      Margin="6,-3,7,6">
-                  <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                  </Grid.RowDefinitions>
-                  <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="Auto" />
-                  </Grid.ColumnDefinitions>
-                </Grid>
-
-              </Grid>
-            </Border>
-          </Border>
-
-
-          <Rectangle Name="DisabledVisual"
-                     Stretch="Fill"
-                     Fill="{DynamicResource ThemeControlLowBrush}"
-                     Opacity="{DynamicResource ThemeDisabledOpacity}"
-                     Margin="0,2,0,2" />
-
-        </Panel>
-      </ControlTemplate>
-    </Setter>
     <Setter Property="DayTitleTemplate">
       <Template>
-        <TextBlock FontWeight="Bold"
-                   FontSize="9.5"
-                   Margin="0,4,0,4"
+        <TextBlock Text="{Binding}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
-                   Text="{Binding}" />
+                   FontSize="12"/>
       </Template>
-
+    </Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderThickness="{TemplateBinding BorderThickness}"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                CornerRadius="2">
+          <Border.Styles>
+            <Style Selector="Button.CalendarHeader">
+              <Setter Property="HorizontalAlignment" Value="Stretch" />
+              <Setter Property="VerticalAlignment" Value="Stretch" />
+              <Setter Property="FontSize" Value="20" />
+              <Setter Property="Background" Value="{DynamicResource CalendarViewNavigationButtonBackground}"/>
+              <Setter Property="Template">
+                <ControlTemplate>
+                  <!-- HCA was changed here to ensure nav arrows display correctly -->
+                  <ContentPresenter Name="Text" Background="{TemplateBinding Background}"
+                                    BorderBrush="{DynamicResource CalendarViewNavigationButtonBorderBrush}"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    Content="{TemplateBinding Content}"
+                                    Margin="{TemplateBinding Padding}"
+                                    HorizontalContentAlignment="Stretch"
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                </ControlTemplate>
+              </Setter>
+            </Style>
+            <Style Selector="Button.CalendarNavigation > Path">
+              <Setter Property="Stroke" Value="{DynamicResource CalendarViewForeground}"/>
+            </Style>
+            <Style Selector="Button.CalendarNavigation:pointerover > Path">
+              <Setter Property="Stroke" Value="{DynamicResource CalendarViewNavigationButtonForegroundPointerOver}"/>
+            </Style>
+            <Style Selector="Button.CalendarNavigation:pressed > Path">
+              <Setter Property="Stroke" Value="{DynamicResource CalendarViewNavigationButtonForegroundPressed}"/>
+            </Style>
+            <Style Selector="Button.CalendarHeader:pointerover /template/ ContentPresenter#Text">
+              <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewNavigationButtonBorderBrushPointerOver}" />
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource CalendarViewNavigationButtonForegroundPointerOver}"/>
+              <!-- Prevent base button template:pointerover from overriding background here -->
+              <Setter Property="Background" Value="{DynamicResource CalendarViewNavigationButtonBackground}"/>
+            </Style>
+            <Style Selector="Button.CalendarHeader:pressed /template/ ContentPresenter#Text">
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource CalendarViewNavigationButtonForegroundPressed}"/>
+              <!-- Prevent base button template:pointerover from overriding background here -->
+              <Setter Property="Background" Value="{DynamicResource CalendarViewNavigationButtonBackground}"/>
+            </Style>
+          </Border.Styles>
+          <!--  To keep calendar from resizing when switching DisplayMode
+                In WinUI Min-Width from TemplateSettings
+                basically...MinWidth of DayItem = 40, 40 * 7 = 280 + margins/padding = ~294
+                Viewport height is set from # of rows displayed (2-8) in Month mode, = ~290 for 6 weeks (+ day names)
+                -->
+          <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" RowDefinitions="40,*" MinWidth="294">
+            <Grid ColumnDefinitions="5*,*,*">
+              <Button Name="HeaderButton" Classes="CalendarHeader" Foreground="{TemplateBinding Foreground}" Padding="12,0,0,0" HorizontalContentAlignment="Left" />
+              <Button Name="PreviousButton" Grid.Column="1" Classes="CalendarHeader CalendarNavigation" Foreground="{TemplateBinding Foreground}" Padding="1" HorizontalContentAlignment="Left">
+                <!--Path mimics Segoe MDL2 Assets font glyph used in WinUI-->
+                <Path StrokeThickness="1.5" Data="M 0,9 L 9,0 L 18,9"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
+              </Button>
+              <Button Name="NextButton" Grid.Column="2" Classes="CalendarHeader CalendarNavigation" Foreground="{TemplateBinding Foreground}" Padding="1" HorizontalContentAlignment="Left">
+                <!--Path mimics Segoe MDL2 Assets font glyph used in WinUI-->
+                <Path StrokeThickness="1.5" Data="M 0,0 L 9,9 L 18,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+              </Button>
+            </Grid>
+            <Border Name="BackgroundLayer" Background="{TemplateBinding BorderBrush}" Grid.Row="1" />
+            <Grid Name="MonthView" Grid.Row="1" IsVisible="False" MinHeight="290" >
+              <Grid.RowDefinitions>
+                <!--This should always be the week day names??-->
+                <RowDefinition Height="38" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+              </Grid.RowDefinitions>
+              <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+              </Grid.ColumnDefinitions>
+            </Grid>
+            <Grid Name="YearView" MinHeight="290"
+                    Grid.Row="1" IsVisible="False">
+              <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+              </Grid.RowDefinitions>
+              <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="*" />
+              </Grid.ColumnDefinitions>
+            </Grid>
+
+          </Grid>
+
+        </Border>
+      </ControlTemplate>
     </Setter>
   </Style>
 
-  <Style Selector="CalendarItem /template/ Rectangle#DisabledVisual">
-    <Setter Property="IsVisible" Value="False"/>
-  </Style>
-  <Style Selector="CalendarItem:calendardisabled /template/ Rectangle#DisabledVisual">
-    <Setter Property="IsVisible" Value="True"/>
+  <!-- BackgroundLayer shouldn't show in the week day names row-->
+  <Style Selector="Calendar[DisplayMode=Month] CalendarItem /template/ Border#BackgroundLayer">
+    <Setter Property="Margin" Value="0,38,0,0"/>
   </Style>
   
 </Styles>

From 5065e6c072020860312c01053365105759c5e7eb Mon Sep 17 00:00:00 2001
From: amwx <armccormickwx@gmail.com>
Date: Fri, 29 May 2020 04:24:07 -0500
Subject: [PATCH 04/11] Fluent Calendar Style

---
 src/Avalonia.Themes.Fluent/Calendar.xaml          |  2 +-
 src/Avalonia.Themes.Fluent/CalendarButton.xaml    |  9 ++++++---
 src/Avalonia.Themes.Fluent/CalendarDayButton.xaml | 14 ++++++--------
 src/Avalonia.Themes.Fluent/CalendarItem.xaml      |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/Calendar.xaml b/src/Avalonia.Themes.Fluent/Calendar.xaml
index 2fbc705d83..6ae334dbae 100644
--- a/src/Avalonia.Themes.Fluent/Calendar.xaml
+++ b/src/Avalonia.Themes.Fluent/Calendar.xaml
@@ -5,7 +5,7 @@
 // All other rights reserved.
 -->
 
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui">  
   <Style Selector="Calendar">
     <Setter Property="Foreground" Value="{DynamicResource CalendarViewForeground}" />
     <Setter Property="Background" Value="{DynamicResource CalendarViewBackground}" />
diff --git a/src/Avalonia.Themes.Fluent/CalendarButton.xaml b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
index 2ba4489204..bd5b62a7f7 100644
--- a/src/Avalonia.Themes.Fluent/CalendarButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
@@ -22,8 +22,9 @@
     <Setter Property="Template">
       <ControlTemplate>
         <Panel>
+          <!-- To mimic WinUI SystemFocusVisual, Focus visual is drawn outside the bounds of the item -->
           <Border Name="Root" Background="{TemplateBinding Background}"
-                  BorderThickness="0" CornerRadius="2" ClipToBounds="True">
+                  BorderThickness="0" CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
 
             <ContentControl Name="Content"
                   ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -40,12 +41,14 @@
           <Border Name="Border"
                   BorderThickness="2"
                   BorderBrush="{TemplateBinding BorderBrush}"
-                  CornerRadius="2"/>
+                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
 
+          <!--Removed for now...WinUI doesn't have selection follow focus, and only uses 
+              focus visual w/ keyboard focus
           <Border Name="FocusVisual" BorderThickness="2"
                      BorderBrush="{DynamicResource SystemControlHighlightBaseHighBrush}"
                      IsHitTestVisible="False"
-                     Margin="-1"  CornerRadius="2"/>
+                     Margin="-2"  CornerRadius="{DynamicResource ControlCornerRadius}"/>-->
         </Panel>
       </ControlTemplate>
     </Setter>
diff --git a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
index 1e5953ab2d..4f6f5951d2 100644
--- a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
@@ -22,11 +22,9 @@
     <Setter Property="Template">
       <ControlTemplate>
         <Panel>
-          <!-- To mimic WinUI SystemFocusVisual 
-                        Focus visual is drawn outside the bounds of the item
-                        -->
+          <!-- To mimic WinUI SystemFocusVisual, Focus visual is drawn outside the bounds of the item -->
           <Border Name="Root" Background="{TemplateBinding Background}"
-                  BorderThickness="0" CornerRadius="2" ClipToBounds="True">
+                  BorderThickness="0" CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
 
             <ContentControl Name="Content"
                   ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -43,14 +41,14 @@
           <Border Name="Border"
                   BorderThickness="2"
                   BorderBrush="{TemplateBinding BorderBrush}"
-                  CornerRadius="2"/>
+                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
 
-          <!--Removed for now...WinUI doesn't have selection follow focus, and it leads to
-              an undesired effect with both borders displayed
+          <!--Removed for now...WinUI doesn't have selection follow focus, and only uses 
+              focus visual w/ keyboard focus
                 <Border Name="FocusVisual" BorderThickness="2"
                             BorderBrush="{DynamicResource SystemControlHighlightBaseHighBrush}"
                             IsHitTestVisible="False"
-                            Margin="-1"  CornerRadius="2"/>-->
+                            Margin="-2"  CornerRadius="2"/>-->
         </Panel>
       </ControlTemplate>
     </Setter>
diff --git a/src/Avalonia.Themes.Fluent/CalendarItem.xaml b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
index 41f3fcbc1f..7e17ee7075 100644
--- a/src/Avalonia.Themes.Fluent/CalendarItem.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
@@ -21,7 +21,7 @@
         <Border BorderThickness="{TemplateBinding BorderThickness}"
                 Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
-                CornerRadius="2">
+                CornerRadius="{DynamicResource ControlCornerRadius}">
           <Border.Styles>
             <Style Selector="Button.CalendarHeader">
               <Setter Property="HorizontalAlignment" Value="Stretch" />

From ec4361759c88289984bc98b57ade3f382c8b9b4a Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Fri, 29 May 2020 20:37:18 -0300
Subject: [PATCH 05/11] add some missing resources for calendar

---
 src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml  | 4 ++++
 src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
index 57216c008a..1d88838230 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
@@ -31,6 +31,10 @@
     <Color x:Key="SystemRevealListLowColor">#FF1D1D1D</Color>
     <Color x:Key="SystemRevealListMediumColor">#FF333333</Color>
     <!--<AcrylicBrush x:Key="SystemControlAcrylicWindowBrush" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{ThemeResource SystemChromeMediumColor}" />-->
+    <!--<RevealBackgroundBrush x:Key="SystemControlTransparentRevealBackgroundBrush" TargetTheme="Dark" Color="Transparent" FallbackColor="Transparent" />-->
+    <SolidColorBrush x:Key="SystemControlTransparentRevealBackgroundBrush" Color="Transparent" />
+    <!--<RevealBorderBrush x:Key="SystemControlTransparentRevealBorderBrush" TargetTheme="Dark" Color="Transparent" FallbackColor="Transparent" />-->
+    <SolidColorBrush x:Key="SystemControlTransparentRevealBorderBrush" Color="Transparent" />
     
     <!-- Override system shape defaults -->
     <CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
index bf874ce3f1..6d2e3c2091 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
@@ -31,6 +31,10 @@
     <Color x:Key="SystemRevealListLowColor">#FFE6E6E6</Color>
     <Color x:Key="SystemRevealListMediumColor">#FFCCCCCC</Color>
     <!--<AcrylicBrush x:Key="SystemControlAcrylicWindowBrush" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{ThemeResource SystemChromeMediumColor}" />-->
+    <!--<RevealBackgroundBrush x:Key="SystemControlTransparentRevealBackgroundBrush" TargetTheme="Dark" Color="Transparent" FallbackColor="Transparent" />-->
+    <SolidColorBrush x:Key="SystemControlTransparentRevealBackgroundBrush" Color="Transparent" />
+    <!--<RevealBorderBrush x:Key="SystemControlTransparentRevealBorderBrush" TargetTheme="Dark" Color="Transparent" FallbackColor="Transparent" />-->
+    <SolidColorBrush x:Key="SystemControlTransparentRevealBorderBrush" Color="Transparent" />
     
     <!-- Override system shape defaults -->
     <CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>

From 9f26c27229fdfc730ac0d58b1d63e8e078f83f28 Mon Sep 17 00:00:00 2001
From: amwx <armccormickwx@gmail.com>
Date: Fri, 29 May 2020 19:48:37 -0500
Subject: [PATCH 06/11] Fix Calendar buttons

---
 .../CalendarButton.xaml                       | 27 ++++++++++++++-----
 .../CalendarDayButton.xaml                    | 22 ++++++++++-----
 src/Avalonia.Themes.Fluent/CalendarItem.xaml  |  3 +++
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/CalendarButton.xaml b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
index bd5b62a7f7..87082ef21e 100644
--- a/src/Avalonia.Themes.Fluent/CalendarButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarButton.xaml
@@ -19,12 +19,14 @@
     <Setter Property="BorderThickness" Value="2"/>
     <Setter Property="FontSize" Value="20"/>
     <Setter Property="ClipToBounds" Value="False"/>
+    <Setter Property="HorizontalContentAlignment" Value="Center"/>
+    <Setter Property="VerticalContentAlignment" Value="Center"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Panel>
           <!-- To mimic WinUI SystemFocusVisual, Focus visual is drawn outside the bounds of the item -->
           <Border Name="Root" Background="{TemplateBinding Background}"
-                  BorderThickness="0" CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
+                  BorderThickness="0" ClipToBounds="True">
 
             <ContentControl Name="Content"
                   ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -40,8 +42,7 @@
                         margin between items-->
           <Border Name="Border"
                   BorderThickness="2"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
+                  BorderBrush="{TemplateBinding BorderBrush}"/>
 
           <!--Removed for now...WinUI doesn't have selection follow focus, and only uses 
               focus visual w/ keyboard focus
@@ -72,16 +73,24 @@
     <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}"/>
   </Style>
   <Style Selector="CalendarButton:selected:pointerover /template/ Border#Root">
-    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
+    <Setter Property="Background">
+      <SolidColorBrush Color="{DynamicResource SystemAccentColor}"/>
+    </Setter>
   </Style>
   <Style Selector="CalendarButton:selected:pointerover /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark1}"/>
+    <Setter Property="BorderBrush">
+      <SolidColorBrush Color="{DynamicResource SystemAccentColorDark1}"/>
+    </Setter>
   </Style>
   <Style Selector="CalendarButton:selected:pressed /template/ Border#Root">
-    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
+    <Setter Property="Background">
+      <SolidColorBrush Color="{DynamicResource SystemAccentColor}"/>
+    </Setter>
   </Style>
   <Style Selector="CalendarButton:pressed /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark2}"/>
+    <Setter Property="BorderBrush">
+      <SolidColorBrush Color="{DynamicResource SystemAccentColorDark2}"/>
+    </Setter>
   </Style>
 
   <Style Selector="CalendarButton:selected /template/ ContentControl#Content">
@@ -105,4 +114,8 @@
   <!--<Style Selector="CalendarButton:dayfocused /template/ Border#FocusVisual">
             <Setter Property="IsVisible" Value="True"/>
       </Style>-->
+
+  <Style Selector="CalendarDayButton:disabled /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewWeekDayForegroundDisabled}"/>
+  </Style>
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
index 4f6f5951d2..ff72044c93 100644
--- a/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarDayButton.xaml
@@ -19,12 +19,14 @@
     <Setter Property="BorderThickness" Value="2"/>
     <Setter Property="FontSize" Value="20"/>
     <Setter Property="ClipToBounds" Value="False"/>
+    <Setter Property="HorizontalContentAlignment" Value="Center"/>
+    <Setter Property="VerticalContentAlignment" Value="Center"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Panel>
           <!-- To mimic WinUI SystemFocusVisual, Focus visual is drawn outside the bounds of the item -->
           <Border Name="Root" Background="{TemplateBinding Background}"
-                  BorderThickness="0" CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
+                  BorderThickness="0" ClipToBounds="True">
 
             <ContentControl Name="Content"
                   ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -40,8 +42,7 @@
                         margin between items-->
           <Border Name="Border"
                   BorderThickness="2"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
+                  BorderBrush="{TemplateBinding BorderBrush}"/>
 
           <!--Removed for now...WinUI doesn't have selection follow focus, and only uses 
               focus visual w/ keyboard focus
@@ -75,13 +76,19 @@
 
   <Style Selector="CalendarDayButton:today /template/ Border#Root">
     <!-- These are probably set in code, but consistent -->
-    <Setter Property="Background" Value="{DynamicResource SystemAccentBrush}"/>
+    <Setter Property="Background">
+      <SolidColorBrush Color="{DynamicResource SystemAccentColor}"/>
+    </Setter>
   </Style>
   <Style Selector="CalendarDayButton:today:pointerover /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark1}"/>
+    <Setter Property="BorderBrush">
+      <SolidColorBrush Color="{DynamicResource SystemAccentColorDark1}"/>
+    </Setter>
   </Style>
   <Style Selector="CalendarDayButton:today:pressed /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentBrushDark2}"/>
+    <Setter Property="BorderBrush">
+      <SolidColorBrush Color="{DynamicResource SystemAccentColorDark2}"/>
+    </Setter>
   </Style>
   <Style Selector="CalendarDayButton:today /template/ ContentControl#Content">
     <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}"/>
@@ -103,4 +110,7 @@
   <!--<Style Selector="CalendarDayButton:dayfocused /template/ Border#FocusVisual">
             <Setter Property="IsVisible" Value="True"/>
       </Style>-->
+  <Style Selector="CalendarDayButton:disabled /template/ ContentControl#Content">
+    <Setter Property="Foreground" Value="{DynamicResource CalendarViewWeekDayForegroundDisabled}"/>
+  </Style>
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/CalendarItem.xaml b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
index 7e17ee7075..df17da84dc 100644
--- a/src/Avalonia.Themes.Fluent/CalendarItem.xaml
+++ b/src/Avalonia.Themes.Fluent/CalendarItem.xaml
@@ -61,6 +61,9 @@
               <!-- Prevent base button template:pointerover from overriding background here -->
               <Setter Property="Background" Value="{DynamicResource CalendarViewNavigationButtonBackground}"/>
             </Style>
+            <Style Selector="Button.CalendarHeader:disabled /template/ ContentPresenter">
+              <Setter Property="TextBlock.Foreground" Value="{DynamicResource CalendarViewWeekDayForegroundDisabled}"/>
+            </Style>
           </Border.Styles>
           <!--  To keep calendar from resizing when switching DisplayMode
                 In WinUI Min-Width from TemplateSettings

From 9d5345e621534075273619ebda6f98bf98caad0f Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Sun, 31 May 2020 18:15:27 +0800
Subject: [PATCH 07/11] Import Fluent Slider

---
 samples/ControlCatalog/Pages/SliderPage.xaml  |   2 +
 src/Avalonia.Controls/Primitives/Track.cs     |  14 +-
 src/Avalonia.Controls/Slider.cs               | 155 ++++---
 src/Avalonia.Controls/TickBar.cs              | 416 ++++++++++++++++++
 .../Accents/FluentBaseDark.xaml               |  27 +-
 .../Accents/FluentBaseLight.xaml              |  27 +-
 .../Accents/FluentControlResourcesDark.xaml   |  56 ++-
 .../Accents/FluentControlResourcesLight.xaml  |  56 ++-
 src/Avalonia.Themes.Fluent/Slider.xaml        | 323 ++++++++++----
 9 files changed, 938 insertions(+), 138 deletions(-)
 create mode 100644 src/Avalonia.Controls/TickBar.cs

diff --git a/samples/ControlCatalog/Pages/SliderPage.xaml b/samples/ControlCatalog/Pages/SliderPage.xaml
index 58f7b881fe..c6f5521e60 100644
--- a/samples/ControlCatalog/Pages/SliderPage.xaml
+++ b/samples/ControlCatalog/Pages/SliderPage.xaml
@@ -9,12 +9,14 @@
       <Slider Value="0"
               Minimum="0"
               Maximum="100"
+              TickFrequency="10"
               Width="300"/>
       <Slider Value="0"
               Minimum="0"
               Maximum="100"
               Orientation="Vertical"
               IsSnapToTickEnabled="True"
+              TickPlacement="Outside"
               TickFrequency="10"
               Height="300"/>
     </StackPanel>
diff --git a/src/Avalonia.Controls/Primitives/Track.cs b/src/Avalonia.Controls/Primitives/Track.cs
index e104a8a664..1db47a13e7 100644
--- a/src/Avalonia.Controls/Primitives/Track.cs
+++ b/src/Avalonia.Controls/Primitives/Track.cs
@@ -41,13 +41,16 @@ namespace Avalonia.Controls.Primitives
         public static readonly StyledProperty<bool> IsDirectionReversedProperty =
             AvaloniaProperty.Register<Track, bool>(nameof(IsDirectionReversed));
 
+        public static readonly StyledProperty<bool> IgnoreThumbDragProperty =
+            AvaloniaProperty.Register<Track, bool>(nameof(IsThumbDragHandled));
+
         private double _minimum;
         private double _maximum = 100.0;
         private double _value;
 
         static Track()
         {
-            ThumbProperty.Changed.AddClassHandler<Track>((x,e) => x.ThumbChanged(e));
+            ThumbProperty.Changed.AddClassHandler<Track>((x, e) => x.ThumbChanged(e));
             IncreaseButtonProperty.Changed.AddClassHandler<Track>((x, e) => x.ButtonChanged(e));
             DecreaseButtonProperty.Changed.AddClassHandler<Track>((x, e) => x.ButtonChanged(e));
             AffectsArrange<Track>(MinimumProperty, MaximumProperty, ValueProperty, OrientationProperty);
@@ -113,6 +116,12 @@ namespace Avalonia.Controls.Primitives
             set { SetValue(IsDirectionReversedProperty, value); }
         }
 
+        public bool IsThumbDragHandled
+        {
+            get { return GetValue(IgnoreThumbDragProperty); }
+            set { SetValue(IgnoreThumbDragProperty, value); }
+        }
+
         private double ThumbCenterOffset { get; set; }
         private double Density { get; set; }
 
@@ -422,6 +431,9 @@ namespace Avalonia.Controls.Primitives
 
         private void ThumbDragged(object sender, VectorEventArgs e)
         {
+            if (IsThumbDragHandled)
+                return;
+                
             Value = MathUtilities.Clamp(
                 Value + ValueFromDistance(e.Vector.X, e.Vector.Y),
                 Minimum,
diff --git a/src/Avalonia.Controls/Slider.cs b/src/Avalonia.Controls/Slider.cs
index e92c8faf20..de15685e4d 100644
--- a/src/Avalonia.Controls/Slider.cs
+++ b/src/Avalonia.Controls/Slider.cs
@@ -1,12 +1,40 @@
 using System;
+using Avalonia.Controls.Mixins;
 using Avalonia.Controls.Primitives;
-using Avalonia.Data;
 using Avalonia.Input;
 using Avalonia.Interactivity;
 using Avalonia.Layout;
+using Avalonia.Utilities;
 
 namespace Avalonia.Controls
 {
+
+    /// <summary>
+    /// Enum which describes how to position the ticks in a <see cref="Slider"/>.
+    /// </summary>
+    public enum TickPlacement
+    {
+        /// <summary>
+        /// No tick marks will appear.
+        /// </summary>
+        None,
+
+        /// <summary>
+        /// Tick marks  will appear above the track for a horizontal <see cref="Slider"/>, or to the left of the track for a vertical <see cref="Slider"/>.
+        /// </summary>
+        TopLeft,
+
+        /// <summary>
+        /// Tick marks will appear below the track for a horizontal <see cref="Slider"/>, or to the right of the track for a vertical <see cref="Slider"/>.
+        /// </summary>
+        BottomRight,
+
+        /// <summary>
+        /// Tick marks appear on both sides of either a horizontal or vertical <see cref="Slider"/>.
+        /// </summary>
+        Outside
+    }
+
     /// <summary>
     /// A control that lets the user select from a range of values by moving a Thumb control along a Track.
     /// </summary>
@@ -30,19 +58,31 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<double> TickFrequencyProperty =
             AvaloniaProperty.Register<Slider, double>(nameof(TickFrequency), 0.0);
 
+        /// <summary>
+        /// Defines the <see cref="TickPlacement"/> property.
+        /// </summary>
+        public static readonly StyledProperty<TickPlacement> TickPlacementProperty =
+            AvaloniaProperty.Register<TickBar, TickPlacement>(nameof(TickPlacement), 0d);
+
         // Slider required parts
+        private bool _isDragging = false;
         private Track _track;
         private Button _decreaseButton;
         private Button _increaseButton;
+        private IDisposable _decreaseButtonPressDispose;
+        private IDisposable _decreaseButtonReleaseDispose;
+        private IDisposable _increaseButtonSubscription;
+        private IDisposable _increaseButtonReleaseDispose;
+        private IDisposable _pointerMovedDispose;
 
         /// <summary>
         /// Initializes static members of the <see cref="Slider"/> class. 
         /// </summary>
         static Slider()
         {
+            PressedMixin.Attach<Slider>();
             OrientationProperty.OverrideDefaultValue(typeof(Slider), Orientation.Horizontal);
             Thumb.DragStartedEvent.AddClassHandler<Slider>((x, e) => x.OnThumbDragStarted(e), RoutingStrategies.Bubble);
-            Thumb.DragDeltaEvent.AddClassHandler<Slider>((x, e) => x.OnThumbDragDelta(e), RoutingStrategies.Bubble);
             Thumb.DragCompletedEvent.AddClassHandler<Slider>((x, e) => x.OnThumbDragCompleted(e), RoutingStrategies.Bubble);
         }
 
@@ -81,57 +121,83 @@ namespace Avalonia.Controls
             set { SetValue(TickFrequencyProperty, value); }
         }
 
+        /// <summary>
+        /// Gets or sets a value that indicates where to draw 
+        /// tick marks in relation to the track.
+        /// </summary>
+        public TickPlacement TickPlacement
+        {
+            get { return GetValue(TickPlacementProperty); }
+            set { SetValue(TickPlacementProperty, value); }
+        }
+
         /// <inheritdoc/>
         protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
         {
-            if (_decreaseButton != null)
-            {
-                _decreaseButton.Click -= DecreaseClick;
-            }
-
-            if (_increaseButton != null)
-            {
-                _increaseButton.Click -= IncreaseClick;
-            }
+            _decreaseButtonPressDispose?.Dispose();
+            _decreaseButtonReleaseDispose?.Dispose();
+            _increaseButtonSubscription?.Dispose();
+            _increaseButtonReleaseDispose?.Dispose();
+            _pointerMovedDispose?.Dispose();
 
             _decreaseButton = e.NameScope.Find<Button>("PART_DecreaseButton");
             _track = e.NameScope.Find<Track>("PART_Track");
             _increaseButton = e.NameScope.Find<Button>("PART_IncreaseButton");
 
+            if (_track != null)
+            {
+                _track.IsThumbDragHandled = true;
+            }
+
             if (_decreaseButton != null)
             {
-                _decreaseButton.Click += DecreaseClick;
+                _decreaseButtonPressDispose = _decreaseButton.AddDisposableHandler(PointerPressedEvent, TrackPressed, RoutingStrategies.Tunnel);
+                _decreaseButtonReleaseDispose = _decreaseButton.AddDisposableHandler(PointerReleasedEvent, TrackReleased, RoutingStrategies.Tunnel);
             }
 
             if (_increaseButton != null)
             {
-                _increaseButton.Click += IncreaseClick;
+                _increaseButtonSubscription = _increaseButton.AddDisposableHandler(PointerPressedEvent, TrackPressed, RoutingStrategies.Tunnel);
+                _increaseButtonReleaseDispose = _increaseButton.AddDisposableHandler(PointerReleasedEvent, TrackReleased, RoutingStrategies.Tunnel);
             }
+
+            _pointerMovedDispose = this.AddDisposableHandler(PointerMovedEvent, TrackMoved, RoutingStrategies.Tunnel);
         }
 
-        private void DecreaseClick(object sender, RoutedEventArgs e)
+        private void TrackMoved(object sender, PointerEventArgs e)
         {
-            ChangeValueBy(-LargeChange);
+            if (_isDragging)
+            {
+                MoveToPoint(e.GetCurrentPoint(_track));
+            }
         }
 
-        private void IncreaseClick(object sender, RoutedEventArgs e)
+        private void TrackReleased(object sender, PointerReleasedEventArgs e)
         {
-            ChangeValueBy(LargeChange);
+            _isDragging = false;
         }
 
-        private void ChangeValueBy(double by)
+        private void TrackPressed(object sender, PointerPressedEventArgs e)
         {
-            if (IsSnapToTickEnabled)
+            if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
             {
-                by = by < 0 ? Math.Min(-TickFrequency, by) : Math.Max(TickFrequency, by);
+                MoveToPoint(e.GetCurrentPoint(_track));
+                _isDragging = true;
             }
+        }
 
-            var value = Value;
-            var next = SnapToTick(Math.Max(Math.Min(value + by, Maximum), Minimum));
-            if (next != value)
-            {
-                Value = next;
-            }
+        private void MoveToPoint(PointerPoint x)
+        {
+            var orient = Orientation == Orientation.Horizontal;
+            var pointDen = orient ? _track.Bounds.Width : _track.Bounds.Height;
+            var pointNum = orient ? x.Position.X : x.Position.Y;
+            var logicalPos = MathUtilities.Clamp(pointNum / pointDen, 0.0d, 1.0d);
+            var invert = orient ? 0 : 1;
+            var calcVal = Math.Abs(invert - logicalPos);
+            var range = Maximum - Minimum;
+            var finalValue = calcVal * range;
+
+            Value = IsSnapToTickEnabled ? SnapToTick(finalValue) : finalValue;
         }
 
         protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
@@ -150,19 +216,7 @@ namespace Avalonia.Controls
         /// <param name="e"></param>
         protected virtual void OnThumbDragStarted(VectorEventArgs e)
         {
-        }
-
-        /// <summary>
-        /// Called when user dragging the <see cref="Thumb"/>.
-        /// </summary>
-        /// <param name="e"></param>
-        protected virtual void OnThumbDragDelta(VectorEventArgs e)
-        {
-            Thumb thumb = e.Source as Thumb;
-            if (thumb != null && _track?.Thumb == thumb)
-            {
-                MoveToNextTick(_track.Value);
-            }
+            _isDragging = true;
         }
 
         /// <summary>
@@ -171,15 +225,7 @@ namespace Avalonia.Controls
         /// <param name="e"></param>
         protected virtual void OnThumbDragCompleted(VectorEventArgs e)
         {
-        }
-
-        /// <summary>
-        /// Searches for the closest tick and sets Value to that tick.
-        /// </summary>
-        /// <param name="value">Value that want to snap to closest Tick.</param>
-        private void MoveToNextTick(double value)
-        {
-            Value = SnapToTick(Math.Max(Minimum, Math.Min(Maximum, value)));
+            _isDragging = false;
         }
 
         /// <summary>
@@ -188,14 +234,17 @@ namespace Avalonia.Controls
         /// <param name="value">Value that want to snap to closest Tick.</param>
         private double SnapToTick(double value)
         {
-            if (IsSnapToTickEnabled && TickFrequency > 0.0)
+            var previous = Minimum;
+            var next = Maximum;
+
+            if (TickFrequency > 0.0)
             {
-                double previous = Minimum + (Math.Round(((value - Minimum) / TickFrequency)) * TickFrequency);
-                double next = Math.Min(Maximum, previous + TickFrequency);
-                value = value > (previous + next) * 0.5 ? next : previous;
+                previous = Minimum + (Math.Round((value - Minimum) / TickFrequency) * TickFrequency);
+                next = Math.Min(Maximum, previous + TickFrequency);
             }
 
-            return value;
+            // Choose the closest value between previous and next. If tie, snap to 'next'.
+            return MathUtilities.GreaterThanOrClose(value, (previous + next) * 0.5) ? next : previous;
         }
 
         private void UpdatePseudoClasses(Orientation o)
diff --git a/src/Avalonia.Controls/TickBar.cs b/src/Avalonia.Controls/TickBar.cs
new file mode 100644
index 0000000000..16e063beb3
--- /dev/null
+++ b/src/Avalonia.Controls/TickBar.cs
@@ -0,0 +1,416 @@
+using System;
+using System.Collections.Generic;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Layout;
+using Avalonia.Media;
+using Avalonia.Utilities;
+
+namespace Avalonia.Controls
+{
+    /// <summary>
+    /// Enum which describes how to position the TickBar.
+    /// </summary>
+    public enum TickBarPlacement
+    {
+        /// <summary>
+        /// Position this tick at the left of target element.
+        /// </summary>
+        Left,
+
+        /// <summary>
+        /// Position this tick at the top of target element.
+        /// </summary>
+        Top,
+
+        /// <summary>
+        /// Position this tick at the right of target element.
+        /// </summary>
+        Right,
+
+        /// <summary>
+        /// Position this tick at the bottom of target element.
+        /// </summary>
+        Bottom,
+    }
+
+
+    /// <summary>
+    /// An element that is used for drawing <see cref="Slider"/>'s Ticks.
+    /// </summary>
+    public class TickBar : Control
+    {
+        static TickBar()
+        {
+            AffectsRender<TickBar>(ReservedSpaceProperty,
+                                   MaximumProperty,
+                                   MinimumProperty,
+                                   OrientationProperty,
+                                   TickFrequencyProperty);
+        }
+
+        public TickBar() : base()
+        {
+        }
+
+        /// <summary>
+        /// Defines the <see cref="Fill"/> property.
+        /// </summary>
+        public static readonly StyledProperty<IBrush> FillProperty =
+            AvaloniaProperty.Register<TickBar, IBrush>(nameof(Fill));
+
+        /// <summary>
+        /// Brush used to fill the TickBar's Ticks.
+        /// </summary>
+        public IBrush Fill
+        {
+            get { return GetValue(FillProperty); }
+            set { SetValue(FillProperty, value); }
+        }
+
+        /// <summary>
+        /// Defines the <see cref="Minimum"/> property.
+        /// </summary>
+        public static readonly StyledProperty<double> MinimumProperty =
+            AvaloniaProperty.Register<TickBar, double>(nameof(Minimum), 0d);
+
+        /// <summary>
+        /// Logical position where the Minimum Tick will be drawn
+        /// </summary>
+        public double Minimum
+        {
+            get { return GetValue(MinimumProperty); }
+            set
+            {
+                SetValue(MinimumProperty, value);
+            }
+        }
+
+        /// <summary>
+        /// Defines the <see cref="Maximum"/> property.
+        /// </summary>
+        public static readonly StyledProperty<double> MaximumProperty =
+            AvaloniaProperty.Register<TickBar, double>(nameof(Maximum), 0d);
+
+        /// <summary>
+        /// Logical position where the Maximum Tick will be drawn
+        /// </summary>
+        public double Maximum
+        {
+            get { return GetValue(MaximumProperty); }
+            set { SetValue(MaximumProperty, value); }
+        }
+
+        /// <summary>
+        /// Defines the <see cref="TickFrequency"/> property.
+        /// </summary>
+        public static readonly StyledProperty<double> TickFrequencyProperty =
+            AvaloniaProperty.Register<TickBar, double>(nameof(TickFrequency), 0d);
+
+        /// <summary>
+        /// TickFrequency property defines how the tick will be drawn.
+        /// </summary>
+        public double TickFrequency
+        {
+            get { return GetValue(TickFrequencyProperty); }
+            set { SetValue(TickFrequencyProperty, value); }
+        }
+
+        /// <summary>
+        /// Defines the <see cref="Orientation"/> property.
+        /// </summary>
+        public static readonly StyledProperty<Orientation> OrientationProperty =
+            AvaloniaProperty.Register<TickBar, Orientation>(nameof(Orientation));
+
+        /// <summary>
+        /// TickBar parent's orientation.
+        /// </summary>
+        public Orientation Orientation
+        {
+            get { return GetValue(OrientationProperty); }
+            set { SetValue(OrientationProperty, value); }
+        }
+
+        /// <summary>
+        /// Defines the <see cref="Ticks"/> property.
+        /// </summary>
+        public static readonly StyledProperty<List<double>> TicksProperty =
+            AvaloniaProperty.Register<TickBar, List<double>>(nameof(Ticks));
+
+        /// <summary>
+        /// The Ticks property contains collection of value of type Double which
+        /// are the logical positions use to draw the ticks.
+        /// The property value is a <see cref="DoubleCollection" />.
+        /// </summary>
+        public List<double> Ticks
+        {
+            get { return GetValue(TicksProperty); }
+            set { SetValue(TicksProperty, value); }
+        }
+
+        /// <summary>
+        /// Defines the <see cref="IsDirectionReversed"/> property.
+        /// </summary>
+        public static readonly StyledProperty<bool> IsDirectionReversedProperty =
+            AvaloniaProperty.Register<TickBar, bool>(nameof(IsDirectionReversed), false);
+
+        /// <summary>
+        /// The IsDirectionReversed property defines the direction of value incrementation.
+        /// By default, if Tick's orientation is Horizontal, ticks will be drawn from left to right.
+        /// (And, bottom to top for Vertical orientation).
+        /// If IsDirectionReversed is 'true' the direction of the drawing will be in opposite direction.
+        /// </summary>
+        public bool IsDirectionReversed
+        {
+            get { return GetValue(IsDirectionReversedProperty); }
+            set { SetValue(IsDirectionReversedProperty, value); }
+        }
+
+        /// <summary>
+        /// Defines the <see cref="Placement"/> property.
+        /// </summary>
+        public static readonly StyledProperty<TickBarPlacement> PlacementProperty =
+            AvaloniaProperty.Register<TickBar, TickBarPlacement>(nameof(Placement), 0d);
+
+
+        /// <summary>
+        /// Placement property specified how the Tick will be placed.
+        /// This property affects the way ticks are drawn.
+        /// This property has type of <see cref="TickBarPlacement" />.
+        /// </summary>
+        public TickBarPlacement Placement
+        {
+            get { return GetValue(PlacementProperty); }
+            set { SetValue(PlacementProperty, value); }
+        }
+
+        /// <summary>
+        /// Defines the <see cref="ReservedSpace"/> property.
+        /// </summary>
+        public static readonly StyledProperty<Rect> ReservedSpaceProperty =
+            AvaloniaProperty.Register<TickBar, Rect>(nameof(ReservedSpace));
+
+        /// <summary>
+        /// TickBar will use ReservedSpaceProperty for left and right spacing (for horizontal orientation) or
+        /// tob and bottom spacing (for vertical orienation).
+        /// The space on both sides of TickBar is half of specified ReservedSpace.
+        /// This property has type of <see cref="Rect" />.
+        /// </summary>
+        public Rect ReservedSpace
+        {
+            get { return GetValue(ReservedSpaceProperty); }
+            set { SetValue(ReservedSpaceProperty, value); }
+        }
+
+        /// <summary>
+        /// Draw ticks.
+        /// Ticks can be draw in 8 diffrent ways depends on Placment property and IsDirectionReversed property.
+        ///
+        /// This function also draw selection-tick(s) if IsSelectionRangeEnabled is 'true' and
+        /// SelectionStart and SelectionEnd are valid.
+        ///
+        /// The primary ticks (for Mininum and Maximum value) height will be 100% of TickBar's render size (use Width or Height
+        /// depends on Placement property).
+        ///
+        /// The secondary ticks (all other ticks, including selection-tics) height will be 75% of TickBar's render size.
+        ///
+        /// Brush that use to fill ticks is specified by Shape.Fill property.
+        ///
+        /// Pen that use to draw ticks is specified by Shape.Pen property.
+        /// </summary>
+        public override void Render(DrawingContext dc)
+        {
+            var size = new Size(Bounds.Width, Bounds.Height);
+            var range = Maximum - Minimum;
+            var tickLen = 0.0d;   // Height for Primary Tick (for Mininum and Maximum value)
+            var tickLen2 = 0.0d;  // Height for Secondary Tick
+            var logicalToPhysical = 1.0;
+            var progression = 1.0d;
+            var startPoint = new Point();
+            var endPoint = new Point();
+            var rSpace = Orientation == Orientation.Horizontal ? ReservedSpace.Width : ReservedSpace.Height;
+
+            // Take Thumb size in to account
+            double halfReservedSpace = rSpace * 0.5;
+
+            switch (Placement)
+            {
+                case TickBarPlacement.Top:
+                    if (MathUtilities.GreaterThanOrClose(rSpace, size.Width))
+                    {
+                        return;
+                    }
+                    size = new Size(size.Width - rSpace, size.Height);
+                    tickLen = -size.Height;
+                    startPoint = new Point(halfReservedSpace, size.Height);
+                    endPoint = new Point(halfReservedSpace + size.Width, size.Height);
+                    logicalToPhysical = size.Width / range;
+                    progression = 1;
+                    break;
+
+                case TickBarPlacement.Bottom:
+                    if (MathUtilities.GreaterThanOrClose(rSpace, size.Width))
+                    {
+                        return;
+                    }
+                    size = new Size(size.Width - rSpace, size.Height);
+                    tickLen = size.Height;
+                    startPoint = new Point(halfReservedSpace, 0d);
+                    endPoint = new Point(halfReservedSpace + size.Width, 0d);
+                    logicalToPhysical = size.Width / range;
+                    progression = 1;
+                    break;
+
+                case TickBarPlacement.Left:
+                    if (MathUtilities.GreaterThanOrClose(rSpace, size.Height))
+                    {
+                        return;
+                    }
+                    size = new Size(size.Width, size.Height - rSpace);
+
+                    tickLen = -size.Width;
+                    startPoint = new Point(size.Width, size.Height + halfReservedSpace);
+                    endPoint = new Point(size.Width, halfReservedSpace);
+                    logicalToPhysical = size.Height / range * -1;
+                    progression = -1;
+                    break;
+
+                case TickBarPlacement.Right:
+                    if (MathUtilities.GreaterThanOrClose(rSpace, size.Height))
+                    {
+                        return;
+                    }
+                    size = new Size(size.Width, size.Height - rSpace);
+                    tickLen = size.Width;
+                    startPoint = new Point(0d, size.Height + halfReservedSpace);
+                    endPoint = new Point(0d, halfReservedSpace);
+                    logicalToPhysical = size.Height / range * -1;
+                    progression = -1;
+                    break;
+            };
+
+            tickLen2 = tickLen * 0.75;
+
+            // Invert direciton of the ticks
+            if (IsDirectionReversed)
+            {
+                progression *= -progression;
+                logicalToPhysical *= -1;
+
+                // swap startPoint & endPoint
+                var pt = startPoint;
+                startPoint = endPoint;
+                endPoint = pt;
+            }
+
+            var pen = new Pen(Fill, 1.0d);
+
+            // Is it Vertical?
+            if (Placement == TickBarPlacement.Left || Placement == TickBarPlacement.Right)
+            {
+                // Reduce tick interval if it is more than would be visible on the screen
+                double interval = TickFrequency;
+                if (interval > 0.0)
+                {
+                    double minInterval = (Maximum - Minimum) / size.Height;
+                    if (interval < minInterval)
+                    {
+                        interval = minInterval;
+                    }
+                }
+
+                // Draw Min & Max tick
+                dc.DrawLine(pen, startPoint, new Point(startPoint.X + tickLen, startPoint.Y));
+                dc.DrawLine(pen, new Point(startPoint.X, endPoint.Y),
+                                 new Point(startPoint.X + tickLen, endPoint.Y));
+
+                // This property is rarely set so let's try to avoid the GetValue
+                // caching of the mutable default value
+                var ticks = Ticks ?? null;
+
+                // Draw ticks using specified Ticks collection
+                if (ticks?.Count > 0)
+                {
+                    for (int i = 0; i < ticks.Count; i++)
+                    {
+                        if (MathUtilities.LessThanOrClose(ticks[i], Minimum) || MathUtilities.GreaterThanOrClose(ticks[i], Maximum))
+                        {
+                            continue;
+                        }
+
+                        double adjustedTick = ticks[i] - Minimum;
+
+                        double y = adjustedTick * logicalToPhysical + startPoint.Y;
+                        dc.DrawLine(pen,
+                            new Point(startPoint.X, y),
+                            new Point(startPoint.X + tickLen2, y));
+                    }
+                }
+                // Draw ticks using specified TickFrequency
+                else if (interval > 0.0)
+                {
+                    for (double i = interval; i < range; i += interval)
+                    {
+                        double y = i * logicalToPhysical + startPoint.Y;
+
+                        dc.DrawLine(pen,
+                            new Point(startPoint.X, y),
+                            new Point(startPoint.X + tickLen2, y));
+                    }
+                }
+            }
+            else  // Placement == Top || Placement == Bottom
+            {
+                // Reduce tick interval if it is more than would be visible on the screen
+                double interval = TickFrequency;
+                if (interval > 0.0)
+                {
+                    double minInterval = (Maximum - Minimum) / size.Width;
+                    if (interval < minInterval)
+                    {
+                        interval = minInterval;
+                    }
+                }
+
+                // Draw Min & Max tick
+                dc.DrawLine(pen, startPoint, new Point(startPoint.X, startPoint.Y + tickLen));
+                dc.DrawLine(pen, new Point(endPoint.X, startPoint.Y),
+                                 new Point(endPoint.X, startPoint.Y + tickLen));
+
+                // This property is rarely set so let's try to avoid the GetValue
+                // caching of the mutable default value
+                var ticks = Ticks ?? null;
+
+                // Draw ticks using specified Ticks collection
+                if (ticks?.Count > 0)
+                {
+                    for (int i = 0; i < ticks.Count; i++)
+                    {
+                        if (MathUtilities.LessThanOrClose(ticks[i], Minimum) || MathUtilities.GreaterThanOrClose(ticks[i], Maximum))
+                        {
+                            continue;
+                        }
+                        double adjustedTick = ticks[i] - Minimum;
+
+                        double x = adjustedTick * logicalToPhysical + startPoint.X;
+                        dc.DrawLine(pen,
+                            new Point(x, startPoint.Y),
+                            new Point(x, startPoint.Y + tickLen2));
+                    }
+                }
+                // Draw ticks using specified TickFrequency
+                else if (interval > 0.0)
+                {
+                    for (double i = interval; i < range; i += interval)
+                    {
+                        double x = i * logicalToPhysical + startPoint.X;
+                        dc.DrawLine(pen,
+                            new Point(x, startPoint.Y),
+                            new Point(x, startPoint.Y + tickLen2));
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
index 7a715bbde7..23913c51e0 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
@@ -1,4 +1,6 @@
-<Style xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=netstandard">
+<Style xmlns="https://github.com/avaloniaui" 
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
+  xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Style.Resources>
     <Color x:Key="SystemAccentColor">#FF0078D7</Color>
     <Color x:Key="SystemAltHighColor">#FF000000</Color>
@@ -312,5 +314,28 @@
     <StaticResource x:Key="RadioButtonCheckGlyphStrokePointerOver" ResourceKey="SystemControlTransparentBrush" />
     <StaticResource x:Key="RadioButtonCheckGlyphStrokePressed" ResourceKey="SystemControlTransparentBrush" />
     <StaticResource x:Key="RadioButtonCheckGlyphStrokeDisabled" ResourceKey="SystemControlTransparentBrush" />
+    
+    <!-- BaseResources for Slider.xaml -->
+    <StaticResource x:Key="SliderContainerBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderThumbBackground" ResourceKey="SystemControlForegroundAccentBrush" />
+    <StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="SystemControlHighlightChromeAltLowBrush" />
+    <StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="SystemControlHighlightChromeHighBrush" />
+    <StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderTrackFill" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTrackFillPointerOver" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="SliderTrackFillPressed" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderTrackValueFill" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="SliderHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTickBarFill" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="SystemControlBackgroundAltHighBrush" />
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
index 5c6286a0bc..f3c19a3ba9 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
@@ -1,4 +1,6 @@
-<Style xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=netstandard">
+<Style xmlns="https://github.com/avaloniaui" 
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
+  xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Style.Resources>
     <Color x:Key="SystemAccentColor">#FF0078D7</Color>
     <Color x:Key="SystemAltHighColor">#FFFFFFFF</Color>
@@ -313,5 +315,28 @@
     <StaticResource x:Key="RadioButtonCheckGlyphStrokePointerOver" ResourceKey="SystemControlTransparentBrush" />
     <StaticResource x:Key="RadioButtonCheckGlyphStrokePressed" ResourceKey="SystemControlTransparentBrush" />
     <StaticResource x:Key="RadioButtonCheckGlyphStrokeDisabled" ResourceKey="SystemControlTransparentBrush" />
+    
+    <!-- BaseResources for Slider.xaml -->
+    <StaticResource x:Key="SliderContainerBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderThumbBackground" ResourceKey="SystemControlForegroundAccentBrush" />
+    <StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="SystemControlHighlightChromeAltLowBrush" />
+    <StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="SystemControlHighlightChromeHighBrush" />
+    <StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderTrackFill" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTrackFillPointerOver" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="SliderTrackFillPressed" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderTrackValueFill" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="SliderHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTickBarFill" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="SystemControlBackgroundAltHighBrush" />
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
index 7364c339f1..599177526d 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
@@ -1,6 +1,6 @@
-<Style xmlns="https://github.com/avaloniaui"
-       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       xmlns:sys="clr-namespace:System;assembly=netstandard">
+<Style xmlns="https://github.com/avaloniaui" 
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
+  xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Style.Resources>
     <!-- Resources for Button.xaml -->
     <StaticResource x:Key="AccentButtonBackground" ResourceKey="SystemControlBackgroundAccentBrush" />
@@ -343,5 +343,55 @@
     <SolidColorBrush x:Key="RadioButtonPressedBorderThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RadioButtonPressedForegroundThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
+    
+    <!-- Resources for Slider.xaml -->
+    <x:Double x:Key="SliderOutsideTickBarThemeHeight">4</x:Double>
+    <x:Double x:Key="SliderTrackThemeHeight">2</x:Double>
+    <Thickness x:Key="SliderBorderThemeThickness">0</Thickness>
+    <Thickness x:Key="SliderHeaderThemeMargin">0,0,0,4</Thickness>
+    <FontWeight x:Key="SliderHeaderThemeFontWeight">Normal</FontWeight>
+    <StaticResource x:Key="SliderContainerBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderThumbBackground" ResourceKey="SystemControlForegroundAccentBrush" />
+    <StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="SystemAccentColorLight1" />
+    <StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="SystemAccentColorDark1" />
+    <StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderTrackFill" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTrackFillPointerOver" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="SliderTrackFillPressed" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderTrackValueFill" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="SliderHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTickBarFill" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <SolidColorBrush x:Key="SliderBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="SliderDisabledBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="SliderThumbBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="SliderThumbBorderThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="SliderThumbDisabledBackgroundThemeBrush" Color="#FF7E7E7E" />
+    <SolidColorBrush x:Key="SliderThumbPointerOverBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="SliderThumbPointerOverBorderThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="SliderThumbPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="SliderThumbPressedBorderThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="SliderTickMarkInlineBackgroundThemeBrush" Color="Black" />
+    <SolidColorBrush x:Key="SliderTickMarkInlineDisabledForegroundThemeBrush" Color="Black" />
+    <SolidColorBrush x:Key="SliderTickmarkOutsideBackgroundThemeBrush" Color="#80FFFFFF" />
+    <SolidColorBrush x:Key="SliderTickMarkOutsideDisabledForegroundThemeBrush" Color="#80FFFFFF" />
+    <SolidColorBrush x:Key="SliderTrackBackgroundThemeBrush" Color="#29FFFFFF" />
+    <SolidColorBrush x:Key="SliderTrackDecreaseBackgroundThemeBrush" Color="#FF5B2EC5" />
+    <SolidColorBrush x:Key="SliderTrackDecreaseDisabledBackgroundThemeBrush" Color="#1FFFFFFF" />
+    <SolidColorBrush x:Key="SliderTrackDecreasePointerOverBackgroundThemeBrush" Color="#FF724BCD" />
+    <SolidColorBrush x:Key="SliderTrackDecreasePressedBackgroundThemeBrush" Color="#FF8152EF" />
+    <SolidColorBrush x:Key="SliderTrackDisabledBackgroundThemeBrush" Color="#29FFFFFF" />
+    <SolidColorBrush x:Key="SliderTrackPointerOverBackgroundThemeBrush" Color="#46FFFFFF" />
+    <SolidColorBrush x:Key="SliderTrackPressedBackgroundThemeBrush" Color="#59FFFFFF" />
+    <SolidColorBrush x:Key="SliderHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
index 15e157f573..ff43508f8c 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
@@ -1,6 +1,6 @@
-<Style xmlns="https://github.com/avaloniaui"
-       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       xmlns:sys="clr-namespace:System;assembly=netstandard">
+<Style xmlns="https://github.com/avaloniaui" 
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
+  xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Style.Resources>
     <!-- Resources for Button.xaml -->
     <StaticResource x:Key="AccentButtonBackground" ResourceKey="SystemControlBackgroundAccentBrush" />
@@ -343,5 +343,55 @@
     <SolidColorBrush x:Key="RadioButtonPressedBorderThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="RadioButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
+    
+    <!-- Resources for Slider.xaml -->
+    <x:Double x:Key="SliderOutsideTickBarThemeHeight">4</x:Double>
+    <x:Double x:Key="SliderTrackThemeHeight">2</x:Double>
+    <Thickness x:Key="SliderBorderThemeThickness">0</Thickness>
+    <Thickness x:Key="SliderHeaderThemeMargin">0,0,0,4</Thickness>
+    <FontWeight x:Key="SliderHeaderThemeFontWeight">Normal</FontWeight>
+    <StaticResource x:Key="SliderContainerBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderContainerBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="SliderThumbBackground" ResourceKey="SystemControlForegroundAccentBrush" />
+    <StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="SystemAccentColorLight1" />
+    <StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="SystemAccentColorDark1" />
+    <StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderTrackFill" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTrackFillPointerOver" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="SliderTrackFillPressed" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderTrackValueFill" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+    <StaticResource x:Key="SliderHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="SliderHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTickBarFill" ResourceKey="SystemControlForegroundBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="SystemControlBackgroundAltHighBrush" />
+    <SolidColorBrush x:Key="SliderBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="SliderDisabledBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="SliderThumbBackgroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="SliderThumbBorderThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="SliderThumbDisabledBackgroundThemeBrush" Color="#FF929292" />
+    <SolidColorBrush x:Key="SliderThumbPointerOverBackgroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="SliderThumbPointerOverBorderThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="SliderThumbPressedBackgroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="SliderThumbPressedBorderThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="SliderTickMarkInlineBackgroundThemeBrush" Color="White" />
+    <SolidColorBrush x:Key="SliderTickMarkInlineDisabledForegroundThemeBrush" Color="White" />
+    <SolidColorBrush x:Key="SliderTickmarkOutsideBackgroundThemeBrush" Color="#80000000" />
+    <SolidColorBrush x:Key="SliderTickMarkOutsideDisabledForegroundThemeBrush" Color="#80000000" />
+    <SolidColorBrush x:Key="SliderTrackBackgroundThemeBrush" Color="#1A000000" />
+    <SolidColorBrush x:Key="SliderTrackDecreaseBackgroundThemeBrush" Color="#FF4617B4" />
+    <SolidColorBrush x:Key="SliderTrackDecreaseDisabledBackgroundThemeBrush" Color="#1C000000" />
+    <SolidColorBrush x:Key="SliderTrackDecreasePointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
+    <SolidColorBrush x:Key="SliderTrackDecreasePressedBackgroundThemeBrush" Color="#FF7241E4" />
+    <SolidColorBrush x:Key="SliderTrackDisabledBackgroundThemeBrush" Color="#1A000000" />
+    <SolidColorBrush x:Key="SliderTrackPointerOverBackgroundThemeBrush" Color="#26000000" />
+    <SolidColorBrush x:Key="SliderTrackPressedBackgroundThemeBrush" Color="#33000000" />
+    <SolidColorBrush x:Key="SliderHeaderForegroundThemeBrush" Color="#FF000000" />
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/Slider.xaml b/src/Avalonia.Themes.Fluent/Slider.xaml
index b21cbf3650..a57ea6cedd 100644
--- a/src/Avalonia.Themes.Fluent/Slider.xaml
+++ b/src/Avalonia.Themes.Fluent/Slider.xaml
@@ -1,93 +1,264 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Margin="20" Width="200" Height="200">
+      <DockPanel LastChildFill="True">
+        <StackPanel Spacing="10" DockPanel.Dock="Top">
+          <Slider Value="50" />
+          <Slider IsEnabled="False" Value="50" />
+        </StackPanel>
+        <StackPanel Spacing="10" Orientation="Horizontal">
+          <Slider Value="50" Orientation="Vertical" />
+          <Slider IsEnabled="False" Orientation="Vertical" Value="50" />
+        </StackPanel>
+      </DockPanel>
+    </Border>
+  </Design.PreviewWith>
+  <Styles.Resources>
+    <Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
+    <GridLength x:Key="SliderPreContentMargin">15</GridLength>
+    <GridLength x:Key="SliderPostContentMargin">15</GridLength>
+    <x:Double x:Key="SliderHorizontalHeight">32</x:Double>
+    <x:Double x:Key="SliderVerticalWidth">32</x:Double>
+    <CornerRadius x:Key="SliderThumbCornerRadius">10</CornerRadius>
+    <x:Double x:Key="SliderHorizontalThumbWidth">20</x:Double>
+    <x:Double x:Key="SliderHorizontalThumbHeight">20</x:Double>
+    <x:Double x:Key="SliderVerticalThumbWidth">20</x:Double>
+    <x:Double x:Key="SliderVerticalThumbHeight">20</x:Double>
+  </Styles.Resources>
+  <Style Selector="Thumb.SliderThumbStyle">
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+  </Style>
   <Style Selector="Slider:horizontal">
-    <Setter Property="MinWidth" Value="40"/>
-    <Setter Property="MinHeight" Value="20"/>
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
+    <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid Name="grid">
-          <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" MinHeight="20"/>
-            <RowDefinition Height="Auto"/>
-          </Grid.RowDefinitions>
-          <Border Name="TrackBackground" Grid.Row="1" Height="4" Margin="6,0" VerticalAlignment="Center"/>
-          <Track Name="PART_Track" Grid.Row="1" Orientation="Horizontal">
-            <Track.DecreaseButton>
-               <RepeatButton Name="PART_DecreaseButton"
-                             Classes="repeattrack" />
-            </Track.DecreaseButton>
-            <Track.IncreaseButton>
-               <RepeatButton Name="PART_IncreaseButton"
-                             Classes="repeattrack" />
-            </Track.IncreaseButton>
-            <Thumb Name="thumb" MinWidth="20" MinHeight="20">
-              <Thumb.Template>
-                <ControlTemplate>
-                  <Grid>
-                    <Ellipse Width="12" Height="12" Fill="{DynamicResource ThemeAccentBrush}"/>
-                  </Grid>
-                </ControlTemplate>
-              </Thumb.Template>
-            </Thumb>
-          </Track>
-        </Grid>
+        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{DynamicResource ControlCornerRadius}">
+          <Grid Name="grid" Margin="{TemplateBinding Padding}" RowDefinitions="Auto, *">
+            <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextBlock.Foreground="{DynamicResource SliderHeaderForeground}"
+            Margin="{DynamicResource SliderTopHeaderMargin}" />
+            <Grid x:Name="SliderContainer" Grid.Row="1">
+              <Grid.Styles>
+                <Style Selector="TickBar">
+                  <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
+                </Style>
+              </Grid.Styles>
+              <Grid x:Name="HorizontalTemplate" ColumnDefinitions="Auto,Auto,*" MinHeight="{DynamicResource SliderHorizontalHeight}">
+                <Grid.RowDefinitions>
+                  <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
+                  <RowDefinition Height="Auto" />
+                  <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
+                </Grid.RowDefinitions>
+                <TickBar Name="TopTickBar" Placement="Top" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
+                <!-- <TickBar Name="HorizontalInlineTickBar" Placement="Top" Fill="{DynamicResource SliderInlineTickBarFill}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" /> -->
+                <TickBar Name="BottomTickBar" Placement="Bottom" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" />
+                <Track Name="PART_Track" Grid.Row="1" Grid.ColumnSpan="3" Orientation="Horizontal">
+                  <Track.DecreaseButton>
+                    <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}">
+                      <RepeatButton.Template>
+                        <ControlTemplate>
+                          <Grid>
+                            <Border Name="FocusTarget" Background="Transparent" Margin="0,-10" />
+                            <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center" />
+                          </Grid>
+                        </ControlTemplate>
+                      </RepeatButton.Template>
+                    </RepeatButton>
+                  </Track.DecreaseButton>
+                  <Track.IncreaseButton>
+                    <RepeatButton Name="PART_IncreaseButton" Background="{TemplateBinding Background}">
+                      <RepeatButton.Template>
+                        <ControlTemplate>
+                          <Grid>
+                            <Border Name="FocusTarget" Background="Transparent" Margin="0,-10" />
+                            <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center" />
+                          </Grid>
+                        </ControlTemplate>
+                      </RepeatButton.Template>
+                    </RepeatButton>
+                  </Track.IncreaseButton>
+                  <Thumb Classes="SliderThumbStyle" Name="thumb" Margin="0" Padding="0" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderHorizontalThumbHeight}" Width="{DynamicResource SliderHorizontalThumbWidth}" />
+                </Track>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Border>
       </ControlTemplate>
     </Setter>
   </Style>
   <Style Selector="Slider:vertical">
-    <Setter Property="MinWidth" Value="20"/>
-    <Setter Property="MinHeight" Value="40"/>
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
+    <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid>
-          <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto"/>
-            <ColumnDefinition Width="Auto" MinWidth="26"/>
-            <ColumnDefinition Width="Auto"/>
-          </Grid.ColumnDefinitions>
-          <Border Name="TrackBackground" Grid.Column="1" Width="4" Margin="0,6" HorizontalAlignment="Center"/>
-          <Track Name="PART_Track" Grid.Column="1" Orientation="Vertical" IsDirectionReversed="True">
-            <Track.DecreaseButton>
-               <RepeatButton Name="PART_DecreaseButton"
-                             Classes="repeattrack" />
-            </Track.DecreaseButton>
-            <Track.IncreaseButton>
-               <RepeatButton Name="PART_IncreaseButton"
-                             Classes="repeattrack" />
-            </Track.IncreaseButton>
-            <Thumb Name="thumb" MinWidth="20" MinHeight="20">
-              <Thumb.Template>
-                <ControlTemplate>
-                  <Grid>
-                    <Ellipse Width="12" Height="12" Fill="{DynamicResource ThemeAccentBrush}"/>
-                  </Grid>
-                </ControlTemplate>
-              </Thumb.Template>
-            </Thumb>
-          </Track>
-        </Grid>
+        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{DynamicResource ControlCornerRadius}">
+          <Grid Name="grid" Margin="{TemplateBinding Padding}" RowDefinitions="Auto, *">
+            <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextBlock.Foreground="{DynamicResource SliderHeaderForeground}"
+            Margin="{DynamicResource SliderTopHeaderMargin}" />
+            <Grid x:Name="SliderContainer" Grid.Row="1">
+              <Grid.Styles>
+                <Style Selector="TickBar">
+                  <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
+                </Style>
+              </Grid.Styles>
+              <Grid x:Name="VerticalTemplate" RowDefinitions="*,Auto,Auto" MinWidth="{DynamicResource SliderVerticalWidth}">
+                <Grid.ColumnDefinitions>
+                  <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
+                  <ColumnDefinition Width="Auto" />
+                  <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
+                </Grid.ColumnDefinitions>
+                <TickBar Name="LeftTickBar" Placement="Left" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
+                <!-- <TickBar Name="VerticalInlineTickBar" Placement="Inline" Fill="{DynamicResource SliderInlineTickBarFill}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" /> -->
+                <TickBar Name="RightTickBar" Placement="Right" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2" Grid.RowSpan="3" />
+                <Track Name="PART_Track" Grid.Column="1" Grid.ColumnSpan="1" Grid.RowSpan="3" Orientation="Vertical">
+                  <Track.DecreaseButton>
+                    <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}">
+                      <RepeatButton.Template>
+                        <ControlTemplate>
+                          <Grid>
+                            <Border Name="FocusTarget" Background="Transparent" Margin="0,-10" />
+                            <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Width="{DynamicResource SliderTrackThemeHeight}" HorizontalAlignment="Center" />
+                          </Grid>
+                        </ControlTemplate>
+                      </RepeatButton.Template>
+                    </RepeatButton>
+                  </Track.DecreaseButton>
+                  <Track.IncreaseButton>
+                    <RepeatButton Name="PART_IncreaseButton" Background="{TemplateBinding Background}">
+                      <RepeatButton.Template>
+                        <ControlTemplate>
+                          <Grid>
+                            <Border Name="FocusTarget" Background="Transparent" Margin="0,-10" />
+                            <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Width="{DynamicResource SliderTrackThemeHeight}" HorizontalAlignment="Center" />
+                          </Grid>
+                        </ControlTemplate>
+                      </RepeatButton.Template>
+                    </RepeatButton>
+                  </Track.IncreaseButton>
+                  <Thumb Classes="SliderThumbStyle" Name="SliderThumb" Margin="0" Padding="0" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderVerticalThumbHeight}" Width="{DynamicResource SliderVerticalThumbWidth}" />
+                </Track>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Border>
       </ControlTemplate>
     </Setter>
   </Style>
   <Style Selector="Slider /template/ Track#PART_Track">
-    <Setter Property="Minimum" Value="{TemplateBinding Minimum}"/>
-    <Setter Property="Maximum" Value="{TemplateBinding Maximum}"/>
-    <Setter Property="Value" Value="{TemplateBinding Value, Mode=TwoWay}"/>
+    <Setter Property="Minimum" Value="{TemplateBinding Minimum}" />
+    <Setter Property="Maximum" Value="{TemplateBinding Maximum}" />
+    <Setter Property="Value" Value="{TemplateBinding Value, Mode=TwoWay}" />
   </Style>
-  <Style Selector="Slider /template/ Border#TrackBackground">
-    <Setter Property="BorderThickness" Value="2"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowBrush}"/>
+  <Style Selector="Slider /template/ TickBar">
+    <Setter Property="Fill" Value="{DynamicResource SliderTickBarFill}" />
+    <Setter Property="TickFrequency" Value="{TemplateBinding Slider.TickFrequency}" />
+    <Setter Property="Orientation" Value="{TemplateBinding Slider.Orientation}" />
+    <Setter Property="Minimum" Value="{TemplateBinding Slider.Minimum}" />
+    <Setter Property="Maximum" Value="{TemplateBinding Slider.Maximum}" />
   </Style>
-  <Style Selector="Slider /template/ RepeatButton.repeattrack">
-    <Setter Property="Background" Value="Transparent"/>
-    <Setter Property="Foreground" Value="{DynamicResource ThemeBorderLowBrush}"/>
-    <Setter Property="Template">
-        <ControlTemplate>
-            <Border Background="{TemplateBinding Background}" />
-        </ControlTemplate>
-    </Setter>
+  
+  <!-- Normal State -->
+  
+  <Style Selector="Slider /template/ Thumb.SliderThumbStyle">
+    <Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
+  </Style>
+
+  <Style Selector="Slider /template/ Grid#SliderContainer">
+    <Setter Property="Background" Value="{DynamicResource SliderContainerBackground}" />
+  </Style>
+
+  <Style Selector="Slider /template/ TickBar">
+    <Setter Property="IsVisible" Value="False" />
+  </Style>
+
+  <!-- TickBar Placement States -->
+
+  <Style Selector="Slider[TickPlacement=TopLeft] /template/ TickBar#LeftTickBar, Slider[TickPlacement=Outside] /template/ TickBar#LeftTickBar">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+ 
+  <Style Selector="Slider[TickPlacement=TopLeft] /template/ TickBar#TopTickBar, Slider[TickPlacement=Outside] /template/ TickBar#TopTickBar">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+ 
+  <Style Selector="Slider[TickPlacement=BottomRight] /template/ TickBar#BottomTickBar, Slider[TickPlacement=Outside] /template/ TickBar#BottomTickBar">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+ 
+  <Style Selector="Slider[TickPlacement=BottomRight] /template/ TickBar#RightTickBar, Slider[TickPlacement=Outside] /template/ TickBar#RightTickBar">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+ 
+  <!-- Disabled State -->
+
+  <Style Selector="Slider:disabled /template/ ContentPresenter#HeaderContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SliderHeaderForegroundDisabled}" />
+  </Style>
+  
+  <Style Selector="Slider:disabled /template/ RepeatButton#PART_DecreaseButton">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
+  </Style>
+  
+  <Style Selector="Slider:disabled /template/ RepeatButton#PART_IncreaseButton">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
+  </Style>
+  
+  <Style Selector="Slider:disabled /template/ Thumb.SliderThumbStyle">
+    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
+  </Style>
+  
+  <Style Selector="Slider:disabled /template/ TickBar">
+    <Setter Property="Fill" Value="{DynamicResource SliderTickBarFillDisabled}" />
+  </Style>
+  
+  <Style Selector="Slider:pointerover /template/ Grid#SliderContainer">
+    <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
+  </Style>
+
+  <!-- PointerOver State -->
+  <Style Selector="Slider:pointerover /template/ RepeatButton#PART_IncreaseButton">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
+  </Style>
+  
+  <Style Selector="Slider:pointerover /template/ Thumb.SliderThumbStyle">
+    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
+  </Style>
+  
+  <Style Selector="Slider:pointerover /template/ Grid#SliderContainer">
+    <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
+  </Style>
+  
+  <Style Selector="Slider:pointerover /template/ RepeatButton#PART_DecreaseButton">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
+  </Style>
+
+  <!-- Pressed State -->
+  <Style Selector="Slider:pressed /template/ RepeatButton#PART_IncreaseButton">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
+  </Style>
+
+  <Style Selector="Slider:pressed /template/ Thumb.SliderThumbStyle">
+    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
+  </Style>
+  
+  <Style Selector="Slider:pointerover /template/ Grid#SliderContainer">
+    <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
+  </Style>
+  
+  <Style Selector="Slider:pointerover /template/ RepeatButton#PART_DecreaseButton">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
   </Style>
-    <Style Selector="Slider:disabled /template/ Grid#grid">
-        <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
-    </Style>
 </Styles>

From 66c677eab8a536f41aba379ba0d154686ca38329 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Mon, 1 Jun 2020 14:01:23 +0800
Subject: [PATCH 08/11] avoid divide by zero

---
 src/Avalonia.Controls/Slider.cs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Avalonia.Controls/Slider.cs b/src/Avalonia.Controls/Slider.cs
index de15685e4d..a0d6cb96fc 100644
--- a/src/Avalonia.Controls/Slider.cs
+++ b/src/Avalonia.Controls/Slider.cs
@@ -189,7 +189,10 @@ namespace Avalonia.Controls
         private void MoveToPoint(PointerPoint x)
         {
             var orient = Orientation == Orientation.Horizontal;
+            
             var pointDen = orient ? _track.Bounds.Width : _track.Bounds.Height;
+            pointDen += double.Epsilon; // Just add epsilon to avoid divide by zero exceptions.
+
             var pointNum = orient ? x.Position.X : x.Position.Y;
             var logicalPos = MathUtilities.Clamp(pointNum / pointDen, 0.0d, 1.0d);
             var invert = orient ? 0 : 1;

From 7abe7cc926b60302ac0fe7d2db1b0a972b5ca6d7 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Mon, 1 Jun 2020 14:02:29 +0800
Subject: [PATCH 09/11] add base apply template method

---
 src/Avalonia.Controls/Slider.cs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Avalonia.Controls/Slider.cs b/src/Avalonia.Controls/Slider.cs
index a0d6cb96fc..ec23bfa396 100644
--- a/src/Avalonia.Controls/Slider.cs
+++ b/src/Avalonia.Controls/Slider.cs
@@ -134,6 +134,8 @@ namespace Avalonia.Controls
         /// <inheritdoc/>
         protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
         {
+            base.OnApplyTemplate(e);
+            
             _decreaseButtonPressDispose?.Dispose();
             _decreaseButtonReleaseDispose?.Dispose();
             _increaseButtonSubscription?.Dispose();
@@ -189,7 +191,7 @@ namespace Avalonia.Controls
         private void MoveToPoint(PointerPoint x)
         {
             var orient = Orientation == Orientation.Horizontal;
-            
+
             var pointDen = orient ? _track.Bounds.Width : _track.Bounds.Height;
             pointDen += double.Epsilon; // Just add epsilon to avoid divide by zero exceptions.
 

From 27914d9c64982648fe6d935c352b514cafcf8168 Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Fri, 5 Jun 2020 18:12:51 -0400
Subject: [PATCH 10/11] RepeatButton should use same style as Button

---
 src/Avalonia.Themes.Fluent/Button.xaml       | 67 ++++++++++----------
 src/Avalonia.Themes.Fluent/FluentTheme.xaml  |  1 -
 src/Avalonia.Themes.Fluent/RepeatButton.xaml | 40 ------------
 3 files changed, 34 insertions(+), 74 deletions(-)
 delete mode 100644 src/Avalonia.Themes.Fluent/RepeatButton.xaml

diff --git a/src/Avalonia.Themes.Fluent/Button.xaml b/src/Avalonia.Themes.Fluent/Button.xaml
index 42fcee6cd5..ba5c59b6d3 100644
--- a/src/Avalonia.Themes.Fluent/Button.xaml
+++ b/src/Avalonia.Themes.Fluent/Button.xaml
@@ -2,15 +2,18 @@
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
-        <Button Content="Click Me!" />
-        <Button Classes="accent" Content="Click Me!" />
-      </StackPanel>      
+        <Button Content="Click Me!" Width="100" />
+        <Button Classes="accent"
+                Content="Click Me!"
+                Width="100" />
+        <RepeatButton Content="RepeatButton" Width="100" />
+      </StackPanel>
     </Border>
   </Design.PreviewWith>
   <Styles.Resources>
     <Thickness x:Key="ButtonPadding">8,5,8,6</Thickness>
   </Styles.Resources>
-  <Style Selector="Button">
+  <Style Selector="Button, RepeatButton">
     <Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
     <!--<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />-->
     <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
@@ -24,65 +27,63 @@
     <Setter Property="FontWeight" Value="Normal" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <!--<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-    <Setter Property="FocusVisualMargin" Value="-3" />-->    
+    <Setter Property="FocusVisualMargin" Value="-3" />-->
     <Setter Property="Template">
       <ControlTemplate>
-        <ContentPresenter
-                        x:Name="PART_ContentPresenter"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"                        
-                        CornerRadius="{DynamicResource ControlCornerRadius}"
-                        Padding="{TemplateBinding Padding}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
-          </ContentPresenter>        
+        <ContentPresenter x:Name="PART_ContentPresenter"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          CornerRadius="{DynamicResource ControlCornerRadius}"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
       </ControlTemplate>
     </Setter>
   </Style>
 
-  <!-- PointerOverState -->  
-  <Style Selector="Button:pointerover /template/ ContentPresenter">
+  <!--  PointerOverState  -->
+  <Style Selector="Button:pointerover /template/ ContentPresenter, RepeatButton:pointerover /template/ ContentPresenter">
     <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPointerOver}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPointerOver}" />
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" />
   </Style>
-  
-  <Style Selector="Button:pressed  /template/ ContentPresenter">
+
+  <Style Selector="Button:pressed  /template/ ContentPresenter, RepeatButton:pressed  /template/ ContentPresenter">
     <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPressed}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPressed}" />
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource ButtonForegroundPressed}" />
   </Style>
-  
-  <Style Selector="Button:disabled">
+
+  <Style Selector="Button:disabled, RepeatButton:disabled">
     <Setter Property="Background" Value="{DynamicResource ButtonBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushDisabled}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushDisabled}" />
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource ButtonForegroundDisabled}" />
   </Style>
 
-  <Style Selector="Button.accent">
+  <Style Selector="Button.accent, RepeatButton.accent">
     <Setter Property="Foreground" Value="{DynamicResource AccentButtonForeground}" />
     <Setter Property="Background" Value="{DynamicResource AccentButtonBackground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrush}" />
   </Style>
 
-  <Style Selector="Button.accent:pointerover /template/ ContentPresenter">
+  <Style Selector="Button.accent:pointerover /template/ ContentPresenter, RepeatButton.accent:pointerover /template/ ContentPresenter">
     <Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPointerOver}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPointerOver}" />
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource AccentButtonForegroundPointerOver}" />
   </Style>
 
-  <Style Selector="Button.accent:pressed  /template/ ContentPresenter">
+  <Style Selector="Button.accent:pressed  /template/ ContentPresenter, RepeatButton.accent:pressed  /template/ ContentPresenter">
     <Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPressed}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPressed}" />
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource AccentButtonForegroundPressed}" />
   </Style>
 
-  <Style Selector="Button.accent:disabled">
+  <Style Selector="Button.accent:disabled, RepeatButton.accent:disabled">
     <Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushDisabled}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushDisabled}" />
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource AccentButtonForegroundDisabled}" />
   </Style>
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/FluentTheme.xaml b/src/Avalonia.Themes.Fluent/FluentTheme.xaml
index 266acce971..a20f075e21 100644
--- a/src/Avalonia.Themes.Fluent/FluentTheme.xaml
+++ b/src/Avalonia.Themes.Fluent/FluentTheme.xaml
@@ -23,7 +23,6 @@
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.PopupRoot.xaml?assembly=Avalonia.Themes.Fluent"/>
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.ProgressBar.xaml?assembly=Avalonia.Themes.Fluent"/>
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.RadioButton.xaml?assembly=Avalonia.Themes.Fluent"/>
-  <StyleInclude Source="resm:Avalonia.Themes.Fluent.RepeatButton.xaml?assembly=Avalonia.Themes.Fluent" />
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.Separator.xaml?assembly=Avalonia.Themes.Fluent"/>
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.Slider.xaml?assembly=Avalonia.Themes.Fluent"/>
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.ScrollBar.xaml?assembly=Avalonia.Themes.Fluent"/>
diff --git a/src/Avalonia.Themes.Fluent/RepeatButton.xaml b/src/Avalonia.Themes.Fluent/RepeatButton.xaml
deleted file mode 100644
index 702e4e6ebd..0000000000
--- a/src/Avalonia.Themes.Fluent/RepeatButton.xaml
+++ /dev/null
@@ -1,40 +0,0 @@
-<Styles xmlns="https://github.com/avaloniaui">
-    <Style Selector="RepeatButton">
-        <Setter Property="Background"
-                Value="{DynamicResource ThemeControlMidBrush}" />
-        <Setter Property="BorderBrush"
-                Value="{DynamicResource ThemeBorderLowBrush}" />
-        <Setter Property="BorderThickness"
-                Value="{DynamicResource ThemeBorderThickness}" />
-        <Setter Property="Foreground"
-                Value="{DynamicResource ThemeForegroundBrush}" />
-        <Setter Property="HorizontalContentAlignment"
-                Value="Center" />
-        <Setter Property="VerticalContentAlignment"
-                Value="Center" />
-        <Setter Property="Padding"
-                Value="4" />
-        <Setter Property="Template">
-            <ControlTemplate>
-                <ContentPresenter Name="PART_ContentPresenter"
-                                  Background="{TemplateBinding Background}"
-                                  BorderBrush="{TemplateBinding BorderBrush}"
-                                  BorderThickness="{TemplateBinding BorderThickness}"
-                                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                                  Content="{TemplateBinding Content}"
-                                  Padding="{TemplateBinding Padding}"
-                                  TextBlock.Foreground="{TemplateBinding Foreground}"
-                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
-            </ControlTemplate>
-        </Setter>
-    </Style>
-    <Style Selector="RepeatButton:pointerover /template/ ContentPresenter">
-        <Setter Property="BorderBrush"
-                Value="{DynamicResource ThemeBorderMidBrush}" />
-    </Style>
-    <Style Selector="RepeatButton:disabled">
-        <Setter Property="Opacity"
-                Value="{DynamicResource ThemeDisabledOpacity}" />
-    </Style>
-</Styles>

From b6a5e9bdd48cf25daab7e040a42911f25cb446d6 Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Fri, 5 Jun 2020 18:13:19 -0400
Subject: [PATCH 11/11] Add example for RepeatButton

---
 samples/ControlCatalog/Pages/ButtonPage.xaml  |  5 ++++-
 .../ControlCatalog/Pages/ButtonPage.xaml.cs   | 20 +++++++++++++++++++
 src/Avalonia.Themes.Fluent/Button.xaml        |  6 ++----
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/samples/ControlCatalog/Pages/ButtonPage.xaml b/samples/ControlCatalog/Pages/ButtonPage.xaml
index 39d89590c2..cc7553f6a0 100644
--- a/samples/ControlCatalog/Pages/ButtonPage.xaml
+++ b/samples/ControlCatalog/Pages/ButtonPage.xaml
@@ -24,7 +24,10 @@
             </Style>
           </Button.Styles>          
         </Button>
-      </StackPanel>
+        <RepeatButton Name="RepeatButton">
+          <TextBlock Name="RepeatButtonTextBlock" Text="Repeat Button: 0" />
+        </RepeatButton>      
+    </StackPanel>
 
       <StackPanel Orientation="Vertical" Spacing="8" Width="150">
         <Button BorderThickness="0">No Border</Button>
diff --git a/samples/ControlCatalog/Pages/ButtonPage.xaml.cs b/samples/ControlCatalog/Pages/ButtonPage.xaml.cs
index 1d0c228a0e..5e555c8c91 100644
--- a/samples/ControlCatalog/Pages/ButtonPage.xaml.cs
+++ b/samples/ControlCatalog/Pages/ButtonPage.xaml.cs
@@ -5,5 +5,25 @@ namespace ControlCatalog.Pages
 {
     public class ButtonPage : UserControl
     {
+        private int repeatButtonClickCount = 0;
+
+        public ButtonPage()
+        {
+            InitializeComponent();
+
+            this.FindControl<RepeatButton>("RepeatButton").Click += OnRepeatButtonClick;
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+
+        public void OnRepeatButtonClick(object sender, object args)
+        {
+            repeatButtonClickCount++;
+            var textBlock = this.FindControl<TextBlock>("RepeatButtonTextBlock");
+            textBlock.Text = $"Repeat Button: {repeatButtonClickCount}";
+        }
     }
 }
diff --git a/src/Avalonia.Themes.Fluent/Button.xaml b/src/Avalonia.Themes.Fluent/Button.xaml
index ba5c59b6d3..3336e611c1 100644
--- a/src/Avalonia.Themes.Fluent/Button.xaml
+++ b/src/Avalonia.Themes.Fluent/Button.xaml
@@ -2,10 +2,8 @@
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
-        <Button Content="Click Me!" Width="100" />
-        <Button Classes="accent"
-                Content="Click Me!"
-                Width="100" />
+        <Button Content="Click Me!" />
+        <Button Classes="accent" Content="Click Me!" />
         <RepeatButton Content="RepeatButton" Width="100" />
       </StackPanel>
     </Border>