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] 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>