Merge pull request #8479 from AvaloniaUI/feature/7120-fluent-control-themes

Ported Fluent Theme to ControlThemes.

samples/ControlCatalog/App.xaml

@@ -5,6 +5,13 @@
              x:CompileBindings="True"
              Name="Avalonia ControlCatalog"
              x:Class="ControlCatalog.App">
+  <Application.Resources>
+    <ResourceDictionary>
+      <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="avares://ControlSamples/HamburgerMenu/HamburgerMenu.xaml" />
+      </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
+  </Application.Resources>
   <Application.Styles>
     <Style Selector="TextBlock.h1, TextBlock.h2, TextBlock.h3">
       <Setter Property="TextWrapping" Value="Wrap" />
@@ -29,7 +36,6 @@
     <Style Selector="Label.h3">
       <Setter Property="FontSize" Value="12" />
     </Style>
-    <StyleInclude Source="avares://ControlSamples/HamburgerMenu/HamburgerMenu.xaml" />
   </Application.Styles>
   <TrayIcon.Icons>
     <TrayIcons>

samples/ControlCatalog/Pages/ExpanderPage.xaml

@@ -8,26 +8,31 @@
                 Margin="0,16,0,0"
                 HorizontalAlignment="Center"
                 Spacing="16">
-      <Expander Header="Expand Up" ExpandDirection="Up">
+      <Expander Header="Expand Up" ExpandDirection="Up"
+                CornerRadius="{Binding CornerRadius}">
         <StackPanel>
           <TextBlock>Expanded content</TextBlock>
         </StackPanel>
       </Expander>
-      <Expander Header="Expand Down" ExpandDirection="Down">
+      <Expander Header="Expand Down" ExpandDirection="Down"
+                CornerRadius="{Binding CornerRadius}">
         <StackPanel>
           <TextBlock>Expanded content</TextBlock>
         </StackPanel>
       </Expander>
-      <Expander Header="Expand Left" ExpandDirection="Left">
+      <Expander Header="Expand Left" ExpandDirection="Left"
+                CornerRadius="{Binding CornerRadius}">
         <StackPanel>
           <TextBlock>Expanded content</TextBlock>
         </StackPanel>
       </Expander>
-      <Expander Header="Expand Right" ExpandDirection="Right">
+      <Expander Header="Expand Right" ExpandDirection="Right"
+                CornerRadius="{Binding CornerRadius}">
         <StackPanel>
           <TextBlock>Expanded content</TextBlock>
         </StackPanel>
       </Expander>
-    </StackPanel>    
+      <CheckBox IsChecked="{Binding Rounded}">Rounded</CheckBox>
+    </StackPanel>
   </StackPanel>
 </UserControl>

samples/ControlCatalog/Pages/ExpanderPage.xaml.cs

@@ -1,5 +1,6 @@
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
@@ -8,6 +9,7 @@ namespace ControlCatalog.Pages
         public ExpanderPage()
         {
             this.InitializeComponent();
+            DataContext = new ExpanderPageViewModel();
         }
 
         private void InitializeComponent()

samples/ControlCatalog/ViewModels/ExpanderPageViewModel.cs

@@ -0,0 +1,27 @@
+using Avalonia;
+using MiniMvvm;
+
+namespace ControlCatalog.ViewModels
+{
+    public class ExpanderPageViewModel : ViewModelBase
+    {
+        private object _cornerRadius = AvaloniaProperty.UnsetValue;
+        private bool _rounded;
+
+        public object CornerRadius
+        {
+            get => _cornerRadius;
+            private set => RaiseAndSetIfChanged(ref _cornerRadius, value);
+        }
+
+        public bool Rounded
+        {
+            get => _rounded;
+            set
+            {
+                if (RaiseAndSetIfChanged(ref _rounded, value))
+                    CornerRadius = _rounded ? new CornerRadius(25) : AvaloniaProperty.UnsetValue;
+            }
+        }
+    }
+}

samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml

@@ -1,6 +1,6 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:catalog="using:ControlSamples">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:catalog="using:ControlSamples">
   <Design.PreviewWith>
     <Border Width="400"
             Height="150">
@@ -20,25 +20,136 @@
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <x:Double x:Key="PaneCompactWidth">40</x:Double>
-    <x:Double x:Key="PaneExpandWidth">220</x:Double>
-    <x:Double x:Key="HeaderHeight">36</x:Double>
-    <x:Double x:Key="NavigationItemHeight">36</x:Double>
-    <x:Double x:Key="HamburgerMenuButtonHeight">32</x:Double>
-    <Thickness x:Key="HeaderMarginCollapsedPane">12,0,0,0</Thickness>
-    <Thickness x:Key="HeaderMarginExpandedPane">52,0,0,0</Thickness>
-    <Thickness x:Key="HeaderMarginExpandedOverlayPane">212,0,0,0</Thickness>
-    <BoxShadows x:Key="NavigationItemShadow">1 1 1 1 #2000, 0 0 1 1 #2fff</BoxShadows>
-    <BoxShadows x:Key="NavigationContentShadow">0 0 1 1 #2000</BoxShadows>
-  </Styles.Resources>
+  <x:Double x:Key="PaneCompactWidth">40</x:Double>
+  <x:Double x:Key="PaneExpandWidth">220</x:Double>
+  <x:Double x:Key="HeaderHeight">36</x:Double>
+  <x:Double x:Key="NavigationItemHeight">36</x:Double>
+  <x:Double x:Key="HamburgerMenuButtonHeight">32</x:Double>
+  <Thickness x:Key="HeaderMarginCollapsedPane">12,0,0,0</Thickness>
+  <Thickness x:Key="HeaderMarginExpandedPane">52,0,0,0</Thickness>
+  <Thickness x:Key="HeaderMarginExpandedOverlayPane">212,0,0,0</Thickness>
+  <BoxShadows x:Key="NavigationItemShadow">1 1 1 1 #2000, 0 0 1 1 #2fff</BoxShadows>
+  <BoxShadows x:Key="NavigationContentShadow">0 0 1 1 #2000</BoxShadows>
+
+  <ControlTheme x:Key="NavigationButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="MinHeight" Value="0" />
+    <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Padding" Value="12,0,4,0" />
+    <Setter Property="Margin" Value="4,0,8,0" />
+    <Setter Property="CornerRadius" Value="8" />
+    <Setter Property="ClipToBounds" Value="False" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          TextElement.FontFamily="{TemplateBinding FontFamily}"
+                          TextElement.FontSize="{TemplateBinding FontSize}"
+                          TextElement.FontWeight="{TemplateBinding FontWeight}" />
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Border.Background" Value="{DynamicResource SystemChromeLowColor}" />
+      <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="HamburgerMenuTabItem" TargetType="TabItem">
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="MinHeight" Value="0" />
+    <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Padding" Value="12,0,4,0" />
+    <Setter Property="Margin" Value="4,0,8,0" />
+    <Setter Property="CornerRadius" Value="8" />
+    <Setter Property="ClipToBounds" Value="False" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="PART_LayoutRoot"
+                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Panel>
+            <Border Name="PART_SelectedPipe"
+                    Width="{DynamicResource TabItemPipeThickness}"
+                    Height="{DynamicResource TabItemVerticalPipeHeight}"
+                    Margin="6,0,0,0"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Center"
+                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
+                    IsVisible="False"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"/>
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Padding="{TemplateBinding Padding}"
+                              Margin="0"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Content="{TemplateBinding Header}"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}"
+                              TextElement.FontFamily="{TemplateBinding FontFamily}"
+                              TextElement.FontSize="{TemplateBinding FontSize}"
+                              TextElement.FontWeight="{TemplateBinding FontWeight}" />
+          </Panel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>
+      
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource SystemChromeLowColor}" />
+        <Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
+      </Style>
+    </Style>
+    
+    <Style Selector="^:selected">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
+
+      <Style Selector="^ /template/ Border#PART_SelectedPipe">
+        <Setter Property="IsVisible" Value="True" />
+      </Style>
+    </Style>
+
+    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
+      <Setter Property="Border.Background" Value="{DynamicResource SystemChromeLowColor}" />
+      <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
+    </Style>
+  </ControlTheme>
 
   <!--  HamburgerMenu  -->
-  <Style Selector="catalog|HamburgerMenu">
+  <ControlTheme x:Key="{x:Type catalog:HamburgerMenu}" TargetType="catalog:HamburgerMenu">
     <Setter Property="Padding" Value="12 8 4 0" />
     <Setter Property="PaneBackground" Value="{DynamicResource SystemChromeMediumColor}" />
     <Setter Property="Background" Value="{DynamicResource SystemChromeMediumColor}" />
     <Setter Property="ContentBackground" Value="{DynamicResource SystemAltHighColor}" />
+    <Setter Property="ItemContainerTheme" Value="{StaticResource HamburgerMenuTabItem}"/>
+    <Setter Property="TabStripPlacement" Value="Left" />
     <Setter Property="Template">
       <ControlTemplate>
         <Panel Background="{TemplateBinding PaneBackground}">
@@ -46,7 +157,8 @@
                      CompactPaneLength="{StaticResource PaneCompactWidth}"
                      DisplayMode="Inline"
                      IsPaneOpen="True"
-                     OpenPaneLength="{StaticResource PaneExpandWidth}">
+                     OpenPaneLength="{StaticResource PaneExpandWidth}"
+                     PaneBackground="Transparent">
             <SplitView.Pane>
               <Grid Margin="0,0,1,5" RowDefinitions="Auto, *, Auto">
                 <Panel Height="{StaticResource HeaderHeight}" />
@@ -58,8 +170,7 @@
                   <ItemsPresenter Name="PART_ItemsPresenter"
                                   HorizontalAlignment="Stretch"
                                   ItemTemplate="{TemplateBinding ItemTemplate}"
-                                  Items="{TemplateBinding Items}"
-                                  ItemsPanel="{TemplateBinding ItemsPanel}">
+                                  Items="{TemplateBinding Items}">
                     <ItemsPresenter.ItemsPanel>
                       <ItemsPanelTemplate>
                         <StackPanel x:Name="HamburgerItemsPanel"
@@ -70,7 +181,7 @@
                 </ScrollViewer>
                 <Button x:Name="SettingsButton"
                         Grid.Row="2"
-                        Classes="NavigationButton"
+                        Theme="{StaticResource NavigationButton}"
                         Content="Settings"
                         Flyout="{TemplateBinding (FlyoutBase.AttachedFlyout)}"
                         IsVisible="{Binding $parent[TabControl].(FlyoutBase.AttachedFlyout), Converter={x:Static ObjectConverters.IsNotNull}}" />
@@ -82,6 +193,7 @@
                   <TextBlock x:Name="HeaderHolder"
                              VerticalAlignment="Center"
                              Classes="h1"
+                             Margin="{StaticResource HeaderMarginExpandedPane}"
                              Text="{Binding $parent[TabControl].SelectedItem.Header, FallbackValue=''}">
                     <TextBlock.Transitions>
                       <Transitions>
@@ -119,7 +231,7 @@
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
                         HorizontalContentAlignment="Center"
-                        Classes="NavigationButton"
+                        Theme="{StaticResource NavigationButton}"
                         CornerRadius="4"
                         IsChecked="{Binding #PART_NavigationPane.IsPaneOpen, Mode=TwoWay}">
             <PathIcon Data="M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993L3 17h18H3Zm0-6 18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993L3 11l18-.002L3 11Zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993L3 5h18H3Z" Foreground="{TemplateBinding Foreground}" />
@@ -127,116 +239,26 @@
         </Panel>
       </ControlTemplate>
     </Setter>
-  </Style>
 
-  <Style Selector="catalog|HamburgerMenu /template/ SplitView TextBlock#HeaderHolder">
-    <Setter Property="Margin" Value="{StaticResource HeaderMarginExpandedPane}" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu /template/ SplitView[IsPaneOpen=True] TextBlock#HeaderHolder">
-    <Setter Property="Margin" Value="{StaticResource HeaderMarginCollapsedPane}" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Overlay][IsPaneOpen=True] TextBlock#HeaderHolder">
-    <Setter Property="Margin" Value="{StaticResource HeaderMarginExpandedOverlayPane}" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu /template/ SplitView">
-    <Setter Property="PaneBackground" Value="Transparent" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Overlay]">
-    <Setter Property="PaneBackground" Value="{TemplateBinding PaneBackground}" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Overlay]">
-    <Setter Property="Background" Value="{Binding $parent[TabControl].ContentBackground}" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Inline] Border#BackgroundBorder">
-    <Setter Property="Background" Value="{Binding $parent[TabControl].ContentBackground}" />
-    <Setter Property="BoxShadow" Value="{StaticResource NavigationContentShadow}" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Inline][IsPaneOpen=True] Border#BackgroundBorder">
-    <Setter Property="CornerRadius" Value="8 0 0 0" />
-  </Style>
+    <Style Selector="^ /template/ SplitView[IsPaneOpen=True] TextBlock#HeaderHolder">
+      <Setter Property="Margin" Value="{StaticResource HeaderMarginCollapsedPane}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Overlay][IsPaneOpen=True] TextBlock#HeaderHolder">
+      <Setter Property="Margin" Value="{StaticResource HeaderMarginExpandedOverlayPane}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Overlay]">
+      <Setter Property="PaneBackground" Value="{TemplateBinding PaneBackground}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Overlay]">
+      <Setter Property="Background" Value="{Binding $parent[TabControl].ContentBackground}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Inline] Border#BackgroundBorder">
+      <Setter Property="Background" Value="{Binding $parent[TabControl].ContentBackground}" />
+      <Setter Property="BoxShadow" Value="{StaticResource NavigationContentShadow}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Inline][IsPaneOpen=True] Border#BackgroundBorder">
+      <Setter Property="CornerRadius" Value="8 0 0 0" />
+    </Style>
+  </ControlTheme>
 
-
-  <!--  HamburgerMenu TabItem  -->
-  <Style Selector="catalog|HamburgerMenu > TabItem, :is(Button).NavigationButton">
-    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="VerticalAlignment" Value="Stretch" />
-    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-    <Setter Property="FontWeight" Value="Normal" />
-    <Setter Property="MinHeight" Value="0" />
-    <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="Padding" Value="12,0,4,0" />
-    <Setter Property="Margin" Value="4,0,8,0" />
-    <Setter Property="CornerRadius" Value="8" />
-    <Setter Property="ClipToBounds" Value="False" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu > TabItem">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Border Name="PART_LayoutRoot"
-                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                Background="{TemplateBinding Background}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                CornerRadius="{TemplateBinding CornerRadius}">
-          <Panel>
-            <Border Name="PART_SelectedPipe"
-                    Width="{DynamicResource TabItemPipeThickness}"
-                    Height="{DynamicResource TabItemVerticalPipeHeight}"
-                    Margin="6,0,0,0"
-                    HorizontalAlignment="Left"
-                    VerticalAlignment="Center"
-                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}" />
-            <ContentPresenter Name="PART_ContentPresenter"
-                              Padding="{TemplateBinding Padding}"
-                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                              Content="{TemplateBinding Header}"
-                              ContentTemplate="{TemplateBinding HeaderTemplate}"
-                              TextElement.FontFamily="{TemplateBinding FontFamily}"
-                              TextElement.FontSize="{TemplateBinding FontSize}"
-                              TextElement.FontWeight="{TemplateBinding FontWeight}" />
-          </Panel>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-  <Style Selector=":is(Button).NavigationButton">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <ContentPresenter Name="PART_ContentPresenter"
-                          Padding="{TemplateBinding Padding}"
-                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                          Background="{TemplateBinding Background}"
-                          BorderBrush="{TemplateBinding BorderBrush}"
-                          BorderThickness="{TemplateBinding BorderThickness}"
-                          Content="{TemplateBinding Content}"
-                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                          CornerRadius="{TemplateBinding CornerRadius}"
-                          TextElement.FontFamily="{TemplateBinding FontFamily}"
-                          TextElement.FontSize="{TemplateBinding FontSize}"
-                          TextElement.FontWeight="{TemplateBinding FontWeight}" />
-      </ControlTemplate>
-    </Setter>
-  </Style>
-  <Style Selector="catalog|HamburgerMenu > TabItem /template/ Border#PART_LayoutRoot, :is(Button).NavigationButton /template/ ContentPresenter">
-    <Setter Property="Border.Background" Value="Transparent" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SystemBaseHighColor}" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu > TabItem:pointerover /template/ Border#PART_LayoutRoot, :is(Button).NavigationButton:pointerover /template/ ContentPresenter">
-    <Setter Property="Border.Background" Value="{DynamicResource SystemChromeLowColor}" />
-    <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
-  </Style>
-  <Style Selector="catalog|HamburgerMenu > TabItem:pressed /template/ Border#PART_LayoutRoot, :is(Button).NavigationButton:pressed /template/ ContentPresenter">
-    <Setter Property="Border.Background" Value="{DynamicResource SystemChromeLowColor}" />
-    <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
-  </Style>
-  <Style Selector=":is(Button).NavigationButton:pressed">
-    <Setter Property="RenderTransform" Value="none" />
-  </Style>
-</Styles>
+</ResourceDictionary>

src/Avalonia.Base/StyledElement.cs

@@ -873,9 +873,12 @@ namespace Avalonia
 
                     if (applied.Source == styles[i])
                     {
-                        applied.Dispose();
                         _appliedStyles.RemoveAt(j);
+                        applied.Dispose();
                     }
+
+                    if (j > _appliedStyles.Count)
+                        j = _appliedStyles.Count;
                 }
             }
         }

src/Avalonia.Controls/Chrome/CaptionButtons.cs

@@ -8,10 +8,10 @@ namespace Avalonia.Controls.Chrome
     /// <summary>
     /// Draws window minimize / maximize / close buttons in a <see cref="TitleBar"/> when managed client decorations are enabled.
     /// </summary>
-    [TemplatePart("PART_CloseButton",      typeof(Panel))]
-    [TemplatePart("PART_RestoreButton",    typeof(Panel))]
-    [TemplatePart("PART_MinimiseButton",   typeof(Panel))]
-    [TemplatePart("PART_FullScreenButton", typeof(Panel))]
+    [TemplatePart("PART_CloseButton",      typeof(Button))]
+    [TemplatePart("PART_RestoreButton",    typeof(Button))]
+    [TemplatePart("PART_MinimiseButton",   typeof(Button))]
+    [TemplatePart("PART_FullScreenButton", typeof(Button))]
     [PseudoClasses(":minimized", ":normal", ":maximized", ":fullscreen")]
     public class CaptionButtons : TemplatedControl
     {
@@ -88,18 +88,15 @@ namespace Avalonia.Controls.Chrome
         {
             base.OnApplyTemplate(e);
 
-            var closeButton = e.NameScope.Get<Panel>("PART_CloseButton");
-            var restoreButton = e.NameScope.Get<Panel>("PART_RestoreButton");
-            var minimiseButton = e.NameScope.Get<Panel>("PART_MinimiseButton");
-            var fullScreenButton = e.NameScope.Get<Panel>("PART_FullScreenButton");
+            var closeButton = e.NameScope.Get<Button>("PART_CloseButton");
+            var restoreButton = e.NameScope.Get<Button>("PART_RestoreButton");
+            var minimiseButton = e.NameScope.Get<Button>("PART_MinimiseButton");
+            var fullScreenButton = e.NameScope.Get<Button>("PART_FullScreenButton");
 
-            closeButton.PointerReleased += (sender, e) => OnClose();
-
-            restoreButton.PointerReleased += (sender, e) => OnRestore();
-
-            minimiseButton.PointerReleased += (sender, e) => OnMinimize();
-
-            fullScreenButton.PointerReleased += (sender, e) => OnToggleFullScreen();
+            closeButton.Click += (sender, e) => OnClose();
+            restoreButton.Click += (sender, e) => OnRestore();
+            minimiseButton.Click += (sender, e) => OnMinimize();
+            fullScreenButton.Click += (sender, e) => OnToggleFullScreen();
         }
     }
 }

src/Avalonia.Controls/Chrome/TitleBar.cs

@@ -44,13 +44,13 @@ namespace Avalonia.Controls.Chrome
             base.OnApplyTemplate(e);
 
             _captionButtons?.Detach();
-            
+
             _captionButtons = e.NameScope.Get<CaptionButtons>("PART_CaptionButtons");
 
             if (VisualRoot is Window window)
             {
-                _captionButtons?.Attach(window);   
-                
+                _captionButtons?.Attach(window);
+
                 UpdateSize(window);
             }
         }
@@ -90,7 +90,7 @@ namespace Avalonia.Controls.Chrome
             base.OnDetachedFromVisualTree(e);
 
             _disposables?.Dispose();
-            
+
             _captionButtons?.Detach();
             _captionButtons = null;
         }

src/Avalonia.Controls/DateTimePickers/DateTimePickerPanel.cs

@@ -454,7 +454,7 @@ namespace Avalonia.Controls.Primitives
                 children.Add(new ListBoxItem
                 {
                     Height = ItemHeight,
-                    Classes = new Classes("DateTimePickerItem", $"{PanelType}Item"),
+                    Classes = new Classes($"{PanelType}Item"),
                     VerticalContentAlignment = Avalonia.Layout.VerticalAlignment.Center,
                     Focusable = false
                 });

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml

@@ -308,6 +308,7 @@
    
     <!--Resources for NotificationCard.xaml -->
     <SolidColorBrush x:Key="NotificationCardBackgroundBrush" Color="#444444" />
+    <StaticResource x:Key="NotificationCardForegroundBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <SolidColorBrush x:Key="NotificationCardProgressBackgroundBrush" Color="#9A9A9A" />
     <SolidColorBrush x:Key="NotificationCardInformationBackgroundBrush" Color="#007ACC" Opacity="0.75"/>
     <SolidColorBrush x:Key="NotificationCardSuccessBackgroundBrush" Color="#1F9E45" Opacity="0.75"/>

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml

@@ -304,6 +304,7 @@
     
     <!--Resources for NotificationCard.xaml -->
     <SolidColorBrush x:Key="NotificationCardBackgroundBrush" Color="White" />
+    <StaticResource x:Key="NotificationCardForegroundBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <SolidColorBrush x:Key="NotificationCardProgressBackgroundBrush" Color="#9A9A9A" />
     <SolidColorBrush x:Key="NotificationCardInformationBackgroundBrush" Color="#0078D4" />
     <SolidColorBrush x:Key="NotificationCardSuccessBackgroundBrush" Color="#128B44" />

src/Avalonia.Themes.Fluent/Controls/AutoCompleteBox.xaml

@@ -1,5 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui" 
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <AutoCompleteBox Width="200">
@@ -16,56 +16,56 @@
       </AutoCompleteBox>
     </Border>
   </Design.PreviewWith>
-
-  <Style Selector="AutoCompleteBox">
-    <Setter Property="VerticalAlignment" Value="Top" />
-    <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
-    <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-    <Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
-    <Setter Property="MaxDropDownHeight" Value="{DynamicResource AutoCompleteListMaxHeight}" />
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Grid Name="PART_LayoutRoot">
-          <TextBox Name="PART_TextBox"
-                   Watermark="{TemplateBinding Watermark}"
-                   Width="{TemplateBinding Width}"
-                   Foreground="{TemplateBinding Foreground}"
-                   Background="{TemplateBinding Background}"
-                   BorderBrush="{TemplateBinding BorderBrush}"
-                   BorderThickness="{TemplateBinding BorderThickness}"
-                   CornerRadius="{TemplateBinding CornerRadius}"
-                   FontSize="{TemplateBinding FontSize}"
-                   FontFamily="{TemplateBinding FontFamily}"
-                   FontWeight="{TemplateBinding FontWeight}"
-                   Padding="{TemplateBinding Padding}"
-                   Margin="0"
-                   DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}" />
-          
-          <Popup Name="PART_Popup"
-                 WindowManagerAddShadowHint="False"
-                 MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                 MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                 IsLightDismissEnabled="True"
-                 PlacementTarget="{TemplateBinding}">            
-            <Border Name="PART_SuggestionsContainer"
-                    Padding="{DynamicResource AutoCompleteListMargin}"
-                    BorderThickness="{DynamicResource AutoCompleteListBorderThemeThickness}"
-                    BorderBrush="{DynamicResource AutoCompleteBoxSuggestionsListBorderBrush}"
-                    Background="{DynamicResource AutoCompleteBoxSuggestionsListBackground}"
-                    CornerRadius="{DynamicResource OverlayCornerRadius}">
-              <ListBox Name="PART_SelectingItemsControl"
-                       BorderThickness="0"
-                       Background="Transparent"
-                       ItemTemplate="{TemplateBinding ItemTemplate}"
-                       Margin="{DynamicResource AutoCompleteListPadding}" />
-            </Border>
-          </Popup>
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-</Styles>
+  
+    <ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
+      <Setter Property="VerticalAlignment" Value="Top" />
+      <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
+      <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
+      <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
+      <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+      <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+      <Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
+      <Setter Property="MaxDropDownHeight" Value="{DynamicResource AutoCompleteListMaxHeight}" />
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Grid Name="PART_LayoutRoot">
+            <TextBox Name="PART_TextBox"
+                     Watermark="{TemplateBinding Watermark}"
+                     Width="{TemplateBinding Width}"
+                     Foreground="{TemplateBinding Foreground}"
+                     Background="{TemplateBinding Background}"
+                     BorderBrush="{TemplateBinding BorderBrush}"
+                     BorderThickness="{TemplateBinding BorderThickness}"
+                     CornerRadius="{TemplateBinding CornerRadius}"
+                     FontSize="{TemplateBinding FontSize}"
+                     FontFamily="{TemplateBinding FontFamily}"
+                     FontWeight="{TemplateBinding FontWeight}"
+                     Padding="{TemplateBinding Padding}"
+                     Margin="0"
+                     DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}" />
+            <Popup Name="PART_Popup" 
+                   WindowManagerAddShadowHint="False"
+                   MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}" 
+                   MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                   IsLightDismissEnabled="True"
+                   PlacementTarget="{TemplateBinding}">
+              <Border Name="PART_SuggestionsContainer"
+                      Padding="{DynamicResource AutoCompleteListMargin}"
+                      BorderThickness="{DynamicResource AutoCompleteListBorderThemeThickness}"
+                      BorderBrush="{DynamicResource AutoCompleteBoxSuggestionsListBorderBrush}"
+                      Background="{DynamicResource AutoCompleteBoxSuggestionsListBackground}"
+                      CornerRadius="{DynamicResource OverlayCornerRadius}">
+                <ListBox Name="PART_SelectingItemsControl"
+                         BorderThickness="0"
+                         Background="Transparent"
+                         ItemTemplate="{TemplateBinding ItemTemplate}"
+                         Margin="{DynamicResource AutoCompleteListPadding}" />
+              </Border>
+            </Popup>
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </ControlTheme>
+  
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Button.xaml

@@ -1,4 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
@@ -7,14 +8,11 @@
       </StackPanel>
     </Border>
   </Design.PreviewWith>
-
-  <Styles.Resources>
-    <Thickness x:Key="ButtonPadding">8,5,8,6</Thickness>
-  </Styles.Resources>
   
-  <Style Selector="Button">
+  <Thickness x:Key="ButtonPadding">8,5,8,6</Thickness>
+
+  <ControlTheme x:Key="{x:Type Button}" TargetType="Button">
     <Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
-    <!--<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />-->
     <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThemeThickness}" />
@@ -22,8 +20,13 @@
     <Setter Property="Padding" Value="{DynamicResource ButtonPadding}" />
     <Setter Property="HorizontalAlignment" Value="Left" />
     <Setter Property="VerticalAlignment" Value="Center" />
-    <!--<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-    <Setter Property="FocusVisualMargin" Value="-3" />-->
+    <Setter Property="RenderTransform" Value="none" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:.075" />
+      </Transitions>
+    </Setter>
+
     <Setter Property="Template">
       <ControlTemplate>
         <ContentPresenter x:Name="PART_ContentPresenter"
@@ -46,6 +49,10 @@
       <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" />
     </Style>
 
+    <Style Selector="^:pressed">
+      <Setter Property="RenderTransform" Value="scale(0.98)" />
+    </Style>
+
     <Style Selector="^:pressed  /template/ ContentPresenter#PART_ContentPresenter">
       <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPressed}" />
       <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPressed}" />
@@ -83,19 +90,5 @@
         <Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundDisabled}" />
       </Style>
     </Style>
-  </Style>
-
-  <Style Selector="Button, RepeatButton, ToggleButton, DropDownButton">
-    <Setter Property="RenderTransform" Value="none" />
-    <Setter Property="Transitions">
-      <Transitions>
-        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:.075" />
-      </Transitions>
-    </Setter>
-  </Style>
-
-  <Style Selector="Button:pressed, RepeatButton:pressed, ToggleButton:pressed, DropDownButton:pressed">
-    <Setter Property="RenderTransform" Value="scale(0.98)" />    
-  </Style>
-
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ButtonSpinner.xaml

@@ -1,58 +1,57 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:sys="clr-namespace:System;assembly=netstandard"
-        xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="clr-namespace:System;assembly=netstandard"
+                    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
+                    x:CompileBindings="True">
   <Design.PreviewWith>
-    <Border Padding="20"
-            Background="Black">
+    <Border Padding="20">
       <StackPanel Spacing="20">
-        <ButtonSpinner ButtonSpinnerLocation="Right"
-                       Content="Right disabled inline spinner"
-                       AllowSpin="False">
-          <DataValidationErrors.Error>
-            <sys:Exception />
-          </DataValidationErrors.Error>
-        </ButtonSpinner>
+        <ButtonSpinner Content="Right spinner" />
         <ButtonSpinner ButtonSpinnerLocation="Left"
                        Content="Left spinner" />
+        <ButtonSpinner BorderThickness="2"
+                       BorderBrush="Blue"
+                       Content="Right Border" />
+        <ButtonSpinner ButtonSpinnerLocation="Left"
+                       BorderThickness="2"
+                       BorderBrush="Blue"
+                       Content="Left Border" />
+        <ButtonSpinner Content="Right disabled"
+                       AllowSpin="False"/>
+        <ButtonSpinner ButtonSpinnerLocation="Left"
+                       Content="Left disabled"
+                       AllowSpin="False"/>
         <ButtonSpinner ShowButtonSpinner="False"
                        Content="Hide spinner" />
+        <ButtonSpinner Content="Error">
+          <DataValidationErrors.Error>
+            <sys:Exception>
+              <x:Arguments>
+                <x:String>Error</x:String>
+              </x:Arguments>
+            </sys:Exception>
+          </DataValidationErrors.Error>
+        </ButtonSpinner>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <converters:MarginMultiplierConverter x:Key="ButtonSpinner_OnlyLeftThinknessConverter"
-                                          Indent="1"
-                                          Left="True" />
-    <converters:MarginMultiplierConverter x:Key="ButtonSpinner_OnlyRightThinknessConverter"
-                                          Indent="1"
-                                          Right="True" />
+  <converters:MarginMultiplierConverter x:Key="ButtonSpinnerLeftThickness" Indent="1" Left="True" />
+  <converters:MarginMultiplierConverter x:Key="ButtonSpinnerRightThickness" Indent="1" Right="True" />
+  <StreamGeometry x:Key="ButtonSpinnerIncreaseButtonIcon">M0,9 L10,0 20,9 19,10 10,2 1,10 z</StreamGeometry>
+  <StreamGeometry x:Key="ButtonSpinnerDecreaseButtonIcon">M0,1 L10,10 20,1 19,0 10,8 1,0 z</StreamGeometry>
 
-    <StreamGeometry x:Key="ButtonSpinnerIncreaseButtonIcon">M0,9 L10,0 20,9 19,10 10,2 1,10 z</StreamGeometry>
-    <StreamGeometry x:Key="ButtonSpinnerDecreaseButtonIcon">M0,1 L10,10 20,1 19,0 10,8 1,0 z</StreamGeometry>
-  </Styles.Resources>
-
-  <!--  RepeatButton.ButtonSpinnerRepeatButton  -->
-  <Style Selector="RepeatButton.ButtonSpinnerRepeatButton">
+  <ControlTheme x:Key="FluentButtonSpinnerRepeatButton" TargetType="RepeatButton" BasedOn="{StaticResource {x:Type RepeatButton}}">
+    <Setter Property="CornerRadius" Value="0"/>
     <Setter Property="MinWidth" Value="34" />
     <Setter Property="VerticalAlignment" Value="Stretch" />
-  </Style>
-
-  <Style Selector="RepeatButton.ButtonSpinnerRepeatButton /template/ ContentPresenter">
-    <Setter Property="CornerRadius" Value="0" />
-    <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
-  </Style>
-  <Style Selector="RepeatButton.ButtonSpinnerRepeatButton:disabled">
-    <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
-  </Style>
-  <Style Selector="RepeatButton.ButtonSpinnerRepeatButton:disabled > Path">
-    <Setter Property="Fill" Value="{DynamicResource RepeatButtonForegroundDisabled}" />
-  </Style>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource RepeatButtonForegroundDisabled}"/>
+    </Style>
+  </ControlTheme>
 
-  <!--  ButtonSpinner  -->
-  <Style Selector="ButtonSpinner">
+  <ControlTheme x:Key="{x:Type ButtonSpinner}" TargetType="ButtonSpinner">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
     <Setter Property="Padding" Value="10, 0" />
@@ -61,7 +60,7 @@
     <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
-    <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />    
+    <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
@@ -74,76 +73,67 @@
                   BorderThickness="{TemplateBinding BorderThickness}"
                   CornerRadius="{TemplateBinding CornerRadius}"
                   MinHeight="{TemplateBinding MinHeight}">
-            <Grid ColumnDefinitions="Auto,*,Auto">
-              <ContentPresenter Name="PART_ContentPresenter"
-                                Grid.Column="1"
-                                ContentTemplate="{TemplateBinding ContentTemplate}"
-                                Content="{TemplateBinding Content}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                Padding="{TemplateBinding Padding}" />
-
+            <DockPanel>
               <StackPanel Name="PART_SpinnerPanel"
+                          DockPanel.Dock="Right"
                           Orientation="Horizontal"
                           IsVisible="{TemplateBinding ShowButtonSpinner}">
                 <RepeatButton Name="PART_IncreaseButton"
-                              Classes="ButtonSpinnerRepeatButton"
+                              Theme="{StaticResource FluentButtonSpinnerRepeatButton}"
+                              Background="{TemplateBinding Background}"
+                              BorderBrush="{TemplateBinding BorderBrush}"
+                              BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource ButtonSpinnerLeftThickness}}"
+                              CornerRadius="0"
+                              VerticalAlignment="Stretch"
                               VerticalContentAlignment="Center"
                               Foreground="{TemplateBinding Foreground}"
-                              BorderBrush="{TemplateBinding BorderBrush}"
-                              Background="{TemplateBinding Background}"
-                              FontSize="{TemplateBinding FontSize}">
-                  <Path Fill="{TemplateBinding Foreground}"
-                        Width="16"
-                        Height="8"
-                        Stretch="Uniform"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
-                        Data="{StaticResource ButtonSpinnerIncreaseButtonIcon}" />
+                              FontSize="{TemplateBinding FontSize}"
+                              MinWidth="34">
+                  <PathIcon Width="16"
+                            Height="8"
+                            Data="{StaticResource ButtonSpinnerIncreaseButtonIcon}" />
                 </RepeatButton>
 
                 <RepeatButton Name="PART_DecreaseButton"
-                              Classes="ButtonSpinnerRepeatButton"
-                              Foreground="{TemplateBinding Foreground}"
-                              BorderBrush="{TemplateBinding BorderBrush}"
+                              Theme="{StaticResource FluentButtonSpinnerRepeatButton}"
                               Background="{TemplateBinding Background}"
+                              BorderBrush="{TemplateBinding BorderBrush}"
+                              BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource ButtonSpinnerLeftThickness}}"
+                              CornerRadius="0"
+                              VerticalAlignment="Stretch"
                               VerticalContentAlignment="Center"
-                              FontSize="{TemplateBinding FontSize}">
-                  <Path Fill="{TemplateBinding Foreground}"
-                        Width="16"
-                        Height="8"
-                        Stretch="Uniform"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
-                        Data="{StaticResource ButtonSpinnerDecreaseButtonIcon}" />
+                              Foreground="{TemplateBinding Foreground}"
+                              FontSize="{TemplateBinding FontSize}"
+                              MinWidth="34">
+                  <PathIcon Width="16"
+                            Height="8"
+                            Data="{StaticResource ButtonSpinnerDecreaseButtonIcon}" />
                 </RepeatButton>
               </StackPanel>
-            </Grid>
+
+              <ContentPresenter Name="PART_ContentPresenter"
+                                Grid.Column="1"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Content="{TemplateBinding Content}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                Padding="{TemplateBinding Padding}" />
+            </DockPanel>
           </Border>
         </DataValidationErrors>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!--  ButtonSpinnerLocation=Right  -->
-  <Style Selector="ButtonSpinner:right /template/ StackPanel#PART_SpinnerPanel">
-    <Setter Property="Grid.Column" Value="2" />
-  </Style>
-  <Style Selector="ButtonSpinner:right /template/ RepeatButton.ButtonSpinnerRepeatButton">
-    <Setter Property="BorderThickness" Value="{Binding $parent[ButtonSpinner].BorderThickness, Converter={StaticResource ButtonSpinner_OnlyLeftThinknessConverter}}" />
-  </Style>
-
-  <!--  ButtonSpinnerLocation=Left  -->
-  <Style Selector="ButtonSpinner:left /template/ StackPanel#PART_SpinnerPanel">
-    <Setter Property="Grid.Column" Value="0" />
-  </Style>
-  <Style Selector="ButtonSpinner:left /template/ RepeatButton.ButtonSpinnerRepeatButton">
-    <Setter Property="BorderThickness" Value="{Binding $parent[ButtonSpinner].BorderThickness, Converter={StaticResource ButtonSpinner_OnlyRightThinknessConverter}}" />
-  </Style>
-
-  <!--  Error state  -->
-  <Style Selector="ButtonSpinner:error">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemErrorTextColor}" />
-  </Style>
+    <Style Selector="^:left">
+      <Style Selector="^ /template/ StackPanel#PART_SpinnerPanel">
+        <Setter Property="DockPanel.Dock" Value="Left"/>
+      </Style>
+      <Style Selector="^ /template/ RepeatButton">
+        <Setter Property="BorderThickness" Value="{TemplateBinding BorderThickness, Converter={StaticResource ButtonSpinnerRightThickness}}"/>
+      </Style>
+    </Style>
+    <Style Selector="^:error">
+      <Setter Property="BorderBrush" Value="{DynamicResource SystemErrorTextColor}" />
+    </Style>
+  </ControlTheme>
 
-</Styles>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Calendar.xaml

@@ -1,17 +1,19 @@
-<!--
-// (c) Copyright Microsoft Corporation.
-// This source is subject to the Microsoft Public License (Ms-PL).
-// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
-// All other rights reserved.
+<!--
+    // (c) Copyright Microsoft Corporation.
+    // This source is subject to the Microsoft Public License (Ms-PL).
+    // Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
+    // All other rights reserved.
 -->
 
-<Styles xmlns="https://github.com/avaloniaui">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <Calendar />
     </Border>
   </Design.PreviewWith>
-  <Style Selector="Calendar">
+
+  <ControlTheme x:Key="{x:Type Calendar}" TargetType="Calendar">
     <Setter Property="Foreground" Value="{DynamicResource CalendarViewForeground}" />
     <Setter Property="Background" Value="{DynamicResource CalendarViewBackground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewBorderBrush}" />
@@ -20,19 +22,19 @@
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <StackPanel Name="Root"
-                    HorizontalAlignment="Center"
-                    ClipToBounds="True">
-
-                    <CalendarItem Name="CalendarItem"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        HeaderBackground="{TemplateBinding HeaderBackground}"
-                        CornerRadius="{TemplateBinding CornerRadius}"/>
-
+        <StackPanel
+            Name="Root"
+            HorizontalAlignment="Center"
+            ClipToBounds="True">
+          <CalendarItem
+              Name="CalendarItem"
+              Background="{TemplateBinding Background}"
+              BorderBrush="{TemplateBinding BorderBrush}"
+              BorderThickness="{TemplateBinding BorderThickness}"
+              CornerRadius="{TemplateBinding CornerRadius}"
+              HeaderBackground="{TemplateBinding HeaderBackground}" />
         </StackPanel>
       </ControlTemplate>
     </Setter>
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/CalendarButton.xaml

@@ -1,121 +1,117 @@
-<!--
+<!--
 // (c) Copyright Microsoft Corporation.
 // This source is subject to the Microsoft Public License (Ms-PL).
 // Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
 // All other rights reserved.
 -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <CalendarButton/>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
 
-<Styles xmlns="https://github.com/avaloniaui">
-  <Style Selector="CalendarButton">
-    <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,0"/>
+  <ControlTheme x:Key="{x:Type CalendarButton}" TargetType="CalendarButton">
+    <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,0" />
     <!--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="HorizontalContentAlignment" Value="Center"/>
-    <Setter Property="VerticalContentAlignment" Value="Center"/>
+    <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="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" ClipToBounds="True">
-
             <ContentControl Name="Content"
-                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                  Content="{TemplateBinding Content}"
-                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                  FontSize="{TemplateBinding FontSize}"
-                  Margin="{TemplateBinding Padding}"/>
-
+                            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-->
+          <!-- Drawn Border should render on top of background to preserve the 1px margin between items -->
           <Border Name="Border"
                   BorderThickness="2"
-                  BorderBrush="{TemplateBinding BorderBrush}"/>
-
-          <!--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="-2"  CornerRadius="{DynamicResource ControlCornerRadius}"/>-->
+                  BorderBrush="{TemplateBinding BorderBrush}" />
         </Panel>
       </ControlTemplate>
     </Setter>
-  </Style>
-  <!--<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:pressed /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewPressedBorderBrush}"/>
-  </Style>
+    <Style Selector="^:pointerover /template/ Border#Border">
+      <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewHoverBorderBrush}" />
+    </Style>
 
-  <!-- Adjusted :selected to look like :today from DayItem -->
-  <Style Selector="CalendarButton:selected /template/ Border#Root">
-    <Setter Property="Background" Value="{DynamicResource SystemAccentColor}"/>
-  </Style>
-  <Style Selector="CalendarButton:selected /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}"/>
-  </Style>
-  <Style Selector="CalendarButton:selected:pointerover /template/ Border#Root">
-    <Setter Property="Background">
-      <SolidColorBrush Color="{DynamicResource SystemAccentColor}"/>
-    </Setter>
-  </Style>
-  <Style Selector="CalendarButton:selected:pointerover /template/ Border#Border">
-    <Setter Property="BorderBrush">
-      <SolidColorBrush Color="{DynamicResource SystemAccentColorDark1}"/>
-    </Setter>
-  </Style>
-  <Style Selector="CalendarButton:selected:pressed /template/ Border#Root">
-    <Setter Property="Background">
-      <SolidColorBrush Color="{DynamicResource SystemAccentColor}"/>
-    </Setter>
-  </Style>
-  <Style Selector="CalendarButton:pressed /template/ Border#Border">
-    <Setter Property="BorderBrush">
-      <SolidColorBrush Color="{DynamicResource SystemAccentColorDark2}"/>
-    </Setter>
-  </Style>
+    <Style Selector="^:pressed /template/ Border#Border">
+      <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorDark2}" />
+    </Style>
+
+    <!-- Adjusted :selected to look like :today from DayItem -->
+    <Style Selector="^:selected">
+      <Style Selector="^ /template/ Border#Root">
+        <Setter Property="Background" Value="{DynamicResource SystemAccentColor}" />
+      </Style>
+
+      <Style Selector="^ /template/ Border#Border">
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}" />
+      </Style>
+
+      <Style Selector="^ /template/ ContentControl#Content">
+        <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}" />
+        <Setter Property="FontWeight" Value="SemiBold" />
+      </Style>
+
+      <Style Selector="^:pointerover">
+        <Style Selector="^ /template/ Border#Border">
+          <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorDark1}" />
+        </Style>
+        <Style Selector="^ /template/ Border#Root">
+          <Setter Property="Background" Value="{DynamicResource SystemAccentColor}" />
+        </Style>
+      </Style>
 
-  <Style Selector="CalendarButton:selected /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}"/>
-    <Setter Property="FontWeight" Value="SemiBold"/>
-  </Style>
+      <Style Selector="^:pressed">
+        <Style Selector="^ /template/ Border#Border">
+          <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorDark2}" />
+        </Style>
 
-  <!-- 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:inactive /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource CalendarViewOutOfScopeForeground}"/>
-  </Style>
+        <Style Selector="^ /template/ Border#Root">
+          <Setter Property="Background" Value="{DynamicResource SystemAccentColor}" />
+        </Style>
+      </Style>
+    </Style>
 
-  <Style Selector="CalendarButton:blackout /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource CalendarViewBlackoutForeground}"/>
-  </Style>
+    <!-- WinUI calls this OutOfFocus -->
+    <Style Selector="^:inactive">
+      <Style Selector="^ /template/ Border#Root">
+        <!-- These are probably set in code, but consistent -->
+        <Setter Property="Background" Value="{DynamicResource CalendarViewOutOfScopeBackground}"/>
+      </Style>
+      <Style Selector="^ /template/ ContentControl#Content">
+        <Setter Property="Foreground" Value="{DynamicResource CalendarViewOutOfScopeForeground}"/>
+      </Style>
+    </Style>
 
-  <!--<Style Selector="CalendarButton:dayfocused /template/ Border#FocusVisual">
-            <Setter Property="IsVisible" Value="True"/>
-      </Style>-->
+    <Style Selector="^:blackout /template/ ContentControl#Content">
+      <Setter Property="Foreground" Value="{DynamicResource CalendarViewBlackoutForeground}" />
+    </Style>
 
-  <Style Selector="CalendarDayButton:disabled /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource CalendarViewWeekDayForegroundDisabled}"/>
-  </Style>
-</Styles>
+    <Style Selector="^:disabled /template/ ContentControl#Content">
+      <Setter Property="Foreground" Value="{DynamicResource CalendarViewWeekDayForegroundDisabled}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/CalendarDatePicker.xaml

@@ -1,32 +1,77 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:sys="clr-namespace:System;assembly=netstandard"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="clr-namespace:System;assembly=netstandard"
+                    x:CompileBindings="True">
   <Design.PreviewWith>
     <Border Margin="20, 20, 20, 200">
-      <CalendarDatePicker Width="200"
-                          VerticalContentAlignment="Center"
-                          HorizontalContentAlignment="Center" />
+      <CalendarDatePicker Width="200" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <x:Double x:Key="CalendarDatePickerCurrentDayFontSize">12</x:Double>
-    <x:Double x:Key="CalendarDatePickerMinHeight">32</x:Double>
-  </Styles.Resources>
-  
-  <Style Selector="CalendarDatePicker">
-    <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}"/>
-    <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}"/>
-    <Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThemeThickness}"/>
+  <x:Double x:Key="CalendarDatePickerCurrentDayFontSize">12</x:Double>
+  <x:Double x:Key="CalendarDatePickerMinHeight">32</x:Double>
+
+  <ControlTheme x:Key="FluentCalendarDatePickerButton" TargetType="Button">
+    <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerCalendarGlyphForeground}" />
+    <Setter Property="Margin" Value="2,0,4,0" />
+    <Setter Property="Width" Value="20" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid Height="24"
+              Width="20"
+              HorizontalAlignment="Center"
+              VerticalAlignment="Center"
+              Margin="0"
+              ColumnDefinitions="*,*,*,*"
+              RowDefinitions="23*,19*,19*,19*"
+              ClipToBounds="False">
+          <Border Name="Background"
+                  Margin="0,-1,0,0"
+                  Grid.ColumnSpan="4"
+                  Grid.Row="1"
+                  Grid.RowSpan="3"
+                  BorderThickness="0.5,0,0.5,0.5"
+                  BorderBrush="{TemplateBinding Foreground}"
+                  CornerRadius="0,0,2,2" />
+          <Border Grid.ColumnSpan="4"
+                  Grid.RowSpan="1"
+                  BorderBrush="{TemplateBinding Foreground}"
+                  BorderThickness="0.5"
+                  CornerRadius="2,2,0,0" />
+          <TextBlock Margin="0,-1,0,0"
+                     VerticalAlignment="Center"
+                     HorizontalAlignment="Center"
+                     Grid.Column="0"
+                     Grid.Row="1"
+                     Grid.ColumnSpan="4"
+                     Grid.RowSpan="3"
+                     Foreground="{TemplateBinding Foreground}"
+                     FontSize="{DynamicResource CalendarDatePickerCurrentDayFontSize}"
+                     Text="{Binding Source={x:Static sys:DateTime.Today}, Path=Day}" />
+          <Ellipse HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   Fill="{TemplateBinding Foreground}"
+                   StrokeThickness="0"
+                   Grid.ColumnSpan="4"
+                   Width="3"
+                   Height="3" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
+    <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
+    <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThemeThickness}" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="MinHeight" Value="{DynamicResource CalendarDatePickerMinHeight}" />
     <Setter Property="HorizontalAlignment" Value="Left" />
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="HorizontalContentAlignment" Value="Left" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="Padding" Value="4"/>
+    <Setter Property="Padding" Value="4" />
     <Setter Property="Template">
       <ControlTemplate>
         <DataValidationErrors>
@@ -53,8 +98,28 @@
                        VerticalAlignment="Stretch"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                       Grid.Column="0" />
+                       Grid.Column="0">
+                <TextBox.Styles>
+                  <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_BorderElement">
+                    <!-- By default the TextBox has its own focused state, override this to disable it here -->
+                    <Setter Property="Background" Value="Transparent"/>
+                    <Setter Property="BorderBrush" Value="Transparent"/>
+                    <Setter Property="BorderThickness" Value="0" />
+                  </Style>
+                  <Style Selector="TextBox#PART_TextBox:disabled">
+                    <Style Selector="^ /template/ Border#PART_BorderElement">
+                      <!-- By default the TextBox has its own disabled state, override this to make the border background show through -->
+                      <Setter Property="Background" Value="Transparent" />
+                      <Setter Property="BorderBrush" Value="Transparent" />
+                    </Style>
+                    <Style Selector="^ /template/ TextBlock#PART_Watermark, ^ TextBlock#PART_FloatingWatermark">
+                      <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerTextForegroundDisabled}" />
+                    </Style>
+                  </Style>
+                </TextBox.Styles>
+              </TextBox>
               <Button Name="PART_Button"
+                      Theme="{StaticResource FluentCalendarDatePickerButton}"
                       Grid.Column="1"
                       Focusable="False" />
               <Popup Name="PART_Popup"
@@ -73,110 +138,41 @@
         </DataValidationErrors>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!-- Normal State -->
-  <Style Selector="CalendarDatePicker /template/ Button#PART_Button">
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerCalendarGlyphForeground}" />
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="BorderThickness" Value="0" />
-    <Setter Property="Margin" Value="2,0,4,0" />
-    <Setter Property="Padding" Value="0" />
-    <Setter Property="Width" Value="20" />
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Grid Height="24"
-              Width="20"
-              HorizontalAlignment="Center"
-              VerticalAlignment="Center"
-              Margin="0"
-              ColumnDefinitions="*,*,*,*"
-              RowDefinitions="23*,19*,19*,19*"
-              ClipToBounds="False">
-          <Border Name="Background"
-                  Margin="0,-1,0,0"
-                  Grid.ColumnSpan="4"
-                  Grid.Row="1"
-                  Grid.RowSpan="3"
-                  BorderThickness="0.5,0,0.5,0.5"
-                  BorderBrush="{TemplateBinding Foreground}"
-                  CornerRadius="0,0,2,2" />
-          <Border Grid.ColumnSpan="4"
-                  Grid.RowSpan="1"
-                  BorderBrush="{TemplateBinding Foreground}"
-                  BorderThickness="0.5"
-                  CornerRadius="2,2,0,0" />
-          <TextBlock Margin="0,-1,0,0"
-                     VerticalAlignment="Center"
-                     HorizontalAlignment="Center"
-                     Grid.Column="0"
-                     Grid.Row="1"
-                     Grid.ColumnSpan="4"
-                     Grid.RowSpan="3"
-                     Foreground="{TemplateBinding Foreground}"
-                     FontSize="{DynamicResource CalendarDatePickerCurrentDayFontSize}"
-                     Text="{Binding Source={x:Static sys:DateTime.Today}, Path=Day}" />
-          <Ellipse HorizontalAlignment="Center"
-                   VerticalAlignment="Center"
-                   Fill="{TemplateBinding Foreground}"
-                   StrokeThickness="0"
-                   Grid.ColumnSpan="4"
-                   Width="3"
-                   Height="3" />
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <!-- Pressed State -->
-  <Style Selector="CalendarDatePicker:pressed /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrushPressed}" />
-  </Style>
-
-  <!-- Pointer-over State -->
-  <Style Selector="CalendarDatePicker:pointerover /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrushPointerOver}" />
-  </Style>
-
-  <!-- Disabled State -->
-  <Style Selector="CalendarDatePicker:disabled /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrushDisabled}" />
-  </Style>
 
-  <Style Selector="CalendarDatePicker:disabled /template/ Button#PART_Button">
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerCalendarGlyphForegroundDisabled}" />
-  </Style>
+    <!-- Pressed State -->
+    <Style Selector="^:pressed /template/ Border#Background">
+      <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrushPressed}" />
+    </Style>
 
-  <Style Selector="CalendarDatePicker:disabled /template/ TextBox#PART_TextBox:disabled /template/ Border#PART_BorderElement">
-    <!-- By default the TextBox has its own disabled state, override this to make the border background show through -->
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="BorderBrush" Value="Transparent" />
-  </Style>
+    <!-- Pointer-over State -->
+    <Style Selector="^:pointerover /template/ Border#Background">
+      <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrushPointerOver}" />
+    </Style>
 
-  <Style Selector="CalendarDatePicker:disabled /template/ TextBox#PART_TextBox:disabled /template/ TextBlock#PART_Watermark,
-                   CalendarDatePicker:disabled /template/ TextBox#PART_TextBox:disabled /template/ TextBlock#PART_FloatingWatermark">
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerTextForegroundDisabled}" />
-  </Style>
+    <!-- Disabled State -->
+    <Style Selector="^:disabled">
+      <Style Selector="^ /template/ Border#Background">
+        <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackgroundDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrushDisabled}" />
+      </Style>
 
-  <!-- Focused State -->
-  <Style Selector="CalendarDatePicker:focus-within:not(CalendarDatePicker:focus) /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushFocused}"/>
-    <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThicknessFocused}" />
-  </Style>
+      <Style Selector="^ /template/ Button#PART_Button">
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerCalendarGlyphForegroundDisabled}" />
+      </Style>
+    </Style>
 
-  <Style Selector="CalendarDatePicker /template/ TextBox#PART_TextBox:focus /template/ Border#PART_BorderElement">
-    <!-- By default the TextBox has its own focused state, override this to disable it here -->
-    <Setter Property="Background" Value="Transparent"/>
-    <Setter Property="BorderBrush" Value="Transparent"/>
-    <Setter Property="BorderThickness" Value="0" />
-  </Style>
+    <!-- Focused State -->
+    <Style Selector="^:focus-within:not(CalendarDatePicker:focus) /template/ Border#Background">
+      <Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushFocused}" />
+      <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThicknessFocused}" />
+    </Style>
 
-  <!-- Error State -->
-  <Style Selector="CalendarDatePicker:error /template/ Border#Background">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
-  </Style>
-</Styles>
+    <!-- Error State -->
+    <Style Selector="^:error /template/ Border#Background">
+      <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/CalendarDayButton.xaml

@@ -1,26 +1,34 @@
-<!--
+<!--
 // (c) Copyright Microsoft Corporation.
 // This source is subject to the Microsoft Public License (Ms-PL).
 // Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
 // All other rights reserved.
 -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <CalendarButton/>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
 
-<Styles xmlns="https://github.com/avaloniaui">
-  <Style Selector="CalendarDayButton">
-    <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,0"/>
+  <ControlTheme x:Key="{x:Type CalendarDayButton}" TargetType="CalendarDayButton">
+    <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,0" />
     <!--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="HorizontalContentAlignment" Value="Center"/>
-    <Setter Property="VerticalContentAlignment" Value="Center"/>
+    <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="HorizontalContentAlignment" Value="Center" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
         <Panel>
@@ -29,88 +37,76 @@
                   BorderThickness="0" ClipToBounds="True">
 
             <ContentControl Name="Content"
-                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                  Content="{TemplateBinding Content}"
-                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                  FontSize="{TemplateBinding FontSize}"
-                  Margin="{TemplateBinding Padding}"/>
+                            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-->
+          <!-- Drawn Border should render on top of background to preserve the 1px margin between items-->
           <Border Name="Border"
                   BorderThickness="2"
-                  BorderBrush="{TemplateBinding BorderBrush}"/>
-
-          <!--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="-2"  CornerRadius="2"/>-->
+                  BorderBrush="{TemplateBinding BorderBrush}" />
         </Panel>
       </ControlTemplate>
     </Setter>
-  </Style>
-  <!--<Style Selector="CalendarDayButton /template/ Border#FocusVisual">
-    <Setter Property="IsVisible" Value="False"/>
-  </Style>-->
 
-  <Style Selector="CalendarDayButton:pointerover /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewHoverBorderBrush}"/>
-  </Style>
-  <Style Selector="CalendarDayButton:pressed /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewPressedBorderBrush}"/>
-  </Style>
-  <Style Selector="CalendarDayButton:selected /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}"/>
-  </Style>
-  <Style Selector="CalendarDayButton:selected:pointerover /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedHoverBorderBrush}"/>
-  </Style>
-  <Style Selector="CalendarDayButton:selected:pressed /template/ Border#Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedPressedBorderBrush}"/>
-  </Style>
+    <Style Selector="^:pointerover /template/ Border#Border">
+      <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewHoverBorderBrush}" />
+    </Style>
 
-  <Style Selector="CalendarDayButton:today /template/ Border#Root">
-    <!-- These are probably set in code, but consistent -->
-    <Setter Property="Background">
-      <SolidColorBrush Color="{DynamicResource SystemAccentColor}"/>
-    </Setter>
-  </Style>
-  <Style Selector="CalendarDayButton:today:pointerover /template/ Border#Border">
-    <Setter Property="BorderBrush">
-      <SolidColorBrush Color="{DynamicResource SystemAccentColorDark1}"/>
-    </Setter>
-  </Style>
-  <Style Selector="CalendarDayButton:today:pressed /template/ Border#Border">
-    <Setter Property="BorderBrush">
-      <SolidColorBrush Color="{DynamicResource SystemAccentColorDark2}"/>
-    </Setter>
-  </Style>
-  <Style Selector="CalendarDayButton:today /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}"/>
-    <Setter Property="FontWeight" Value="SemiBold"/>
-  </Style>
+    <Style Selector="^:pressed /template/ Border#Border">
+      <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewPressedBorderBrush}" />
+    </Style>
+
+    <Style Selector="^:selected">
+      <Style Selector="^ /template/ Border#Border">
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedBorderBrush}" />
+      </Style>
+      <Style Selector="^:pointerover /template/ Border#Border">
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedHoverBorderBrush}" />
+      </Style>
+      <Style Selector="^:pressed /template/ Border#Border">
+        <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewSelectedPressedBorderBrush}" />
+      </Style>
+    </Style>
+
+    <Style Selector="^:today">
+      <Style Selector="^ /template/ Border#Root">
+        <Setter Property="Background" Value="{DynamicResource SystemAccentColor}" />
+      </Style>
+      <!-- These are probably set in code, but consistent -->
+      <Style Selector="^:pointerover /template/ Border#Border">
+        <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorDark1}" />
+      </Style>
+      <Style Selector="^:pressed /template/ Border#Border">
+        <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorDark2}" />
+      </Style>
+      <Style Selector="^ ContentControl#Content">
+        <Setter Property="Foreground" Value="{DynamicResource CalendarViewTodayForeground}" />
+        <Setter Property="FontWeight" Value="SemiBold" />
+      </Style>
+    </Style>
 
-  <!-- WinUI calls this OutOfFocus -->
-  <Style Selector="CalendarDayButton:inactive /template/ Border#Root">
-    <Setter Property="Background" Value="{DynamicResource CalendarViewOutOfScopeBackground}"/>
-  </Style>
-  <Style Selector="CalendarDayButton:inactive /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource CalendarViewOutOfScopeForeground}"/>
-  </Style>
+    <!-- WinUI calls this OutOfFocus -->
+    <Style Selector="^:inactive">
+      <Style Selector="^ /template/ Border#Root">
+        <Setter Property="Background" Value="{DynamicResource CalendarViewOutOfScopeBackground}" />
+      </Style>
+      <Style Selector="^ /template/ ContentControl#Content">
+        <Setter Property="Foreground" Value="{DynamicResource CalendarViewOutOfScopeForeground}" />
+      </Style>
+    </Style>
 
-  <Style Selector="CalendarDayButton:blackout /template/ ContentControl#Content">
-    <Setter Property="Foreground" Value="{DynamicResource CalendarViewBlackoutForeground}"/>
-  </Style>
+    <Style Selector="^:blackout /template/ ContentControl#Content">
+      <Setter Property="Foreground" Value="{DynamicResource CalendarViewBlackoutForeground}" />
+    </Style>
 
-  <!--<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>
+    <Style Selector="^:disabled /template/ ContentControl#Content">
+      <Setter Property="Foreground" Value="{DynamicResource CalendarViewWeekDayForegroundDisabled}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/CalendarItem.xaml

@@ -1,98 +1,119 @@
-<!--
+<!--
 // (c) Copyright Microsoft Corporation.
 // This source is subject to the Microsoft Public License (Ms-PL).
 // Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
 // All other rights reserved.
 -->
-
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard"
         x:CompileBindings="True"
         x:DataType="CalendarItem">
   <Design.PreviewWith>
     <Border Padding="20">
-      <Calendar />
+      <Calendar DisplayDate="2000-01-01">
+        <Calendar.BlackoutDates>
+          <CalendarDateRange>
+            <x:Arguments>
+              <sys:DateTime>2000-01-01</sys:DateTime>
+              <sys:DateTime>2000-01-05</sys:DateTime>
+            </x:Arguments>
+          </CalendarDateRange>
+        </Calendar.BlackoutDates>
+      </Calendar>
     </Border>
   </Design.PreviewWith>
-  <Style Selector="CalendarItem">
+
+  <ControlTheme x:Key="FluentCalendarButton" TargetType="Button">
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <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 Selector="^:pointerover /template/ ContentPresenter#Text">
+      <Setter Property="BorderBrush" Value="{DynamicResource CalendarViewNavigationButtonBorderBrushPointerOver}" />
+      <Setter Property="Foreground" Value="{DynamicResource CalendarViewNavigationButtonForegroundPointerOver}" />
+    </Style>
+    <Style Selector="^:pressed /template/ ContentPresenter#Text">
+      <Setter Property="Foreground" Value="{DynamicResource CalendarViewNavigationButtonForegroundPressed}" />
+    </Style>
+    <Style Selector="^:disabled /template/ ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource CalendarViewWeekDayForegroundDisabled}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type CalendarItem}" TargetType="CalendarItem">
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="DayTitleTemplate">
       <Template>
         <TextBlock Text="{Binding}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
-                   FontSize="12"/>
+                   FontSize="12" />
       </Template>
     </Setter>
+
     <Setter Property="Template">
       <ControlTemplate>
         <Border BorderThickness="{TemplateBinding BorderThickness}"
                 Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 CornerRadius="{TemplateBinding CornerRadius}">
-          <Border.Styles>
-            <Style Selector="Button.CalendarHeader">
-              <Setter Property="HorizontalAlignment" Value="Stretch" />
-              <Setter Property="VerticalAlignment" Value="Stretch" />
-              <Setter Property="VerticalContentAlignment" Value="Center" />
-              <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="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="Foreground" Value="{DynamicResource CalendarViewNavigationButtonForegroundPressed}"/>
-              <!-- 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="Foreground" Value="{DynamicResource CalendarViewWeekDayForegroundDisabled}"/>
-            </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)
-                -->
+          <!-- 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">
+              <Button Name="HeaderButton"
+                      Theme="{StaticResource FluentCalendarButton}"
+                      Foreground="{TemplateBinding Foreground}"
+                      Padding="12,0,0,0"
+                      HorizontalContentAlignment="Left" />
+              <Button Name="PreviousButton"
+                      Grid.Column="1"
+                      Theme="{StaticResource FluentCalendarButton}"
+                      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"/>
+                <Path Stroke="{DynamicResource CalendarViewForeground}"
+                      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">
+              <Button Name="NextButton"
+                      Grid.Column="2"
+                      Theme="{StaticResource FluentCalendarButton}"
+                      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"/>
+                <Path Stroke="{DynamicResource CalendarViewForeground}"
+                      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" >
+            <!--Border below is used only for MonthView but it can't be moved inside of Grid because CalendarItem expects it to be empty and it will cause side-effects-->
+            <Border Name="BackgroundLayer" Background="{TemplateBinding BorderBrush}" Margin="0,38,0,0" IsVisible="{ReflectionBinding #MonthView.IsVisible}" 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" />
@@ -113,8 +134,11 @@
                 <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
             </Grid>
-            <Grid Name="YearView" MinHeight="290"
-                    Grid.Row="1" IsVisible="False">
+            <Grid Name="YearView"
+                  Background="{TemplateBinding BorderBrush}"
+                  MinHeight="290"
+                  Grid.Row="1"
+                  IsVisible="False">
               <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
                 <RowDefinition Height="*" />
@@ -127,17 +151,15 @@
                 <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>
             </Grid>
-
           </Grid>
-
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!-- 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>
+    <Style Selector="^ /template/ Button:pointerover > Path">
+      <Setter Property="Stroke" Value="{DynamicResource CalendarViewNavigationButtonForegroundPointerOver}" />
+    </Style>
+    <Style Selector="^ /template/ Button:pressed > Path">
+      <Setter Property="Stroke" Value="{DynamicResource CalendarViewNavigationButtonForegroundPressed}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml

@@ -1,72 +1,97 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Style Selector="CaptionButtons">    
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <CaptionButtons Height="30"/>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="FluentCaptionButton" TargetType="Button">
+    <Setter Property="Background" Value="#ffe5e5e5" />
+    <!-- Reusing BorderBrush to define pressed background color, as it's not used otherwise -->
+    <Setter Property="BorderBrush" Value="#ffcacaca" />
+    <Setter Property="Foreground" Value="Black"/>
+    <Setter Property="Width" Value="45"/>
+    <Setter Property="VerticalAlignment" Value="Stretch"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Background="Transparent"
+                          Content="{TemplateBinding Content}"/>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{TemplateBinding Background}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{TemplateBinding BorderBrush}" />
+    </Style>
+  </ControlTheme>
+  
+  <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
     <Setter Property="MaxHeight" Value="30" />
     <Setter Property="Template">
       <ControlTemplate>
         <StackPanel Spacing="2" VerticalAlignment="Stretch" TextElement.FontSize="10" Orientation="Horizontal">
-          <StackPanel.Styles>
-            <Style Selector="Panel">
-              <Setter Property="Width" Value="45" />
-              <Setter Property="Background" Value="Transparent" />
-            </Style>
-            <Style Selector="Panel:pointerover">
-              <Setter Property="Background" Value="#7F7f7f7f" />
-            </Style>
-            <Style Selector="Panel#PART_CloseButton:pointerover">
-              <Setter Property="Background" Value="#7FFF0000" />
-            </Style>
-            <Style Selector="Viewbox">
-              <Setter Property="Width" Value="11" />
-              <Setter Property="Margin" Value="2" />
-            </Style>
-          </StackPanel.Styles>
-          <Panel x:Name="PART_FullScreenButton">
-            <Viewbox>
-              <Path Stretch="UniformToFill" Fill="{TemplateBinding Foreground}" />
+          <Button x:Name="PART_FullScreenButton"
+                  Theme="{StaticResource FluentCaptionButton}"
+                  IsVisible="False">
+            <Viewbox Width="11" Margin="2">
+              <Path Name="FullScreenButtonPath"
+                    Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M2048 2048v-819h-205v469l-1493 -1493h469v-205h-819v819h205v-469l1493 1493h-469v205h819z" />
             </Viewbox>
-          </Panel>
-
-          <Panel x:Name="PART_MinimiseButton">
-            <Viewbox>
-              <Path Stretch="UniformToFill" Fill="{TemplateBinding Foreground}" Data="M2048 1229v-205h-2048v205h2048z" />
+          </Button>
+          <Button x:Name="PART_MinimiseButton"
+                  Theme="{StaticResource FluentCaptionButton}">
+            <Viewbox Width="11" Margin="2">
+              <Path Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M2048 1229v-205h-2048v205h2048z" />
             </Viewbox>
-          </Panel>
-
-          <Panel x:Name="PART_RestoreButton">
-            <Viewbox>
+          </Button>
+          <Button x:Name="PART_RestoreButton"
+                  Theme="{StaticResource FluentCaptionButton}">
+            <Viewbox Width="11" Margin="2">
               <Viewbox.RenderTransform>
                 <RotateTransform Angle="-90" />
               </Viewbox.RenderTransform>
-              <Path Stretch="UniformToFill" Fill="{TemplateBinding Foreground}"/>
+              <Path Name="RestoreButtonPath"
+                    Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M2048 2048v-2048h-2048v2048h2048zM1843 1843h-1638v-1638h1638v1638z"/>
             </Viewbox>
-          </Panel>
-
-          <Panel x:Name="PART_CloseButton">
-            <Viewbox>
-              <Path Stretch="UniformToFill" Fill="{TemplateBinding Foreground}" Data="M1169 1024l879 -879l-145 -145l-879 879l-879 -879l-145 145l879 879l-879 879l145 145l879 -879l879 879l145 -145z" />
+          </Button>
+          <Button x:Name="PART_CloseButton"
+                  Background="#ffe81123"
+                  BorderBrush="#fff1707a"
+                  Theme="{StaticResource FluentCaptionButton}">
+            <Viewbox Width="11" Margin="2">
+              <Path Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M1169 1024l879 -879l-145 -145l-879 879l-879 -879l-145 145l879 879l-879 879l145 145l879 -879l879 879l145 -145z" />
             </Viewbox>
-          </Panel>
+          </Button>
         </StackPanel>
       </ControlTemplate>
     </Setter>
-  </Style>
-  <Style Selector="CaptionButtons Panel#PART_RestoreButton Path">
-    <Setter Property="Data" Value="M2048 2048v-2048h-2048v2048h2048zM1843 1843h-1638v-1638h1638v1638z" />
-  </Style>
-  <Style Selector="CaptionButtons:maximized Panel#PART_RestoreButton Path">
-    <Setter Property="Data" Value="M2048 410h-410v-410h-1638v1638h410v410h1638v-1638zM1434 1434h-1229v-1229h1229v1229zM1843 1843h-1229v-205h1024v-1024h205v1229z" />
-  </Style>
-  <Style Selector="CaptionButtons Panel#PART_FullScreenButton">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="CaptionButtons Panel#PART_FullScreenButton Path">
-    <Setter Property="Data" Value="M2048 2048v-819h-205v469l-1493 -1493h469v-205h-819v819h205v-469l1493 1493h-469v205h819z" />
-  </Style>
-  <Style Selector="CaptionButtons:fullscreen Panel#PART_FullScreenButton Path">
-    <Setter Property="IsVisible" Value="True" />
-    <Setter Property="Data" Value="M205 1024h819v-819h-205v469l-674 -674l-145 145l674 674h-469v205zM1374 1229h469v-205h-819v819h205v-469l674 674l145 -145z" />
-  </Style>
-  <Style Selector="CaptionButtons:fullscreen Panel#PART_RestoreButton, CaptionButtons:fullscreen Panel#PART_MinimiseButton">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
- </Styles>
+    <Style Selector="^:maximized /template/ Path#RestoreButtonPath">
+      <Setter Property="Data" Value="M2048 410h-410v-410h-1638v1638h410v410h1638v-1638zM1434 1434h-1229v-1229h1229v1229zM1843 1843h-1229v-205h1024v-1024h205v1229z" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Path#PART_FullScreenButtonPath">
+      <Setter Property="IsVisible" Value="True" />
+      <Setter Property="Data" Value="M205 1024h819v-819h-205v469l-674 -674l-145 145l674 674h-469v205zM1374 1229h469v-205h-819v819h205v-469l674 674l145 -145z" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Panel#PART_RestoreButton">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Panel#PART_MinimiseButton">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Carousel.xaml

@@ -1,17 +1,20 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="Carousel">
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Border Background="{TemplateBinding Background}"
-              BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}"
-              CornerRadius="{TemplateBinding CornerRadius}">
-        <CarouselPresenter IsVirtualized="{TemplateBinding IsVirtualized}"
-                           Items="{TemplateBinding Items}"
-                           ItemsPanel="{TemplateBinding ItemsPanel}"
-                           Margin="{TemplateBinding Padding}"
-                           SelectedIndex="{TemplateBinding SelectedIndex}"
-                           PageTransition="{TemplateBinding PageTransition}"/>
-      </Border>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <CarouselPresenter IsVirtualized="{TemplateBinding IsVirtualized}"
+                             Items="{TemplateBinding Items}"
+                             ItemsPanel="{TemplateBinding ItemsPanel}"
+                             Margin="{TemplateBinding Padding}"
+                             SelectedIndex="{TemplateBinding SelectedIndex}"
+                             PageTransition="{TemplateBinding PageTransition}"/>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/CheckBox.xaml

@@ -1,297 +1,298 @@
-<Style xmlns="https://github.com/avaloniaui"
-       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       Selector="CheckBox">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
-      <CheckBox IsThreeState="True" IsChecked="True" Content="Content" Foreground="Gold" />
+      <StackPanel Spacing="20">
+        <CheckBox>Unchecked</CheckBox>
+        <CheckBox IsChecked="True">Checked</CheckBox>
+        <CheckBox IsThreeState="True" IsChecked="{x:Null}">Indeterminate</CheckBox>
+        <CheckBox Width="120">Checkbox should wrap its text</CheckBox>
+      </StackPanel>
     </Border>
   </Design.PreviewWith>
-  
-  <Setter Property="Padding" Value="8,0,0,0" />
-  <Setter Property="HorizontalAlignment" Value="Left" />
-  <Setter Property="VerticalAlignment" Value="Center" />
-  <Setter Property="HorizontalContentAlignment" Value="Left" />
-  <Setter Property="VerticalContentAlignment" Value="Center" />    
-  <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-  <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-  <Setter Property="MinHeight" Value="32" />
-  <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundUnchecked}" />
-  <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUnchecked}" />
-  <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUnchecked}" />
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Grid x:Name="RootGrid" ColumnDefinitions="20,*">
-        <Border x:Name="PART_Border"
-                Grid.ColumnSpan="2"
-                Background="{TemplateBinding Background}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                CornerRadius="{TemplateBinding CornerRadius}" />
-
-        <Grid VerticalAlignment="Top" Height="32">
-          <Border x:Name="NormalRectangle"
-              BorderThickness="{DynamicResource CheckBoxBorderThemeThickness}"
-              CornerRadius="{TemplateBinding CornerRadius}"
-              UseLayoutRounding="False"
-              Height="20"
-              Width="20" />
-
-          <Viewbox UseLayoutRounding="False">
-            <Panel>
-              <Panel Height="16" Width="16" />
-              <Path x:Name="CheckGlyph" Stretch="Uniform" VerticalAlignment="Center" />
-            </Panel>
-          </Viewbox>
-        </Grid>
-        <ContentPresenter x:Name="ContentPresenter"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        Content="{TemplateBinding Content}"
-                        Margin="{TemplateBinding Padding}"
-                        RecognizesAccessKey="True"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                        Grid.Column="1" />
-        <!-- TODO: TextWrapping="Wrap" on contentpresenter -->
-      </Grid>
-    </ControlTemplate>
-  </Setter>
-
-  <!-- Unchecked Normal State -->
-  <Style Selector="^ /template/ Border#NormalRectangle">
-    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeUnchecked}" />
-    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillUnchecked}" />
-  </Style>
-
-  <Style Selector="^ /template/ Path#CheckGlyph">
-    <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundUnchecked}" />
-    <Setter Property="Opacity" Value="0" />
-  </Style>
-
-  <!-- Unchecked PointerOver State -->
-  <Style Selector="^:pointerover">
-    <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-      <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundUncheckedPointerOver}" />
-    </Style>
-
-    <Style Selector="^ /template/ Border#PART_Border">
-      <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUncheckedPointerOver}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUncheckedPointerOver}" />
-    </Style>
-
-    <Style Selector="^ /template/ Border#NormalRectangle">
-      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeUncheckedPointerOver}" />
-      <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillUncheckedPointerOver}" />
-    </Style>
-
-    <Style Selector="^ /template/ Path#CheckGlyph">
-      <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundUncheckedPointerOver}" />
-    </Style>
-  </Style>
-
-  <!-- Unchecked Pressed State -->
-  <Style Selector="^:pressed">
-    <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-      <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundUncheckedPressed}" />
-    </Style>
-
-    <Style Selector="^ /template/ Border#PART_Border">
-      <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUncheckedPressed}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUncheckedPressed}" />
-    </Style>
-
-    <Style Selector="^ /template/ Border#NormalRectangle">
-      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeUncheckedPressed}" />
-      <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillUncheckedPressed}" />
-    </Style>
-
-    <Style Selector="^ /template/ Path#CheckGlyph">
-      <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundUncheckedPressed}" />
-    </Style>
-  </Style>
-
-  <!-- Unchecked Disabled state -->
-  <Style Selector="^:disabled">
-    <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-      <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundUncheckedDisabled}" />
-    </Style>
-
-    <Style Selector="^ /template/ Border#PART_Border">
-      <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUncheckedDisabled}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUncheckedDisabled}" />
-    </Style>
-
-    <Style Selector="^ /template/ Border#NormalRectangle">
-      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeUncheckedDisabled}" />
-      <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillUncheckedDisabled}" />
-    </Style>
-
-    <Style Selector="^ /template/ Path#CheckGlyph">
-      <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundUncheckedDisabled}" />
-    </Style>
-  </Style>
-
-  <Style Selector="^:checked">
-    <!-- Checked Normal State -->
-    <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundChecked}" />
-    <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundChecked}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushChecked}" />
-
-    <Style Selector="^ /template/ Border#NormalRectangle">
-      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundFillChecked}" />
-      <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillChecked}" />
-    </Style>
 
-    <Style Selector="^ /template/ Path#CheckGlyph">
-      <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundChecked}" />
-      <Setter Property="Data" Value="M1507 31L438 1101L-119 543L-29 453L438 919L1417 -59L1507 31Z" />
-      <Setter Property="Width" Value="9" />
-      <Setter Property="Opacity" Value="1" />
-      <Setter Property="FlowDirection" Value="LeftToRight" />
-    </Style>
+  <ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
+    <Setter Property="Padding" Value="8,0,0,0" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <Setter Property="MinHeight" Value="32" />
+    <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundUnchecked}" />
+    <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUnchecked}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUnchecked}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid x:Name="RootGrid" ColumnDefinitions="20,*">
+          <Border x:Name="PART_Border"
+                  Grid.ColumnSpan="2"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}" />
+
+          <Grid VerticalAlignment="Top" Height="32">
+            <Border x:Name="NormalRectangle"
+                    BorderBrush="{DynamicResource CheckBoxCheckBackgroundStrokeUnchecked}"
+                    Background="{DynamicResource CheckBoxCheckBackgroundFillUnchecked}"
+                    BorderThickness="{DynamicResource CheckBoxBorderThemeThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False"
+                    Height="20"
+                    Width="20" />
+
+            <Viewbox UseLayoutRounding="False">
+              <Panel>
+                <Panel Height="16" Width="16" />
+                <Path x:Name="CheckGlyph"
+                      Opacity="0"
+                      Fill="{DynamicResource CheckBoxCheckGlyphForegroundUnchecked}"
+                      Stretch="Uniform"
+                      VerticalAlignment="Center" />
+              </Panel>
+            </Viewbox>
+          </Grid>
+          <ContentPresenter x:Name="ContentPresenter"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Content="{TemplateBinding Content}"
+                          Margin="{TemplateBinding Padding}"
+                          RecognizesAccessKey="True"
+                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                          TextWrapping="Wrap"
+                          Grid.Column="1" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
 
-    <!-- Checked PointerOver State -->
+    <!-- Unchecked PointerOver State -->
     <Style Selector="^:pointerover">
       <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundCheckedPointerOver}" />
+        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundUncheckedPointerOver}" />
       </Style>
 
       <Style Selector="^ /template/ Border#PART_Border">
-        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundCheckedPointerOver}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushCheckedPointerOver}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUncheckedPointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUncheckedPointerOver}" />
       </Style>
 
       <Style Selector="^ /template/ Border#NormalRectangle">
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeCheckedPointerOver}" />
-        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillCheckedPointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeUncheckedPointerOver}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillUncheckedPointerOver}" />
       </Style>
 
       <Style Selector="^ /template/ Path#CheckGlyph">
-        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundCheckedPointerOver}" />
+        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundUncheckedPointerOver}" />
       </Style>
     </Style>
 
-    <!-- Checked Pressed State -->
+    <!-- Unchecked Pressed State -->
     <Style Selector="^:pressed">
       <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundCheckedPressed}" />
+        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundUncheckedPressed}" />
       </Style>
 
       <Style Selector="^ /template/ Border#PART_Border">
-        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundCheckedPressed}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushCheckedPressed}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUncheckedPressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUncheckedPressed}" />
       </Style>
 
       <Style Selector="^ /template/ Border#NormalRectangle">
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeCheckedPressed}" />
-        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillCheckedPressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeUncheckedPressed}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillUncheckedPressed}" />
       </Style>
 
       <Style Selector="^ /template/ Path#CheckGlyph">
-        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundCheckedPressed}" />
+        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundUncheckedPressed}" />
       </Style>
     </Style>
 
-    <!-- Checked Disabled State -->
+    <!-- Unchecked Disabled state -->
     <Style Selector="^:disabled">
       <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundCheckedDisabled}" />
+        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundUncheckedDisabled}" />
       </Style>
 
       <Style Selector="^ /template/ Border#PART_Border">
-        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundCheckedDisabled}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushCheckedDisabled}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundUncheckedDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushUncheckedDisabled}" />
       </Style>
 
       <Style Selector="^ /template/ Border#NormalRectangle">
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeCheckedDisabled}" />
-        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillCheckedDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeUncheckedDisabled}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillUncheckedDisabled}" />
       </Style>
 
       <Style Selector="^ /template/ Path#CheckGlyph">
-        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundCheckedDisabled}" />
+        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundUncheckedDisabled}" />
       </Style>
     </Style>
-  </Style>
 
-  <Style Selector="^:indeterminate">
-    <!-- Indeterminate Normal State -->
-    <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundIndeterminate}" />
-    <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundIndeterminate}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushIndeterminate}" />
-
-    <Style Selector="^ /template/ Border#NormalRectangle">
-      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeIndeterminate}" />
-      <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillIndeterminate}" />
-    </Style>
+    <Style Selector="^:checked">
+      <!-- Checked Normal State -->
+      <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundChecked}" />
+      <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundChecked}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushChecked}" />
 
-    <Style Selector="^ /template/ Path#CheckGlyph">
-      <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundIndeterminate}" />
-      <Setter Property="Data" Value="M1536 1536v-1024h-1024v1024h1024z" />
-      <Setter Property="Width" Value="7" />
-      <Setter Property="Opacity" Value="1" />
-    </Style>
-
-    <!-- Indeterminate PointerOver State -->
-    <Style Selector="^:pointerover">
-      <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundIndeterminatePointerOver}" />
+      <Style Selector="^ /template/ Border#NormalRectangle">
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundFillChecked}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillChecked}" />
       </Style>
 
-      <Style Selector="^ /template/ Border#PART_Border">
-        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundIndeterminatePointerOver}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushIndeterminatePointerOver}" />
+      <Style Selector="^ /template/ Path#CheckGlyph">
+        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundChecked}" />
+        <Setter Property="Data" Value="M1507 31L438 1101L-119 543L-29 453L438 919L1417 -59L1507 31Z" />
+        <Setter Property="Width" Value="9" />
+        <Setter Property="Opacity" Value="1" />
+        <Setter Property="FlowDirection" Value="LeftToRight" />
       </Style>
 
-      <Style Selector="^ /template/ Border#NormalRectangle">
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeIndeterminatePointerOver}" />
-        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillIndeterminatePointerOver}" />
+      <!-- Checked PointerOver State -->
+      <Style Selector="^:pointerover">
+        <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+          <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundCheckedPointerOver}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#PART_Border">
+          <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundCheckedPointerOver}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushCheckedPointerOver}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#NormalRectangle">
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeCheckedPointerOver}" />
+          <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillCheckedPointerOver}" />
+        </Style>
+
+        <Style Selector="^ /template/ Path#CheckGlyph">
+          <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundCheckedPointerOver}" />
+        </Style>
       </Style>
 
-      <Style Selector="^ /template/ Path#CheckGlyph">
-        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundIndeterminatePointerOver}" />
+      <!-- Checked Pressed State -->
+      <Style Selector="^:pressed">
+        <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+          <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundCheckedPressed}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#PART_Border">
+          <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundCheckedPressed}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushCheckedPressed}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#NormalRectangle">
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeCheckedPressed}" />
+          <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillCheckedPressed}" />
+        </Style>
+
+        <Style Selector="^ /template/ Path#CheckGlyph">
+          <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundCheckedPressed}" />
+        </Style>
       </Style>
-    </Style>
 
-    <!-- Indeterminate Pressed State -->
-    <Style Selector="^:pressed">
-      <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundIndeterminatePressed}" />
+      <!-- Checked Disabled State -->
+      <Style Selector="^:disabled">
+        <Style Selector="^ ContentPresenter#ContentPresenter">
+          <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundCheckedDisabled}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#PART_Border">
+          <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundCheckedDisabled}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushCheckedDisabled}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#NormalRectangle">
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeCheckedDisabled}" />
+          <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillCheckedDisabled}" />
+        </Style>
+
+        <Style Selector="^ /template/ Path#CheckGlyph">
+          <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundCheckedDisabled}" />
+        </Style>
       </Style>
+    </Style>
 
-      <Style Selector="^ /template/ Border#PART_Border">
-        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundIndeterminatePressed}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushIndeterminatePressed}" />
-      </Style>
+    <Style Selector="^:indeterminate">
+      <!-- Indeterminate Normal State -->
+      <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundIndeterminate}" />
+      <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundIndeterminate}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushIndeterminate}" />
 
       <Style Selector="^ /template/ Border#NormalRectangle">
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeIndeterminatePressed}" />
-        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillIndeterminatePressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeIndeterminate}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillIndeterminate}" />
       </Style>
 
       <Style Selector="^ /template/ Path#CheckGlyph">
-        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundIndeterminatePressed}" />
+        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundIndeterminate}" />
+        <Setter Property="Data" Value="M1536 1536v-1024h-1024v1024h1024z" />
+        <Setter Property="Width" Value="7" />
+        <Setter Property="Opacity" Value="1" />
       </Style>
-    </Style>
 
-    <!-- Indeterminate Disabled State -->
-    <Style Selector="^:disabled">
-      <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundIndeterminateDisabled}" />
-      </Style>
-
-      <Style Selector="^ /template/ Border#PART_Border">
-        <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundIndeterminateDisabled}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushIndeterminateDisabled}" />
+      <!-- Indeterminate PointerOver State -->
+      <Style Selector="^:pointerover">
+        <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+          <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundIndeterminatePointerOver}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#PART_Border">
+          <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundIndeterminatePointerOver}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushIndeterminatePointerOver}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#NormalRectangle">
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeIndeterminatePointerOver}" />
+          <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillIndeterminatePointerOver}" />
+        </Style>
+
+        <Style Selector="^ /template/ Path#CheckGlyph">
+          <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundIndeterminatePointerOver}" />
+        </Style>
       </Style>
 
-      <Style Selector="^ /template/ Border#NormalRectangle">
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeIndeterminateDisabled}" />
-        <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillIndeterminateDisabled}" />
+      <!-- Indeterminate Pressed State -->
+      <Style Selector="^:pressed">
+        <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+          <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundIndeterminatePressed}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#PART_Border">
+          <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundIndeterminatePressed}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushIndeterminatePressed}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#NormalRectangle">
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeIndeterminatePressed}" />
+          <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillIndeterminatePressed}" />
+        </Style>
+
+        <Style Selector="^ /template/ Path#CheckGlyph">
+          <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundIndeterminatePressed}" />
+        </Style>
       </Style>
 
-      <Style Selector="^ /template/ Path#CheckGlyph">
-        <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundIndeterminateDisabled}" />
+      <!-- Indeterminate Disabled State -->
+      <Style Selector="^:disabled">
+        <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+          <Setter Property="Foreground" Value="{DynamicResource CheckBoxForegroundIndeterminateDisabled}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#PART_Border">
+          <Setter Property="Background" Value="{DynamicResource CheckBoxBackgroundIndeterminateDisabled}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxBorderBrushIndeterminateDisabled}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#NormalRectangle">
+          <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBackgroundStrokeIndeterminateDisabled}" />
+          <Setter Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillIndeterminateDisabled}" />
+        </Style>
+
+        <Style Selector="^ /template/ Path#CheckGlyph">
+          <Setter Property="Fill" Value="{DynamicResource CheckBoxCheckGlyphForegroundIndeterminateDisabled}" />
+        </Style>
       </Style>
     </Style>
-  </Style>
-</Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ComboBox.xaml

@@ -1,5 +1,6 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="10">
@@ -14,19 +15,28 @@
           <ComboBoxItem>Item 1</ComboBoxItem>
           <ComboBoxItem>Item 2</ComboBoxItem>
         </ComboBox>
+        <ComboBox PlaceholderText="Error">
+          <DataValidationErrors.Error>
+            <sys:Exception>
+              <x:Arguments>
+                <x:String>Error</x:String>
+              </x:Arguments>
+            </sys:Exception>
+          </DataValidationErrors.Error>
+        </ComboBox>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
-  <Styles.Resources>
-    <Thickness x:Key="ComboBoxTopHeaderMargin">0,0,0,4</Thickness>
-    <x:Int32 x:Key="ComboBoxPopupMaxNumberOfItems">15</x:Int32>
-    <x:Int32 x:Key="ComboBoxPopupMaxNumberOfItemsThatCanBeShownOnOneSide">7</x:Int32>
 
-    <Thickness x:Key="ComboBoxPadding">12,5,0,7</Thickness>
-    <Thickness x:Key="ComboBoxEditableTextPadding">11,5,32,6</Thickness>
-    <x:Double x:Key="ComboBoxMinHeight">32</x:Double>
-  </Styles.Resources>
-  <Style Selector="ComboBox">
+  <Thickness x:Key="ComboBoxTopHeaderMargin">0,0,0,4</Thickness>
+  <x:Int32 x:Key="ComboBoxPopupMaxNumberOfItems">15</x:Int32>
+  <x:Int32 x:Key="ComboBoxPopupMaxNumberOfItemsThatCanBeShownOnOneSide">7</x:Int32>
+
+  <Thickness x:Key="ComboBoxPadding">12,5,0,7</Thickness>
+  <Thickness x:Key="ComboBoxEditableTextPadding">11,5,32,6</Thickness>
+  <x:Double x:Key="ComboBoxMinHeight">32</x:Double>
+
+  <ControlTheme x:Key="{x:Type ComboBox}" TargetType="ComboBox">
     <Setter Property="Padding" Value="{DynamicResource ComboBoxPadding}" />
     <Setter Property="FocusAdorner" Value="{x:Null}" />
     <Setter Property="MaxDropDownHeight" Value="504" />
@@ -41,14 +51,13 @@
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="HorizontalAlignment" Value="Left" />
-    <Setter Property="VerticalAlignment" Value="Top" />    
+    <Setter Property="VerticalAlignment" Value="Top" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
     <Setter Property="Template">
       <ControlTemplate>
         <DataValidationErrors>
-          <Grid RowDefinitions="Auto, *, Auto"
-                ColumnDefinitions="*,32">
+          <Grid RowDefinitions="Auto, *, Auto" ColumnDefinitions="*,32">
             <ContentPresenter x:Name="HeaderContentPresenter"
                               Grid.Row="0"
                               Grid.Column="0"
@@ -66,7 +75,6 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     MinWidth="{DynamicResource ComboBoxThemeMinWidth}" />
-
             <Border x:Name="HighlightBackground"
                     Grid.Row="1"
                     Grid.Column="0"
@@ -74,7 +82,8 @@
                     Background="{DynamicResource ComboBoxBackgroundUnfocused}"
                     BorderBrush="{DynamicResource ComboBoxBackgroundBorderBrushUnfocused}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}" />
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    IsVisible="False"/>
             <TextBlock x:Name="PlaceholderTextBlock"
                        Grid.Row="1"
                        Grid.Column="0"
@@ -111,7 +120,9 @@
                       Width="12"
                       Margin="0,0,10,0"
                       HorizontalAlignment="Right"
-                      VerticalAlignment="Center" />
+                      VerticalAlignment="Center"
+                      Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
+                      Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z"/>
 
             <Popup Name="PART_Popup"
                    WindowManagerAddShadowHint="False"
@@ -125,7 +136,6 @@
                       Background="{DynamicResource ComboBoxDropDownBackground}"
                       BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
                       BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
-                      Margin="0,-1,0,-1"
                       Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
                       HorizontalAlignment="Stretch"
                       CornerRadius="{DynamicResource OverlayCornerRadius}">
@@ -144,89 +154,73 @@
         </DataValidationErrors>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!--  Normal State  -->
-  <Style Selector="ComboBox /template/ TextBlock#PlaceholderTextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
-  </Style>
-
-  <Style Selector="ComboBox /template/ Border#HighlightBackground">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-
-  <Style Selector="ComboBox /template/ PathIcon#DropDownGlyph">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForeground}" />
-    <Setter Property="Data" Value="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z" />
-  </Style>
-
-  <!--  PointerOver State  -->
-  <Style Selector="ComboBox:pointerover /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPointerOver}" />
-  </Style>
-
-  <!--  Pressed State  -->
-  <Style Selector="ComboBox:pressed /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPressed}" />
-  </Style>
-
-  <!--  Disabled State  -->
-  <Style Selector="ComboBox:disabled /template/ Border#Background">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushDisabled}" />
-  </Style>
-
-  <Style Selector="ComboBox:disabled /template/ ContentPresenter#HeaderContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
-  </Style>
-
-  <Style Selector="ComboBox:disabled /template/ ContentControl#ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
-  </Style>
-
-  <Style Selector="ComboBox:disabled /template/ TextBlock#PlaceholderTextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
-  </Style>
-
-  <Style Selector="ComboBox:disabled /template/ PathIcon#DropDownGlyph">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundDisabled}" />
-  </Style>
-
-  <!--  Focused State  -->
-  <Style Selector="ComboBox:focus-visible /template/ Border#HighlightBackground">
-    <Setter Property="IsVisible" Value="True" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBackgroundBorderBrushFocused}" />
-  </Style>
-
-  <Style Selector="ComboBox:focus-visible /template/ ContentControl#ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
-  </Style>
-
-  <Style Selector="ComboBox:focus-visible /template/ TextBlock#PlaceholderTextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
-  </Style>
-
-  <Style Selector="ComboBox:focus-visible /template/ PathIcon#DropDownGlyph">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocused}" />
-  </Style>
-
-  <!--  Focus Pressed State  -->
-  <Style Selector="ComboBox:focused:pressed /template/ ContentControl#ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocusedPressed}" />
-  </Style>
-
-  <Style Selector="ComboBox:focused:pressed /template/ TextBlock#PlaceholderTextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxPlaceHolderForegroundFocusedPressed}" />
-  </Style>
 
-  <Style Selector="ComboBox:focused:pressed /template/ PathIcon#DropDownGlyph">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocusedPressed}" />
-  </Style>
-  
-  <!-- Error State -->
-  <Style Selector="ComboBox:error /template/ Border#Background">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
-  </Style>
-</Styles>
+    <!--  PointerOver State  -->
+    <Style Selector="^:pointerover /template/ Border#Background">
+      <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPointerOver}" />
+    </Style>
+
+    <!--  Pressed State  -->
+    <Style Selector="^:pressed /template/ Border#Background">
+      <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPressed}" />
+    </Style>
+
+    <!-- Error State -->
+    <Style Selector="^:error /template/ Border#Background">
+      <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
+    </Style>
+
+    <!--  Focus Pressed State  -->
+    <Style Selector="^:focused:pressed">
+      <Style Selector="^ /template/ ContentControl#ContentPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocusedPressed}" />
+      </Style>
+      <Style Selector="^ /template/ TextBlock#PlaceholderTextBlock">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxPlaceHolderForegroundFocusedPressed}" />
+      </Style>
+      <Style Selector="^ /template/ PathIcon#DropDownGlyph">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocusedPressed}" />
+      </Style>
+    </Style>
+
+    <!--  Focused State  -->
+    <Style Selector="^:focus-visible">
+      <Style Selector="^ /template/ Border#HighlightBackground">
+        <Setter Property="IsVisible" Value="True" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBackgroundBorderBrushFocused}" />
+      </Style>
+      <Style Selector="^ /template/ ContentControl#ContentPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
+      </Style>
+      <Style Selector="^ /template/ TextBlock#PlaceholderTextBlock">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
+      </Style>
+      <Style Selector="^ /template/ PathIcon#DropDownGlyph">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocused}" />
+      </Style>
+    </Style>
+
+    <!--  Disabled State  -->
+    <Style Selector="^:disabled">
+      <Style Selector="^ /template/ Border#Background">
+        <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ ContentPresenter#HeaderContentPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ ContentControl#ContentPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ TextBlock#PlaceholderTextBlock">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ PathIcon#DropDownGlyph">
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundDisabled}" />
+      </Style>
+    </Style>
+  </ControlTheme>
+
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ComboBoxItem.xaml

@@ -1,23 +1,20 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
-      <Border Background="{DynamicResource ComboBoxDropDownBackground}"
-              BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
-              BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
-              Margin="0,-1,0,-1"
-              Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
-              CornerRadius="{DynamicResource OverlayCornerRadius}">
+      <Border Background="{DynamicResource ComboBoxDropDownBackground}" BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}" BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}" Margin="0,-1,0,-1" Padding="{DynamicResource ComboBoxDropdownBorderPadding}" CornerRadius="{DynamicResource OverlayCornerRadius}">
         <StackPanel HorizontalAlignment="Stretch">
           <ComboBoxItem>Item 1</ComboBoxItem>
           <ComboBoxItem>Item 2 long</ComboBoxItem>
           <ComboBoxItem IsSelected="True">Item 3</ComboBoxItem>
           <ComboBoxItem IsEnabled="False">Item 4</ComboBoxItem>
+          <ComboBoxItem IsSelected="True" IsEnabled="False">Item 5</ComboBoxItem>
         </StackPanel>
       </Border>
     </Border>
   </Design.PreviewWith>
 
-  <Style Selector="ComboBoxItem">
+  <ControlTheme x:Key="{x:Type ComboBoxItem}" TargetType="ComboBoxItem">
     <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForeground}" />
     <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackground}" />
     <Setter Property="Padding" Value="{DynamicResource ComboBoxItemThemePadding}" />
@@ -37,54 +34,53 @@
                           Padding="{TemplateBinding Padding}" />
       </ControlTemplate>
     </Setter>
-  </Style>
 
-  <!--  PointerOver state  -->
-  <Style Selector="ComboBoxItem:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPointerOver}" />
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundPointerOver}" />
-  </Style>
+    <!--  PointerOver state  -->
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPointerOver}" />
+      <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundPointerOver}" />
+    </Style>
 
-  <!--  Disabled state  -->
-  <Style Selector="ComboBoxItem:disabled /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushDisabled}" />
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundDisabled}" />
-  </Style>
+    <!--  Disabled state  -->
+    <Style Selector="^:disabled /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushDisabled}" />
+      <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundDisabled}" />
+    </Style>
 
-  <!--  Pressed state  -->
-  <Style Selector="ComboBoxItem:pressed /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPressed}" />
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundPressed}" />
-  </Style>
+    <!--  Pressed state  -->
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPressed}" />
+      <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundPressed}" />
+    </Style>
 
-  <!--  Selected state  -->
-  <Style Selector="ComboBoxItem:selected /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelected}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelected}" />
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelected}" />
-  </Style>
-
-  <!--  Selected Disabled state  -->
-  <Style Selector="ComboBoxItem:selected:disabled /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedDisabled}" />
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedDisabled}" />
-  </Style>
-
-  <!--  Selected PointerOver state  -->
-  <Style Selector="ComboBoxItem:selected:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPointerOver}" />
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPointerOver}" />
-  </Style>
-
-  <!--  Selected Pressed state  -->
-  <Style Selector="ComboBoxItem:selected:pressed /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPressed}" />
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPressed}" />
-  </Style>
-</Styles>
+    <!--  Selected state  -->
+    <Style Selector="^:selected">
+      <Style Selector="^ /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelected}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelected}" />
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelected}" />
+      </Style>
+      <!--  Selected Disabled state  -->
+      <Style Selector="^:disabled /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedDisabled}" />
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedDisabled}" />
+      </Style>
+      <!--  Selected PointerOver state  -->
+      <Style Selector="^:pointerover /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPointerOver}" />
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPointerOver}" />
+      </Style>
+      <!--  Selected Pressed state  -->
+      <Style Selector="^:pressed /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPressed}" />
+        <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPressed}" />
+      </Style>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Common.xaml

@@ -1,6 +0,0 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Style Selector="TextBlock.CaptionTextBlockStyle">
-    <Setter Property="FontSize" Value="12" />
-    <Setter Property="FontWeight" Value="Normal" />
-  </Style>
-</Styles>

src/Avalonia.Themes.Fluent/Controls/ContentControl.xaml

@@ -1,16 +1,19 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="ContentControl">
-  <Setter Property="Template">
-    <ControlTemplate>
-      <ContentPresenter Name="PART_ContentPresenter"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        Content="{TemplateBinding Content}"
-                        Padding="{TemplateBinding Padding}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type ContentControl}" TargetType="ContentControl">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Content="{TemplateBinding Content}"
+                          Padding="{TemplateBinding Padding}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ContextMenu.xaml

@@ -1,6 +1,5 @@
-<Style xmlns="https://github.com/avaloniaui"
-       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       Selector="ContextMenu">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Background="{DynamicResource SystemAccentColor}"
             Margin="16"
@@ -10,8 +9,7 @@
       <Border.ContextMenu>
         <ContextMenu>
           <MenuItem Header="Standard _Menu Item" />
-          <MenuItem Header="Disabled"
-                    IsEnabled="False" />
+          <MenuItem Header="Disabled" IsEnabled="False" />
           <Separator />
           <MenuItem Header="Menu with _Submenu">
             <MenuItem Header="Submenu _1" />
@@ -31,42 +29,42 @@
     </Border>
   </Design.PreviewWith>
 
-  <Style.Resources>
-    <!-- Added missing resource -->
-    <Thickness x:Key="MenuFlyoutScrollerMargin">0,4,0,4</Thickness>
-  </Style.Resources>
+  <!-- Added missing resource -->
+  <Thickness x:Key="MenuFlyoutScrollerMargin">0,4,0,4</Thickness>
 
-  <Setter Property="Background" Value="{DynamicResource MenuFlyoutPresenterBackground}" />
-  <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderBrush}" />
-  <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}" />
-  <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
-  <Setter Property="MaxWidth" Value="{DynamicResource FlyoutThemeMaxWidth}" />
-  <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutThemeMinHeight}" />
-  <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPresenterThemePadding}" />
-  <Setter Property="HorizontalAlignment" Value="Stretch" />
-  <Setter Property="TextBlock.FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-  <Setter Property="TextBlock.FontWeight" Value="Normal" />
-  <Setter Property="WindowManagerAddShadowHint" Value="False" />
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Border Background="{TemplateBinding Background}"
-              BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}"
-              Padding="{TemplateBinding Padding}"
-              MaxWidth="{TemplateBinding MaxWidth}"
-              MinHeight="{TemplateBinding MinHeight}"
-              HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-              CornerRadius="{TemplateBinding CornerRadius}">
-        <ScrollViewer Classes="menuscroller">
-          <ItemsPresenter Name="PART_ItemsPresenter"
-                          Items="{TemplateBinding Items}"
-                          ItemsPanel="{TemplateBinding ItemsPanel}"
-                          ItemTemplate="{TemplateBinding ItemTemplate}"
-                          Margin="{DynamicResource MenuFlyoutScrollerMargin}"
-                          KeyboardNavigation.TabNavigation="Continue"
-                          Grid.IsSharedSizeScope="True" />
-        </ScrollViewer>
-      </Border>
-    </ControlTemplate>
-  </Setter>
-</Style>
+  <ControlTheme x:Key="{x:Type ContextMenu}" TargetType="ContextMenu">
+    <Setter Property="Background" Value="{DynamicResource MenuFlyoutPresenterBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+    <Setter Property="MaxWidth" Value="{DynamicResource FlyoutThemeMaxWidth}" />
+    <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutThemeMinHeight}" />
+    <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPresenterThemePadding}" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="TextBlock.FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="TextBlock.FontWeight" Value="Normal" />
+    <Setter Property="WindowManagerAddShadowHint" Value="False" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                Padding="{TemplateBinding Padding}"
+                MaxWidth="{TemplateBinding MaxWidth}"
+                MinHeight="{TemplateBinding MinHeight}"
+                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <ScrollViewer Classes="menuscroller">
+            <ItemsPresenter Name="PART_ItemsPresenter"
+                            Items="{TemplateBinding Items}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}"
+                            ItemTemplate="{TemplateBinding ItemTemplate}"
+                            Margin="{DynamicResource MenuFlyoutScrollerMargin}"
+                            KeyboardNavigation.TabNavigation="Continue"
+                            Grid.IsSharedSizeScope="True" />
+          </ScrollViewer>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/DataValidationErrors.xaml

@@ -1,8 +1,8 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:sys="using:System"
-        x:CompileBindings="True"
-        x:DataType="DataValidationErrors">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="using:System"
+                    x:CompileBindings="True"
+                    x:DataType="DataValidationErrors">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
@@ -26,8 +26,8 @@
     </Border>
   </Design.PreviewWith>
 
-  <Style Selector="DataValidationErrors">
-    <Style.Resources>
+  <ControlTheme x:Key="{x:Type DataValidationErrors}" TargetType="DataValidationErrors">
+    <ControlTheme.Resources>
       <DataTemplate x:Key="InlineDataValidationErrorTemplate">
         <ItemsControl Items="{Binding}" x:DataType="DataValidationErrors" Foreground="{DynamicResource SystemControlErrorTextForegroundBrush}">
           <ItemsControl.Styles>
@@ -96,9 +96,8 @@
                             ContentTemplate="{TemplateBinding ContentTemplate}" />
         </DockPanel>
       </ControlTemplate>
-    </Style.Resources>
-
+    </ControlTheme.Resources>
     <Setter Property="Template" Value="{StaticResource InlineDataValidationContentTemplate}" />
     <Setter Property="ErrorTemplate" Value="{StaticResource InlineDataValidationErrorTemplate}" />
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/DatePicker.xaml

@@ -5,125 +5,81 @@
 // All other rights reserved.
 -->
 
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sys="clr-namespace:System;assembly=netstandard"
         x:CompileBindings="True">
   <Design.PreviewWith>
-    <Border Padding="20">
-      <DatePicker CornerRadius="10" />
+    <Border Padding="20" Height="500">
+      <StackPanel Spacing="20" VerticalAlignment="Center">
+        <DatePicker />
+        <DatePicker CornerRadius="10" />
+        <DatePicker IsEnabled="False" />
+        <DatePicker>
+          <DataValidationErrors.Error>
+            <sys:Exception>
+              <x:Arguments>
+                <x:String>Error</x:String>
+              </x:Arguments>
+            </sys:Exception>
+          </DataValidationErrors.Error>
+        </DatePicker>
+      </StackPanel>
     </Border>
   </Design.PreviewWith>
-  
-  <Styles.Resources>
-    <Thickness x:Key="DatePickerTopHeaderMargin">0,0,0,4</Thickness>
-    <x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double>
-    <x:Double x:Key="DatePickerFlyoutPresenterItemHeight">40</x:Double>
-    <x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
-    <x:Double x:Key="DatePickerThemeMinWidth">296</x:Double>
-    <x:Double x:Key="DatePickerThemeMaxWidth">456</x:Double>
-    <Thickness x:Key="DatePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
-    <Thickness x:Key="DatePickerFlyoutPresenterMonthPadding">9,3,0,6</Thickness>
-    <Thickness x:Key="DatePickerHostPadding">0,3,0,6</Thickness>
-    <Thickness x:Key="DatePickerHostMonthPadding">9,3,0,6</Thickness>
-    <x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>
-  </Styles.Resources>
-
-  <!-- Styles for the items displayed in the selectors -->
-  <Style Selector="ListBoxItem.DateTimePickerItem">
-    <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/>
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="HorizontalContentAlignment" Value="Center" />
-  </Style>
-  <Style Selector="ListBoxItem.DateTimePickerItem:selected">
-    <Setter Property="IsHitTestVisible" Value="False"/>
-  </Style>
-  <Style Selector="ListBoxItem.DateTimePickerItem:selected /template/ Rectangle#PressedBackground">
-    <Setter Property="Fill" Value="Transparent"/>
-  </Style>
-  <Style Selector="ListBoxItem.DateTimePickerItem:selected /template/ ContentPresenter">
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
-  </Style>
-  <Style Selector="ListBoxItem.DateTimePickerItem.MonthItem">
-    <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"/>
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="HorizontalContentAlignment" Value="Left" />
-  </Style>
 
+  <Thickness x:Key="DatePickerTopHeaderMargin">0,0,0,4</Thickness>
+  <x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double>
+  <x:Double x:Key="DatePickerFlyoutPresenterItemHeight">40</x:Double>
+  <x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
+  <x:Double x:Key="DatePickerThemeMinWidth">296</x:Double>
+  <x:Double x:Key="DatePickerThemeMaxWidth">456</x:Double>
+  <Thickness x:Key="DatePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
+  <Thickness x:Key="DatePickerFlyoutPresenterMonthPadding">9,3,0,6</Thickness>
+  <Thickness x:Key="DatePickerHostPadding">0,3,0,6</Thickness>
+  <Thickness x:Key="DatePickerHostMonthPadding">9,3,0,6</Thickness>
+  <x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>
 
-  <!-- This is used for both the accept/dismiss & repeatbuttons in the presenter-->
-  <Style Selector=":is(Button).DateTimeFlyoutButtonStyle">
-    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" />
-    <Setter Property="HorizontalContentAlignment" Value="Center"/>
-    <Setter Property="VerticalContentAlignment" Value="Center"/>
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+  <ControlTheme x:Key="FluentDatePickerFlyoutButton" TargetType="Button">
+    <Setter Property="RenderTransform" Value="none" />
     <Setter Property="Template">
       <ControlTemplate>
-        <!-- 
-                The background is doubled here for the loopingselector up/down repeat buttons 
-                that appear opaque. Not sure how MS does it though I suspect this is it
-                but source isn't MIT yet, so this is my solution -->
-        <Border Background="{TemplateBinding Background}">
-          <ContentPresenter x:Name="ContentPresenter"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{DynamicResource DateTimePickerFlyoutButtonBorderBrush}"
-                  BorderThickness="{DynamicResource DateTimeFlyoutButtonBorderThickness}"
-                  Content="{TemplateBinding Content}"
-                  Foreground="{DynamicResource SystemControlHighlightAltBaseHighBrush}"
-                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                  Padding="{TemplateBinding Padding}"
-                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                  CornerRadius="{TemplateBinding CornerRadius}"/>
-        </Border>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          Background="{TemplateBinding Background}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          Foreground="{TemplateBinding Foreground}"
+                          HorizontalContentAlignment="Stretch"
+                          VerticalContentAlignment="Stretch"
+                          CornerRadius="{TemplateBinding CornerRadius}"/>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector=":is(Button).DateTimeFlyoutButtonStyle:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPointerOver}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPointerOver}"/>
-    <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPointerOver}"/>
-  </Style>
+    
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPointerOver}"/>
+      <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPointerOver}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPointerOver}"/>
+    </Style>
+    
+    <Style Selector="^:pressed">
+      <Setter Property="RenderTransform" Value="scale(0.98)" />
+    </Style>
+    
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPressed}"/>
+      <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPressed}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPressed}"/>
+    </Style>
 
-  <Style Selector=":is(Button).DateTimeFlyoutButtonStyle:pressed /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPressed}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPressed}"/>
-    <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPressed}"/>
-  </Style>
-
-
-  <Style Selector="RepeatButton.UpButton">
-    <Setter Property="VerticalAlignment" Value="Top"/>
-    <Setter Property="Height" Value="22" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="Focusable" Value="False" />
-    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
-    <Setter Property="Content">
-      <Template>
-        <Viewbox Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center">
-          <Path Stroke="{Binding $parent[RepeatButton].Foreground}" StrokeThickness="1" Data="M 0,9 L 9,0 L 18,9"/>
-        </Viewbox>
-      </Template>
-    </Setter>
-  </Style>
-  <Style Selector="RepeatButton.DownButton">
-    <Setter Property="VerticalAlignment" Value="Bottom"/>
-    <Setter Property="Height" Value="22" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="Focusable" Value="False" />
-    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
-    <Setter Property="Content">
-      <Template>
-        <Viewbox Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center">
-          <Path Stroke="{Binding $parent[RepeatButton].Foreground}" StrokeThickness="1" Data="M 0,0 L 9,9 L 18,0"/>
-        </Viewbox>
-      </Template>
-    </Setter>
-  </Style>
-
-  <Style Selector="DatePicker">    
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushDisabled}"/>
+      <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundDisabled}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundDisabled}"/>
+    </Style>
+  </ControlTheme>
+  
+  <ControlTheme x:Key="{x:Type DatePicker}" TargetType="DatePicker">
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForeground}" />
     <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackground}"/>
@@ -138,13 +94,16 @@
           <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
             <ContentPresenter Name="HeaderContentPresenter" Grid.Row="0"
                               Content="{TemplateBinding Header}"
+                              Foreground="{DynamicResource DatePickerHeaderForeground}"
                               ContentTemplate="{TemplateBinding HeaderTemplate}"
                               Margin="{DynamicResource DatePickerTopHeaderMargin}"
                               MaxWidth="{DynamicResource DatePickerThemeMaxWidth}"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Top"/>
 
-            <Button Name="FlyoutButton" Grid.Row="1"
+            <Button Name="FlyoutButton"
+                    Grid.Row="1"
+                    Theme="{StaticResource FluentDatePickerFlyoutButton}"
                     Foreground="{TemplateBinding Foreground}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -155,22 +114,7 @@
                     MaxWidth="{DynamicResource DatePickerThemeMaxWidth}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
-                    HorizontalContentAlignment="Stretch"
-                    VerticalContentAlignment="Stretch"
                     TemplatedControl.IsTemplateFocusTarget="True">
-              <Button.Template>
-                <ControlTemplate>
-                  <ContentPresenter Name="ContentPresenter"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
-                                    Background="{TemplateBinding Background}"
-                                    BorderThickness="{TemplateBinding BorderThickness}"
-                                    Content="{TemplateBinding Content}"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    HorizontalContentAlignment="Stretch"
-                                    VerticalContentAlignment="Stretch"
-                                    CornerRadius="{TemplateBinding CornerRadius}"/>
-                </ControlTemplate>
-              </Button.Template>
               <Grid Name="ButtonContentGrid" ColumnDefinitions="78*,Auto,132*,Auto,78*">
                 <TextBlock Name="DayText" Text="day" HorizontalAlignment="Center"
                            Padding="{DynamicResource DatePickerHostPadding}"
@@ -210,47 +154,26 @@
         </DataValidationErrors>
       </ControlTemplate>
     </Setter>
-  </Style>
-  <Style Selector="DatePicker /template/ ContentPresenter#HeaderContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource DatePickerHeaderForeground}"/>
-  </Style>
-  <Style Selector="DatePicker:disabled /template/ Rectangle">
-    <Setter Property="Fill" Value="{DynamicResource DatePickerSpacerFillDisabled}"/>
-  </Style>
-
-  <Style Selector="DatePicker /template/ Button#FlyoutButton:pointerover /template/ ContentPresenter">
-    <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPointerOver}"/>
-    <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPointerOver}"/>
-    <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPointerOver}"/>
-  </Style>
-
-  <Style Selector="DatePicker /template/ Button#FlyoutButton:pressed /template/ ContentPresenter">
-    <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPressed}"/>
-    <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPressed}"/>
-    <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPressed}"/>
-  </Style>
 
-  <Style Selector="DatePicker /template/ Button#FlyoutButton:disabled /template/ ContentPresenter">
-    <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushDisabled}"/>
-    <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundDisabled}"/>
-    <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundDisabled}"/>
-  </Style>
+    <Style Selector="^:disabled /template/ Rectangle">
+      <Setter Property="Fill" Value="{DynamicResource DatePickerSpacerFillDisabled}"/>
+    </Style>
 
-  <!-- Changes foreground for watermark text when SelectedDate is null-->
-  <Style Selector="DatePicker:hasnodate /template/ Button#FlyoutButton TextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
-  </Style>
-  
-  <Style Selector="DatePicker:error /template/ Button#FlyoutButton /template/ ContentPresenter">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
-  </Style>
-  
+    <!-- Changes foreground for watermark text when SelectedDate is null-->
+    <Style Selector="^:hasnodate /template/ Button#FlyoutButton TextBlock">
+      <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
+    </Style>
+    
+    <Style Selector="^:error /template/ Button#FlyoutButton">
+      <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
+    </Style>
+  </ControlTheme>
 
   <!--WinUI: DatePickerFlyoutPresenter-->
-  <Style Selector="DatePickerPresenter">
+  <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
     <Setter Property="Width" Value="296" />
     <Setter Property="MinWidth" Value="296" />
-    <Setter Property="MaxHeight" Value="398" />    
+    <Setter Property="MaxHeight" Value="398" />
     <Setter Property="FontWeight" Value="Normal" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Background" Value="{DynamicResource DatePickerFlyoutPresenterBackground}" />
@@ -266,45 +189,44 @@
                 MaxHeight="398" CornerRadius="{TemplateBinding CornerRadius}">
           <Grid Name="ContentRoot" RowDefinitions="*,Auto">
             <Grid Name="PickerContainer">
+              <Grid.Styles>
+                <Style Selector="DateTimePickerPanel > ListBoxItem">
+                  <Setter Property="Theme" Value="{StaticResource FluentDateTimePickerItem}" />
+                </Style>
+              </Grid.Styles>
               <!--Column Definitions set in code, ignore here-->
               <Panel Name="MonthHost">
                 <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                               VerticalScrollBarVisibility="Hidden">
                   <DateTimePickerPanel Name="MonthSelector"
-                                      PanelType="Month"
-                                      ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
-                                      ShouldLoop="True" />
+                                       PanelType="Month"
+                                       ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
+                                       ShouldLoop="True" />
                 </ScrollViewer>
-                <RepeatButton Name="MonthUpButton"
-                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
-                <RepeatButton Name="MonthDownButton"
-                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
+                <RepeatButton Name="MonthUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="MonthDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
               </Panel>
               <Panel Name="DayHost">
                 <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                               VerticalScrollBarVisibility="Hidden">
                   <DateTimePickerPanel Name="DaySelector"
-                                      PanelType="Day"
-                                      ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
-                                      ShouldLoop="True" />
+                                       PanelType="Day"
+                                       ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
+                                       ShouldLoop="True" />
                 </ScrollViewer>
-                <RepeatButton Name="DayUpButton"
-                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
-                <RepeatButton Name="DayDownButton"
-                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
+                <RepeatButton Name="DayUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="DayDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
               </Panel>
               <Panel Name="YearHost">
                 <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                               VerticalScrollBarVisibility="Hidden">
                   <DateTimePickerPanel Name="YearSelector"
-                                      PanelType="Year"
-                                      ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
-                                      ShouldLoop="False" />
+                                       PanelType="Year"
+                                       ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
+                                       ShouldLoop="False" />
                 </ScrollViewer>
-                <RepeatButton Name="YearUpButton"
-                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
-                <RepeatButton Name="YearDownButton"
-                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
+                <RepeatButton Name="YearUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="YearDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
               </Panel>
               <Rectangle Name="HighlightRect" IsHitTestVisible="False" ZIndex="-1"
                          Fill="{DynamicResource DatePickerFlyoutPresenterHighlightFill}"
@@ -321,34 +243,48 @@
                          Width="{DynamicResource DatePickerSpacerThemeWidth}"
                          Grid.Column="3" />
             </Grid>
-            <Grid Grid.Row="1" Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
-                  Name="AcceptDismissGrid" ColumnDefinitions="*,*">
-              <Rectangle Height="{DynamicResource DatePickerSpacerThemeWidth}" VerticalAlignment="Top"
+            
+            <Grid Name="AcceptDismissGrid"
+                  Grid.Row="1"
+                  ColumnDefinitions="*,*">
+              <Rectangle Height="{DynamicResource DatePickerSpacerThemeWidth}" 
+                         VerticalAlignment="Top"
                          Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}"
                          Grid.ColumnSpan="2"/>
-              <Button Name="AcceptButton" Grid.Column="0" Classes="DateTimeFlyoutButtonStyle"
-                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                <Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round"
-                      StrokeThickness="0.75" Data="M0.5,8.5 5,13.5 15.5,3" />
+              <Button Name="AcceptButton"
+                      Grid.Column="0"
+                      Theme="{StaticResource FluentDateTimePickerButton}"
+                      Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch">
+                <Path Stroke="{Binding $parent[Button].Foreground}"
+                      StrokeLineCap="Round"
+                      StrokeThickness="0.75"
+                      Data="M0.5,8.5 5,13.5 15.5,3" />
               </Button>
-              <Button Name="DismissButton" Grid.Column="1" Classes="DateTimeFlyoutButtonStyle"
-                         FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                <Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round"
-                      StrokeThickness="0.75" Data="M2,2 14,14 M2,14 14 2" />
+              <Button Name="DismissButton" 
+                      Grid.Column="1" 
+                      Theme="{StaticResource FluentDateTimePickerButton}"
+                      Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      HorizontalAlignment="Stretch" 
+                      VerticalAlignment="Stretch">
+                <Path Stroke="{Binding $parent[Button].Foreground}" 
+                      StrokeLineCap="Round"
+                      StrokeThickness="0.75" 
+                      Data="M2,2 14,14 M2,14 14 2" />
               </Button>
             </Grid>
           </Grid>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
 
-  <Style Selector="DatePickerPresenter /template/ Panel RepeatButton">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
+    <Style Selector="^ /template/ Panel">
+      <Style Selector="^:pointerover RepeatButton">
+        <Setter Property="IsVisible" Value="True" />
+      </Style>
+    </Style>
+  </ControlTheme>
 
-  <Style Selector="DatePickerPresenter /template/ Panel:pointerover RepeatButton">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
-  
-</Styles>
+
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/DateTimePickerShared.xaml

@@ -0,0 +1,118 @@
+<!--
+// (c) Copyright Microsoft Corporation.
+// This source is subject to the Microsoft Public License (Ms-PL).
+// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
+// All other rights reserved.
+-->
+
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard"
+        x:CompileBindings="True">
+  <Design.PreviewWith>
+    <Border Padding="20" Width="200">
+      <StackPanel Spacing="20">
+        <ListBoxItem Theme="{DynamicResource FluentDateTimePickerItem}">Standard Item</ListBoxItem>
+        <ListBoxItem Theme="{DynamicResource FluentDateTimePickerItem}" Classes="MonthItem">Month Item</ListBoxItem>
+        <RepeatButton Theme="{DynamicResource FluentDateTimePickerButton}">Button</RepeatButton>
+        <RepeatButton Theme="{DynamicResource FluentDateTimePickerUpButton}" IsVisible="True"/>
+        <RepeatButton Theme="{DynamicResource FluentDateTimePickerDownButton}" IsVisible="True"/>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <!-- Theme for the items displayed in the selectors -->
+  <ControlTheme x:Key="FluentDateTimePickerItem" TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
+    <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/>
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+
+    <Style Selector="^:selected">
+      <Setter Property="IsHitTestVisible" Value="False"/>
+      <Style Selector="^/template/ Rectangle#PressedBackground">
+        <Setter Property="Fill" Value="Transparent"/>
+      </Style>
+      <Style Selector="^/template/ ContentPresenter">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
+      </Style>
+    </Style>
+    <Style Selector="^.MonthItem">
+      <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"/>
+      <Setter Property="HorizontalContentAlignment" Value="Left" />
+    </Style>
+  </ControlTheme>
+
+  <!-- This is used for both the accept/dismiss & repeatbuttons in the presenter-->
+  <ControlTheme x:Key="FluentDateTimePickerButton" TargetType="Button">
+    <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" />
+    <Setter Property="Height" Value="22" />
+    <Setter Property="HorizontalContentAlignment" Value="Center"/>
+    <Setter Property="VerticalContentAlignment" Value="Center"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <!-- 
+                The background is doubled here for the loopingselector up/down repeat buttons 
+                that appear opaque. Not sure how MS does it though I suspect this is it
+                but source isn't MIT yet, so this is my solution -->
+        <Border Background="{TemplateBinding Background}">
+          <ContentPresenter x:Name="ContentPresenter"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{DynamicResource DateTimePickerFlyoutButtonBorderBrush}"
+                  BorderThickness="{DynamicResource DateTimeFlyoutButtonBorderThickness}"
+                  Content="{TemplateBinding Content}"
+                  Foreground="{DynamicResource SystemControlHighlightAltBaseHighBrush}"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Padding="{TemplateBinding Padding}"
+                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                  CornerRadius="{TemplateBinding CornerRadius}"/>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPointerOver}"/>
+      <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPointerOver}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPointerOver}"/>
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPressed}"/>
+      <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPressed}"/>
+      <Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPressed}"/>
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentDateTimePickerUpButton" TargetType="RepeatButton" BasedOn="{StaticResource FluentDateTimePickerButton}">
+    <Setter Property="VerticalAlignment" Value="Top"/>
+    <Setter Property="Height" Value="22" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
+    <Setter Property="IsVisible" Value="False"/>
+    <Setter Property="Content">
+      <Template>
+        <Viewbox Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center">
+          <Path Stroke="{Binding $parent[RepeatButton].Foreground}" StrokeThickness="1" Data="M 0,9 L 9,0 L 18,9"/>
+        </Viewbox>
+      </Template>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentDateTimePickerDownButton" TargetType="RepeatButton" BasedOn="{StaticResource FluentDateTimePickerButton}">
+    <Setter Property="VerticalAlignment" Value="Bottom"/>
+    <Setter Property="Height" Value="22" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
+    <Setter Property="IsVisible" Value="False"/>
+    <Setter Property="Content">
+      <Template>
+        <Viewbox Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center">
+          <Path Stroke="{Binding $parent[RepeatButton].Foreground}" StrokeThickness="1" Data="M 0,0 L 9,9 L 18,0"/>
+        </Viewbox>
+      </Template>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/DropDownButton.xaml

@@ -1,103 +1,97 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:CompileBindings="True">
-
-  <Design.PreviewWith>
-    <Border Padding="20">
-      <StackPanel Spacing="20">
-        <DropDownButton Content="Click Me!" />
-        <DropDownButton Content="Disabled" IsEnabled="False" />
-      </StackPanel>
-    </Border>
-  </Design.PreviewWith>
-
-  <Styles.Resources>
-    <x:Double x:Key="DropDownButtonMinHeight">32</x:Double>
-  </Styles.Resources>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:CompileBindings="True">
+    <Design.PreviewWith>
+      <Border Padding="20">
+        <StackPanel Spacing="20">
+          <DropDownButton Content="Click Me!" />
+          <DropDownButton Content="Disabled" IsEnabled="False" />
+        </StackPanel>
+      </Border>
+    </Design.PreviewWith>
   
-  <Style Selector="DropDownButton">
-    <Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
-    <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThemeThickness}" />
-    <Setter Property="Padding" Value="{DynamicResource ButtonPadding}" />
-    <Setter Property="MinHeight" Value="{DynamicResource DropDownButtonMinHeight}" />
-    <Setter Property="HorizontalAlignment" Value="Left" />
-    <Setter Property="VerticalAlignment" Value="Center" />
-    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <!--<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-    <Setter Property="FocusVisualMargin" Value="-3" />-->
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-    <Setter Property="Template">
-      <Setter.Value>
-        <ControlTemplate>
-          <Border x:Name="RootBorder"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  BorderThickness="{TemplateBinding BorderThickness}"
-                  CornerRadius="{TemplateBinding CornerRadius}"
-                  ClipToBounds="True">
-            <Grid x:Name="InnerGrid">
-              <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="Auto" />
-              </Grid.ColumnDefinitions>
-
-              <ContentPresenter x:Name="PART_ContentPresenter"
-                                Grid.Column="0"
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}"
-                                Padding="{TemplateBinding Padding}"
-                                RecognizesAccessKey="True"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-
-              <PathIcon x:Name="DropDownGlyph"
-                        Grid.Column="1"
-                        UseLayoutRounding="False"
-                        IsHitTestVisible="False"
-                        Height="12"
-                        Width="12"
-                        Margin="0,0,10,0"
-                        HorizontalAlignment="Right"
-                        VerticalAlignment="Center" />
-
-            </Grid>
-          </Border>
-        </ControlTemplate>
-      </Setter.Value>
-    </Setter>
-  </Style>
-
-  <!--  Normal State  -->
-  <Style Selector="DropDownButton /template/ PathIcon#DropDownGlyph">
-    <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForeground}" />
-    <Setter Property="Data" Value="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z" />
-  </Style>
-
-  <!--  PointerOver State  -->
-  <Style Selector="DropDownButton:pointerover /template/ Border#RootBorder">
-    <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPointerOver}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" />
-  </Style>
+    <x:Double x:Key="DropDownButtonMinHeight">32</x:Double>
+    
+    <ControlTheme x:Key="{x:Type DropDownButton}" TargetType="DropDownButton">
+      <Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
+      <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
+      <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThemeThickness}" />
+      <Setter Property="Padding" Value="{DynamicResource ButtonPadding}" />
+      <Setter Property="MinHeight" Value="{DynamicResource DropDownButtonMinHeight}" />
+      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+      <Setter Property="VerticalContentAlignment" Value="Center" />
+      <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+      <Setter Property="Template">
+        <Setter.Value>
+          <ControlTemplate>
+            <Border x:Name="RootBorder" 
+                    Background="{TemplateBinding Background}" 
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}" 
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    ClipToBounds="True">
+              <Grid x:Name="InnerGrid">
+                <Grid.ColumnDefinitions>
+                  <ColumnDefinition Width="*" />
+                  <ColumnDefinition Width="Auto" />
+                </Grid.ColumnDefinitions>
+                
+                <ContentPresenter x:Name="PART_ContentPresenter" 
+                                  Grid.Column="0" 
+                                  Content="{TemplateBinding Content}" 
+                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                  Padding="{TemplateBinding Padding}" 
+                                  RecognizesAccessKey="True" 
+                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                
+                <PathIcon x:Name="DropDownGlyph"
+                          Grid.Column="1" 
+                          UseLayoutRounding="False"
+                          IsHitTestVisible="False" 
+                          Height="12" 
+                          Width="12"
+                          Margin="0,0,10,0"
+                          Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z"
+                          HorizontalAlignment="Right"
+                          VerticalAlignment="Center"
+                          Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"/>
+              </Grid>
+            </Border>
+          </ControlTemplate>
+        </Setter.Value>
+      </Setter>
+      
+      <!--  PointerOver State  -->
+      <Style Selector="^:pointerover /template/ Border#RootBorder">
+        <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPointerOver}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" />
+      </Style>
 
-  <!--  Pressed State  -->
-  <Style Selector="DropDownButton:pressed  /template/ Border#RootBorder">
-    <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource ButtonForegroundPressed}" />
-  </Style>
+      <!--  Pressed State  -->
+      <Style Selector="^:pressed">
+        <Setter Property="RenderTransform" Value="scale(0.98)" />
+      </Style>
 
-  <!--  Disabled State  -->
-  <Style Selector="DropDownButton:disabled /template/ Border#RootBorder">
-    <Setter Property="Background" Value="{DynamicResource ButtonBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushDisabled}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource ButtonForegroundDisabled}" />
-  </Style>
-  <Style Selector="DropDownButton:disabled /template/ PathIcon#DropDownGlyph">
-    <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundDisabled}" />
-  </Style>
+      <Style Selector="^:pressed /template/ Border#RootBorder">
+        <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPressed}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource ButtonForegroundPressed}" />
+      </Style>
 
-</Styles>
+      <!--  Disabled State  -->
+      <Style Selector="^:disabled /template/ Border#RootBorder">
+        <Setter Property="Background" Value="{DynamicResource ButtonBackgroundDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushDisabled}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource ButtonForegroundDisabled}" />
+      </Style>
+      <Style Selector="^:disabled /template/ PathIcon#DropDownGlyph">
+        <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundDisabled}" />
+      </Style>
+    </ControlTheme>
+  
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/EmbeddableControlRoot.xaml

@@ -1,19 +1,22 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="EmbeddableControlRoot">
-  <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltHighBrush}"/>
-  <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Panel>
-        <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
-        <Border Background="{TemplateBinding Background}">
-          <VisualLayerManager>
-            <ContentPresenter Name="PART_ContentPresenter"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                              Content="{TemplateBinding Content}"
-                              Margin="{TemplateBinding Padding}"/>
-          </VisualLayerManager>
-        </Border>
-      </Panel>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type EmbeddableControlRoot}" TargetType="EmbeddableControlRoot">
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltHighBrush}"/>
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+          <Border Background="{TemplateBinding Background}">
+            <VisualLayerManager>
+              <ContentPresenter Name="PART_ContentPresenter"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Content="{TemplateBinding Content}"
+                                Margin="{TemplateBinding Padding}"/>
+            </VisualLayerManager>
+          </Border>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Expander.xaml

@@ -1,31 +1,41 @@
-<Styles xmlns="https://github.com/avaloniaui" 
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:CompileBindings="True">
   <Design.PreviewWith>
     <Border Padding="20">
-      <StackPanel Orientation="Vertical" Spacing="20" Width="350">
-        <Expander ExpandDirection="Up" Header="Expand Up" CornerRadius="25">
-          <Expander.Header>
-            <Grid ColumnDefinitions="*, Auto">
-              <TextBlock Grid.Column="0" Text="Expand" />
-              <TextBlock Grid.Column="1" Text="Up" />
-            </Grid>
-          </Expander.Header>
+      <StackPanel Orientation="Vertical" Spacing="20" Width="350" Height="600">
+        <Expander ExpandDirection="Up" Header="Expand Up">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander ExpandDirection="Down" Header="Expand Down">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander ExpandDirection="Left" Header="Expand Left">
           <StackPanel>
             <TextBlock>Expanded content</TextBlock>
           </StackPanel>
         </Expander>
-        <Expander ExpandDirection="Down" Header="Expand Down" CornerRadius="25">
+        <Expander ExpandDirection="Right" Header="Expand Right">
           <StackPanel>
             <TextBlock>Expanded content</TextBlock>
           </StackPanel>
         </Expander>
-        <Expander ExpandDirection="Left" Header="Expand Left" CornerRadius="25">
+        <Expander ExpandDirection="Up">
+          <Expander.Header>
+            <Grid ColumnDefinitions="*, Auto">
+              <TextBlock Grid.Column="0" Text="Control" />
+              <TextBlock Grid.Column="1" Text="Header" />
+            </Grid>
+          </Expander.Header>
           <StackPanel>
             <TextBlock>Expanded content</TextBlock>
           </StackPanel>
         </Expander>
-        <Expander ExpandDirection="Right" Header="Expand Right" CornerRadius="25">
+        <Expander ExpandDirection="Up" Header="Rounded" CornerRadius="25">
           <StackPanel>
             <TextBlock>Expanded content</TextBlock>
           </StackPanel>
@@ -34,72 +44,28 @@
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <Thickness x:Key="ExpanderHeaderPadding">16</Thickness>
-    <Thickness x:Key="ExpanderContentPadding">16</Thickness>
-
-    <Thickness x:Key="ExpanderBorderThickness">1</Thickness>
-
-    <Thickness x:Key="ExpanderDropdownLeftBorderThickness">1,1,0,1</Thickness>
-    <Thickness x:Key="ExpanderDropdownUpBorderThickness">1,1,1,0</Thickness>
-    <Thickness x:Key="ExpanderDropdownRightBorderThickness">0,1,1,1</Thickness>
-    <Thickness x:Key="ExpanderDropdownDownBorderThickness">1,0,1,1</Thickness>
-
-    <SolidColorBrush x:Key="ExpanderBackground" Color="{DynamicResource SystemAltMediumHighColor}" />
-    <SolidColorBrush x:Key="ExpanderBorderBrush" Color="{DynamicResource SystemBaseLowColor}" />
-
-    <SolidColorBrush x:Key="ExpanderDropDownBackground" Color="{DynamicResource SystemChromeMediumLowColor}" />
-    <SolidColorBrush x:Key="ExpanderDropDownBorderBrush" Color="{DynamicResource SystemBaseLowColor}" />
-
-    <SolidColorBrush x:Key="ExpanderForeground" Color="{DynamicResource SystemBaseHighColor}" />
-
-    <SolidColorBrush x:Key="ExpanderChevronForeground" Color="{DynamicResource SystemBaseHighColor}" />
-  </Styles.Resources>
-  <Style Selector="Expander">
-    <Setter Property="Background" Value="{DynamicResource ExpanderBackground}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderBorderThickness}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ExpanderBorderBrush}" />
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-    <Setter Property="Padding" Value="{DynamicResource ExpanderHeaderPadding}" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="HorizontalContentAlignment" Value="Left" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-  </Style>
-  <Style Selector="Expander">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <DockPanel>
-          <ToggleButton x:Name="ExpanderHeader"
-                        Padding="{TemplateBinding Padding}"
-                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        Content="{TemplateBinding Header}"
-                        ContentTemplate="{TemplateBinding HeaderTemplate}"
-                        IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
-                        IsEnabled="{TemplateBinding IsEnabled}" />
-          <Border x:Name="ExpanderContent"
-                  Padding="{DynamicResource ExpanderContentPadding}"
-                  Background="{DynamicResource ExpanderDropDownBackground}"
-                  BorderBrush="{DynamicResource ExpanderDropDownBorderBrush}"
-                  IsVisible="{TemplateBinding IsExpanded, Mode=TwoWay}">
-            <ContentPresenter x:Name="PART_ContentPresenter"
-                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                              Content="{TemplateBinding Content}"
-                              ContentTemplate="{TemplateBinding ContentTemplate}" />
-          </Border>
-        </DockPanel>
-      </ControlTemplate>
-    </Setter>
-  </Style>
+  <Thickness x:Key="ExpanderHeaderPadding">16</Thickness>
+  <Thickness x:Key="ExpanderContentPadding">16</Thickness>
+  <Thickness x:Key="ExpanderBorderThickness">1</Thickness>
+  <Thickness x:Key="ExpanderDropdownLeftBorderThickness">1,1,0,1</Thickness>
+  <Thickness x:Key="ExpanderDropdownUpBorderThickness">1,1,1,0</Thickness>
+  <Thickness x:Key="ExpanderDropdownRightBorderThickness">0,1,1,1</Thickness>
+  <Thickness x:Key="ExpanderDropdownDownBorderThickness">1,0,1,1</Thickness>
+  <SolidColorBrush x:Key="ExpanderBackground" Color="{DynamicResource SystemAltMediumHighColor}" />
+  <SolidColorBrush x:Key="ExpanderBorderBrush" Color="{DynamicResource SystemBaseLowColor}" />
+  <SolidColorBrush x:Key="ExpanderDropDownBackground" Color="{DynamicResource SystemChromeMediumLowColor}" />
+  <SolidColorBrush x:Key="ExpanderDropDownBorderBrush" Color="{DynamicResource SystemBaseLowColor}" />
+  <SolidColorBrush x:Key="ExpanderForeground" Color="{DynamicResource SystemBaseHighColor}" />
+  <SolidColorBrush x:Key="ExpanderChevronForeground" Color="{DynamicResource SystemBaseHighColor}" />
 
-  <Style Selector="Expander /template/ ToggleButton#ExpanderHeader">
-    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+  <ControlTheme x:Key="FluentExpanderToggleButtonTheme" TargetType="ToggleButton">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border x:Name="ToggleButtonBackground">
+        <Border x:Name="ToggleButtonBackground"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                BorderThickness="{TemplateBinding BorderThickness}">
           <Grid ColumnDefinitions="*,Auto">
             <ContentPresenter x:Name="PART_ContentPresenter"
                               Margin="{TemplateBinding Padding}"
@@ -132,110 +98,159 @@
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-  <Style Selector="Expander /template/ ToggleButton#ExpanderHeader:pressed">
-    <Setter Property="RenderTransform" Value="{x:Null}" />
-  </Style>
-
-  <Style Selector="Expander:left /template/ ToggleButton#ExpanderHeader, Expander:right /template/ ToggleButton#ExpanderHeader">
-    <Setter Property="VerticalAlignment" Value="Stretch" />
-  </Style>
-
-
-  <Style Selector="Expander /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
-    <Setter Property="Background" Value="{TemplateBinding Background}" />
-    <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
-    <Setter Property="BorderThickness" Value="{TemplateBinding BorderThickness}" />
-  </Style>
-
-  <Style Selector="Expander:not(:expanded) /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius}" />
-  </Style>
-  <Style Selector="Expander:expanded:up /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
-  </Style>
-  <Style Selector="Expander:expanded:up /template/ Border#ExpanderContent">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
-  </Style>
-  <Style Selector="Expander:expanded:down /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
-  </Style>
-  <Style Selector="Expander:expanded:down /template/ Border#ExpanderContent">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
-  </Style>
-  <Style Selector="Expander:expanded:left /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
-  </Style>
-  <Style Selector="Expander:expanded:left /template/ Border#ExpanderContent">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
-  </Style>
-  <Style Selector="Expander:expanded:right /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
-  </Style>
-  <Style Selector="Expander:expanded:right /template/ Border#ExpanderContent">
-    <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
-  </Style>
+    <Style Selector="^:checked /template/ Border#ExpandCollapseChevronBorder">
+      <Style.Animations>
+        <Animation FillMode="Both" Duration="0:0:0.0625">
+          <KeyFrame Cue="100%">
+            <Setter Property="RotateTransform.Angle" Value="180" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+    <Style Selector="^:not(:checked) /template/ Border#ExpandCollapseChevronBorder">
+      <Style.Animations>
+        <Animation FillMode="Both" Duration="0:0:0.0625">
+          <KeyFrame Cue="0%">
+            <Setter Property="RotateTransform.Angle" Value="180" />
+          </KeyFrame>
+          <KeyFrame Cue="100%">
+            <Setter Property="RotateTransform.Angle" Value="0" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+  </ControlTheme>
+  <ControlTheme x:Key="FluentExpanderToggleButtonUpTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 7 L 7 0 L 14 7" />
+    </Style>
+  </ControlTheme>
+  <ControlTheme x:Key="FluentExpanderToggleButtonDownTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 0 L 7 7 L 14 0" />
+    </Style>
+  </ControlTheme>
+  <ControlTheme x:Key="FluentExpanderToggleButtonLeftTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 7 0 L 0 7 L 7 14" />
+    </Style>
+  </ControlTheme>
+  <ControlTheme x:Key="FluentExpanderToggleButtonRightTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 0 L 7 7 L 0 14" />
+    </Style>
+  </ControlTheme>
+  <ControlTheme x:Key="{x:Type Expander}" TargetType="Expander">
+    <Setter Property="Background" Value="{DynamicResource ExpanderBackground}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderBorderThickness}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ExpanderBorderBrush}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <Setter Property="Padding" Value="{DynamicResource ExpanderHeaderPadding}" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel>
+          <ToggleButton x:Name="ExpanderHeader"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        HorizontalContentAlignment="Stretch"
+                        Content="{TemplateBinding Header}"
+                        ContentTemplate="{TemplateBinding HeaderTemplate}"
+                        IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
+                        IsEnabled="{TemplateBinding IsEnabled}"/>
+          <Border x:Name="ExpanderContent"
+                  Padding="{DynamicResource ExpanderContentPadding}"
+                  Background="{DynamicResource ExpanderDropDownBackground}"
+                  BorderBrush="{DynamicResource ExpanderDropDownBorderBrush}"
+                  IsVisible="{TemplateBinding IsExpanded, Mode=TwoWay}">
+            <ContentPresenter x:Name="PART_ContentPresenter"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}" />
+          </Border>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
 
-  <Style Selector="Expander:left /template/ ToggleButton#ExpanderHeader">
-    <Setter Property="DockPanel.Dock" Value="Right" />
-  </Style>
-  <Style Selector="Expander:up /template/ ToggleButton#ExpanderHeader">
-    <Setter Property="DockPanel.Dock" Value="Bottom" />
-  </Style>
-  <Style Selector="Expander:right /template/ ToggleButton#ExpanderHeader">
-    <Setter Property="DockPanel.Dock" Value="Left" />
-  </Style>
-  <Style Selector="Expander:down /template/ ToggleButton#ExpanderHeader">
-    <Setter Property="DockPanel.Dock" Value="Top" />
-  </Style>
+    <Style Selector="^ /template/ ToggleButton#ExpanderHeader:pressed">
+      <Setter Property="RenderTransform" Value="{x:Null}" />
+    </Style>
 
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader, ^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="VerticalAlignment" Value="Stretch" />
+    </Style>
 
-  <Style Selector="Expander:expanded /template/ ToggleButton#ExpanderHeader /template/ Border#ExpandCollapseChevronBorder">
-    <Style.Animations>
-      <Animation FillMode="Both" Duration="0:0:0.0625">
-        <KeyFrame Cue="100%">
-          <Setter Property="RotateTransform.Angle" Value="180" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="Expander:not(:expanded) /template/ ToggleButton#ExpanderHeader /template/ Border#ExpandCollapseChevronBorder">
-    <Style.Animations>
-      <Animation FillMode="Both" Duration="0:0:0.0625">
-        <KeyFrame Cue="0%">
-          <Setter Property="RotateTransform.Angle" Value="180" />
-        </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="RotateTransform.Angle" Value="0" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
+    <Style Selector="^:not(:expanded) /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius}" />
+    </Style>
+    <Style Selector="^:expanded:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:up /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:down /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:left /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:right /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+    </Style>
 
-  <Style Selector="Expander:left /template/ ToggleButton#ExpanderHeader /template/ Path#ExpandCollapseChevron">
-    <Setter Property="Data" Value="M 7 0 L 0 7 L 7 14" />
-  </Style>
-  <Style Selector="Expander:up /template/ ToggleButton#ExpanderHeader /template/ Path#ExpandCollapseChevron">
-    <Setter Property="Data" Value="M 0 7 L 7 0 L 14 7" />
-  </Style>
-  <Style Selector="Expander:right /template/ ToggleButton#ExpanderHeader /template/ Path#ExpandCollapseChevron">
-    <Setter Property="Data" Value="M 0 0 L 7 7 L 0 14" />
-  </Style>
-  <Style Selector="Expander:down /template/ ToggleButton#ExpanderHeader /template/ Path#ExpandCollapseChevron">
-    <Setter Property="Data" Value="M 0 0 L 7 7 L 14 0" />
-  </Style>
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Right" />
+    </Style>
+    <Style Selector="^:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Bottom" />
+    </Style>
+    <Style Selector="^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Left" />
+    </Style>
+    <Style Selector="^:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Top" />
+    </Style>
 
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonLeftTheme}" />
+    </Style>
+    <Style Selector="^:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonUpTheme}" />
+    </Style>
+    <Style Selector="^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonRightTheme}" />
+    </Style>
+    <Style Selector="^:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonDownTheme}" />
+    </Style>
 
-  <Style Selector="Expander:left /template/ Border#ExpanderContent">
-    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownLeftBorderThickness}" />
-  </Style>
-  <Style Selector="Expander:up /template/ Border#ExpanderContent">
-    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownUpBorderThickness}" />
-  </Style>
-  <Style Selector="Expander:right /template/ Border#ExpanderContent">
-    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownRightBorderThickness}" />
-  </Style>
-  <Style Selector="Expander:down /template/ Border#ExpanderContent">
-    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownDownBorderThickness}" />
-  </Style>
-</Styles>
+    <Style Selector="^:left /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownLeftBorderThickness}" />
+    </Style>
+    <Style Selector="^:up /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownUpBorderThickness}" />
+    </Style>
+    <Style Selector="^:right /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownRightBorderThickness}" />
+    </Style>
+    <Style Selector="^:down /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownDownBorderThickness}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml

@@ -1,70 +1,78 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:Class="Avalonia.Themes.Fluent.Controls.FluentControls">
-  <!-- Define ToolTip first so its styles can be overriden by other controls (e.g. TextBox) -->  
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToolTip.xaml"/>
-  <!-- PathIcon also needs to be defined early so it can be overriden by other styles (e.g. ComboBox) -->
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/PathIcon.xaml" />
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/DataValidationErrors.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/FocusAdorner.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Button.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Carousel.xaml"/>  
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CheckBox.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ComboBox.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ComboBoxItem.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ContentControl.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/DropDownButton.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Label.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/GridSplitter.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ItemsControl.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBox.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBoxItem.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Menu.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ContextMenu.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuItem.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/OverlayPopupHost.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/PopupRoot.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ProgressBar.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/RadioButton.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/RepeatButton.xaml" />
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Separator.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Slider.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollBar.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabStrip.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabStripItem.xaml"/>
-  <!-- TabControl needs to come after TabStrip as it redefines the inner TabStrip.ItemsPanel-->
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabControl.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabItem.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TextBox.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToggleButton.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TransitioningContentControl.xaml" />
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Expander.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TitleBar.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TreeView.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TreeViewItem.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/UserControl.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Window.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/EmbeddableControlRoot.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CalendarButton.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CalendarDayButton.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CalendarItem.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Calendar.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CalendarDatePicker.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ButtonSpinner.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/NumericUpDown.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/AutoCompleteBox.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/WindowNotificationManager.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/NotificationCard.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/NativeMenuBar.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitButton.xaml" />
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitView.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/DatePicker.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/FlyoutPresenter.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuFlyoutPresenter.xaml"/>
-  <!-- ManagedFileChooser comes last because it uses (and overrides) styles for a multitude of other controls...the dialogs were originally UserControls, after all-->
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ManagedFileChooser.xaml"/>
+<Styles
+    x:Class="Avalonia.Themes.Fluent.Controls.FluentControls"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Styles.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Button.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/RadioButton.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Expander.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ProgressBar.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/AutoCompleteBox.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ButtonSpinner.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Calendar.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/CalendarButton.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/CalendarDatePicker.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/CalendarDayButton.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/CalendarItem.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Carousel.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/CheckBox.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/FlyoutPresenter.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/GridSplitter.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ItemsControl.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Label.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBox.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBoxItem.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Menu.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuItem.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuFlyoutPresenter.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/NativeMenuBar.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/NotificationCard.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/NumericUpDown.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/OverlayPopupHost.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/PopupRoot.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/PathIcon.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/RepeatButton.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollBar.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Separator.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitButton.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitView.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabControl.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabItem.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabStrip.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabStripItem.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TextBox.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToggleButton.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToolTip.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TitleBar.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TransitioningContentControl.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TreeView.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TreeViewItem.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/WindowNotificationManager.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Window.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ComboBox.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ComboBoxItem.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ContentControl.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ContextMenu.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/DataValidationErrors.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/DateTimePickerShared.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/DatePicker.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/DropDownButton.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/EmbeddableControlRoot.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Slider.xaml" />
+                <!--  ManagedFileChooser comes last because it uses (and overrides) styles for a multitude of other controls...the dialogs were originally UserControls, after all  -->
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ManagedFileChooser.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Styles.Resources>
+
+    <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/FocusAdorner.xaml" />
+    <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/UserControl.xaml" />
+    <Styles.Resources />
 </Styles>

src/Avalonia.Themes.Fluent/Controls/FlyoutPresenter.xaml

@@ -1,9 +1,7 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Styles.Resources>
-    <Thickness x:Key="FlyoutBorderThemeThickness">1</Thickness>
-  </Styles.Resources>
-  
-  <Style Selector="FlyoutPresenter">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Thickness x:Key="FlyoutBorderThemeThickness">1</Thickness>
+  <ControlTheme x:Key="{x:Type FlyoutPresenter}" TargetType="FlyoutPresenter">
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="VerticalContentAlignment" Value="Stretch" />
     <Setter Property="Background" Value="{DynamicResource FlyoutPresenterBackground}" />
@@ -38,5 +36,5 @@
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/FocusAdorner.xaml

@@ -1,4 +1,4 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Styles.Resources>
     <Thickness x:Key="SystemControlFocusVisualMargin">0</Thickness>

src/Avalonia.Themes.Fluent/Controls/GridSplitter.xaml

@@ -1,24 +1,22 @@
-<Styles xmlns="https://github.com/avaloniaui">
-
-  <Style Selector="GridSplitter">
-    <Setter Property="Focusable" Value="True" />
-    <Setter Property="MinWidth" Value="6" />
-    <Setter Property="MinHeight" Value="6" />
-    <Setter Property="Background" Value="{DynamicResource SystemAltMediumLowColor}" />
-    <Setter Property="PreviewContent">
-      <Template>
-        <Rectangle Fill="{DynamicResource SystemAccentColor}" />
-      </Template>
-    </Setter>
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Border 
-          BorderBrush="{TemplateBinding BorderBrush}"
-          BorderThickness="{TemplateBinding BorderThickness}"
-          CornerRadius="{TemplateBinding CornerRadius}"
-          Background="{TemplateBinding Background}"/>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-</Styles>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type GridSplitter}" TargetType="GridSplitter">
+      <Setter Property="Focusable" Value="True" />
+      <Setter Property="MinWidth" Value="6" />
+      <Setter Property="MinHeight" Value="6" />
+      <Setter Property="Background" Value="{DynamicResource SystemAltMediumLowColor}" />
+      <Setter Property="PreviewContent">
+        <Template>
+          <Rectangle Fill="{DynamicResource SystemAccentColor}" />
+        </Template>
+      </Setter>
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Border BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}"
+                  Background="{TemplateBinding Background}" />
+        </ControlTemplate>
+      </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ItemsControl.xaml

@@ -1,16 +1,19 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="ItemsControl">
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Border Background="{TemplateBinding Background}"
-              BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}"
-              CornerRadius="{TemplateBinding CornerRadius}"
-              Padding="{TemplateBinding Padding}">
-        <ItemsPresenter Name="PART_ItemsPresenter"
-                        Items="{TemplateBinding Items}"
-                        ItemsPanel="{TemplateBinding ItemsPanel}"
-                        ItemTemplate="{TemplateBinding ItemTemplate}"/>
-      </Border>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type ItemsControl}" TargetType="ItemsControl">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                Padding="{TemplateBinding Padding}">
+          <ItemsPresenter Name="PART_ItemsPresenter"
+                          Items="{TemplateBinding Items}"
+                          ItemsPanel="{TemplateBinding ItemsPanel}"
+                          ItemTemplate="{TemplateBinding ItemTemplate}"/>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Label.xaml

@@ -1,18 +1,22 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="Label">
-  <Setter Property="Padding" Value="3"/>
-  <Setter Property="Template">
-    <ControlTemplate>
-      <ContentPresenter Name="PART_ContentPresenter"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"                        
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        Content="{TemplateBinding Content}"
-                        Padding="{TemplateBinding Padding}"
-                        RecognizesAccessKey="True"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+  <ControlTheme x:Key="{x:Type Label}" TargetType="Label">
+    <Setter Property="Padding" Value="3"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Content="{TemplateBinding Content}"
+                          Padding="{TemplateBinding Padding}"
+                          RecognizesAccessKey="True"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ListBox.xaml

@@ -1,4 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <ListBox>
@@ -9,15 +10,16 @@
       </ListBox>
     </Border>
   </Design.PreviewWith>
-  <Style Selector="ListBox">
+
+  <ControlTheme x:Key="{x:Type ListBox}" TargetType="ListBox">
     <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
     <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
     <Setter Property="BorderBrush" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource ListBoxBorderThemeThickness}" />
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
-    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />        
-    <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />        
-    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />    
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+    <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="border"
@@ -36,10 +38,10 @@
                             ItemsPanel="{TemplateBinding ItemsPanel}"
                             ItemTemplate="{TemplateBinding ItemTemplate}"
                             Margin="{TemplateBinding Padding}"
-                            VirtualizationMode="{TemplateBinding VirtualizationMode}"/>
+                            VirtualizationMode="{TemplateBinding VirtualizationMode}" />
           </ScrollViewer>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ListBoxItem.xaml

@@ -1,5 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="0">
       <ListBox>
@@ -12,10 +12,8 @@
       </ListBox>
     </Border>
   </Design.PreviewWith>
-  <Styles.Resources>
-    <Thickness x:Key="ListBoxItemPadding">12,9,12,12</Thickness>
-  </Styles.Resources>
-  <Style Selector="ListBoxItem">
+  <Thickness x:Key="ListBoxItemPadding">12,9,12,12</Thickness>
+  <ControlTheme x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="Padding" Value="{DynamicResource ListBoxItemPadding}" />
     <Setter Property="Template">
@@ -27,68 +25,55 @@
                           CornerRadius="{TemplateBinding CornerRadius}"
                           ContentTemplate="{TemplateBinding ContentTemplate}"
                           Content="{TemplateBinding Content}"
+                          FontWeight="Normal"
+                          FontSize="{DynamicResource ControlContentThemeFontSize}"
                           Padding="{TemplateBinding Padding}"
                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
       </ControlTemplate>
     </Setter>
-  </Style>
 
-  <Style Selector="ListBoxItem /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="FontWeight" Value="Normal" />
-    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-  </Style>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource SystemControlDisabledBaseMediumLowBrush}" />
+    </Style>
 
-  <!--  Disabled State  -->
-  <Style Selector="ListBoxItem:disabled /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlDisabledBaseMediumLowBrush}" />
-  </Style>
+    <!--  PointerOver State  -->
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListLowBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
+    </Style>
 
-  <!--  PointerOver State  -->
-  <Style Selector="ListBoxItem:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListLowBrush}" />
-  </Style>
-  <Style Selector="ListBoxItem:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
-  </Style>
+    <!--  Pressed State  -->
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListMediumBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
+    </Style>
 
-  <!--  Pressed State  -->
-  <Style Selector="ListBoxItem:pressed /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListMediumBrush}" />
-  </Style>
-  <Style Selector="ListBoxItem:pressed /template/ ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
-  </Style>
+    <!--  Selected State  -->
+    <Style Selector="^:selected">
 
-  <!--  Selected State  -->
-  <Style Selector="ListBoxItem:selected /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}" />
-  </Style>
-  <Style Selector="ListBoxItem:selected /template/ ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
-  </Style>
+      <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
+      </Style>
 
-  <!--  Selected Unfocused State  -->
-  <Style Selector="ListBoxItem:selected:not(:focus) /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}" />
-  </Style>
-  <Style Selector="ListBoxItem:selected:not(:focus) /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
-  </Style>
+      <!--  Selected Unfocused State  -->
+      <Style Selector="^:not(:focus) /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
+      </Style>
 
-  <!--  Selected PointerOver State  -->
-  <Style Selector="ListBoxItem:selected:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentMediumBrush}" />
-  </Style>
-  <Style Selector="ListBoxItem:selected:pointerover /template/ ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
-  </Style>
+      <!--  Selected PointerOver State  -->
+      <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentMediumBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
+      </Style>
 
-  <!--  Selected Pressed State  -->
-  <Style Selector="ListBoxItem:selected:pressed /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentHighBrush}" />
-  </Style>
-  <Style Selector="ListBoxItem:selected:pressed /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
-  </Style>
-</Styles>
+      <!--  Selected Pressed State  -->
+      <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentHighBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}" />
+      </Style>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ManagedFileChooser.xaml

@@ -1,324 +1,328 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs">
-    <Style Selector="dialogs|ManagedFileChooser">
-        <Style.Resources>
-            <ResourceDictionary>
-                <GradientStops x:Key="IconRes.FolderBackGradientStops">
-                </GradientStops>
-                <GradientStops x:Key="IconRes.FolderFrontGradientStops">
-                    <GradientStop Offset="0" Color="#FFFFDA6F"/>
-                    <GradientStop Offset="1" Color="#FFFEC326"/>
-                </GradientStops>
-                <DrawingGroup x:Key="LevelUp">
-                    <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
-                    <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M14.5,0L6.39,0 5.39,2 2.504,2C1.677,2,1,2.673,1,3.5L1,10.582 1,10.586 1,15.414 3,13.414 3,16 7,16 7,13.414 9,15.414 9,13 14.5,13C15.327,13,16,12.327,16,11.5L16,1.5C16,0.673,15.327,0,14.5,0" />
-                    <GeometryDrawing Brush="#FFDCB679" Geometry="F1M14,3L7.508,3 8.008,2 8.012,2 14,2z M14.5,1L7.008,1 6.008,3 2.504,3C2.227,3,2,3.224,2,3.5L2,9.582 4.998,6.586 9,10.586 9,12 14.5,12C14.775,12,15,11.776,15,11.5L15,1.5C15,1.224,14.775,1,14.5,1" />
-                    <GeometryDrawing Brush="#FF00529C" Geometry="F1M8,11L5,8 2,11 2,13 4,11 4,15 6,15 6,11 8,13z" />
-                    <GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M8.0001,1.9996L7.5001,3.0006 14.0001,3.0006 14.0001,1.9996z" />
-                </DrawingGroup>
-                <dialogs:ResourceSelectorConverter x:Key="Icons">
-                    <DrawingGroup x:Key="Icon_Folder">
-                        <GeometryDrawing Geometry="M 0 0 L 16 16"/>
-                        <GeometryDrawing Geometry="M 0 3 C 0,1 0,1 2,1 L 5 1 C 5.5,1 6,1 6.5,1.5 L 8 3 L 14 3 C 16,3 16,3 16,5
+  <Design.PreviewWith>
+    <Border Padding="20" Width="800" Height="500">
+      <dialogs:ManagedFileChooser/>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooser}" TargetType="dialogs:ManagedFileChooser">
+    <ControlTheme.Resources>
+      <ResourceDictionary>
+        <GradientStops x:Key="IconRes.FolderBackGradientStops">
+        </GradientStops>
+        <GradientStops x:Key="IconRes.FolderFrontGradientStops">
+          <GradientStop Offset="0" Color="#FFFFDA6F"/>
+          <GradientStop Offset="1" Color="#FFFEC326"/>
+        </GradientStops>
+        <DrawingGroup x:Key="LevelUp">
+          <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
+          <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M14.5,0L6.39,0 5.39,2 2.504,2C1.677,2,1,2.673,1,3.5L1,10.582 1,10.586 1,15.414 3,13.414 3,16 7,16 7,13.414 9,15.414 9,13 14.5,13C15.327,13,16,12.327,16,11.5L16,1.5C16,0.673,15.327,0,14.5,0" />
+          <GeometryDrawing Brush="#FFDCB679" Geometry="F1M14,3L7.508,3 8.008,2 8.012,2 14,2z M14.5,1L7.008,1 6.008,3 2.504,3C2.227,3,2,3.224,2,3.5L2,9.582 4.998,6.586 9,10.586 9,12 14.5,12C14.775,12,15,11.776,15,11.5L15,1.5C15,1.224,14.775,1,14.5,1" />
+          <GeometryDrawing Brush="#FF00529C" Geometry="F1M8,11L5,8 2,11 2,13 4,11 4,15 6,15 6,11 8,13z" />
+          <GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M8.0001,1.9996L7.5001,3.0006 14.0001,3.0006 14.0001,1.9996z" />
+        </DrawingGroup>
+        <dialogs:ResourceSelectorConverter x:Key="Icons">
+          <DrawingGroup x:Key="Icon_Folder">
+            <GeometryDrawing Geometry="M 0 0 L 16 16"/>
+            <GeometryDrawing Geometry="M 0 3 C 0,1 0,1 2,1 L 5 1 C 5.5,1 6,1 6.5,1.5 L 8 3 L 14 3 C 16,3 16,3 16,5
                         L 16,12 C 16,14 16,14 14,14
                         L 2,14 C 0,14 0,14 0,12 Z">
-                            <GeometryDrawing.Brush>
-                                <LinearGradientBrush StartPoint="1,4" EndPoint="23,20">
-                                    <GradientStop Offset="0" Color="#FFFFC018"/>
-                                    <GradientStop Offset="1" Color="#FFDFA32D"/>
-                                </LinearGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing Geometry="M 0 4.5 L 8 4.5 L 8 9 L 0 9 Z">
-                            <GeometryDrawing.Brush>
-                                <LinearGradientBrush StartPoint="0,4.5" EndPoint="0,5">
-                                    <GradientStop Offset="0" Color="#00D7A018"/>
-                                    <GradientStop Offset="1" Color="#7FD7A018"/>
-                                </LinearGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing Geometry="M 0 9 C 0,5 0,5 2,5 L 5 5 C 5.5,5 6,5 6.5,4.75 L 8 4 L 14 4 C 16,4 16,4 16,6
+              <GeometryDrawing.Brush>
+                <LinearGradientBrush StartPoint="1,4" EndPoint="23,20">
+                  <GradientStop Offset="0" Color="#FFFFC018"/>
+                  <GradientStop Offset="1" Color="#FFDFA32D"/>
+                </LinearGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing Geometry="M 0 4.5 L 8 4.5 L 8 9 L 0 9 Z">
+              <GeometryDrawing.Brush>
+                <LinearGradientBrush StartPoint="0,4.5" EndPoint="0,5">
+                  <GradientStop Offset="0" Color="#00D7A018"/>
+                  <GradientStop Offset="1" Color="#7FD7A018"/>
+                </LinearGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing Geometry="M 0 9 C 0,5 0,5 2,5 L 5 5 C 5.5,5 6,5 6.5,4.75 L 8 4 L 14 4 C 16,4 16,4 16,6
                                                     L 16,11 C 16,13 16,13 14,13
                                                     L 2,13 C 0,13 0,13 0,11 Z">
-                            <GeometryDrawing.Brush>
-                                <LinearGradientBrush StartPoint="1,6" EndPoint="23,19">
-                                    <GradientStop Offset="0" Color="#FFFFE69D"/>
-                                    <GradientStop Offset="1" Color="#FFFFC937"/>
-                                </LinearGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing Geometry="M 0 9 C 0,5 0,5 2,5 L 5 5 C 5.5,5 6,5 6.5,4.75 L 8 4 L 14 4
+              <GeometryDrawing.Brush>
+                <LinearGradientBrush StartPoint="1,6" EndPoint="23,19">
+                  <GradientStop Offset="0" Color="#FFFFE69D"/>
+                  <GradientStop Offset="1" Color="#FFFFC937"/>
+                </LinearGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing Geometry="M 0 9 C 0,5 0,5 2,5 L 5 5 C 5.5,5 6,5 6.5,4.75 L 8 4 L 14 4
                                                     L 8 4.25 C 6,5.25 5.5,5.25 5.125,5.25 L 2 5.25 C 0,5.25 0,5.25 0,9.25 z" Brush="#7FFFFFFF"/>
-                    </DrawingGroup>
-                    <DrawingGroup x:Key="Icon_File">
-                        <GeometryDrawing Geometry="M 0 0 L 16 16"/>
-                        <GeometryDrawing Geometry="M 2 0 L 10 0 L 14 4 L 14 16 L 2 16 Z" Brush="#FF797774"/>
-                        <GeometryDrawing Geometry="M 3 1 L 9.7 1 L 13 4.3 L 13 15 L 3 15 Z" Brush="#FFFAFAFA"/>
-                        <GeometryDrawing Geometry="L 9 1 L 9 5 L 14 5 L 14 4 L 10 4 L 10 1 Z" Brush="#FF797774"/>
-                    </DrawingGroup>
-                    <DrawingGroup x:Key="Icon_Volume">
-                        <GeometryDrawing Geometry="M 0 0 L 16 16"/>
-                        <GeometryDrawing Geometry="M 4 5 L 12 5 L 14.5 7.5 C 15,8 15,8 15,9 L 1 9 C 1,8 1,8 1.5 7.5 Z" Brush="#FFE1E3E6"/>
-                        <GeometryDrawing Geometry="M 12 5 L 14.5 7.5 C 15,8 15,8 15,9 L 10 9 L 10 5 Z">
-                            <GeometryDrawing.Brush>
-                                <LinearGradientBrush StartPoint="12,5" EndPoint="11.5,5.5">
-                                    <GradientStop Offset="0" Color="#FFCDCFD1"/>
-                                    <GradientStop Offset="1" Color="#00CDCFD1"/>
-                                </LinearGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing Geometry="M 4 5 L 1.5 7.5 C 1,8 1,8 1,9 L 4 9 L 6 9 L 6 5 Z">
-                            <GeometryDrawing.Brush>
-                                <LinearGradientBrush StartPoint="4,5" EndPoint="4.5,5.5">
-                                    <GradientStop Offset="0" Color="#FFCDCFD1"/>
-                                    <GradientStop Offset="1" Color="#00CDCFD1"/>
-                                </LinearGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing Geometry="M 1 9 C 1,8 1,8 2,8 L 14 8
+          </DrawingGroup>
+          <DrawingGroup x:Key="Icon_File">
+            <GeometryDrawing Geometry="M 0 0 L 16 16"/>
+            <GeometryDrawing Geometry="M 2 0 L 10 0 L 14 4 L 14 16 L 2 16 Z" Brush="#FF797774"/>
+            <GeometryDrawing Geometry="M 3 1 L 9.7 1 L 13 4.3 L 13 15 L 3 15 Z" Brush="#FFFAFAFA"/>
+            <GeometryDrawing Geometry="L 9 1 L 9 5 L 14 5 L 14 4 L 10 4 L 10 1 Z" Brush="#FF797774"/>
+          </DrawingGroup>
+          <DrawingGroup x:Key="Icon_Volume">
+            <GeometryDrawing Geometry="M 0 0 L 16 16"/>
+            <GeometryDrawing Geometry="M 4 5 L 12 5 L 14.5 7.5 C 15,8 15,8 15,9 L 1 9 C 1,8 1,8 1.5 7.5 Z" Brush="#FFE1E3E6"/>
+            <GeometryDrawing Geometry="M 12 5 L 14.5 7.5 C 15,8 15,8 15,9 L 10 9 L 10 5 Z">
+              <GeometryDrawing.Brush>
+                <LinearGradientBrush StartPoint="12,5" EndPoint="11.5,5.5">
+                  <GradientStop Offset="0" Color="#FFCDCFD1"/>
+                  <GradientStop Offset="1" Color="#00CDCFD1"/>
+                </LinearGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing Geometry="M 4 5 L 1.5 7.5 C 1,8 1,8 1,9 L 4 9 L 6 9 L 6 5 Z">
+              <GeometryDrawing.Brush>
+                <LinearGradientBrush StartPoint="4,5" EndPoint="4.5,5.5">
+                  <GradientStop Offset="0" Color="#FFCDCFD1"/>
+                  <GradientStop Offset="1" Color="#00CDCFD1"/>
+                </LinearGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing Geometry="M 1 9 C 1,8 1,8 2,8 L 14 8
                                                     C 15,8 15,8 15,9 L 15 11
                                                     C 15,12 15,12 14,12 L 2 12
                                                     C 1,12 1,12 1,11 Z">
-                            <GeometryDrawing.Brush>
-                                <LinearGradientBrush StartPoint="0,8" EndPoint="0,12">
-                                    <GradientStop Offset="0" Color="#FF737374"/>
-                                    <GradientStop Offset="1" Color="#FFA8A8A8"/>
-                                </LinearGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing Geometry="M 2 9 C 2,8 2,8 3,8 L 13 8
+              <GeometryDrawing.Brush>
+                <LinearGradientBrush StartPoint="0,8" EndPoint="0,12">
+                  <GradientStop Offset="0" Color="#FF737374"/>
+                  <GradientStop Offset="1" Color="#FFA8A8A8"/>
+                </LinearGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing Geometry="M 2 9 C 2,8 2,8 3,8 L 13 8
                                                     C 14,8 14,8 14,9 L 14 10
                                                     C 14,11 14,11 13,11 L 3 11
                                                     C 2,11 2,11 2,10 Z">
-                            <GeometryDrawing.Brush>
-                                <LinearGradientBrush StartPoint="0,8" EndPoint="0,11">
-                                    <GradientStop Offset="0" Color="#FF333333"/>
-                                    <GradientStop Offset="1" Color="#FF5A5A5A"/>
-                                </LinearGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing>
-                            <GeometryDrawing.Geometry>
-                                <EllipseGeometry Rect="2.5,8.5,2,2"/>
-                            </GeometryDrawing.Geometry>
-                            <GeometryDrawing.Brush>
-                                <RadialGradientBrush GradientOrigin="3.5,9.5" Center="3.5,9.5">
-                                    <GradientStop Offset="0.8" Color="#4001FF01"/>
-                                    <GradientStop Offset="1" Color="#0001FF01"/>
-                                </RadialGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing>
-                            <GeometryDrawing.Geometry>
-                                <EllipseGeometry Rect="3,9,1,1"/>
-                            </GeometryDrawing.Geometry>
-                            <GeometryDrawing.Brush>
-                                <RadialGradientBrush GradientOrigin="3.5,9.5" Center="3.25,9.75">
-                                    <GradientStop Offset="0" Color="#FFB6FFB6"/>
-                                    <GradientStop Offset="1" Color="#FF01FF01"/>
-                                </RadialGradientBrush>
-                            </GeometryDrawing.Brush>
-                        </GeometryDrawing>
-                        <GeometryDrawing Geometry="M 3.23483495705 9.76516504295 A 0.375,0.375 180 1 0 3.76516504295,9.23483495705 A 0.4375,0.4375 135 0 1 3.23483495705,9.76516504295 Z" Brush="#FF00B300"/>
-                    </DrawingGroup>
-                </dialogs:ResourceSelectorConverter>
-            </ResourceDictionary>
-        </Style.Resources>
-        <Setter Property="Template">
+              <GeometryDrawing.Brush>
+                <LinearGradientBrush StartPoint="0,8" EndPoint="0,11">
+                  <GradientStop Offset="0" Color="#FF333333"/>
+                  <GradientStop Offset="1" Color="#FF5A5A5A"/>
+                </LinearGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing>
+              <GeometryDrawing.Geometry>
+                <EllipseGeometry Rect="2.5,8.5,2,2"/>
+              </GeometryDrawing.Geometry>
+              <GeometryDrawing.Brush>
+                <RadialGradientBrush GradientOrigin="3.5,9.5" Center="3.5,9.5">
+                  <GradientStop Offset="0.8" Color="#4001FF01"/>
+                  <GradientStop Offset="1" Color="#0001FF01"/>
+                </RadialGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing>
+              <GeometryDrawing.Geometry>
+                <EllipseGeometry Rect="3,9,1,1"/>
+              </GeometryDrawing.Geometry>
+              <GeometryDrawing.Brush>
+                <RadialGradientBrush GradientOrigin="3.5,9.5" Center="3.25,9.75">
+                  <GradientStop Offset="0" Color="#FFB6FFB6"/>
+                  <GradientStop Offset="1" Color="#FF01FF01"/>
+                </RadialGradientBrush>
+              </GeometryDrawing.Brush>
+            </GeometryDrawing>
+            <GeometryDrawing Geometry="M 3.23483495705 9.76516504295 A 0.375,0.375 180 1 0 3.76516504295,9.23483495705 A 0.4375,0.4375 135 0 1 3.23483495705,9.76516504295 Z" Brush="#FF00B300"/>
+          </DrawingGroup>
+        </dialogs:ResourceSelectorConverter>
+      </ResourceDictionary>
+    </ControlTheme.Resources>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel>
+          <ListBox x:Name="QuickLinks" DockPanel.Dock="Left" Items="{Binding QuickLinks}" SelectedIndex="{Binding QuickLinksSelectedIndex}" Focusable="False">
+            <ListBox.ItemTemplate>
+              <DataTemplate>
+                <StackPanel Spacing="4" Orientation="Horizontal" Background="Transparent">
+                  <DrawingPresenter Width="16" Height="16" Drawing="{Binding IconKey, Converter={StaticResource Icons}}"/>
+                  <TextBlock Text="{Binding DisplayName}"/>
+                </StackPanel>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
+          <DockPanel x:Name="NavBar" DockPanel.Dock="Top" Margin="8,5,8,0" VerticalAlignment="Center">
+            <Rectangle Fill="{DynamicResource SystemControlHighlightAltBaseMediumLowBrush}" Height="1" Margin="0,5,0,0" DockPanel.Dock="Bottom"/>
+            <DockPanel Margin="4,0">
+              <Button Command="{Binding GoUp}" DockPanel.Dock="Left">
+                <Path Data="M 0 7 L 7 0 L 14 7 M 7 0 L 7 16" Stroke="{CompiledBinding $parent[Button].Foreground}" StrokeThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,1,0,-1"/>
+              </Button>
+              <TextBox x:Name="Location" Text="{Binding Location}">
+                <TextBox.KeyBindings>
+                  <KeyBinding Command="{Binding EnterPressed}" Gesture="Enter"/>
+                </TextBox.KeyBindings>
+              </TextBox>
+            </DockPanel>
+          </DockPanel>
+          <DockPanel Margin="8,0,8,5" DockPanel.Dock="Bottom">
+            <Rectangle Fill="{DynamicResource SystemControlHighlightAltBaseMediumLowBrush}" Height="1" Margin="0,0,0,5" DockPanel.Dock="Top"/>
+            <DockPanel Margin="4,0">
+              <DockPanel DockPanel.Dock="Top" Margin="0,0,0,4">
+                <ComboBox DockPanel.Dock="Right"
+                    IsVisible="{Binding ShowFilters}"
+                    Items="{Binding Filters}"
+                    SelectedItem="{Binding SelectedFilter}" />
+                <TextBox Text="{Binding FileName}" Watermark="File name" IsVisible="{Binding !SelectingFolder}" />
+              </DockPanel>
+              <CheckBox IsChecked="{Binding ShowHiddenFiles}" Content="Show hidden files" DockPanel.Dock="Left"/>
+              <UniformGrid x:Name="Finalize" HorizontalAlignment="Right" Rows="1">
+                <Button Command="{Binding Ok}">OK</Button>
+                <Button Command="{Binding Cancel}">Cancel</Button>
+              </UniformGrid>
+            </DockPanel>
+          </DockPanel>
+
+          <DockPanel Grid.IsSharedSizeScope="True">
+            <Grid DockPanel.Dock="Top" Margin="15 5 0 0" HorizontalAlignment="Stretch">
+              <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="20" SharedSizeGroup="Icon" />
+                <ColumnDefinition Width="16" SharedSizeGroup="Splitter"  />
+                <ColumnDefinition Width="275" SharedSizeGroup="Name" />
+                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
+                <ColumnDefinition Width="200" SharedSizeGroup="Modified" />
+                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
+                <ColumnDefinition Width="150" SharedSizeGroup="Type" />
+                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
+                <ColumnDefinition Width="200" SharedSizeGroup="Size" />
+              </Grid.ColumnDefinitions>
+              <Grid.Styles>
+                <Style Selector="GridSplitter">
+                  <Setter Property="Background" Value="{DynamicResource SystemControlHighlightAltBaseMediumLowBrush}"/>
+                  <Setter Property="Template">
+                    <ControlTemplate>
+                      <Border VerticalAlignment="Stretch" BorderThickness="0" Background="#01000000">
+                        <Rectangle Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}"/>
+                      </Border>
+                    </ControlTemplate>
+                  </Setter>
+                </Style>
+              </Grid.Styles>
+              <GridSplitter Grid.Column="1" />
+              <TextBlock Grid.Column="2" Text="Name" />
+              <GridSplitter Grid.Column="3" />
+              <TextBlock Grid.Column="4" Text="Date Modified" />
+              <GridSplitter Grid.Column="5" />
+              <TextBlock Grid.Column="6" Text="Type" />
+              <GridSplitter Grid.Column="7" />
+              <TextBlock Grid.Column="8" Text="Size" />
+            </Grid>
+            <ListBox x:Name="Files"
+                VirtualizationMode="Simple"
+                Items="{Binding Items}"
+                Margin="0 5"
+                SelectionMode="{Binding SelectionMode}"
+                SelectedItems="{Binding SelectedItems}"
+                Background="Transparent"
+                ScrollViewer.HorizontalScrollBarVisibility="Disabled">
+              <ListBox.ItemTemplate>
+                <DataTemplate>
+                  <Grid Background="Transparent">
+                    <Grid.ColumnDefinitions>
+                      <ColumnDefinition SharedSizeGroup="Icon" />
+                      <ColumnDefinition SharedSizeGroup="Splitter"  />
+                      <ColumnDefinition SharedSizeGroup="Name" />
+                      <ColumnDefinition SharedSizeGroup="Splitter" />
+                      <ColumnDefinition SharedSizeGroup="Modified" />
+                      <ColumnDefinition SharedSizeGroup="Splitter" />
+                      <ColumnDefinition SharedSizeGroup="Type" />
+                      <ColumnDefinition SharedSizeGroup="Splitter" />
+                      <ColumnDefinition SharedSizeGroup="Size" />
+                    </Grid.ColumnDefinitions>
+                    <DrawingPresenter Width="16" Height="16" Drawing="{Binding IconKey, Converter={StaticResource Icons}}"/>
+                    <TextBlock Grid.Column="2" Text="{Binding DisplayName}"/>
+                    <TextBlock Grid.Column="4" Text="{Binding Modified}" />
+                    <TextBlock Grid.Column="6" Text="{Binding Type}" />
+                    <TextBlock Grid.Column="8">
+                      <TextBlock.Text>
+                        <Binding Path="Size">
+                          <Binding.Converter>
+                            <dialogs:FileSizeStringConverter/>
+                          </Binding.Converter>
+                        </Binding>
+                      </TextBlock.Text>
+                    </TextBlock>
+                  </Grid>
+                </DataTemplate>
+              </ListBox.ItemTemplate>
+            </ListBox>
+          </DockPanel>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^ /template/ ListBox#QuickLinks">
+      <Setter Property="Margin" Value="0"/>
+      <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumBrush}"/>
+      <Setter Property="BorderThickness" Value="0"/>
+      <Setter Property="Width" Value="240"/>
+      <Setter Property="Padding" Value="0,20"/>
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Border Name="border" BoxShadow="inset -6 0 3 -3 #20000000" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
+            <ScrollViewer Name="PART_ScrollViewer" HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}" VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+              <ItemsPresenter Name="PART_ItemsPresenter"
+                              Items="{TemplateBinding Items}"
+                              ItemsPanel="{TemplateBinding ItemsPanel}"
+                              ItemTemplate="{TemplateBinding ItemTemplate}"
+                              Margin="{TemplateBinding Padding}"
+                              VirtualizationMode="{TemplateBinding VirtualizationMode}"/>
+            </ScrollViewer>
+          </Border>
+        </ControlTemplate>
+      </Setter>
+      <Setter Property="ItemContainerTheme">
+        <ControlTheme TargetType="ListBoxItem">
+          <Setter Property="Height" Value="32"/>
+          <Setter Property="Padding" Value="30,6"/>
+          <Setter Property="Template">
             <ControlTemplate>
-                <DockPanel>
-                    <ListBox x:Name="QuickLinks" DockPanel.Dock="Left" Items="{Binding QuickLinks}" SelectedIndex="{Binding QuickLinksSelectedIndex}" Focusable="False">
-                        <ListBox.ItemTemplate>
-                            <DataTemplate>
-                                <StackPanel Spacing="4" Orientation="Horizontal" Background="Transparent">
-                                    <DrawingPresenter Width="16" Height="16" Drawing="{Binding IconKey, Converter={StaticResource Icons}}"/>
-                                    <TextBlock Text="{Binding DisplayName}"/>
-                                </StackPanel>
-                            </DataTemplate>
-                        </ListBox.ItemTemplate>
-                    </ListBox>
-                    <DockPanel x:Name="NavBar" DockPanel.Dock="Top" Margin="8,5,8,0" VerticalAlignment="Center">
-                        <Rectangle Fill="{DynamicResource SystemControlHighlightAltBaseMediumLowBrush}" Height="1" Margin="0,5,0,0" DockPanel.Dock="Bottom"/>
-                        <DockPanel Margin="4,0">
-                            <Button Command="{Binding GoUp}" DockPanel.Dock="Left">
-                                <Path Data="M 0 7 L 7 0 L 14 7 M 7 0 L 7 16" Stroke="{CompiledBinding $parent[Button].Foreground}" StrokeThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,1,0,-1"/>
-                            </Button>
-                            <TextBox x:Name="Location" Text="{Binding Location}">
-                                <TextBox.KeyBindings>
-                                    <KeyBinding Command="{Binding EnterPressed}" Gesture="Enter"/>
-                                </TextBox.KeyBindings>
-                            </TextBox>
-                        </DockPanel>
-                    </DockPanel>
-                    <DockPanel Margin="8,0,8,5" DockPanel.Dock="Bottom">
-                        <Rectangle Fill="{DynamicResource SystemControlHighlightAltBaseMediumLowBrush}" Height="1" Margin="0,0,0,5" DockPanel.Dock="Top"/>
-                        <DockPanel Margin="4,0">
-                            <DockPanel DockPanel.Dock="Top" Margin="0,0,0,4">
-                                <ComboBox DockPanel.Dock="Right"
-                                    IsVisible="{Binding ShowFilters}" 
-                                    Items="{Binding Filters}"
-                                    SelectedItem="{Binding SelectedFilter}" />
-                                <TextBox Text="{Binding FileName}" Watermark="File name" IsVisible="{Binding !SelectingFolder}" />
-                            </DockPanel>
-                            <CheckBox IsChecked="{Binding ShowHiddenFiles}" Content="Show hidden files" DockPanel.Dock="Left"/>
-                            <UniformGrid x:Name="Finalize" HorizontalAlignment="Right" Rows="1">
-                                <Button Command="{Binding Ok}">OK</Button>
-                                <Button Command="{Binding Cancel}">Cancel</Button>
-                            </UniformGrid>
-                        </DockPanel>
-                    </DockPanel>
+              <Border x:Name="LayoutRoot" CornerRadius="2" Margin="10,0">
+                <Panel>
+                  <Border x:Name="SelectedLine" HorizontalAlignment="Left" Margin="2,6" CornerRadius="0.5" Width="3" Background="{DynamicResource SystemControlHighlightAccentBrush}" IsVisible="{TemplateBinding IsSelected}"/>
+                  <ContentPresenter Name="PART_ContentPresenter"
+                              Background="Transparent"
+                              BorderBrush="Transparent"
+                              BorderThickness="0"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              Padding="{TemplateBinding Padding}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
 
-                    <DockPanel Grid.IsSharedSizeScope="True">
-                        <Grid DockPanel.Dock="Top" Margin="15 5 0 0" HorizontalAlignment="Stretch">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="20" SharedSizeGroup="Icon" />
-                                <ColumnDefinition Width="16" SharedSizeGroup="Splitter"  />
-                                <ColumnDefinition Width="275" SharedSizeGroup="Name" />
-                                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
-                                <ColumnDefinition Width="200" SharedSizeGroup="Modified" />
-                                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
-                                <ColumnDefinition Width="150" SharedSizeGroup="Type" />
-                                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
-                                <ColumnDefinition Width="200" SharedSizeGroup="Size" />
-                            </Grid.ColumnDefinitions>
-                            <Grid.Styles>
-                                <Style Selector="GridSplitter">
-                                    <Setter Property="Background" Value="{DynamicResource SystemControlHighlightAltBaseMediumLowBrush}"/>
-                                    <Setter Property="Template">
-                                        <ControlTemplate>
-                                            <Border VerticalAlignment="Stretch" BorderThickness="0" Background="#01000000">
-                                                <Rectangle Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}"/>
-                                            </Border>
-                                        </ControlTemplate>
-                                    </Setter>
-                                </Style>
-                            </Grid.Styles>
-                            <GridSplitter Grid.Column="1" />
-                            <TextBlock Grid.Column="2" Text="Name" />
-                            <GridSplitter Grid.Column="3" />
-                            <TextBlock Grid.Column="4" Text="Date Modified" />
-                            <GridSplitter Grid.Column="5" />
-                            <TextBlock Grid.Column="6" Text="Type" />
-                            <GridSplitter Grid.Column="7" />
-                            <TextBlock Grid.Column="8" Text="Size" />
-                        </Grid>
-                        <ListBox x:Name="Files"
-                            VirtualizationMode="Simple"
-                            Items="{Binding Items}"
-                            Margin="0 5"
-                            SelectionMode="{Binding SelectionMode}"
-                            SelectedItems="{Binding SelectedItems}"
-                            Background="Transparent"
-                            ScrollViewer.HorizontalScrollBarVisibility="Disabled">
-                            <ListBox.ItemTemplate>
-                                <DataTemplate>
-                                    <Grid Background="Transparent">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition SharedSizeGroup="Icon" />
-                                            <ColumnDefinition SharedSizeGroup="Splitter"  />
-                                            <ColumnDefinition SharedSizeGroup="Name" />
-                                            <ColumnDefinition SharedSizeGroup="Splitter" />
-                                            <ColumnDefinition SharedSizeGroup="Modified" />
-                                            <ColumnDefinition SharedSizeGroup="Splitter" />
-                                            <ColumnDefinition SharedSizeGroup="Type" />
-                                            <ColumnDefinition SharedSizeGroup="Splitter" />
-                                            <ColumnDefinition SharedSizeGroup="Size" />
-                                        </Grid.ColumnDefinitions>
-                                        <DrawingPresenter Width="16" Height="16" Drawing="{Binding IconKey, Converter={StaticResource Icons}}"/>
-                                        <TextBlock Grid.Column="2" Text="{Binding DisplayName}"/>
-                                        <TextBlock Grid.Column="4" Text="{Binding Modified}" />
-                                        <TextBlock Grid.Column="6" Text="{Binding Type}" />
-                                        <TextBlock Grid.Column="8">
-                                            <TextBlock.Text>
-                                                <Binding Path="Size">
-                                                    <Binding.Converter>
-                                                        <dialogs:FileSizeStringConverter/>
-                                                    </Binding.Converter>
-                                                </Binding>
-                                            </TextBlock.Text>
-                                        </TextBlock>
-                                    </Grid>
-                                </DataTemplate>
-                            </ListBox.ItemTemplate>
-                        </ListBox>
-                    </DockPanel>
-                </DockPanel>
+                </Panel>
+              </Border>
             </ControlTemplate>
-        </Setter>
-    </Style>
+          </Setter>
 
-
-    <Style Selector="dialogs|ManagedFileChooser /template/ ListBox#QuickLinks">
-        <Setter Property="Margin" Value="0"/>
-        <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumBrush}"/>
-        <Setter Property="BorderThickness" Value="0"/>
-        <Setter Property="Width" Value="240"/>
-        <Setter Property="Padding" Value="0,20"/>
-        <Setter Property="Template">
-            <ControlTemplate>
-                <Border Name="border" BoxShadow="inset -6 0 3 -3 #20000000" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
-                    <ScrollViewer Name="PART_ScrollViewer" HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}" VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
-                        <ItemsPresenter Name="PART_ItemsPresenter"
-                                        Items="{TemplateBinding Items}"
-                                        ItemsPanel="{TemplateBinding ItemsPanel}"
-                                        ItemTemplate="{TemplateBinding ItemTemplate}"
-                                        Margin="{TemplateBinding Padding}"
-                                        VirtualizationMode="{TemplateBinding VirtualizationMode}"/>
-                    </ScrollViewer>
-                </Border>
-            </ControlTemplate>
-        </Setter>
+          <Style Selector="^:pointerover /template/ Border#LayoutRoot">
+            <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltMediumBrush}"/>
+          </Style>
+          <Style Selector="^:selected /template/ Border#LayoutRoot">
+            <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltMediumHighBrush}"/>
+          </Style>
+        </ControlTheme>
+      </Setter>
     </Style>
-    <Style Selector="dialogs|ManagedFileChooser /template/ ListBox#QuickLinks ListBoxItem">
-        <Setter Property="Height" Value="32"/>
-        <Setter Property="Padding" Value="30,6"/>
-        <Setter Property="Template">
-            <ControlTemplate>
-                <Border x:Name="LayoutRoot" CornerRadius="2" Margin="10,0">
-                    <Panel>
-                        <Border x:Name="SelectedLine" HorizontalAlignment="Left" Margin="2,6" CornerRadius="0.5" Width="3" Background="{DynamicResource SystemControlHighlightAccentBrush}" IsVisible="{TemplateBinding IsSelected}"/>
-                        <ContentPresenter Name="PART_ContentPresenter"
-                                    Background="Transparent"
-                                    BorderBrush="Transparent"
-                                    BorderThickness="0"
-                                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                                    Content="{TemplateBinding Content}"
-                                    Padding="{TemplateBinding Padding}"
-                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
 
-                    </Panel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-    </Style>
-    <Style Selector="dialogs|ManagedFileChooser /template/ ListBox#QuickLinks ListBoxItem:pointerover /template/ Border#LayoutRoot">
-        <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltMediumBrush}"/>
+    <Style Selector="^ /template/ DockPanel#NavBar Button, ^ /template/ DockPanel#NavBar TextBox">
+      <Setter Property="Height" Value="30"/>
     </Style>
-    <Style Selector="dialogs|ManagedFileChooser /template/ ListBox#QuickLinks ListBoxItem:selected /template/ Border#LayoutRoot">
-        <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltMediumHighBrush}"/>
+    <Style Selector="^ /template/ DockPanel#NavBar Button">
+      <Setter Property="VerticalAlignment" Value="Stretch"/>
+      <Setter Property="Width" Value="40"/>
+      <Setter Property="Margin" Value="0,0,8,0"/>
+      <Setter Property="BorderThickness" Value="0"/>
     </Style>
-    <Style Selector="dialogs|ManagedFileChooser /template/ DockPanel#NavBar Button,
-                    dialogs|ManagedFileChooser /template/ DockPanel#NavBar TextBox">
-        <Setter Property="Height" Value="30"/>
-    </Style>
-    <Style Selector="dialogs|ManagedFileChooser /template/ DockPanel#NavBar Button">
-        <Setter Property="VerticalAlignment" Value="Stretch"/>
-        <Setter Property="Width" Value="40"/>
-        <Setter Property="Margin" Value="0,0,8,0"/>
-        <Setter Property="BorderThickness" Value="0"/>
-    </Style>
-    <Style Selector="dialogs|ManagedFileChooser /template/ DockPanel#NavBar Button:not(:pointerover):not(:pressed)">
-        <Setter Property="Background" Value="Transparent"/>
+    <Style Selector="^ /template/ DockPanel#NavBar Button:not(:pointerover):not(:pressed)">
+      <Setter Property="Background" Value="Transparent"/>
     </Style>
 
-    <Style Selector="dialogs|ManagedFileChooser /template/ UniformGrid#Finalize > Button">
-            <Setter Property="HorizontalContentAlignment" Value="Center"/>
-            <Setter Property="HorizontalAlignment" Value="Stretch"/>
-            <Setter Property="Margin" Value="4,0,0,0"/>
-    </Style>
-    <Style Selector="dialogs|ManagedFileChooser /template/ UniformGrid#Finalize > Button /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="HorizontalAlignment" Value="Stretch"/>
+    <Style Selector="^ /template/ UniformGrid#Finalize > Button">
+      <Setter Property="HorizontalContentAlignment" Value="Center"/>
+      <Setter Property="HorizontalAlignment" Value="Stretch"/>
+      <Setter Property="Margin" Value="4,0,0,0"/>
     </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Menu.xaml

@@ -1,36 +1,113 @@
-<Style xmlns="https://github.com/avaloniaui"
-       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       Selector="Menu">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <Menu>
-        <MenuItem Header="New" />
-        <MenuItem Header="Open" />
+        <MenuItem Header="_Standard" />
+        <MenuItem Header="Selected" IsSelected="True" />
+        <MenuItem Header="Disabled" IsEnabled="False"/>
       </Menu>
     </Border>
   </Design.PreviewWith>
 
-  <Style.Resources>
-    <x:Double x:Key="MenuBarHeight">32</x:Double>
-  </Style.Resources>
+  <x:Double x:Key="MenuBarHeight">32</x:Double>
 
-  <Setter Property="Background" Value="Transparent" />
-  <Setter Property="Height" Value="{DynamicResource MenuBarHeight}" />
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Border Background="{TemplateBinding Background}"
-              BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}"
-              CornerRadius="{TemplateBinding CornerRadius}"
-              HorizontalAlignment="Stretch"
-              Padding="{TemplateBinding Padding}">
-        <ItemsPresenter Name="PART_ItemsPresenter"
-                        Items="{TemplateBinding Items}"
-                        ItemsPanel="{TemplateBinding ItemsPanel}"
-                        ItemTemplate="{TemplateBinding ItemTemplate}"
-                        VerticalAlignment="Stretch"
-                        KeyboardNavigation.TabNavigation="Continue" />
-      </Border>
-    </ControlTemplate>
-  </Setter>
-</Style>
+  <ControlTheme x:Key="FluentTopLevelMenuItem" TargetType="MenuItem">
+    <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
+    <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
+    <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="Padding" Value="{DynamicResource MenuBarItemPadding}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="PART_LayoutRoot"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Panel>
+            <ContentPresenter Name="PART_HeaderPresenter"
+                              Content="{TemplateBinding Header}"
+                              VerticalAlignment="Center"
+                              HorizontalAlignment="Stretch"
+                              RecognizesAccessKey="True"
+                              Margin="{TemplateBinding Padding}"/>
+            <Popup Name="PART_Popup"
+                   WindowManagerAddShadowHint="False"
+                   MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                   IsLightDismissEnabled="True"
+                   IsOpen="{TemplateBinding IsSubMenuOpen, Mode=TwoWay}"
+                   OverlayInputPassThroughElement="{Binding $parent[Menu]}">
+              <Border Background="{DynamicResource MenuFlyoutPresenterBackground}"
+                      BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
+                      BorderThickness="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}"
+                      Padding="{DynamicResource MenuFlyoutPresenterThemePadding}"
+                      MaxWidth="{DynamicResource FlyoutThemeMaxWidth}"
+                      MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
+                      HorizontalAlignment="Stretch"
+                      CornerRadius="{DynamicResource OverlayCornerRadius}">
+                <ScrollViewer Classes="menuscroller">
+                  <ItemsPresenter Name="PART_ItemsPresenter"
+                                  Items="{TemplateBinding Items}"
+                                  ItemsPanel="{TemplateBinding ItemsPanel}"
+                                  ItemTemplate="{TemplateBinding ItemTemplate}"
+                                  Margin="{DynamicResource MenuFlyoutScrollerMargin}"
+                                  Grid.IsSharedSizeScope="True" />
+                </ScrollViewer>
+              </Border>
+            </Popup>
+          </Panel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:selected">
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
+      </Style>
+      <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
+      </Style>
+    </Style>
+
+    <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
+    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
+      <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
+      <Style Selector="^ ContentPresenter#PART_HeaderPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
+      </Style>
+    </Style>
+
+    <Style Selector="^:disabled">
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
+      </Style>
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type Menu}" TargetType="Menu">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Height" Value="{DynamicResource MenuBarHeight}" />
+    <Setter Property="ItemContainerTheme" Value="{StaticResource FluentTopLevelMenuItem}"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                HorizontalAlignment="Stretch"
+                Padding="{TemplateBinding Padding}">
+          <ItemsPresenter Name="PART_ItemsPresenter"
+                          Items="{TemplateBinding Items}"
+                          ItemsPanel="{TemplateBinding ItemsPanel}"
+                          ItemTemplate="{TemplateBinding ItemTemplate}"
+                          VerticalAlignment="Stretch"
+                          KeyboardNavigation.TabNavigation="Continue" />
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/MenuFlyoutPresenter.xaml

@@ -1,6 +1,6 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  
-  <Style Selector="MenuFlyoutPresenter">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type MenuFlyoutPresenter}" TargetType="MenuFlyoutPresenter">
     <Setter Property="Background" Value="{DynamicResource MenuFlyoutPresenterBackground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}" />
@@ -31,5 +31,5 @@
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/MenuItem.xaml

@@ -1,60 +1,67 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
-        xmlns:sys="clr-namespace:System;assembly=netstandard"
-        x:DataType="MenuItem"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
+                    xmlns:sys="clr-namespace:System;assembly=netstandard"
+                    x:DataType="MenuItem"
+                    x:CompileBindings="True">
   <Design.PreviewWith>
-    <Border Padding="20"
-            Width="400"
-            Height="200">
-      <Menu VerticalAlignment="Top">
-        <MenuItem Header="File">
-          <MenuItem Header="Disabled"
-                    IsEnabled="False" />
-          <MenuItem Header="New"
-                    InputGesture="Ctrl+N">
-            <MenuItem Header="XML" />
-          </MenuItem>
-          <MenuItem Header="Open">
-            <MenuItem.Icon>
-              <CheckBox BorderThickness="0"
-                        IsHitTestVisible="False"
-                        IsChecked="True" />
-            </MenuItem.Icon>
-          </MenuItem>
-          <Separator />
-          <MenuItem Header="Exit"
-                    InputGesture="Alt+F4" />
+    <Border Padding="20" Width="320">
+      <StackPanel Spacing="20" HorizontalAlignment="Left">
+        <MenuItem Header="_Standard"/>
+        <MenuItem IsSelected="True" Header="Selected"/>
+        <MenuItem Header="With Icon">
+          <MenuItem.Icon>
+            <TextBlock>😊</TextBlock>
+          </MenuItem.Icon>
         </MenuItem>
-        <MenuItem Header="Edit">
-          <MenuItem Header="Go To">
-            <MenuItem Header="Go To Line" />
-          </MenuItem>
+        <MenuItem Header="With CheckBox">
+          <MenuItem.Icon>
+            <CheckBox IsChecked="True"/>
+          </MenuItem.Icon>
         </MenuItem>
-        <MenuItem Header="View">
-          <MenuItem Header="Designer"
-                    InputGesture="Shift+F7" />
+        <MenuItem Header="Input Gesture" InputGesture="Ctrl+G"/>
+        <MenuItem Header="Disabled" IsEnabled="False"/>
+        <MenuItem Header="-"/>
+        <MenuItem Header="Parent" IsSubMenuOpen="True">
+          <MenuItem Header="Child 1"/>
+          <MenuItem Header="Child 2"/>
+          <MenuItem Header="Child 3"/>
+          <Separator/>
+          <MenuItem Header="Child 4"/>
+          <MenuItem Header="Child 5"/>
+          <MenuItem Header="Child 6"/>
+          <MenuItem Header="Child 7"/>
+          <MenuItem Header="Child 8"/>
+          <MenuItem Header="Child 9"/>
+          <MenuItem Header="Child 10"/>
+          <MenuItem Header="Child 11"/>
+          <MenuItem Header="Child 12"/>
+          <MenuItem Header="Child 13"/>
+          <MenuItem Header="Child 14"/>
+          <MenuItem Header="Child 15"/>
+          <MenuItem Header="Child 16"/>
+          <MenuItem Header="Child 17"/>
+          <MenuItem Header="Child 18"/>
+          <MenuItem Header="Child 19"/>
         </MenuItem>
-        <MenuItem Header="Project">
-          <MenuItem Header="Add class" />
+        <MenuItem Header="Disabled Parent" IsEnabled="False">
+          <MenuItem Header="Child"/>
         </MenuItem>
-      </Menu>
+      </StackPanel>
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <conv:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
-    <x:Double x:Key="MenuFlyoutSubItemPopupHorizontalOffset">-4</x:Double>    
-    <Thickness x:Key="MenuIconPresenterMargin">0,0,12,0</Thickness>
-    <Thickness x:Key="MenuInputGestureTextMargin">24,0,0,0</Thickness>
-    <StreamGeometry x:Key="MenuItemChevronPathData">M 1,0 10,10 l -9,10 -1,-1 L 8,10 -0,1 Z</StreamGeometry>
-  </Styles.Resources>
+  <conv:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
+  <x:Double x:Key="MenuFlyoutSubItemPopupHorizontalOffset">-4</x:Double>
+  <Thickness x:Key="MenuIconPresenterMargin">0,0,12,0</Thickness>
+  <Thickness x:Key="MenuInputGestureTextMargin">24,0,0,0</Thickness>
+  <StreamGeometry x:Key="MenuItemChevronPathData">M 1,0 10,10 l -9,10 -1,-1 L 8,10 -0,1 Z</StreamGeometry>
 
-  <Style Selector="MenuItem">
+  <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
     <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
     <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
-    <Setter Property="Padding" Value="{DynamicResource MenuFlyoutItemThemePadding}" />
+    <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
+    <Setter Property="Padding" Value="{DynamicResource MenuFlyoutItemThemePaddingNarrow}" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Template">
       <ControlTemplate>
@@ -75,35 +82,37 @@
                 <ColumnDefinition Width="Auto"
                                   SharedSizeGroup="MenuItemChevron" />
               </Grid.ColumnDefinitions>
-              <ContentPresenter Name="PART_IconPresenter"
-                                Content="{TemplateBinding Icon}"
-                                Margin="{DynamicResource MenuIconPresenterMargin}"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center" />
+
+              <Viewbox Name="PART_IconPresenter"
+                       Margin="{DynamicResource MenuIconPresenterMargin}"
+                       StretchDirection="DownOnly"
+                       HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       IsVisible="False"
+                       Width="16" Height="16">
+                <ContentPresenter Content="{TemplateBinding Icon}"/>
+              </Viewbox>
 
               <ContentPresenter Name="PART_HeaderPresenter"
                                 Content="{TemplateBinding Header}"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Stretch"
-                                Grid.Column="1">
-                <ContentPresenter.DataTemplates>
-                  <DataTemplate DataType="sys:String">
-                    <AccessText Text="{Binding}" />
-                  </DataTemplate>
-                </ContentPresenter.DataTemplates>
-              </ContentPresenter>
+                                RecognizesAccessKey="True"
+                                Grid.Column="1"/>
               <TextBlock x:Name="PART_InputGestureText"
                          Grid.Column="2"
                          Classes="CaptionTextBlockStyle"
                          Margin="{DynamicResource MenuInputGestureTextMargin}"
                          Text="{TemplateBinding InputGesture, Converter={StaticResource KeyGestureConverter}}"
                          HorizontalAlignment="Right"
-                         VerticalAlignment="Center" />
+                         VerticalAlignment="Center"
+                         Foreground="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"/>
               <Path Name="PART_ChevronPath"
                     Stretch="Uniform"
                     Width="8"
                     Height="16"
                     Data="{StaticResource MenuItemChevronPathData}"
+                    Fill="{DynamicResource MenuFlyoutSubItemChevron}"
                     Margin="{DynamicResource MenuFlyoutItemChevronMargin}"
                     VerticalAlignment="Center"
                     Grid.Column="3" />
@@ -123,7 +132,7 @@
                     MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
                     HorizontalAlignment="Stretch"
                     CornerRadius="{DynamicResource OverlayCornerRadius}">
-              <ScrollViewer Classes="menuscroller">
+              <ScrollViewer Theme="{StaticResource FluentMenuScrollViewer}">
                 <ItemsPresenter Name="PART_ItemsPresenter"
                                 Items="{TemplateBinding Items}"
                                 ItemsPanel="{TemplateBinding ItemsPanel}"
@@ -136,144 +145,69 @@
         </Panel>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="Menu > MenuItem">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Border Name="PART_LayoutRoot"
-                Background="{TemplateBinding Background}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                CornerRadius="{TemplateBinding CornerRadius}">
-          <Panel>
-            <ContentPresenter Name="PART_HeaderPresenter"
-                              Content="{TemplateBinding Header}"
-                              VerticalAlignment="Center"
-                              HorizontalAlignment="Stretch"
-                              Margin="{TemplateBinding Padding}">
-              <ContentPresenter.DataTemplates>
-                <DataTemplate DataType="sys:String">
-                  <AccessText Text="{Binding}" />
-                </DataTemplate>
-              </ContentPresenter.DataTemplates>
-            </ContentPresenter>
-            <Popup Name="PART_Popup"
-                   WindowManagerAddShadowHint="False"
-                   MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                   IsLightDismissEnabled="True"
-                   IsOpen="{TemplateBinding IsSubMenuOpen, Mode=TwoWay}"
-                   OverlayInputPassThroughElement="{Binding $parent[Menu]}">
-              <Border Background="{DynamicResource MenuFlyoutPresenterBackground}"
-                      BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
-                      BorderThickness="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}"
-                      Padding="{DynamicResource MenuFlyoutPresenterThemePadding}"
-                      MaxWidth="{DynamicResource FlyoutThemeMaxWidth}"
-                      MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
-                      HorizontalAlignment="Stretch"
-                      CornerRadius="{DynamicResource OverlayCornerRadius}">
-                <ScrollViewer Classes="menuscroller">
-                  <ItemsPresenter Name="PART_ItemsPresenter"
-                                  Items="{TemplateBinding Items}"
-                                  ItemsPanel="{TemplateBinding ItemsPanel}"
-                                  ItemTemplate="{TemplateBinding ItemTemplate}"
-                                  Margin="{DynamicResource MenuFlyoutScrollerMargin}"
-                                  Grid.IsSharedSizeScope="True" />
-                </ScrollViewer>
-              </Border>
-            </Popup>
-          </Panel>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <Style Selector="MenuItem">
-    <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
-    <Setter Property="Padding" Value="{DynamicResource MenuFlyoutItemThemePaddingNarrow}" />
-  </Style>
-
-  <Style Selector="Menu > MenuItem">
-    <!--  Custom padding for Menu > MenuItem  -->
-    <Setter Property="Padding" Value="{DynamicResource MenuBarItemPadding}" />
-  </Style>
-
-  <Style Selector="MenuItem /template/ ContentPresenter#PART_IconPresenter">
-    <Setter Property="Width" Value="16" />
-    <Setter Property="Height" Value="16" />
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="MenuItem:icon /template/ ContentPresenter#PART_IconPresenter">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
-
-  <Style Selector="MenuItem /template/ TextBlock#PART_InputGestureText">
-    <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForeground}" />
-  </Style>
-  <Style Selector="MenuItem /template/ Path#PART_ChevronPath">
-    <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevron}" />
-  </Style>
 
-  <Style Selector="MenuItem:selected /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
-  </Style>
-  <Style Selector="MenuItem:selected /template/ ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
-  </Style>
-  <Style Selector="MenuItem:selected /template/ TextBlock#PART_InputGestureText">
-    <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver}" />
-  </Style>
-  <Style Selector="MenuItem:selected /template/ Path#PART_ChevronPath">
-    <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPointerOver}" />
-  </Style>
+    <Style Selector="^:icon /template/ Viewbox#PART_IconPresenter">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
 
-  <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
-  <Style Selector="MenuItem:pressed /template/ Border#PART_LayoutRoot:pointerover">
-    <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
-  </Style>
-  <Style Selector="MenuItem:pressed /template/ Border#PART_LayoutRoot:pointerover ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
-  </Style>
-  <Style Selector="MenuItem:pressed /template/ Border#PART_LayoutRoot:pointerover TextBlock#PART_InputGestureText">
-    <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed}" />
-  </Style>
-  <Style Selector="MenuItem:pressed /template/ Border#PART_LayoutRoot:pointerover Path#PART_ChevronPath">
-    <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPressed}" />
-  </Style>
+    <Style Selector="^:selected">
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
+      </Style>
+      <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
+      </Style>
+      <Style Selector="^ /template/ TextBlock#PART_InputGestureText">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver}" />
+      </Style>
+      <Style Selector="^ /template/ Path#PART_ChevronPath">
+        <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPointerOver}" />
+      </Style>
+    </Style>
 
-  <Style Selector="MenuItem:disabled /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
-  </Style>
-  <Style Selector="MenuItem:disabled /template/ ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
-  </Style>
-  <Style Selector="MenuItem:disabled /template/ TextBlock#PART_InputGestureText">
-    <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled}" />
-  </Style>
-  <Style Selector="MenuItem:disabled /template/ Path#PART_ChevronPath">
-    <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronDisabled}" />
-  </Style>
+    <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
+    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
+      <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
+      <Style Selector="^ ContentPresenter#PART_HeaderPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
+      </Style>
+      <Style Selector="^ TextBlock#PART_InputGestureText">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed}" />
+      </Style>
+      <Style Selector="^ Path#PART_ChevronPath">
+        <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPressed}" />
+      </Style>
+    </Style>
 
-  <Style Selector="MenuItem:open /template/ Path#PART_ChevronPath">
-    <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronSubMenuOpened}" />
-  </Style>
+    <Style Selector="^:disabled">
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ TextBlock#PART_InputGestureText">
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ Path#PART_ChevronPath">
+        <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronDisabled}" />
+      </Style>
+    </Style>
 
-  <Style Selector="MenuItem:empty /template/ Path#PART_ChevronPath">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
+    <Style Selector="^:open /template/ Path#PART_ChevronPath">
+      <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronSubMenuOpened}" />
+    </Style>
 
-  <Style Selector="MenuItem:separator">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Separator />
-      </ControlTemplate>
-    </Setter>
-  </Style>
+    <Style Selector="^:empty /template/ Path#PART_ChevronPath">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
 
-  <Style Selector="MenuItem > Separator, ContextMenu > Separator">
-    <Setter Property="Background" Value="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="Margin" Value="{DynamicResource MenuFlyoutSeparatorThemePadding}" />
-    <Setter Property="Height" Value="{DynamicResource MenuFlyoutSeparatorThemeHeight}" />
-  </Style>
-</Styles>
+    <Style Selector="^:separator">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Separator/>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml

@@ -0,0 +1,98 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
+
+  <Design.PreviewWith>
+    <ScrollViewer Theme="{DynamicResource FluentMenuScrollViewer}" Width="200" Height="200">
+      <StackPanel Spacing="20">
+        <TextBlock>Item 1</TextBlock>
+        <TextBlock>Item 2</TextBlock>
+        <TextBlock>Item 3</TextBlock>
+        <TextBlock>Item 4</TextBlock>
+        <TextBlock>Item 5</TextBlock>
+        <TextBlock>Item 6</TextBlock>
+        <TextBlock>Item 7</TextBlock>
+        <TextBlock>Item 8</TextBlock>
+        <TextBlock>Item 9</TextBlock>
+      </StackPanel>
+    </ScrollViewer>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="FluentMenuScrollViewer" TargetType="ScrollViewer">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel>
+          <RepeatButton DockPanel.Dock="Top"
+                        BorderThickness="0"
+                        Background="Transparent"
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Center"
+                        RenderTransform="{x:Null}"
+                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}">
+            <RepeatButton.IsVisible>
+              <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                            ConverterParameter="0">
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
+              </MultiBinding>
+            </RepeatButton.IsVisible>
+            <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                     Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
+              <Path VerticalAlignment="Center"
+                    HorizontalAlignment="Center"
+                    Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z"
+                    Fill="{DynamicResource ScrollBarButtonArrowForeground}"
+                    Width="20"
+                    Height="20" />
+            </Viewbox>
+          </RepeatButton>
+          <RepeatButton DockPanel.Dock="Bottom"
+                        BorderThickness="0"
+                        Background="Transparent"
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Center"
+                        RenderTransform="{x:Null}"
+                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}">
+            <RepeatButton.IsVisible>
+              <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                            ConverterParameter="100">
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
+              </MultiBinding>
+            </RepeatButton.IsVisible>
+            <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                     Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
+              <Path VerticalAlignment="Center"
+                    HorizontalAlignment="Center"
+                    Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z"
+                    Fill="{DynamicResource ScrollBarButtonArrowForeground}"
+                    Width="20"
+                    Height="20" />
+            </Viewbox>
+          </RepeatButton>
+          <ScrollContentPresenter Name="PART_ContentPresenter"
+                                  CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                                  CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                                  Content="{TemplateBinding Content}"
+                                  Extent="{TemplateBinding Extent, Mode=TwoWay}"
+                                  Margin="{TemplateBinding Padding}"
+                                  Offset="{TemplateBinding Offset, Mode=TwoWay}"
+                                  Viewport="{TemplateBinding Viewport, Mode=TwoWay}">
+            <ScrollContentPresenter.GestureRecognizers>
+              <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                                       CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+            </ScrollContentPresenter.GestureRecognizers>
+          </ScrollContentPresenter>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^ /template/ RepeatButton:pointerover > Viewbox > Path">
+      <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/NativeMenuBar.xaml

@@ -1,31 +1,30 @@
-<Style xmlns="https://github.com/avaloniaui"
-       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       xmlns:local="clr-namespace:Avalonia.Themes.Fluent"
-       x:CompileBindings="True"
-       Selector="NativeMenuBar">
-  <Style.Resources>
-    <local:InverseBooleanValueConverter x:Key="AvaloniaThemesFluentNativeMenuBarInverseBooleanValueConverter" Default="True"/>
-    <local:IBitmapToImageConverter x:Key="AvaloniaThemesFluentNativeMenuBarIBitmapToImageConverter"/>
-  </Style.Resources>
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Menu
-        IsVisible="{Binding $parent[TopLevel].(NativeMenu.IsNativeMenuExported), Converter={StaticResource AvaloniaThemesFluentNativeMenuBarInverseBooleanValueConverter}}"
-        Items="{Binding $parent[TopLevel].(NativeMenu.Menu).Items}">
-        <Menu.Styles>
-          <Style x:CompileBindings="False" Selector="MenuItem">
-            <Setter Property="Header" Value="{Binding Header}"/>
-            <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
-            <Setter Property="InputGesture" Value="{Binding Gesture}"/>
-            <Setter Property="Items" Value="{Binding Menu.Items}"/>
-            <Setter Property="Command" Value="{Binding Command}"/>
-            <Setter Property="CommandParameter" Value="{Binding CommandParameter}"/>
-            <Setter Property="(NativeMenuBar.EnableMenuItemClickForwarding)" Value="True"/>
-            <!--NativeMenuItem is IBitmap and MenuItem is Image-->
-            <Setter Property="Icon" Value="{Binding Icon , Converter={StaticResource AvaloniaThemesFluentNativeMenuBarIBitmapToImageConverter}}"/>
-          </Style>
-        </Menu.Styles>
-      </Menu>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:Avalonia.Themes.Fluent"
+                    x:CompileBindings="True">
+  <local:InverseBooleanValueConverter x:Key="AvaloniaThemesFluentNativeMenuBarInverseBooleanValueConverter" Default="True"/>
+  <local:IBitmapToImageConverter x:Key="AvaloniaThemesFluentNativeMenuBarIBitmapToImageConverter"/>
+  <ControlTheme x:Key="{x:Type NativeMenuBar}" TargetType="NativeMenuBar">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Menu
+          IsVisible="{Binding $parent[TopLevel].(NativeMenu.IsNativeMenuExported), Converter={StaticResource AvaloniaThemesFluentNativeMenuBarInverseBooleanValueConverter}}"
+          Items="{Binding $parent[TopLevel].(NativeMenu.Menu).Items}">
+          <Menu.Styles>
+            <Style x:CompileBindings="False" Selector="MenuItem">
+              <Setter Property="Header" Value="{Binding Header}"/>
+              <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
+              <Setter Property="InputGesture" Value="{Binding Gesture}"/>
+              <Setter Property="Items" Value="{Binding Menu.Items}"/>
+              <Setter Property="Command" Value="{Binding Command}"/>
+              <Setter Property="CommandParameter" Value="{Binding CommandParameter}"/>
+              <Setter Property="(NativeMenuBar.EnableMenuItemClickForwarding)" Value="True"/>
+              <!--NativeMenuItem is IBitmap and MenuItem is Image-->
+              <Setter Property="Icon" Value="{Binding Icon , Converter={StaticResource AvaloniaThemesFluentNativeMenuBarIBitmapToImageConverter}}"/>
+            </Style>
+          </Menu.Styles>
+        </Menu>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/NotificationCard.xaml

@@ -1,15 +1,15 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="0" Background="White">
       <NotificationCard Content="Testing" />
     </Border>
   </Design.PreviewWith>
-  <Style Selector="NotificationCard">
+  <ControlTheme x:Key="{x:Type NotificationCard}" TargetType="NotificationCard">
     <Setter Property="UseLayoutRounding" Value="True"/>
     <Setter Property="Width" Value="350"/>
     <Setter Property="FontSize" Value="14"/>
-    <Setter Property="Foreground" Value="White"/>
+    <Setter Property="Foreground" Value="{DynamicResource NotificationCardForegroundBrush}"/>
     <Setter Property="RenderTransformOrigin" Value="50%,75%"/>
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="Background" Value="{DynamicResource NotificationCardBackgroundBrush}" />
@@ -24,8 +24,8 @@
                     CornerRadius="{TemplateBinding CornerRadius}"
                     ClipToBounds="True">
               <DockPanel>
-                <Panel x:Name="PART_HeaderBar" Height="4" DockPanel.Dock="Top" />
-                <ContentControl Name="PART_Content" Content="{TemplateBinding Content}" />
+                <Panel x:Name="PART_HeaderBar" Height="4" Background="{DynamicResource NotificationCardProgressBackgroundBrush}" DockPanel.Dock="Top" />
+                <ContentControl Name="PART_Content" MinHeight="64" Content="{TemplateBinding Content}" />
               </DockPanel>
             </Border>
           </Border>
@@ -33,7 +33,7 @@
       </ControlTemplate>
     </Setter>
 
-    <Style.Animations>
+    <ControlTheme.Animations>
       <Animation Duration="0:0:0.45" Easing="QuadraticEaseIn" FillMode="Forward">
         <KeyFrame Cue="0%">
           <Setter Property="Opacity" Value="0"/>
@@ -51,56 +51,49 @@
           <Setter Property="ScaleTransform.ScaleY" Value="1"/>
         </KeyFrame>
       </Animation>
-    </Style.Animations>
-  </Style>
+    </ControlTheme.Animations>
 
-  <Style Selector="NotificationCard/template/ ContentControl#PART_Content">
-    <Setter Property="MinHeight" Value="64" />
-  </Style>
+    <Style Selector="^[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
+      <Setter Property="RenderTransformOrigin" Value="50%,0%"/>
+      <Style.Animations>
+        <Animation Duration="0:0:0.75" Easing="QuadraticEaseOut" FillMode="Forward">
+          <KeyFrame Cue="0%">
+            <Setter Property="TranslateTransform.X" Value="0"/>
+            <Setter Property="ScaleTransform.ScaleY" Value="1"/>
+          </KeyFrame>
+          <KeyFrame Cue="70%">
+            <Setter Property="TranslateTransform.X" Value="800"/>
+            <Setter Property="ScaleTransform.ScaleY" Value="1"/>
+          </KeyFrame>
+          <KeyFrame Cue="100%">
+            <Setter Property="ScaleTransform.ScaleY" Value="0"/>
+            <Setter Property="TranslateTransform.X" Value="800"/>
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
 
-  <Style Selector="NotificationCard[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
-    <Setter Property="RenderTransformOrigin" Value="50%,0%"/>
-    <Style.Animations>
-      <Animation Duration="0:0:0.75" Easing="QuadraticEaseOut" FillMode="Forward">
-        <KeyFrame Cue="0%">
-          <Setter Property="TranslateTransform.X" Value="0"/>
-          <Setter Property="ScaleTransform.ScaleY" Value="1"/>
-        </KeyFrame>
-        <KeyFrame Cue="70%">
-          <Setter Property="TranslateTransform.X" Value="800"/>
-          <Setter Property="ScaleTransform.ScaleY" Value="1"/>
-        </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="ScaleTransform.ScaleY" Value="0"/>
-          <Setter Property="TranslateTransform.X" Value="800"/>
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-
-  <Style Selector="NotificationCard[IsClosing=true]">
-    <Style.Animations>
-      <Animation Duration="0:0:1.25" Easing="QuadraticEaseOut" FillMode="Forward">
-        <KeyFrame Cue="100%">
-          <Setter Property="IsClosed" Value="True"/>
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
+    <Style Selector="^[IsClosing=true]">
+      <Style.Animations>
+        <Animation Duration="0:0:1.25" Easing="QuadraticEaseOut" FillMode="Forward">
+          <KeyFrame Cue="100%">
+            <Setter Property="IsClosed" Value="True"/>
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
 
-  <Style Selector="NotificationCard /template/ Panel#PART_HeaderBar">
-    <Setter Property="Background" Value="{DynamicResource NotificationCardProgressBackgroundBrush}"/>
-  </Style>
-  <Style Selector="NotificationCard:information /template/ Panel#PART_HeaderBar">
-    <Setter Property="Background" Value="{DynamicResource NotificationCardInformationBackgroundBrush}"/>
-  </Style>
-  <Style Selector="NotificationCard:success /template/ Panel#PART_HeaderBar">
-    <Setter Property="Background" Value="{DynamicResource NotificationCardSuccessBackgroundBrush}"/>
-  </Style>
-  <Style Selector="NotificationCard:warning /template/ Panel#PART_HeaderBar">
-    <Setter Property="Background" Value="{DynamicResource NotificationCardWarningBackgroundBrush}"/>
-  </Style>
-  <Style Selector="NotificationCard:error /template/ Panel#PART_HeaderBar">
-    <Setter Property="Background" Value="{DynamicResource NotificationCardErrorBackgroundBrush}"/>
-  </Style>
-</Styles>
+    <Style Selector="^:information /template/ Panel#PART_HeaderBar">
+      <Setter Property="Background" Value="{DynamicResource NotificationCardInformationBackgroundBrush}"/>
+    </Style>
+    <Style Selector="^:success /template/ Panel#PART_HeaderBar">
+      <Setter Property="Background" Value="{DynamicResource NotificationCardSuccessBackgroundBrush}"/>
+    </Style>
+    <Style Selector="^:warning /template/ Panel#PART_HeaderBar">
+      <Setter Property="Background" Value="{DynamicResource NotificationCardWarningBackgroundBrush}"/>
+    </Style>
+    <Style Selector="^:error /template/ Panel#PART_HeaderBar">
+      <Setter Property="Background" Value="{DynamicResource NotificationCardErrorBackgroundBrush}"/>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/NumericUpDown.xaml

@@ -1,17 +1,15 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
         <NumericUpDown Minimum="0"
                        Maximum="10"
                        Increment="0.5"
-                       Width="150"
                        Watermark="Enter text" />
         <NumericUpDown Minimum="0"
                        Maximum="10"
                        Increment="0.5"
-                       Width="150"
                        VerticalContentAlignment="Center"
                        HorizontalContentAlignment="Center"
                        ButtonSpinnerLocation="Left"
@@ -20,13 +18,13 @@
     </Border>
   </Design.PreviewWith>
 
-  <Style Selector="NumericUpDown">
+  <ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
     <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
     <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
     <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
     <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
     <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
-    <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />    
+    <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
@@ -63,6 +61,5 @@
         </ButtonSpinner>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/OverlayPopupHost.xaml

@@ -1,20 +1,23 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="OverlayPopupHost">
-  <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
-  <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>
-  <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
-  <Setter Property="FontWeight" Value="400" />
-  <Setter Property="FontStyle" Value="Normal" />
-  <Setter Property="Template">
-    <ControlTemplate>
-      <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
-        <VisualLayerManager IsPopup="True">
-          <ContentPresenter Name="PART_ContentPresenter"
-                            Background="{TemplateBinding Background}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Content="{TemplateBinding Content}"
-                            Padding="{TemplateBinding Padding}"/>
-        </VisualLayerManager>
-      </LayoutTransformControl>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type OverlayPopupHost}" TargetType="OverlayPopupHost">
+    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontWeight" Value="400" />
+    <Setter Property="FontStyle" Value="Normal" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
+          <VisualLayerManager IsPopup="True">
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Background="{TemplateBinding Background}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              Padding="{TemplateBinding Padding}"/>
+          </VisualLayerManager>
+        </LayoutTransformControl>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/PathIcon.xaml

@@ -1,5 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <StackPanel>
       <StackPanel.Resources>
@@ -8,22 +8,18 @@
       <PathIcon Data="{StaticResource settings_regular}" />
     </StackPanel>
   </Design.PreviewWith>
-  <Style Selector="PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
+  <ControlTheme x:Key="{x:Type PathIcon}" TargetType="PathIcon">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="Height" Value="{DynamicResource IconElementThemeHeight}" />
     <Setter Property="Width" Value="{DynamicResource IconElementThemeWidth}" />
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}">
-          <Viewbox Height="{TemplateBinding Height}"
-                   Width="{TemplateBinding Width}">
-            <Path Fill="{TemplateBinding Foreground}"
-                  Data="{TemplateBinding Data}"
-                  Stretch="Uniform" />
+          <Viewbox Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
+            <Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Data}" Stretch="Uniform" />
           </Viewbox>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/PopupRoot.xaml

@@ -1,10 +1,10 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Style Selector="PopupRoot">
-    <Setter Property="Background" Value="{x:Null}"/>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type PopupRoot}" TargetType="PopupRoot">
+    <Setter Property="Background" Value="{x:Null}" />
     <Setter Property="TransparencyLevelHint" Value="Transparent" />
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
-    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>
+    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
     <Setter Property="FontWeight" Value="400" />
     <Setter Property="FontStyle" Value="Normal" />
@@ -15,14 +15,14 @@
             <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
             <VisualLayerManager IsPopup="True">
               <ContentPresenter Name="PART_ContentPresenter"
-                              Background="{TemplateBinding Background}"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                              Content="{TemplateBinding Content}"
-                              Padding="{TemplateBinding Padding}"/>
+                                Background="{TemplateBinding Background}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Content="{TemplateBinding Content}"
+                                Padding="{TemplateBinding Padding}" />
             </VisualLayerManager>
           </Panel>
         </LayoutTransformControl>
       </ControlTemplate>
     </Setter>
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ProgressBar.xaml

@@ -1,22 +1,31 @@
-<Styles xmlns="https://github.com/avaloniaui" 
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
+                    x:CompileBindings="True">
   <Design.PreviewWith>
     <Border Padding="20">
-      <StackPanel Spacing="10">
-        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
-        <ProgressBar VerticalAlignment="Center" Value="5" Maximum="10" />
-        <ProgressBar VerticalAlignment="Center" Value="50" />
-        <ProgressBar VerticalAlignment="Center" Value="50" Minimum="25" Maximum="75" />
-        <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
+      <StackPanel Orientation="Horizontal" Spacing="10">
+        <StackPanel Spacing="10">
+          <ProgressBar Value="5" Maximum="10" />
+          <ProgressBar Value="50" />
+          <ProgressBar Value="50" Minimum="25" Maximum="75" />
+          <ProgressBar IsIndeterminate="True" />
+          <ProgressBar ShowProgressText="True" Value="50"/>
+          <ProgressBar ShowProgressText="True" 
+                       ProgressTextFormat="\{1\} percent"
+                       Minimum="50" 
+                       Maximum="100" 
+                       Value="70"/>
+        </StackPanel>
+        <ProgressBar IsIndeterminate="True" Orientation="Vertical" />
+        <ProgressBar ShowProgressText="True" Value="50" Orientation="Vertical"/>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
-  <Style Selector="ProgressBar">
-    <Style.Resources>
-      <converters:StringFormatConverter x:Key="StringFormatConverter"/>
-    </Style.Resources>
+
+  <converters:StringFormatConverter x:Key="StringFormatConverter"/>
+
+  <ControlTheme x:Key="{x:Type ProgressBar}" TargetType="ProgressBar">
     <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAccentBrush}" />
     <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundBaseLowBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource ProgressBarBorderThemeThickness}" />
@@ -26,17 +35,49 @@
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate TargetType="ProgressBar">
-        <Border x:Name="ProgressBarRoot" ClipToBounds="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">          
-            <Panel>
-              <Panel x:Name="DeterminateRoot">
-                <Border CornerRadius="{TemplateBinding CornerRadius}" x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
-              </Panel>
-              <Panel x:Name="IndeterminateRoot">
-                <Border x:Name="IndeterminateProgressBarIndicator" CornerRadius="{TemplateBinding CornerRadius}" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
-                <Border x:Name="IndeterminateProgressBarIndicator2" CornerRadius="{TemplateBinding CornerRadius}" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
-              </Panel>
-              <LayoutTransformControl x:Name="PART_LayoutTransformControl" HorizontalAlignment="Center" VerticalAlignment="Center" IsVisible="{TemplateBinding ShowProgressText}">
-                <TextBlock Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}">
+        <Border
+            x:Name="ProgressBarRoot"
+            Background="{TemplateBinding Background}"
+            BorderBrush="{TemplateBinding BorderBrush}"
+            BorderThickness="{TemplateBinding BorderThickness}"
+            ClipToBounds="True"
+            CornerRadius="{TemplateBinding CornerRadius}">
+          <Panel>
+            <Panel x:Name="DeterminateRoot" Opacity="1">
+              <Panel.Transitions>
+                <Transitions>
+                  <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
+                </Transitions>
+              </Panel.Transitions>
+              <Border
+                  x:Name="PART_Indicator"
+                  Margin="{TemplateBinding Padding}"
+                  Background="{TemplateBinding Foreground}"
+                  CornerRadius="{TemplateBinding CornerRadius}" />
+            </Panel>
+            <Panel x:Name="IndeterminateRoot" Opacity="0">
+              <Panel.Transitions>
+                <Transitions>
+                  <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
+                </Transitions>
+              </Panel.Transitions>
+              <Border
+                  x:Name="IndeterminateProgressBarIndicator"
+                  Margin="{TemplateBinding Padding}"
+                  Background="{TemplateBinding Foreground}"
+                  CornerRadius="{TemplateBinding CornerRadius}" />
+              <Border
+                  x:Name="IndeterminateProgressBarIndicator2"
+                  Margin="{TemplateBinding Padding}"
+                  Background="{TemplateBinding Foreground}"
+                  CornerRadius="{TemplateBinding CornerRadius}" />
+            </Panel>
+            <LayoutTransformControl
+                x:Name="PART_LayoutTransformControl"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                IsVisible="{TemplateBinding ShowProgressText}">
+              <TextBlock Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}">
                   <TextBlock.Text>
                     <MultiBinding Converter="{StaticResource StringFormatConverter}">
                       <TemplateBinding Property="ProgressTextFormat"/>
@@ -47,132 +88,111 @@
                     </MultiBinding>
                   </TextBlock.Text>
                 </TextBlock>
-              </LayoutTransformControl>
-            </Panel>
+            </LayoutTransformControl>
+          </Panel>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-  <Style Selector="ProgressBar:horizontal /template/ Border#PART_Indicator">
-    <Setter Property="HorizontalAlignment" Value="Left" />
-    <Setter Property="VerticalAlignment" Value="Stretch" />
-  </Style>
-  <Style Selector="ProgressBar:vertical /template/ Border#PART_Indicator">
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="VerticalAlignment" Value="Bottom" />
-  </Style>
-  <Style Selector="ProgressBar:horizontal">
-    <Setter Property="MinWidth" Value="200" />
-    <Setter Property="MinHeight" Value="4" />
-  </Style>
-  <Style Selector="ProgressBar:vertical">
-    <Setter Property="MinWidth" Value="4" />
-    <Setter Property="MinHeight" Value="200" />
-  </Style>
-  <Style Selector="ProgressBar:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
-    <Setter Property="LayoutTransform">
-      <Setter.Value>
-        <RotateTransform Angle="90" />
-      </Setter.Value>
-    </Setter>
-  </Style>
-  <!-- FadeInAnimation mockup-->
-  <Style Selector="ProgressBar /template/ Panel#DeterminateRoot">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
-      </Transitions>
-    </Setter>
-  </Style>
-  <Style Selector="ProgressBar /template/ Panel#IndeterminateRoot">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
-      </Transitions>
-    </Setter>
-  </Style>
-  <Style Selector="ProgressBar /template/ Panel#DeterminateRoot">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-  <Style Selector="ProgressBar /template/ Panel#IndeterminateRoot">
-    <Setter Property="Opacity" Value="0" />
-  </Style>
-  <Style Selector="ProgressBar:indeterminate /template/ Panel#DeterminateRoot">
-    <Setter Property="Opacity" Value="0" />
-  </Style>
-  <Style Selector="ProgressBar:indeterminate /template/ Panel#IndeterminateRoot">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
-    <Style.Animations>
-      <Animation Duration="0:0:2" IterationCount="Infinite">
-        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1.5" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
-    <Style.Animations>
-      <Animation Duration="0:0:2" IterationCount="Infinite">
-        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
-    <Style.Animations>
-      <Animation Duration="0:0:2" IterationCount="Infinite">
-        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1.5" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
-    <Style.Animations>
-      <Animation Duration="0:0:2" IterationCount="Infinite">
-        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal /template/ Border#IndeterminateProgressBarIndicator">
-    <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />    
-  </Style>
-  <Style Selector="ProgressBar:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
-    <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />    
-  </Style>
-  <Style Selector="ProgressBar:vertical /template/ Border#IndeterminateProgressBarIndicator">
-    <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />    
-  </Style>
-  <Style Selector="ProgressBar:vertical /template/ Border#IndeterminateProgressBarIndicator2">
-    <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />    
-  </Style>
-</Styles>
+    <Style Selector="^:horizontal /template/ Border#PART_Indicator">
+      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="VerticalAlignment" Value="Stretch" />
+    </Style>
+    <Style Selector="^:vertical /template/ Border#PART_Indicator">
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+    </Style>
+    <Style Selector="^:horizontal">
+      <Setter Property="MinWidth" Value="200" />
+      <Setter Property="MinHeight" Value="4" />
+    </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="MinWidth" Value="4" />
+      <Setter Property="MinHeight" Value="200" />
+    </Style>
+    <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
+      <Setter Property="LayoutTransform">
+        <Setter.Value>
+          <RotateTransform Angle="90" />
+        </Setter.Value>
+      </Setter>
+    </Style>
+    <Style Selector="^:indeterminate /template/ Panel#DeterminateRoot">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+    <Style Selector="^:indeterminate /template/ Panel#IndeterminateRoot">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+    <Style Selector="^:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
+      <Style.Animations>
+        <Animation IterationCount="Infinite" Duration="0:0:2">
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+          </KeyFrame>
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
+            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+          </KeyFrame>
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+    <Style Selector="^:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
+      <Style.Animations>
+        <Animation IterationCount="Infinite" Duration="0:0:2">
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+          </KeyFrame>
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
+            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+          </KeyFrame>
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+    <Style Selector="^:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
+      <Style.Animations>
+        <Animation IterationCount="Infinite" Duration="0:0:2">
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+          </KeyFrame>
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
+            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+          </KeyFrame>
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+    <Style Selector="^:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
+      <Style.Animations>
+        <Animation IterationCount="Infinite" Duration="0:0:2">
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+          </KeyFrame>
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
+            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+          </KeyFrame>
+          <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+    <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator">
+      <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
+    </Style>
+    <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
+      <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
+    </Style>
+    <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator">
+      <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
+    </Style>
+    <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator2">
+      <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/RadioButton.xaml

@@ -1,4 +1,4 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="10">
@@ -9,7 +9,8 @@
       </StackPanel>
     </Border>
   </Design.PreviewWith>
-  <Style Selector="RadioButton">
+  
+  <ControlTheme x:Key="{x:Type RadioButton}" TargetType="RadioButton">
     <Setter Property="Background" Value="{DynamicResource RadioButtonBackground}" />
     <Setter Property="Foreground" Value="{DynamicResource RadioButtonForeground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrush}" />
@@ -18,155 +19,152 @@
     <Setter Property="HorizontalAlignment" Value="Left" />
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="HorizontalContentAlignment" Value="Left" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />    
+    <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Template">
       <ControlTemplate TargetType="RadioButton">
-        <Border Name="RootBorder"
-                Background="{TemplateBinding Background}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                CornerRadius="{TemplateBinding CornerRadius}">
+        <Border
+            Name="RootBorder"
+            Background="{TemplateBinding Background}"
+            BorderBrush="{TemplateBinding BorderBrush}"
+            BorderThickness="{TemplateBinding BorderThickness}"
+            CornerRadius="{TemplateBinding CornerRadius}">
           <Grid ColumnDefinitions="20,*">
-            <Grid VerticalAlignment="Top"
-              Height="32">
-
-              <Ellipse Name="OuterEllipse"
-                       Width="20" Height="20"
-                       UseLayoutRounding="False"
-                       StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />
-
-              <Ellipse Name="CheckOuterEllipse"
-                       Width="20" Height="20"
-                       UseLayoutRounding="False"
-                       StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />
-
-              <Ellipse Name="CheckGlyph"
-                       Width="8" Height="8"
-                       UseLayoutRounding="False" />
+            <Grid Height="32" VerticalAlignment="Top">
+
+              <Ellipse
+                  Name="OuterEllipse"
+                  Width="20"
+                  Height="20"
+                  Fill="{DynamicResource RadioButtonOuterEllipseFill}"
+                  Stroke="{DynamicResource RadioButtonOuterEllipseStroke}"
+                  StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}"
+                  UseLayoutRounding="False" />
+
+              <Ellipse
+                  Name="CheckOuterEllipse"
+                  Width="20"
+                  Height="20"
+                  Fill="{DynamicResource RadioButtonOuterEllipseCheckedFill}"
+                  Opacity="0"
+                  Stroke="{DynamicResource RadioButtonOuterEllipseCheckedStroke}"
+                  StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}"
+                  UseLayoutRounding="False" />
+
+              <Ellipse
+                  Name="CheckGlyph"
+                  Width="8"
+                  Height="8"
+                  Fill="{DynamicResource RadioButtonCheckGlyphFill}"
+                  Opacity="0"
+                  Stroke="{DynamicResource RadioButtonCheckGlyphStroke}"
+                  UseLayoutRounding="False" />
             </Grid>
 
-            <ContentPresenter Name="PART_ContentPresenter"
-                              Content="{TemplateBinding Content}"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                              Foreground="{TemplateBinding Foreground}"
-                              Margin="{TemplateBinding Padding}"
-                              RecognizesAccessKey="True"
-                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                              Grid.Column="1" />
+            <ContentPresenter
+                Name="PART_ContentPresenter"
+                Grid.Column="1"
+                Margin="{TemplateBinding Padding}"
+                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                Content="{TemplateBinding Content}"
+                ContentTemplate="{TemplateBinding ContentTemplate}"
+                Foreground="{TemplateBinding Foreground}"
+                RecognizesAccessKey="True" />
           </Grid>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!-- Normal State -->
-  <Style Selector="RadioButton /template/ Ellipse#OuterEllipse">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStroke}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFill}" />
-  </Style>
-
-  <Style Selector="RadioButton /template/ Ellipse#CheckOuterEllipse">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStroke}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFill}" />
-    <Setter Property="Opacity" Value="0" />
-  </Style>
-
-  <Style Selector="RadioButton /template/ Ellipse#CheckGlyph">
-    <Setter Property="Opacity" Value="0" />
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStroke}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFill}" />
-  </Style>
-
-  <!-- PointerOver State -->
-  <Style Selector="RadioButton:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundPointerOver}" />
-  </Style>
-
-  <Style Selector="RadioButton:pointerover /template/ Border#RootBorder">
-    <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushPointerOver}" />
-  </Style>
-
-  <Style Selector="RadioButton:pointerover /template/ Ellipse#OuterEllipse">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokePointerOver}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillPointerOver}" />
-  </Style>
-
-  <Style Selector="RadioButton:pointerover /template/ Ellipse#CheckOuterEllipse">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokePointerOver}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillPointerOver}" />
-  </Style>
-
-  <Style Selector="RadioButton:pointerover /template/ Ellipse#CheckGlyph">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStrokePointerOver}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFillPointerOver}" />
-  </Style>
-
-
-  <!-- Pressed State -->
-  <Style Selector="RadioButton:pressed /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundPressed}" />
-  </Style>
-
-  <Style Selector="RadioButton:pressed /template/ Border#RootBorder">
-    <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushPressed}" />
-  </Style>
-
-  <Style Selector="RadioButton:pressed /template/ Ellipse#OuterEllipse">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokePressed}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillPressed}" />
-  </Style>
-
-  <Style Selector="RadioButton:pressed /template/ Ellipse#CheckOuterEllipse">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokePressed}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillPressed}" />
-  </Style>
-
-  <Style Selector="RadioButton:pressed /template/ Ellipse#CheckGlyph">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStrokePressed}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFillPressed}" />
-  </Style>
-
-
-  <!-- Disabled State -->
-  <Style Selector="RadioButton:disabled /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundDisabled}" />
-  </Style>
-
-  <Style Selector="RadioButton:disabled /template/ Border#RootBorder">
-    <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushDisabled}" />
-  </Style>
-
-  <Style Selector="RadioButton:disabled /template/ Ellipse#OuterEllipse">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokeDisabled}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillDisabled}" />
-  </Style>
-
-  <Style Selector="RadioButton:disabled /template/ Ellipse#CheckOuterEllipse">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokeDisabled}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillDisabled}" />
-  </Style>
-
-  <Style Selector="RadioButton:disabled /template/ Ellipse#CheckGlyph">
-    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphFillDisabled}" />
-    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphStrokeDisabled}" />
-  </Style>
-
-
-  <!-- Checked State -->
-  <Style Selector="RadioButton:checked /template/ Ellipse#CheckGlyph">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-
-  <Style Selector="RadioButton:checked /template/ Ellipse#OuterEllipse">
-    <Setter Property="Opacity" Value="0" />
-  </Style>
-
-  <Style Selector="RadioButton:checked /template/ Ellipse#CheckOuterEllipse">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-</Styles>
+
+    <!--  PointerOver State  -->
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Border#RootBorder">
+      <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokePointerOver}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Ellipse#CheckOuterEllipse">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokePointerOver}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStrokePointerOver}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFillPointerOver}" />
+    </Style>
+
+
+    <!--  Pressed State  -->
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundPressed}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Border#RootBorder">
+      <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushPressed}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokePressed}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillPressed}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Ellipse#CheckOuterEllipse">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokePressed}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillPressed}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStrokePressed}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFillPressed}" />
+    </Style>
+
+
+    <!--  Disabled State  -->
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundDisabled}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Border#RootBorder">
+      <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushDisabled}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokeDisabled}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillDisabled}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Ellipse#CheckOuterEllipse">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokeDisabled}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillDisabled}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
+      <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphFillDisabled}" />
+      <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphStrokeDisabled}" />
+    </Style>
+
+
+    <!--  Checked State  -->
+    <Style Selector="^:checked /template/ Ellipse#CheckGlyph">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:checked /template/ Ellipse#OuterEllipse">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:checked /template/ Ellipse#CheckOuterEllipse">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/RepeatButton.xaml

@@ -1,28 +1,29 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
         <RepeatButton Content="Click Me!" />
+        <RepeatButton Content="Disabled" IsEnabled="False" />
+        <RepeatButton Content="Rounded" CornerRadius="16"/>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
-  <Styles.Resources>
-    <Thickness x:Key="ButtonPadding">8,5,8,6</Thickness>
-  </Styles.Resources>
-  <Style Selector="RepeatButton">
+
+  <Thickness x:Key="ButtonPadding">8,5,8,6</Thickness>
+
+  <ControlTheme x:Key="{x:Type RepeatButton}" TargetType="RepeatButton">
     <Setter Property="Background" Value="{DynamicResource RepeatButtonBackground}" />
-    <!--<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />-->
     <Setter Property="Foreground" Value="{DynamicResource RepeatButtonForeground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource RepeatButtonBorderBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThemeThickness}" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="Padding" Value="{StaticResource ButtonPadding}" />
     <Setter Property="HorizontalAlignment" Value="Left" />
-    <Setter Property="VerticalAlignment" Value="Center" />    
+    <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="FontWeight" Value="Normal" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-    <!--<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-    <Setter Property="FocusVisualMargin" Value="-3" />-->
+    <Setter Property="RenderTransform" Value="none" />
     <Setter Property="Template">
       <ControlTemplate>
         <ContentPresenter x:Name="PART_ContentPresenter"
@@ -37,27 +38,27 @@
                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
       </ControlTemplate>
     </Setter>
-  </Style>
 
-  <Style Selector="RepeatButton /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-  </Style>
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource RepeatButtonBorderBrushPointerOver}" />
+      <Setter Property="Foreground" Value="{DynamicResource RepeatButtonForegroundPointerOver}" />
+    </Style>
 
-  <Style Selector="RepeatButton:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource RepeatButtonBorderBrushPointerOver}" />
-    <Setter Property="Foreground" Value="{DynamicResource RepeatButtonForegroundPointerOver}" />
-  </Style>
+    <Style Selector="^:pressed">
+      <Setter Property="RenderTransform" Value="scale(0.98)" />
+    </Style>
 
-  <Style Selector="RepeatButton:pressed  /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource RepeatButtonBorderBrushPressed}" />
-    <Setter Property="Foreground" Value="{DynamicResource RepeatButtonForegroundPressed}" />
-  </Style>
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource RepeatButtonBorderBrushPressed}" />
+      <Setter Property="Foreground" Value="{DynamicResource RepeatButtonForegroundPressed}" />
+    </Style>
 
-  <Style Selector="RepeatButton:disabled /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource RepeatButtonBorderBrushDisabled}" />
-    <Setter Property="Foreground" Value="{DynamicResource RepeatButtonForegroundDisabled}" />
-  </Style>
-</Styles>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource RepeatButtonBackgroundDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource RepeatButtonBorderBrushDisabled}" />
+      <Setter Property="Foreground" Value="{DynamicResource RepeatButtonForegroundDisabled}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ScrollBar.xaml

@@ -1,302 +1,283 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
-  <Style Selector="ScrollBar">
-    <Setter Property="MinWidth" Value="{DynamicResource ScrollBarSize}" />
-    <Setter Property="MinHeight" Value="{DynamicResource ScrollBarSize}" />
-    <Setter Property="Background" Value="{DynamicResource ScrollBarBackground}" />
-    <Setter Property="Foreground" Value="{DynamicResource ScrollBarForeground}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarBorderBrush}" />
-  </Style>
-
-  <Style Selector="ScrollBar:vertical">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Grid x:Name="Root">
-
-          <Border x:Name="VerticalRoot"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}">
-            <Grid RowDefinitions="Auto,*,Auto">
-
-              <Rectangle x:Name="TrackRect" Grid.RowSpan="3" Margin="0" />
-
-              <RepeatButton Name="PART_LineUpButton"
-                            HorizontalAlignment="Center"
-                            Classes="line up"
-                            Grid.Row="0"
-                            Focusable="False"
-                            MinWidth="{DynamicResource ScrollBarSize}"
-                            Height="{DynamicResource ScrollBarSize}" />
-
-              <Track Grid.Row="1"
-                     Minimum="{TemplateBinding Minimum}"
-                     Maximum="{TemplateBinding Maximum}"
-                     Value="{TemplateBinding Value, Mode=TwoWay}"
-                     ViewportSize="{TemplateBinding ViewportSize}"
-                     Orientation="{TemplateBinding Orientation}"
-                     IsDirectionReversed="True">
-                <Track.DecreaseButton>
-                  <RepeatButton Name="PART_PageUpButton"
-                                Classes="largeIncrease"
-                                Focusable="False" />
-                </Track.DecreaseButton>
-                <Track.IncreaseButton>
-                  <RepeatButton Name="PART_PageDownButton"
-                                Classes="largeIncrease"
-                                Focusable="False" />
-                </Track.IncreaseButton>
-                <Thumb Classes="thumb"
-                       Opacity="1"
-                       Width="{DynamicResource ScrollBarSize}"
-                       MinHeight="{DynamicResource ScrollBarSize}"
-                       RenderTransformOrigin="100%,50%" />
-              </Track>
-
-              <RepeatButton Name="PART_LineDownButton"
-                            HorizontalAlignment="Center"
-                            Classes="line down"
-                            Grid.Row="2"
-                            Focusable="False"
-                            MinWidth="{DynamicResource ScrollBarSize}"
-                            Height="{DynamicResource ScrollBarSize}" />
-
-            </Grid>
-          </Border>
-
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <Style Selector="ScrollBar:horizontal">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Grid x:Name="Root">
-
-          <Border x:Name="HorizontalRoot"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}">
-            <Grid ColumnDefinitions="Auto,*,Auto">
-
-              <Rectangle x:Name="TrackRect" Grid.ColumnSpan="3" Margin="0" />
-
-              <RepeatButton Name="PART_LineUpButton"
-                            VerticalAlignment="Center"
-                            Classes="line up"
-                            Grid.Column="0"
-                            Focusable="False"
-                            MinHeight="{DynamicResource ScrollBarSize}"
-                            Width="{DynamicResource ScrollBarSize}" />
-
-              <Track Grid.Column="1"
-                     Minimum="{TemplateBinding Minimum}"
-                     Maximum="{TemplateBinding Maximum}"
-                     Value="{TemplateBinding Value, Mode=TwoWay}"
-                     ViewportSize="{TemplateBinding ViewportSize}"
-                     Orientation="{TemplateBinding Orientation}">
-                <Track.DecreaseButton>
-                  <RepeatButton Name="PART_PageUpButton"
-                                Classes="largeIncrease"
-                                Focusable="False" />
-                </Track.DecreaseButton>
-                <Track.IncreaseButton>
-                  <RepeatButton Name="PART_PageDownButton"
-                                Classes="largeIncrease"
-                                Focusable="False" />
-                </Track.IncreaseButton>
-                <Thumb Classes="thumb"
-                       Opacity="1"
-                       Height="{DynamicResource ScrollBarSize}"
-                       MinWidth="{DynamicResource ScrollBarSize}"
-                       RenderTransformOrigin="50%,100%" />
-              </Track>
-
-              <RepeatButton Name="PART_LineDownButton"
-                            VerticalAlignment="Center"
-                            Classes="line down"
-                            Grid.Column="2"
-                            Focusable="False"
-                            MinHeight="{DynamicResource ScrollBarSize}"
-                            Width="{DynamicResource ScrollBarSize}" />
-
-            </Grid>
-          </Border>
-
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ Grid#Root">
-    <Setter Property="Background" Value="{DynamicResource ScrollBarBackgroundPointerOver}" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ Thumb.thumb">
-    <Setter Property="Background" Value="{DynamicResource ScrollBarPanningThumbBackground}" />
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Orientation="Horizontal" Spacing="20">
+        <StackPanel Spacing="20">
+          <ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100"/>
+          <ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100" IsEnabled="False"/>
+          <ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100"/>
+          <ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100" IsEnabled="False"/>
+        </StackPanel>
+        <ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100"/>
+        <ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100" IsEnabled="False"/>
+        <ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100"/>
+        <ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100" IsEnabled="False"/>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="FluentScrollBarThumb" TargetType="Thumb">
+    <Setter Property="Background" Value="{DynamicResource ScrollBarPanningThumbBackground}"/>
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate>
-          <Border x:Name="ThumbVisual" Background="{TemplateBinding Background}" />
+          <Border Background="{TemplateBinding Background}"
+                  CornerRadius="{TemplateBinding CornerRadius}"/>
         </ControlTemplate>
       </Setter.Value>
     </Setter>
     <Setter Property="Transitions">
       <Transitions>
+        <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.1" />
         <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />
       </Transitions>
     </Setter>
-  </Style>
 
-  <Style Selector="ScrollBar:vertical /template/ Thumb.thumb">
-    <Setter Property="RenderTransform" Value="{DynamicResource VerticalSmallScrollThumbScaleTransform}" />
-  </Style>
-
-  <Style Selector="ScrollBar:horizontal /template/ Thumb.thumb">
-    <Setter Property="RenderTransform" Value="{DynamicResource HorizontalSmallScrollThumbScaleTransform}" />
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ Thumb.thumb">
-    <Setter Property="RenderTransform" Value="none" />
-    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbBackgroundColor}" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ Thumb.thumb /template/ Border#ThumbVisual">
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-    <Setter Property="Transitions">
-      <Transitions>
-        <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.1" />
-      </Transitions>
+    <Style Selector="^:pointerover /template/ Border">
+      <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPointerOver}" />
+    </Style>
+    <Style Selector="^:pressed  /template/ Border">
+      <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPressed}" />
+    </Style>
+    <Style Selector="^:disabled  /template/ Border">
+      <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillDisabled}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentScrollBarPageButton" TargetType="RepeatButton">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="Opacity" Value="0" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}" />
+      </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ Thumb.thumb /template/ Border#ThumbVisual">
-    <Setter Property="CornerRadius" Value="0" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ Thumb.thumb:pointerover">
-    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPointerOver}" />
-  </Style>
+  </ControlTheme>
 
-  <Style Selector="ScrollBar /template/ Thumb.thumb:pressed">
-    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPressed}" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ Thumb.thumb:disabled">
-    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillDisabled}" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ RepeatButton.line">
+  <ControlTheme x:Key="FluentScrollBarLineButton" TargetType="RepeatButton">
+    <Setter Property="Opacity" Value="0" />
+    <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForeground}"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Border x:Name="Root">
-          <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
-                   Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
-            <Path x:Name="Arrow"
-              VerticalAlignment="Center"
-              HorizontalAlignment="Center"
-              Width="20" Height="20" />
-          </Viewbox>
-        </Border>
+        <ContentPresenter Background="{DynamicResource ScrollBarButtonBackground}"
+                          BorderBrush="{DynamicResource ScrollBarButtonBorderBrush}"
+                          Content="{TemplateBinding Content}"/>
       </ControlTemplate>
     </Setter>
-    <Setter Property="Opacity" Value="0" />
     <Setter Property="Transitions">
       <Transitions>
         <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
       </Transitions>
     </Setter>
-  </Style>
-
-  <Style Selector="ScrollBar /template/ RepeatButton.line /template/ Border#Root" >
-    <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackground}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrush}" />
-  </Style>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:pointerover /template/ Border#Root" >
-    <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPointerOver}" />
-  </Style>
+    <Style Selector="^:pointerover">
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}"/>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:pressed /template/ Border#Root" >
-    <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPressed}" />
-  </Style>
+      <Style Selector="^ /template/ ContentPresenter" >
+        <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPointerOver}" />
+      </Style>
+    </Style>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:disabled /template/ Border#Root" >
-    <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushDisabled}" />
-  </Style>
+    <Style Selector="^:pressed">
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundPressed}"/>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line /template/ Path#Arrow" >
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForeground}" />
-  </Style>
+      <Style Selector="^ /template/ ContentPresenter" >
+        <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPressed}" />
+      </Style>
+    </Style>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:pointerover /template/ Path#Arrow" >
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
-  </Style>
+    <Style Selector="^:disabled">
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundDisabled}"/>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:pressed /template/ Path#Arrow" >
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPressed}" />
-  </Style>
+      <Style Selector="^ /template/ ContentPresenter" >
+        <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushDisabled}" />
+      </Style>
+    </Style>
+  </ControlTheme>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:disabled /template/ Path#Arrow" >
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundDisabled}" />
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ RepeatButton.line">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-
-  <Style Selector="ScrollBar:vertical /template/ RepeatButton.line.up /template/ Path">
-    <Setter Property="Data"
-            Value="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z" />
-  </Style>
-
-  <Style Selector="ScrollBar:vertical /template/ RepeatButton.line.down /template/ Path">
-    <Setter Property="Data"
-            Value="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z" />
-  </Style>
-
-  <Style Selector="ScrollBar:horizontal /template/ RepeatButton.line.up /template/ Path">
-    <Setter Property="Data" Value="M 14.091797 19.970703 L 4.111328 10 L 14.091797 0.029297 L 14.970703 0.908203 L 5.888672 10 L 14.970703 19.091797 Z" />
-  </Style>
-
-  <Style Selector="ScrollBar:horizontal /template/ RepeatButton.line.down /template/ Path">
-    <Setter Property="Data" Value="M 5.029297 19.091797 L 14.111328 10 L 5.029297 0.908203 L 5.908203 0.029297 L 15.888672 10 L 5.908203 19.970703 Z" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ Rectangle#TrackRect">
-    <Setter Property="StrokeThickness" Value="{DynamicResource ScrollBarTrackBorderThemeThickness}" />
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarTrackFill}" />
-    <Setter Property="Stroke" Value="{DynamicResource ScrollBarTrackStroke}" />
-    <Setter Property="Opacity" Value="0" />
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
-      </Transitions>
-    </Setter>
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ Rectangle#TrackRect">
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarTrackFillPointerOver}" />
-    <Setter Property="Stroke" Value="{DynamicResource ScrollBarTrackStrokePointerOver}" />
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ RepeatButton.largeIncrease">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Border Background="{TemplateBinding Background}" />
-      </ControlTemplate>
-    </Setter>
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="VerticalAlignment" Value="Stretch" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="Opacity" Value="0" />
-  </Style>
+  <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
+    <Setter Property="MinWidth" Value="{DynamicResource ScrollBarSize}" />
+    <Setter Property="MinHeight" Value="{DynamicResource ScrollBarSize}" />
+    <Setter Property="Background" Value="{DynamicResource ScrollBarBackground}" />
+    <Setter Property="Foreground" Value="{DynamicResource ScrollBarForeground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarBorderBrush}" />
 
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ RepeatButton.largeIncrease">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Grid x:Name="Root">
+            <Border x:Name="VerticalRoot"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}">
+              <Grid RowDefinitions="Auto,*,Auto">
+                <Rectangle x:Name="TrackRect"
+                           Fill="{DynamicResource ScrollBarTrackFill}"
+                           Stroke="{DynamicResource ScrollBarTrackStroke}"
+                           StrokeThickness="{DynamicResource ScrollBarTrackBorderThemeThickness}"
+                           Opacity="0"
+                           Grid.RowSpan="3">
+                  <Rectangle.Transitions>
+                    <Transitions>
+                      <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+                    </Transitions>
+                  </Rectangle.Transitions>
+                </Rectangle>
+
+                <RepeatButton Name="PART_LineUpButton"
+                              HorizontalAlignment="Center"
+                              Theme="{StaticResource FluentScrollBarLineButton}"
+                              Grid.Row="0"
+                              Focusable="False"
+                              MinWidth="{DynamicResource ScrollBarSize}"
+                              Height="{DynamicResource ScrollBarSize}">
+                  <PathIcon Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z"
+                            Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                            Height="{DynamicResource ScrollBarButtonArrowIconFontSize}"/>
+                </RepeatButton>
+
+                <Track Grid.Row="1"
+                       Minimum="{TemplateBinding Minimum}"
+                       Maximum="{TemplateBinding Maximum}"
+                       Value="{TemplateBinding Value, Mode=TwoWay}"
+                       ViewportSize="{TemplateBinding ViewportSize}"
+                       Orientation="{TemplateBinding Orientation}"
+                       IsDirectionReversed="True">
+                  <Track.DecreaseButton>
+                    <RepeatButton Name="PART_PageUpButton"
+                                  Classes="largeIncrease"
+                                  Theme="{StaticResource FluentScrollBarPageButton}"
+                                  Focusable="False" />
+                  </Track.DecreaseButton>
+                  <Track.IncreaseButton>
+                    <RepeatButton Name="PART_PageDownButton"
+                                  Classes="largeIncrease"
+                                  Theme="{StaticResource FluentScrollBarPageButton}"
+                                  Focusable="False" />
+                  </Track.IncreaseButton>
+                  <Thumb Theme="{StaticResource FluentScrollBarThumb}"
+                         Width="{DynamicResource ScrollBarSize}"
+                         MinHeight="{DynamicResource ScrollBarSize}"
+                         RenderTransform="{DynamicResource VerticalSmallScrollThumbScaleTransform}"
+                         RenderTransformOrigin="100%,50%" />
+                </Track>
+
+                <RepeatButton Name="PART_LineDownButton"
+                              HorizontalAlignment="Center"
+                              Theme="{StaticResource FluentScrollBarLineButton}"
+                              Grid.Row="2"
+                              Focusable="False"
+                              MinWidth="{DynamicResource ScrollBarSize}"
+                              Height="{DynamicResource ScrollBarSize}">
+                  <PathIcon Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z"
+                            Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                            Height="{DynamicResource ScrollBarButtonArrowIconFontSize}"/>
+                </RepeatButton>
+              </Grid>
+            </Border>
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </Style>
 
-</Styles>
+    <Style Selector="^:horizontal">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Grid x:Name="Root">
+            <Border x:Name="HorizontalRoot"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}">
+              <Grid ColumnDefinitions="Auto,*,Auto">
+                <Rectangle x:Name="TrackRect"
+                           Fill="{DynamicResource ScrollBarTrackFill}"
+                           Stroke="{DynamicResource ScrollBarTrackStroke}"
+                           StrokeThickness="{DynamicResource ScrollBarTrackBorderThemeThickness}"
+                           Opacity="0"
+                           Grid.ColumnSpan="3">
+                  <Rectangle.Transitions>
+                    <Transitions>
+                      <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+                    </Transitions>
+                  </Rectangle.Transitions>
+                </Rectangle>
+
+                <RepeatButton Name="PART_LineUpButton"
+                              Theme="{StaticResource FluentScrollBarLineButton}"
+                              VerticalAlignment="Center"
+                              Grid.Column="0"
+                              Focusable="False"
+                              MinHeight="{DynamicResource ScrollBarSize}"
+                              Width="{DynamicResource ScrollBarSize}">
+                  <PathIcon Data="M 14.091797 19.970703 L 4.111328 10 L 14.091797 0.029297 L 14.970703 0.908203 L 5.888672 10 L 14.970703 19.091797 Z"
+                            Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                            Height="{DynamicResource ScrollBarButtonArrowIconFontSize}"/>
+                </RepeatButton>
+
+                <Track Grid.Column="1"
+                       Minimum="{TemplateBinding Minimum}"
+                       Maximum="{TemplateBinding Maximum}"
+                       Value="{TemplateBinding Value, Mode=TwoWay}"
+                       ViewportSize="{TemplateBinding ViewportSize}"
+                       Orientation="{TemplateBinding Orientation}">
+                  <Track.DecreaseButton>
+                    <RepeatButton Name="PART_PageUpButton"
+                                  Classes="largeIncrease"
+                                  Theme="{StaticResource FluentScrollBarPageButton}"
+                                  Focusable="False" />
+                  </Track.DecreaseButton>
+                  <Track.IncreaseButton>
+                    <RepeatButton Name="PART_PageDownButton"
+                                  Classes="largeIncrease"
+                                  Theme="{StaticResource FluentScrollBarPageButton}"
+                                  Focusable="False" />
+                  </Track.IncreaseButton>
+                  <Thumb Theme="{StaticResource FluentScrollBarThumb}"
+                         Height="{DynamicResource ScrollBarSize}"
+                         MinWidth="{DynamicResource ScrollBarSize}"
+                         RenderTransform="{DynamicResource HorizontalSmallScrollThumbScaleTransform}"
+                         RenderTransformOrigin="50%,100%" />
+                </Track>
+
+                <RepeatButton Name="PART_LineDownButton"
+                              Theme="{StaticResource FluentScrollBarLineButton}"
+                              VerticalAlignment="Center"
+                              Grid.Column="2"
+                              Focusable="False"
+                              MinHeight="{DynamicResource ScrollBarSize}"
+                              Width="{DynamicResource ScrollBarSize}">
+                  <PathIcon Data="M 5.029297 19.091797 L 14.111328 10 L 5.029297 0.908203 L 5.908203 0.029297 L 15.888672 10 L 5.908203 19.970703 Z"
+                            Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                            Height="{DynamicResource ScrollBarButtonArrowIconFontSize}"/>
+                </RepeatButton>
+              </Grid>
+            </Border>
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+
+    <Style Selector="^[IsExpanded=true]">
+      <Style Selector="^ /template/ Grid#Root">
+        <Setter Property="Background" Value="{DynamicResource ScrollBarBackgroundPointerOver}" />
+      </Style>
+      <Style Selector="^ /template/ Rectangle#TrackRect">
+        <Setter Property="Fill" Value="{DynamicResource ScrollBarTrackFillPointerOver}" />
+        <Setter Property="Stroke" Value="{DynamicResource ScrollBarTrackStrokePointerOver}" />
+        <Setter Property="Opacity" Value="1" />
+      </Style>
+      <Style Selector="^ /template/ Thumb">
+        <Setter Property="Background" Value="{DynamicResource ScrollBarThumbBackgroundColor}" />
+        <Setter Property="RenderTransform" Value="none" />
+      </Style>
+      <Style Selector="^ /template/ RepeatButton">
+        <Setter Property="Opacity" Value="1" />
+      </Style>
+    </Style>
+  </ControlTheme>
+
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml

@@ -1,24 +1,26 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
-
+<ResourceDictionary
+  xmlns="https://github.com/avaloniaui"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
   <Design.PreviewWith>
-    <Grid ColumnDefinitions="*,20,*"
-          Height="300"
-          Width="200"
-          Margin="20">
-      <ScrollViewer>
-        <Border Height="1000" Background="#ccc"/>
-      </ScrollViewer>
-      <ScrollViewer Grid.Column="2" Classes="menuscroller">
-        <Border Height="1000" Background="#ccc"/>
-      </ScrollViewer>
-    </Grid>
+    <ScrollViewer Width="200" Height="200"
+                  HorizontalScrollBarVisibility="Auto">
+      <StackPanel Spacing="20" Width="210">
+        <TextBlock>Item 1</TextBlock>
+        <TextBlock>Item 2</TextBlock>
+        <TextBlock>Item 3</TextBlock>
+        <TextBlock>Item 4</TextBlock>
+        <TextBlock>Item 5</TextBlock>
+        <TextBlock>Item 6</TextBlock>
+        <TextBlock>Item 7</TextBlock>
+        <TextBlock>Item 8</TextBlock>
+        <TextBlock>Item 9</TextBlock>
+      </StackPanel>
+    </ScrollViewer>
   </Design.PreviewWith>
-  
-  <Style Selector="ScrollViewer">
-    <Setter Property="Background"
-            Value="Transparent" />
+
+  <ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer">
+    <Setter Property="Background" Value="Transparent" />
     <Setter Property="Template">
       <ControlTemplate>
         <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
@@ -37,9 +39,8 @@
                                   Viewport="{TemplateBinding Viewport, Mode=TwoWay}"
                                   IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}">
             <ScrollContentPresenter.GestureRecognizers>
-              <ScrollGestureRecognizer
-                CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+              <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                                       CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
             </ScrollContentPresenter.GestureRecognizers>
           </ScrollContentPresenter>
           <ScrollBar Name="PART_HorizontalScrollBar"
@@ -64,97 +65,22 @@
                      Visibility="{TemplateBinding VerticalScrollBarVisibility}"
                      Grid.Column="1"
                      Focusable="False" />
-          <Panel x:Name="PART_ScrollBarsSeparator" Grid.Row="1" Grid.Column="1" Background="{DynamicResource ScrollViewerScrollBarsSeparatorBackground}" />
+          <Panel x:Name="PART_ScrollBarsSeparator"
+                 Grid.Row="1"
+                 Grid.Column="1"
+                 Background="{DynamicResource ScrollViewerScrollBarsSeparatorBackground}"
+                 Opacity="0">
+            <Panel.Transitions>
+              <Transitions>
+                <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+              </Transitions>
+            </Panel.Transitions>
+          </Panel>
         </Grid>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="ScrollViewer /template/ Panel#PART_ScrollBarsSeparator">
-    <Setter Property="Opacity" Value="0" />
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
-      </Transitions>
-    </Setter>
-  </Style>
-
-  <Style Selector="ScrollViewer[IsExpanded=true] /template/ Panel#PART_ScrollBarsSeparator">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-
-  <Style Selector="ScrollViewer.menuscroller">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <DockPanel>
-          <RepeatButton DockPanel.Dock="Top"
-                        BorderThickness="0"
-                        Background="Transparent"
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Center"
-                        RenderTransform="{x:Null}"
-                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}">
-            <RepeatButton.IsVisible>
-              <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
-                            ConverterParameter="0">
-                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility"/>
-                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y"/>
-                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height"/>
-                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height"/>
-              </MultiBinding>
-            </RepeatButton.IsVisible>
-            <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
-                     Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
-              <Path VerticalAlignment="Center"
-                    HorizontalAlignment="Center"
-                    Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z"
-                    Width="20"
-                    Height="20" />
-            </Viewbox>
-          </RepeatButton>
-          <RepeatButton DockPanel.Dock="Bottom"
-                        BorderThickness="0"
-                        Background="Transparent"
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Center"
-                        RenderTransform="{x:Null}"
-                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}">
-            <RepeatButton.IsVisible>
-              <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
-                            ConverterParameter="100">
-                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility"/>
-                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y"/>
-                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height"/>
-                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height"/>
-              </MultiBinding>
-            </RepeatButton.IsVisible>
-            <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
-                     Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
-              <Path VerticalAlignment="Center"
-                    HorizontalAlignment="Center"
-                    Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z"
-                    Width="20"
-                    Height="20" />
-            </Viewbox>
-          </RepeatButton>
-          <ScrollContentPresenter Name="PART_ContentPresenter"
-                                  CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                                  CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
-                                  Content="{TemplateBinding Content}"
-                                  Extent="{TemplateBinding Extent, Mode=TwoWay}"
-                                  Margin="{TemplateBinding Padding}"
-                                  Offset="{TemplateBinding Offset, Mode=TwoWay}"
-                                  Viewport="{TemplateBinding Viewport, Mode=TwoWay}"/>
-        </DockPanel>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-  <Style Selector="ScrollViewer.menuscroller /template/ RepeatButton > Viewbox > Path">
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForeground}" />
-  </Style>
-
-  <Style Selector="ScrollViewer.menuscroller /template/ RepeatButton:pointerover > Viewbox > Path">
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
-  </Style>
-
-</Styles>
+    <Style Selector="^[IsExpanded=true] /template/ Panel#PART_ScrollBarsSeparator">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Separator.xaml

@@ -1,7 +1,11 @@
-<Styles xmlns="https://github.com/avaloniaui">
-
-  <Style Selector="Separator">
-    <Setter Property="Focusable" Value="False"/>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type Separator}" TargetType="Separator">
+    <Setter Property="Background" Value="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="Height" Value="{DynamicResource MenuFlyoutSeparatorThemeHeight}" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="Margin" Value="{DynamicResource MenuFlyoutSeparatorThemePadding}" />
     <Setter Property="Template">
       <ControlTemplate>
         <Border Padding="{TemplateBinding Margin}"
@@ -11,9 +15,8 @@
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}"
                 CornerRadius="{TemplateBinding CornerRadius}"
-                Background="{TemplateBinding Background}"/>
+                Background="{TemplateBinding Background}" />
       </ControlTemplate>
     </Setter>
-  </Style>
-
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/Slider.xaml

@@ -1,275 +1,397 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Design.PreviewWith>
-    <Border Margin="20" Width="200" Height="200">
+    <Border Margin="20" Width="400" Height="600">
       <DockPanel LastChildFill="True">
         <StackPanel Spacing="10" DockPanel.Dock="Top">
           <Slider Value="50" />
+          <Slider IsDirectionReversed="True" Value="50" />
+          <Slider Value="50" TickPlacement="TopLeft" TickFrequency="10"/>
+          <Slider Value="50" TickPlacement="BottomRight" TickFrequency="10"/>
+          <Slider Value="50" TickPlacement="Outside" TickFrequency="10"/>
           <Slider IsEnabled="False" Value="50" />
+          <Slider Value="50">
+            <DataValidationErrors.Error>
+              <sys:Exception>
+                <x:Arguments>
+                  <x:String>Error</x:String>
+                </x:Arguments>
+              </sys:Exception>
+            </DataValidationErrors.Error>
+          </Slider>
         </StackPanel>
         <StackPanel Spacing="10" Orientation="Horizontal">
           <Slider Value="50" Orientation="Vertical" />
+          <Slider IsDirectionReversed="True" Value="50" Orientation="Vertical" />
           <Slider IsEnabled="False" Orientation="Vertical" Value="50" />
+          <Slider Value="50" TickPlacement="TopLeft" TickFrequency="10" Orientation="Vertical" />
+          <Slider Value="50" TickPlacement="BottomRight" TickFrequency="10" Orientation="Vertical" />
+          <Slider Value="50" TickPlacement="Outside" TickFrequency="10" Orientation="Vertical" />
         </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" />
+  
+  <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>
+
+  <ControlTheme x:Key="FluentSliderHorizontalRepeatButton" TargetType="RepeatButton">
     <Setter Property="Template">
-      <Setter.Value>
-        <ControlTemplate>
-          <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
-        </ControlTemplate>
-      </Setter.Value>
+      <ControlTemplate>
+        <Grid>
+          <Border Name="FocusTarget" Margin="0,-10" Background="Transparent" />
+          <Border Name="TrackBackground"
+                  Background="{TemplateBinding Background}"
+                  CornerRadius="{DynamicResource ControlCornerRadius}"
+                  Height="{DynamicResource SliderTrackThemeHeight}"
+                  VerticalAlignment="Center"/>
+        </Grid>
+      </ControlTemplate>
     </Setter>
-  </Style>
-  <Style Selector="Slider:horizontal">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
-    <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />    
-    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentSliderVerticalRepeatButton" TargetType="RepeatButton">
     <Setter Property="Template">
       <ControlTemplate>
-        <DataValidationErrors>
-          <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}">
-            <Grid Name="grid" Margin="{TemplateBinding Padding}" RowDefinitions="Auto, *">
-              <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" TextElement.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextElement.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" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Orientation="Horizontal">
-                    <Track.DecreaseButton>
-                      <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}" Focusable="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                        <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}" Focusable="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                        <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>
-        </DataValidationErrors>
+        <Grid>
+          <Border Name="FocusTarget" Margin="0,-10" Background="Transparent" />
+          <Border Name="TrackBackground"
+                  Background="{TemplateBinding Background}"
+                  CornerRadius="{DynamicResource ControlCornerRadius}"
+                  Width="{DynamicResource SliderTrackThemeHeight}"
+                  HorizontalAlignment="Center"/>
+        </Grid>
       </ControlTemplate>
     </Setter>
-  </Style>
-  <Style Selector="Slider:vertical">
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentSliderThumbTheme" TargetType="Thumb">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border
+            Background="{TemplateBinding Background}"
+            BorderBrush="{TemplateBinding BorderBrush}"
+            BorderThickness="{TemplateBinding BorderThickness}"
+            CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type Slider}" TargetType="Slider">
     <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
     <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
-    <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />    
+    <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-    <Setter Property="Template">
-      <ControlTemplate>
-        <DataValidationErrors>
-          <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}">
-            <Grid Name="grid" Margin="{TemplateBinding Padding}" RowDefinitions="Auto, *">
-              <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" TextElement.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextElement.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" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Orientation="Vertical">
-                    <Track.DecreaseButton>
-                      <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}" Focusable="False" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
-                        <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}" Focusable="False" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
-                        <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>
+    <Style Selector="^:horizontal">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <DataValidationErrors>
+            <Border
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+              <Grid
+                  Name="grid"
+                  Margin="{TemplateBinding Padding}"
+                  RowDefinitions="Auto, *">
+                <ContentPresenter
+                    x:Name="HeaderContentPresenter"
+                    Grid.Row="0"
+                    Margin="{DynamicResource SliderTopHeaderMargin}"
+                    TextElement.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}"
+                    TextElement.Foreground="{DynamicResource SliderHeaderForeground}" />
+                <Grid x:Name="SliderContainer"
+                      Grid.Row="1"
+                      Background="{DynamicResource SliderContainerBackground}">
+                  <Grid.Styles>
+                    <Style Selector="TickBar">
+                      <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
+                    </Style>
+                  </Grid.Styles>
+                  <Grid
+                      x:Name="HorizontalTemplate"
+                      MinHeight="{DynamicResource SliderHorizontalHeight}"
+                      ColumnDefinitions="Auto,Auto,*">
+                    <Grid.RowDefinitions>
+                      <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
+                      <RowDefinition Height="Auto" />
+                      <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
+                    </Grid.RowDefinitions>
+                    <TickBar
+                        Name="TopTickBar"
+                        Grid.ColumnSpan="3"
+                        Ticks="{TemplateBinding Ticks}"
+                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                        Orientation="{TemplateBinding Slider.Orientation}"
+                        Minimum="{TemplateBinding Slider.Minimum}"
+                        Maximum="{TemplateBinding Slider.Maximum}"
+                        Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
+                        Margin="0,0,0,4"
+                        VerticalAlignment="Bottom"
+                        Placement="Top" 
+                        IsVisible="False"
+                        Fill="{DynamicResource SliderTickBarFill}"/>
+                    <TickBar
+                        Name="BottomTickBar"
+                        Grid.Row="2"
+                        Grid.ColumnSpan="3"
+                        Ticks="{TemplateBinding Ticks}"
+                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                        Orientation="{TemplateBinding Slider.Orientation}"
+                        Minimum="{TemplateBinding Slider.Minimum}"
+                        Maximum="{TemplateBinding Slider.Maximum}"
+                        Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
+                        Margin="0,4,0,0"
+                        VerticalAlignment="Top"
+                        Placement="Bottom"
+                        IsVisible="False"
+                        Fill="{DynamicResource SliderTickBarFill}" />
+                    <Track
+                        Name="PART_Track"
+                        Grid.Row="1"
+                        Grid.ColumnSpan="3"
+                        Minimum="{TemplateBinding Minimum}"
+                        Maximum="{TemplateBinding Maximum}"
+                        Value="{TemplateBinding Value, Mode=TwoWay}"
+                        IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                        Orientation="Horizontal">
+                      <Track.DecreaseButton>
+                        <RepeatButton
+                            Name="PART_DecreaseButton"
+                            Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
+                            Background="{TemplateBinding Foreground}"
+                            Focusable="False"/>
+                      </Track.DecreaseButton>
+                      <Track.IncreaseButton>
+                        <RepeatButton
+                            Name="PART_IncreaseButton"
+                            Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
+                            Background="{TemplateBinding Background}"
+                            Focusable="False"/>
+                      </Track.IncreaseButton>
+                      <Thumb
+                          Name="thumb"
+                          Width="{DynamicResource SliderHorizontalThumbWidth}"
+                          Height="{DynamicResource SliderHorizontalThumbHeight}"
+                          Margin="0"
+                          Padding="0"
+                          Background="{DynamicResource SliderThumbBackground}"
+                          BorderThickness="0"
+                          Theme="{StaticResource FluentSliderThumbTheme}"
+                          DataContext="{TemplateBinding Value}"/>
+                    </Track>
+                  </Grid>
                 </Grid>
               </Grid>
-            </Grid>
-          </Border>
-        </DataValidationErrors>
-      </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}" />
-  </Style>
-  <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>
-  
-  <!-- Normal State -->
-  
-  <Style Selector="Slider /template/ Thumb.SliderThumbStyle">
-    <Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
-  </Style>
+            </Border>
+          </DataValidationErrors>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <DataValidationErrors>
+            <Border
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+              <Grid
+                  Name="grid"
+                  Margin="{TemplateBinding Padding}"
+                  RowDefinitions="Auto, *">
+                <ContentPresenter
+                    x:Name="HeaderContentPresenter"
+                    Grid.Row="0"
+                    Margin="{DynamicResource SliderTopHeaderMargin}"
+                    TextElement.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}"
+                    TextElement.Foreground="{DynamicResource SliderHeaderForeground}" />
+                <Grid x:Name="SliderContainer"
+                      Grid.Row="1"
+                      Background="{DynamicResource SliderContainerBackground}">
+                  <Grid.Styles>
+                    <Style Selector="TickBar">
+                      <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
+                    </Style>
+                  </Grid.Styles>
+                  <Grid
+                      x:Name="VerticalTemplate"
+                      MinWidth="{DynamicResource SliderVerticalWidth}"
+                      RowDefinitions="*,Auto,Auto">
+                    <Grid.ColumnDefinitions>
+                      <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
+                      <ColumnDefinition Width="Auto" />
+                      <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
+                    </Grid.ColumnDefinitions>
+                    <TickBar
+                        Name="LeftTickBar"
+                        Grid.RowSpan="3"
+                        Ticks="{TemplateBinding Ticks}"
+                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                        Orientation="{TemplateBinding Slider.Orientation}"
+                        Minimum="{TemplateBinding Slider.Minimum}"
+                        Maximum="{TemplateBinding Slider.Maximum}"
+                        Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
+                        Margin="0,0,4,0"
+                        HorizontalAlignment="Right"
+                        Placement="Left"
+                        IsVisible="False"
+                        Fill="{DynamicResource SliderTickBarFill}"/>
+                    <TickBar
+                        Name="RightTickBar"
+                        Grid.RowSpan="3"
+                        Grid.Column="2"
+                        Ticks="{TemplateBinding Ticks}"
+                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                        Orientation="{TemplateBinding Slider.Orientation}"
+                        Minimum="{TemplateBinding Slider.Minimum}"
+                        Maximum="{TemplateBinding Slider.Maximum}"
+                        Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
+                        Margin="4,0,0,0"
+                        HorizontalAlignment="Left"
+                        Placement="Right" 
+                        IsVisible="False"
+                        Fill="{DynamicResource SliderTickBarFill}"/>
+                    <Track
+                        Name="PART_Track"
+                        Grid.RowSpan="3"
+                        Grid.Column="1"
+                        Grid.ColumnSpan="1"
+                        Minimum="{TemplateBinding Minimum}"
+                        Maximum="{TemplateBinding Maximum}"
+                        Value="{TemplateBinding Value, Mode=TwoWay}"
+                        IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                        Orientation="Vertical">
+                      <Track.DecreaseButton>
+                        <RepeatButton
+                            Name="PART_DecreaseButton"
+                            Theme="{StaticResource FluentSliderVerticalRepeatButton}"
+                            Background="{TemplateBinding Foreground}"
+                            Focusable="False"/>
+                      </Track.DecreaseButton>
+                      <Track.IncreaseButton>
+                        <RepeatButton
+                            Name="PART_IncreaseButton"
+                            Background="{TemplateBinding Background}"
+                            Theme="{StaticResource FluentSliderVerticalRepeatButton}"
+                            Focusable="False"/>
+                      </Track.IncreaseButton>
+                      <Thumb
+                          Name="SliderThumb"
+                          Width="{DynamicResource SliderVerticalThumbWidth}"
+                          Height="{DynamicResource SliderVerticalThumbHeight}"
+                          Margin="0"
+                          Padding="0"
+                          Background="{DynamicResource SliderThumbBackground}"
+                          BorderThickness="0"
+                          Theme="{StaticResource FluentSliderThumbTheme}"
+                          DataContext="{TemplateBinding Value}" />
+                    </Track>
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Border>
+          </DataValidationErrors>
+        </ControlTemplate>
+      </Setter>
+    </Style>
 
-  <Style Selector="Slider /template/ Grid#SliderContainer">
-    <Setter Property="Background" Value="{DynamicResource SliderContainerBackground}" />
-  </Style>
+    <!--  TickBar Placement States  -->
 
-  <Style Selector="Slider /template/ TickBar">
-    <Setter Property="IsVisible" Value="False" />
-    <Setter Property="Ticks" Value="{TemplateBinding Ticks}" />
-  </Style>
+    <Style Selector="^[TickPlacement=TopLeft] /template/ TickBar#LeftTickBar, ^[TickPlacement=Outside] /template/ TickBar#LeftTickBar">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
 
-  <!-- TickBar Placement States -->
+    <Style Selector="^[TickPlacement=TopLeft] /template/ TickBar#TopTickBar, ^[TickPlacement=Outside] /template/ TickBar#TopTickBar">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
 
-  <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="^[TickPlacement=BottomRight] /template/ TickBar#BottomTickBar, ^[TickPlacement=Outside] /template/ TickBar#BottomTickBar">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
 
-  <Style Selector="Slider:disabled /template/ ContentPresenter#HeaderContentPresenter">
-    <Setter Property="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>
+    <Style Selector="^[TickPlacement=BottomRight] /template/ TickBar#RightTickBar, ^[TickPlacement=Outside] /template/ TickBar#RightTickBar">
+      <Setter Property="IsVisible" Value="True" />
+    </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>
+    <!--  Disabled State  -->
 
-  <!-- Pressed State -->
-  <Style Selector="Slider:pressed /template/ RepeatButton#PART_IncreaseButton">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
-  </Style>
+    <Style Selector="^:disabled">
+      <Style Selector="^ /template/ ContentPresenter#HeaderContentPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource SliderHeaderForegroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
+        <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
+      </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:error /template/ Thumb.SliderThumbStyle">
-    <Setter Property="Background" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
-  </Style>
-  
-  <Style Selector="Slider:error">
+      <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
+        <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
+      </Style>
+
+      <Style Selector="^ /template/ Thumb">
+        <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
+      </Style>
+
+      <Style Selector="^ /template/ TickBar">
+        <Setter Property="Fill" Value="{DynamicResource SliderTickBarFillDisabled}" />
+      </Style>
+    </Style>
+
+    <!--  PointerOver State  -->
+    <Style Selector="^:pointerover">
+      <Style Selector="^ /template/ Grid#SliderContainer">
+        <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
+      </Style>
+      <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
+        <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
+      </Style>
+
+      <Style Selector="^ /template/ Thumb">
+        <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
+      </Style>
+
+      <Style Selector="^ /template/ Grid#SliderContainer">
+        <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
+      </Style>
+
+      <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
+        <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
+      </Style>
+
+    </Style>
+
+    <!--  Pressed State  -->
+    <Style Selector="^:pressed">
+      <Style Selector="^ /template/ Grid#SliderContainer">
+        <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
+      </Style>
+      <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
+        <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
+      </Style>
+      <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
+        <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
+      </Style>
+
+      <Style Selector="^ /template/ Thumb">
+        <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
+      </Style>
+    </Style>
+
+    <Style Selector="^:error">
       <Setter Property="Foreground" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
-  </Style>
-</Styles>
+      <Style Selector="^ /template/ Thumb">
+        <Setter Property="Background" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
+      </Style>
+    </Style>
+
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/SplitButton.xaml

@@ -1,37 +1,120 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         x:CompileBindings="True"
         xmlns:converters="using:Avalonia.Controls.Converters">
-
   <Design.PreviewWith>
     <Border Padding="60">
-      <StackPanel>
-        <SplitButton Content="Hello World">
+      <StackPanel Spacing="20">
+        <SplitButton Content="SplitButton">
+          <SplitButton.Flyout>
+            <Flyout>Hello</Flyout>
+          </SplitButton.Flyout>
+        </SplitButton>
+        <SplitButton CornerRadius="16" Content="Rounded">
           <SplitButton.Flyout>
             <Flyout>Hello</Flyout>
           </SplitButton.Flyout>
         </SplitButton>
-        <ToggleSplitButton Content="Hello World">
+        <SplitButton IsEnabled="False">Disabled</SplitButton>
+        <ToggleSplitButton Content="ToggleSplitButton">
+          <ToggleSplitButton.Flyout>
+            <Flyout>Hello</Flyout>
+          </ToggleSplitButton.Flyout>
+        </ToggleSplitButton>
+        <ToggleSplitButton Content="Checked" IsChecked="True">
           <ToggleSplitButton.Flyout>
             <Flyout>Hello</Flyout>
           </ToggleSplitButton.Flyout>
         </ToggleSplitButton>
+        <ToggleSplitButton Content="Checked Disabled" IsChecked="True" IsEnabled="False"/>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <x:Double x:Key="SplitButtonPrimaryButtonSize">32</x:Double>
-    <x:Double x:Key="SplitButtonSecondaryButtonSize">32</x:Double>
-    <x:Double x:Key="SplitButtonSeparatorWidth">1</x:Double>
-    <x:Double x:Key="SplitButtonMinHeight">32</x:Double>
+  <x:Double x:Key="SplitButtonPrimaryButtonSize">32</x:Double>
+  <x:Double x:Key="SplitButtonSecondaryButtonSize">32</x:Double>
+  <x:Double x:Key="SplitButtonSeparatorWidth">1</x:Double>
+  <x:Double x:Key="SplitButtonMinHeight">32</x:Double>
+
+  <converters:MarginMultiplierConverter x:Key="PrimaryButtonBorderMultiplier" Left="True" Top="True" Bottom="True" Indent="1" />
+  <converters:MarginMultiplierConverter x:Key="SecondaryButtonBorderMultiplier" Right="True" Top="True" Bottom="True" Indent="1" />
+  <converters:MarginMultiplierConverter x:Key="SeparatorBorderMultiplier" Top="True" Bottom="True" Indent="1" />
 
-    <converters:MarginMultiplierConverter x:Key="PrimaryButtonBorderMultiplier" Left="True" Top="True" Bottom="True" Indent="1" />
-    <converters:MarginMultiplierConverter x:Key="SecondaryButtonBorderMultiplier" Right="True" Top="True" Bottom="True" Indent="1" />
-    <converters:MarginMultiplierConverter x:Key="SeparatorBorderMultiplier" Top="True" Bottom="True" Indent="1" />
-  </Styles.Resources>
+  <ControlTheme x:Key="FluentSplitButtonComponent" TargetType="Button">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter x:Name="PART_ContentPresenter"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Padding="{TemplateBinding Padding}"
+                          RecognizesAccessKey="True"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+      </ControlTemplate>
+    </Setter>
 
-  <Style Selector="SplitButton">
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushPointerOver}" />
+      <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushPressed}" />
+      <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPressed}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushDisabled}" />
+      <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundDisabled}" />
+    </Style>
+
+    <Style Selector="^[Tag=flyout-open] /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushPressed}" />
+      <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPressed}" />
+    </Style>
+
+    <Style Selector="^[Tag=checked]">
+      <Style Selector="^ /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundChecked}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushChecked}" />
+        <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundChecked}" />
+      </Style>
+
+      <Style Selector="^:pointerover /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundCheckedPointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedPointerOver}" />
+        <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPointerOver}" />
+      </Style>
+
+      <Style Selector="^:pressed /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundCheckedPressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedPressed}" />
+        <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPressed}" />
+      </Style>
+
+      <Style Selector="^:disabled /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundCheckedDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedDisabled}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundCheckedDisabled}" />
+      </Style>
+    </Style>
+
+    <Style Selector="^[Tag=checked-flyout-open] /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource SplitButtonBackgroundCheckedPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedPressed}" />
+      <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPressed}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type SplitButton}" TargetType="SplitButton">
     <Setter Property="Background" Value="{DynamicResource SplitButtonBackground}" />
     <Setter Property="Foreground" Value="{DynamicResource SplitButtonForeground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource SplitButtonBorderBrush}" />
@@ -41,211 +124,83 @@
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
-    <!--<Setter Property="UseSystemFocusVisuals" Value="True" />
-    <Setter Property="FocusVisualMargin" Value="-3" />-->
     <Setter Property="KeyboardNavigation.IsTabStop" Value="True" />
     <Setter Property="Focusable" Value="True" />
     <Setter Property="Padding" Value="{DynamicResource ButtonPadding}" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="Template">
-      <Setter.Value>
-        <ControlTemplate>
-          <Grid>
-            <Grid.ColumnDefinitions>
-              <ColumnDefinition Width="*" />
-              <ColumnDefinition Width="Auto" />
-              <ColumnDefinition Width="Auto" />
-            </Grid.ColumnDefinitions>
-
-            <Button x:Name="PART_PrimaryButton"
-                    Grid.Column="0"
-                    MinWidth="{DynamicResource SplitButtonPrimaryButtonSize}"
-                    Foreground="{TemplateBinding Foreground}"
-                    Background="{TemplateBinding Background}"
-                    BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource PrimaryButtonBorderMultiplier}}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    Content="{TemplateBinding Content}"
-                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                    Command="{TemplateBinding Command}"
-                    CommandParameter="{TemplateBinding CommandParameter}"
-                    FontFamily="{TemplateBinding FontFamily}"
-                    FontSize="{TemplateBinding FontSize}"
-                    FontWeight="{TemplateBinding FontWeight}"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                    Padding="{TemplateBinding Padding}"
-                    Focusable="False"
-                    KeyboardNavigation.IsTabStop="False" />
-
-            <Border x:Name="SeparatorBorder"
-                    Grid.Column="1"
-                    Background="Transparent"
-                    Width="{DynamicResource SplitButtonSeparatorWidth}"
-                    BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SeparatorBorderMultiplier}}"
-                    BorderBrush="{TemplateBinding BorderBrush}" />
-
-            <Button x:Name="PART_SecondaryButton"
-                    Grid.Column="2"
-                    MinWidth="{DynamicResource SplitButtonSecondaryButtonSize}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    Foreground="{TemplateBinding Foreground}"
-                    Background="{TemplateBinding Background}"
-                    BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SecondaryButtonBorderMultiplier}}"
-                    Padding="0"
-                    HorizontalContentAlignment="Center"
-                    VerticalContentAlignment="Center"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    Focusable="False"
-                    KeyboardNavigation.IsTabStop="False" />
-          </Grid>
-        </ControlTemplate>
-      </Setter.Value>
+      <ControlTemplate>
+        <Grid>
+          <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="Auto" />
+          </Grid.ColumnDefinitions>
+
+          <Button x:Name="PART_PrimaryButton"
+                  Grid.Column="0"
+                  Theme="{StaticResource FluentSplitButtonComponent}"
+                  MinWidth="{DynamicResource SplitButtonPrimaryButtonSize}"
+                  Foreground="{TemplateBinding Foreground}"
+                  Background="{TemplateBinding Background}"
+                  BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource PrimaryButtonBorderMultiplier}}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  Content="{TemplateBinding Content}"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Command="{TemplateBinding Command}"
+                  CommandParameter="{TemplateBinding CommandParameter}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                  FontFamily="{TemplateBinding FontFamily}"
+                  FontSize="{TemplateBinding FontSize}"
+                  FontWeight="{TemplateBinding FontWeight}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                  Padding="{TemplateBinding Padding}"
+                  Focusable="False"
+                  KeyboardNavigation.IsTabStop="False" />
+
+          <Border x:Name="SeparatorBorder"
+                  Grid.Column="1"
+                  Background="Transparent"
+                  Width="{DynamicResource SplitButtonSeparatorWidth}"
+                  BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SeparatorBorderMultiplier}}"
+                  BorderBrush="{TemplateBinding BorderBrush}" />
+
+          <Button x:Name="PART_SecondaryButton"
+                  Grid.Column="2"
+                  Theme="{StaticResource FluentSplitButtonComponent}"
+                  MinWidth="{DynamicResource SplitButtonSecondaryButtonSize}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  Foreground="{TemplateBinding Foreground}"
+                  Background="{TemplateBinding Background}"
+                  BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SecondaryButtonBorderMultiplier}}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                  Padding="0"
+                  HorizontalContentAlignment="Center"
+                  VerticalContentAlignment="Center"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Focusable="False"
+                  KeyboardNavigation.IsTabStop="False">
+            <PathIcon Height="12" Width="12"
+                      Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z" />
+          </Button>
+        </Grid>
+      </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!-- Default overridable styles -->
-  <Style Selector="SplitButton /template/ Button#PART_PrimaryButton">
-    <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
-  </Style>
-  <Style Selector="SplitButton /template/ Button#PART_SecondaryButton">
-    <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
-    <Setter Property="Content">
-      <Template>
-        <PathIcon Height="12"
-                  Width="12"
-                  Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z" />
-      </Template>
-    </Setter>
-  </Style>
-
-  <!-- Primary and Secondary buttons PointerOver State -->
-  <Style Selector="SplitButton /template/ Button#PART_PrimaryButton:pointerover /template/ ContentPresenter,
-         SplitButton /template/ Button#PART_SecondaryButton:pointerover /template/ ContentPresenter">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundPointerOver}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushPointerOver}" />
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPointerOver}" />
-  </Style>
-  <Style Selector="SplitButton /template/ Button#PART_SecondaryButton:pointerover PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPointerOver}" />
-  </Style>
-
-  <!-- Primary and Secondary buttons Pressed State -->
-  <Style Selector="SplitButton /template/ Button#PART_PrimaryButton:pressed /template/ ContentPresenter,
-         SplitButton /template/ Button#PART_SecondaryButton:pressed /template/ ContentPresenter">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundPressed}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushPressed}" />
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPressed}" />
-  </Style>
-  <Style Selector="SplitButton /template/ Button#PART_SecondaryButton:pressed PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPressed}" />
-  </Style>
-
-  <!-- SplitButton Pressed State -->
-  <Style Selector="SplitButton:pressed /template/ Button#PART_PrimaryButton /template/ ContentPresenter,
-         SplitButton:pressed /template/ Button#PART_SecondaryButton /template/ ContentPresenter,
-         SplitButton:pressed /template/ Border#SeparatorBorder">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundPressed}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundPressed}" />
-  </Style>
-  <Style Selector="SplitButton:pressed /template/ Button#PART_SecondaryButton PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPressed}" />
-  </Style>
-
-  <!-- Primary and Secondary buttons Flyout Open State -->
-  <Style Selector="SplitButton:flyout-open /template/ Button#PART_PrimaryButton /template/ ContentPresenter,
-         SplitButton:flyout-open /template/ Button#PART_SecondaryButton /template/ ContentPresenter,
-         SplitButton:flyout-open /template/ Border#SeparatorBorder">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundPressed}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundPressed}" />
-  </Style>
-  <Style Selector="SplitButton:flyout-open /template/ Button#PART_SecondaryButton PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundPressed}" />
-  </Style>
-
-  <!-- Disabled State -->
-  <Style Selector="SplitButton:disabled /template/ Button#PART_PrimaryButton /template/ ContentPresenter,
-         SplitButton:disabled /template/ Button#PART_SecondaryButton /template/ ContentPresenter,
-         SplitButton:disabled /template/ Border#SeparatorBorder">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundDisabled}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushDisabled}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundDisabled}" />
-  </Style>
-  <Style Selector="SplitButton:disabled /template/ Button#PART_SecondaryButton PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundDisabled}" />
-  </Style>
-
-  <!-- Checked State -->
-  <Style Selector="SplitButton:checked /template/ Button#PART_PrimaryButton /template/ ContentPresenter,
-         SplitButton:checked /template/ Button#PART_SecondaryButton /template/ ContentPresenter,
-         SplitButton:checked /template/ Border#SeparatorBorder">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundChecked}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushChecked}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundChecked}" />
-  </Style>
-  <Style Selector="SplitButton:checked /template/ Button#PART_SecondaryButton PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundChecked}" />
-  </Style>
-
-  <!-- Checked PointerOver State -->
-  <Style Selector="SplitButton:checked /template/ Button#PART_PrimaryButton:pointerover /template/ ContentPresenter,
-         SplitButton:checked /template/ Button#PART_SecondaryButton:pointerover /template/ ContentPresenter">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundCheckedPointerOver}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedPointerOver}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPointerOver}" />
-  </Style>
-  <Style Selector="SplitButton:checked /template/ Button#PART_SecondaryButton:pointerover PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPointerOver}" />
-  </Style>
-
-  <!-- Checked Pressed State -->
-  <Style Selector="SplitButton:checked /template/ Button#PART_PrimaryButton:pressed /template/ ContentPresenter,
-         SplitButton:checked /template/ Button#PART_SecondaryButton:pressed /template/ ContentPresenter">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundCheckedPressed}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedPressed}" />
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPressed}" />
-  </Style>
-  <Style Selector="SplitButton:checked /template/ Button#PART_SecondaryButton:pressed PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPressed}" />
-  </Style>
-
-  <!-- SplitButton Checked Pressed State -->
-  <Style Selector="SplitButton:pressed:checked /template/ Button#PART_PrimaryButton /template/ ContentPresenter,
-         SplitButton:pressed:checked /template/ Button#PART_SecondaryButton /template/ ContentPresenter,
-         SplitButton:pressed:checked /template/ Border#SeparatorBorder">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundCheckedPressed}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPressed}" />
-  </Style>
-  <Style Selector="SplitButton:pressed:checked /template/ Button#PART_SecondaryButton PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPressed}" />
-  </Style>
-
-  <!-- Checked Flyout Open State -->
-  <Style Selector="SplitButton:checked:flyout-open /template/ Button#PART_PrimaryButton /template/ ContentPresenter,
-         SplitButton:checked:flyout-open /template/ Button#PART_SecondaryButton /template/ ContentPresenter,
-         SplitButton:checked:flyout-open /template/ Border#SeparatorBorder">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundCheckedPressed}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPressed}" />
-  </Style>
-  <Style Selector="SplitButton:checked:flyout-open /template/ Button#PART_SecondaryButton PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedPressed}" />
-  </Style>
-
-  <!-- Disabled Checked State -->
-  <Style Selector="SplitButton:checked:disabled /template/ Button#PART_PrimaryButton /template/ ContentPresenter,
-         SplitButton:checked:disabled /template/ Button#PART_SecondaryButton /template/ ContentPresenter,
-         SplitButton:checked:disabled /template/ Border#SeparatorBorder">
-    <Setter Property="Border.Background" Value="{DynamicResource SplitButtonBackgroundCheckedDisabled}" />
-    <Setter Property="Border.BorderBrush" Value="{DynamicResource SplitButtonBorderBrushCheckedDisabled}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource SplitButtonForegroundCheckedDisabled}" />
-  </Style>
-  <Style Selector="SplitButton:checked:disabled /template/ Button#PART_SecondaryButton PathIcon">
-    <Setter Property="Foreground" Value="{DynamicResource SplitButtonForegroundCheckedDisabled}" />
-  </Style>
-</Styles>
+
+    <Style Selector="^:flyout-open /template/ Button">
+      <Setter Property="Tag" Value="flyout-open" />
+    </Style>
+
+    <Style Selector="^:checked /template/ Button">
+      <Setter Property="Tag" Value="checked" />
+    </Style>
+
+    <Style Selector="^:checked:flyout-open /template/ Button">
+      <Setter Property="Tag" Value="checked-flyout-open" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/SplitView.xaml

@@ -1,4 +1,4 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sys="using:System">
   <Design.PreviewWith>
@@ -15,219 +15,235 @@
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <x:Double x:Key="SplitViewOpenPaneThemeLength">320</x:Double>
-    <x:Double x:Key="SplitViewCompactPaneThemeLength">48</x:Double>
-    <sys:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</sys:TimeSpan>
-    <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
-    <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
-    <!-- Not used here (directly), but preserving for reference
-        <x:String x:Key="SplitViewPaneAnimationOpenPreDuration">00:00:00.19999</x:String>-->
-  </Styles.Resources>
-
-  <Style Selector="SplitView">
+  <x:Double x:Key="SplitViewOpenPaneThemeLength">320</x:Double>
+  <x:Double x:Key="SplitViewCompactPaneThemeLength">48</x:Double>
+  <sys:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</sys:TimeSpan>
+  <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
+  <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
+
+  <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
     <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
     <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
     <Setter Property="PaneBackground" Value="{DynamicResource SystemControlPageBackgroundChromeLowBrush}" />
-  </Style>
-
-  <!-- Left -->
-  <Style Selector="SplitView:left">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Grid Name="Container" Background="{TemplateBinding Background}">
-          <Grid.ColumnDefinitions>
-            <!-- why is this throwing a binding error? -->
-            <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}"/>
-            <ColumnDefinition Width="*"/>
-          </Grid.ColumnDefinitions>
-
-          <Panel Name="PART_PaneRoot" Background="{TemplateBinding PaneBackground}"
-                 ClipToBounds="True"
-                 HorizontalAlignment="Left"
-                 ZIndex="100">
-            <ContentPresenter x:Name="PART_PanePresenter" Content="{TemplateBinding Pane}" ContentTemplate="{TemplateBinding PaneTemplate}" />
-            <Rectangle Name="HCPaneBorder" Fill="{DynamicResource SystemControlForegroundTransparentBrush}" Width="1" HorizontalAlignment="Right"  />
-          </Panel>
-
-          <Panel Name="ContentRoot">
-            <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
-            <Rectangle Name="LightDismissLayer"/>
-          </Panel>
-
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <!-- Overlay -->
-  <Style Selector="SplitView:overlay:left /template/ Panel#PART_PaneRoot">
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-    <!-- ColumnSpan should be 2 -->
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-    <Setter Property="Grid.Column" Value="0"/>
-  </Style>
-  <Style Selector="SplitView:overlay:left /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Grid.ColumnSpan" Value="2"/>
-  </Style>
-
-  <!-- CompactInline -->
-  <Style Selector="SplitView:compactinline:left /template/ Panel#PART_PaneRoot">
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-  </Style>
-  <Style Selector="SplitView:compactinline:left /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- CompactOverlay -->
-  <Style Selector="SplitView:compactoverlay:left /template/ Panel#PART_PaneRoot">
-    <!-- ColumnSpan should be 2 -->
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-  </Style>
-  <Style Selector="SplitView:compactoverlay:left /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- Inline -->
-  <Style Selector="SplitView:inline:left /template/ Panel#PART_PaneRoot">
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-  </Style>
-  <Style Selector="SplitView:inline:left /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- Right -->
-  <Style Selector="SplitView:right">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Grid Name="Container" Background="{TemplateBinding Background}">
-          <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}"/>
-          </Grid.ColumnDefinitions>
-
-          <Panel Name="PART_PaneRoot" Background="{TemplateBinding PaneBackground}"
-                 ClipToBounds="True"
-                 HorizontalAlignment="Right"
-                 ZIndex="100">
-            <ContentPresenter x:Name="PART_PanePresenter" Content="{TemplateBinding Pane}" ContentTemplate="{TemplateBinding PaneTemplate}"/>
-            <Rectangle Name="HCPaneBorder"
-                       Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
-                       Width="1" HorizontalAlignment="Left"  />
-          </Panel>
-
-          <Panel Name="ContentRoot">
-            <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
-            <Rectangle Name="LightDismissLayer"/>
-          </Panel>
-
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <!-- Overlay -->
-  <Style Selector="SplitView:overlay:right /template/ Panel#PART_PaneRoot">
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-    <Setter Property="Grid.ColumnSpan" Value="2"/>
-    <Setter Property="Grid.Column" Value="1"/>
-  </Style>
-  <Style Selector="SplitView:overlay:right /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Grid.ColumnSpan" Value="2"/>
-  </Style>
-
-  <!-- CompactInline -->
-  <Style Selector="SplitView:compactinline:right /template/ Panel#PART_PaneRoot">
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-  </Style>
-  <Style Selector="SplitView:compactinline:right /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- CompactOverlay -->
-  <Style Selector="SplitView:compactoverlay:right /template/ Panel#PART_PaneRoot">
-    <Setter Property="Grid.ColumnSpan" Value="2"/>
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-  </Style>
-  <Style Selector="SplitView:compactoverlay:right /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- Inline -->
-  <Style Selector="SplitView:inline:right /template/ Panel#PART_PaneRoot">
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-    <Setter Property="Grid.Column" Value="1"/>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-  </Style>
-  <Style Selector="SplitView:inline:right /template/ Panel#ContentRoot">
-    <Setter Property="Grid.Column" Value="0"/>
-    <Setter Property="Grid.ColumnSpan" Value="1"/>
-  </Style>
-
-  <!-- Open/Close Pane animation  -->
-  <Style Selector="SplitView:open /template/ Panel#PART_PaneRoot">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
-      </Transitions>
-    </Setter>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
-  </Style>
-  <Style Selector="SplitView:open /template/ Rectangle#LightDismissLayer">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
-      </Transitions>
-    </Setter>
-    <Setter Property="Opacity" Value="1.0"/>
-  </Style>
-
-  <Style Selector="SplitView:closed /template/ Panel#PART_PaneRoot">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
-      </Transitions>
-    </Setter>
-    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-  </Style>
-  <Style Selector="SplitView:closed /template/ Rectangle#LightDismissLayer">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
-      </Transitions>
-    </Setter>
-    <Setter Property="Opacity" Value="0.0"/>
-  </Style>
-
-  <Style Selector="SplitView /template/ Rectangle#LightDismissLayer">
-    <Setter Property="IsVisible" Value="False"/>
-    <Setter Property="Fill" Value="Transparent" />
-  </Style>
-  <Style Selector="SplitView:lightdismiss /template/ Rectangle#LightDismissLayer">
-    <Setter Property="Fill" Value="{DynamicResource SplitViewLightDismissOverlayBackground}" />
-  </Style>
-
-  <Style Selector="SplitView:overlay:open /template/ Rectangle#LightDismissLayer">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
-  <Style Selector="SplitView:compactoverlay:open /template/ Rectangle#LightDismissLayer">
-    <Setter Property="IsVisible" Value="True"/>
-  </Style>
-
-</Styles>
+
+    <Style Selector="^:left">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Grid Name="Container" Background="{TemplateBinding Background}">
+            <Grid.ColumnDefinitions>
+              <!-- why is this throwing a binding error? -->
+              <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}"/>
+              <ColumnDefinition Width="*"/>
+            </Grid.ColumnDefinitions>
+
+            <Panel Name="PART_PaneRoot"
+                   Background="{TemplateBinding PaneBackground}"
+                   ClipToBounds="True"
+                   HorizontalAlignment="Left"
+                   ZIndex="100">
+              <ContentPresenter x:Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+              <Rectangle Name="HCPaneBorder"
+                         Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
+                         Width="1"
+                         HorizontalAlignment="Right"  />
+            </Panel>
+
+            <Panel Name="ContentRoot">
+              <ContentPresenter x:Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+              <Rectangle Name="LightDismissLayer"
+                         Fill="Transparent"
+                         IsVisible="False"/>
+            </Panel>
+
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+
+      <Style Selector="^:overlay">
+        <Style Selector="^ /template/ Panel#PART_PaneRoot">
+          <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+          <Setter Property="Grid.Column" Value="0"/>
+        </Style>
+        <Style Selector="^ /template/ Panel#ContentRoot">
+          <Setter Property="Grid.Column" Value="1"/>
+          <Setter Property="Grid.ColumnSpan" Value="2"/>
+        </Style>
+      </Style>
+
+      <Style Selector="^:compactinline">
+        <Style Selector="^ /template/ Panel#PART_PaneRoot">
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+          <Setter Property="Grid.Column" Value="0"/>
+          <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+        </Style>
+        <Style Selector="^ /template/ Panel#ContentRoot">
+          <Setter Property="Grid.Column" Value="1"/>
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+        </Style>
+      </Style>
+
+      <Style Selector="^:compactoverlay">
+        <Style Selector="^ /template/ Panel#PART_PaneRoot">
+          <!-- ColumnSpan should be 2 -->
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+          <Setter Property="Grid.Column" Value="0"/>
+          <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+        </Style>
+        <Style Selector="^ /template/ Panel#ContentRoot">
+          <Setter Property="Grid.Column" Value="1"/>
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+        </Style>
+      </Style>
+
+      <Style Selector="^:inline">
+        <Style Selector="^ /template/ Panel#PART_PaneRoot">
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+          <Setter Property="Grid.Column" Value="0"/>
+          <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+        </Style>
+        <Style Selector="^ /template/ Panel#ContentRoot">
+          <Setter Property="Grid.Column" Value="1"/>
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+        </Style>
+      </Style>
+    </Style>
+
+    <Style Selector="^:right">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Grid Name="Container" Background="{TemplateBinding Background}">
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="*"/>
+              <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}"/>
+            </Grid.ColumnDefinitions>
+
+            <Panel Name="PART_PaneRoot" Background="{TemplateBinding PaneBackground}"
+                   ClipToBounds="True"
+                   HorizontalAlignment="Right"
+                   ZIndex="100">
+              <ContentPresenter x:Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}"/>
+              <Rectangle Name="HCPaneBorder"
+                         Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
+                         Width="1" HorizontalAlignment="Left"  />
+            </Panel>
+
+            <Panel Name="ContentRoot">
+              <ContentPresenter x:Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+              <Rectangle Name="LightDismissLayer"/>
+            </Panel>
+
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+
+      <Style Selector="^:overlay">
+        <Style Selector="^ /template/ Panel#PART_PaneRoot">
+          <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+          <Setter Property="Grid.ColumnSpan" Value="2"/>
+          <Setter Property="Grid.Column" Value="1"/>
+        </Style>
+        <Style Selector="^ /template/ Panel#ContentRoot">
+          <Setter Property="Grid.Column" Value="0"/>
+          <Setter Property="Grid.ColumnSpan" Value="2"/>
+        </Style>
+      </Style>
+
+      <Style Selector="^:compactinline">
+        <Style Selector="^ /template/ Panel#PART_PaneRoot">
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+          <Setter Property="Grid.Column" Value="1"/>
+          <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+        </Style>
+        <Style Selector="^ /template/ Panel#ContentRoot">
+          <Setter Property="Grid.Column" Value="0"/>
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+        </Style>
+      </Style>
+
+      <Style Selector="^:compactoverlay">
+        <Style Selector="^ /template/ Panel#PART_PaneRoot">
+          <Setter Property="Grid.ColumnSpan" Value="2"/>
+          <Setter Property="Grid.Column" Value="1"/>
+          <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+        </Style>
+        <Style Selector="^ /template/ Panel#ContentRoot">
+          <Setter Property="Grid.Column" Value="0"/>
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+        </Style>
+      </Style>
+
+      <Style Selector="^:inline">
+        <Style Selector="^ /template/ Panel#PART_PaneRoot">
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+          <Setter Property="Grid.Column" Value="1"/>
+          <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+        </Style>
+        <Style Selector="^ /template/ Panel#ContentRoot">
+          <Setter Property="Grid.Column" Value="0"/>
+          <Setter Property="Grid.ColumnSpan" Value="1"/>
+        </Style>
+      </Style>
+    </Style>
+
+    <Style Selector="^:open">
+      <Style Selector="^ /template/ Panel#PART_PaneRoot">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Width"
+                              Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
+                              Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+      </Style>
+      <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Opacity"
+                              Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
+                              Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Opacity" Value="1.0"/>
+      </Style>
+    </Style>
+
+    <Style Selector="^:closed">
+      <Style Selector="^ /template/ Panel#PART_PaneRoot">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+      </Style>
+      <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Opacity" Value="0.0"/>
+      </Style>
+    </Style>
+
+    <Style Selector="^:lightdismiss /template/ Rectangle#LightDismissLayer">
+      <Setter Property="Fill" Value="{DynamicResource SplitViewLightDismissOverlayBackground}" />
+    </Style>
+    <Style Selector="^:overlay:open /template/ Rectangle#LightDismissLayer">
+      <Setter Property="IsVisible" Value="True"/>
+    </Style>
+    <Style Selector="^:compactoverlay:open /template/ Rectangle#LightDismissLayer">
+      <Setter Property="IsVisible" Value="True"/>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TabControl.xaml

@@ -1,29 +1,24 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Width="400">
       <TabControl>
         <TabItem Header="Arch">
-          <Border Background="AntiqueWhite"
-                  Height="100">
+          <Border Background="AntiqueWhite" Height="100">
             <TextBlock Text="Content" Foreground="Black" FontSize="20"/>
           </Border>
         </TabItem>
         <TabItem Header="Leaf">
-          <Border Background="Green"
-                  Height="100" />
+          <Border Background="Green" Height="100" />
         </TabItem>
-        <TabItem Header="Disabled"
-                 IsEnabled="False" />
+        <TabItem Header="Disabled" IsEnabled="False" />
       </TabControl>
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <Thickness x:Key="TabControlTopPlacementItemMargin">0 0 0 2</Thickness>
-  </Styles.Resources>
-  
-  <Style Selector="TabControl">
+  <Thickness x:Key="TabControlTopPlacementItemMargin">0 0 0 2</Thickness>
+
+  <ControlTheme x:Key="{x:Type TabControl}" TargetType="TabControl">
     <Setter Property="Margin" Value="0" />
     <Setter Property="Padding" Value="{DynamicResource TabItemMargin}" />
     <Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
@@ -40,7 +35,7 @@
                             Items="{TemplateBinding Items}"
                             ItemsPanel="{TemplateBinding ItemsPanel}"
                             ItemTemplate="{TemplateBinding ItemTemplate}"
-                            DockPanel.Dock="{TemplateBinding TabStripPlacement}"/>
+                            DockPanel.Dock="{TemplateBinding TabStripPlacement}" />
             <ContentPresenter Name="PART_SelectedContentHost"
                               Margin="{TemplateBinding Padding}"
                               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -51,15 +46,15 @@
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
 
-  <Style Selector="TabControl[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
-    <Setter Property="Orientation" Value="Vertical" />
-  </Style>
-  <Style Selector="TabControl[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
-    <Setter Property="Orientation" Value="Vertical" />
-  </Style>
-  <Style Selector="TabControl[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
-    <Setter Property="Margin" Value="{DynamicResource TabControlTopPlacementItemMargin}" />
-  </Style>
-</Styles>
+    <Style Selector="^[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
+      <Setter Property="Orientation" Value="Vertical" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
+      <Setter Property="Orientation" Value="Vertical" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
+      <Setter Property="Margin" Value="{DynamicResource TabControlTopPlacementItemMargin}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TabItem.xaml

@@ -1,21 +1,22 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:CompileBindings="True">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
         <TabItem Header="Leaf" />
         <TabItem Header="Arch" IsSelected="True" />
+        <TabItem Header="Background" Background="Yellow"/>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
-  <Styles.Resources>
-    <x:Double x:Key="TabItemMinHeight">48</x:Double>
-    <x:Double x:Key="TabItemVerticalPipeHeight">24</x:Double>
-    <x:Double x:Key="TabItemPipeThickness">2</x:Double>
-  </Styles.Resources>
 
-  <Style Selector="TabItem">
+  <x:Double x:Key="TabItemMinHeight">48</x:Double>
+  <x:Double x:Key="TabItemVerticalPipeHeight">24</x:Double>
+  <x:Double x:Key="TabItemPipeThickness">2</x:Double>
+
+  <ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
     <Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
     <Setter Property="FontWeight" Value="{DynamicResource TabItemHeaderThemeFontWeight}" />
     <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" />
@@ -26,107 +27,103 @@
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Name="PART_LayoutRoot"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                CornerRadius="{TemplateBinding CornerRadius}"
-                Padding="{TemplateBinding Padding}">
+        <Border
+            Name="PART_LayoutRoot"            
+            Background="{TemplateBinding Background}"
+            BorderBrush="{TemplateBinding BorderBrush}"
+            BorderThickness="{TemplateBinding BorderThickness}"
+            CornerRadius="{TemplateBinding CornerRadius}"
+            Padding="{TemplateBinding Padding}">
           <Panel>
-            <ContentPresenter Name="PART_ContentPresenter"
-                              ContentTemplate="{TemplateBinding HeaderTemplate}"
-                              Content="{TemplateBinding Header}"
-                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                              FontFamily="{TemplateBinding FontFamily}"
-                              FontSize="{TemplateBinding FontSize}"
-                              FontWeight="{TemplateBinding FontWeight}" />
+            <ContentPresenter
+                Name="PART_ContentPresenter"
+                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                Content="{TemplateBinding Header}"
+                ContentTemplate="{TemplateBinding HeaderTemplate}"
+                FontFamily="{TemplateBinding FontFamily}"
+                FontSize="{TemplateBinding FontSize}"
+                FontWeight="{TemplateBinding FontWeight}" />
             <Border Name="PART_SelectedPipe"
-                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}" />
+                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                    IsVisible="False"/>
           </Panel>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!-- Nornal state -->
-  <Style Selector="TabItem /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{Binding $parent[TabItem].Background}" />
-  </Style>
-  <Style Selector="TabItem /template/ Border#PART_SelectedPipe">
-    <Setter Property="IsVisible" Value="False" />
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-  </Style>
 
-  <!-- Selected state -->
-  <!--  We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background  -->
-  <Style Selector="TabItem:selected">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
-    <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
-  </Style>
-  <Style Selector="TabItem:selected /template/ Border#PART_SelectedPipe">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
+    <!--  Selected state  -->
+    <!--  We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background  -->
+    <Style Selector="^:selected">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
+      <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
+    </Style>
+    <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
 
-  <!-- PointerOver state -->
-  <Style Selector="TabItem:pointerover /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
-  </Style>
+    <!--  PointerOver state  -->
+    <Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
+    </Style>
 
-  <!-- Selected PointerOver state -->
-  <Style Selector="TabItem:selected:pointerover /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
-  </Style>
+    <!--  Selected PointerOver state  -->
+    <Style Selector="^:selected:pointerover /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
+    </Style>
 
-  <!-- Pressed state -->
-  <Style Selector="TabItem:pressed /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
-  </Style>
+    <!--  Pressed state  -->
+    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
+    </Style>
 
-  <!-- Selected Pressed state -->
-  <Style Selector="TabItem:selected:pressed /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
-  </Style>
+    <!--  Selected Pressed state  -->
+    <Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
+    </Style>
 
-  <!-- Disabled state -->
-  <Style Selector="TabItem:disabled /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
-  </Style>
+    <!--  Disabled state  -->
+    <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
+    </Style>
 
-  <!-- TabStripPlacement States Group -->
-  <Style Selector="TabItem[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
-    <Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" />
-    <Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
-    <Setter Property="Margin" Value="0,0,2,0" />
-    <Setter Property="HorizontalAlignment" Value="Left" />
-    <Setter Property="VerticalAlignment" Value="Center" />
-  </Style>
-  <Style Selector="TabItem[TabStripPlacement=Left] /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Margin" Value="8,0,0,0" />
-  </Style>
+    <!--  TabStripPlacement States Group  -->
+    <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
+      <Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" />
+      <Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
+      <Setter Property="Margin" Value="0,0,2,0" />
+      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Left] /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Margin" Value="8,0,0,0" />
+    </Style>
 
-  <Style Selector="TabItem[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe, TabItem[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
-    <Setter Property="Height" Value="{DynamicResource TabItemPipeThickness}" />
-    <Setter Property="Margin" Value="0,0,0,2" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="VerticalAlignment" Value="Bottom" />
-  </Style>
+    <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe, ^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
+      <Setter Property="Height" Value="{DynamicResource TabItemPipeThickness}" />
+      <Setter Property="Margin" Value="0,0,0,2" />
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+    </Style>
 
-  <Style Selector="TabItem[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe">
-    <Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" />
-    <Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
-    <Setter Property="Margin" Value="2,0,0,0" />
-    <Setter Property="HorizontalAlignment" Value="Right" />
-    <Setter Property="VerticalAlignment" Value="Center" />
-  </Style>
-  <Style Selector="TabItem[TabStripPlacement=Right] /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Margin" Value="0,0,8,0" />
-  </Style>
-  <Style Selector="TabItem[TabStripPlacement=Right]">
-    <Setter Property="HorizontalContentAlignment" Value="Right" />
-  </Style>
-</Styles>
+    <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe">
+      <Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" />
+      <Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
+      <Setter Property="Margin" Value="2,0,0,0" />
+      <Setter Property="HorizontalAlignment" Value="Right" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Right] /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Margin" Value="0,0,8,0" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Right]">
+      <Setter Property="HorizontalContentAlignment" Value="Right" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TabStrip.xaml

@@ -1,4 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <TabStrip>
@@ -8,7 +9,8 @@
       </TabStrip>
     </Border>
   </Design.PreviewWith>
-  <Style Selector="TabStrip">
+
+  <ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}"
@@ -28,5 +30,5 @@
         <WrapPanel />
       </ItemsPanelTemplate>
     </Setter>
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml

@@ -1,20 +1,21 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:CompileBindings="True">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
         <TabStripItem>Leaf</TabStripItem>
         <TabStripItem IsSelected="True">Arch</TabStripItem>
+        <TabStripItem Background="Yellow">Background</TabStripItem>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
-  <Styles.Resources>
-    <x:Double x:Key="TabStripItemMinHeight">48</x:Double>
-    <x:Double x:Key="TabStripItemPipeThickness">2</x:Double>
-  </Styles.Resources>
 
-  <Style Selector="TabStripItem">
+  <x:Double x:Key="TabStripItemMinHeight">48</x:Double>
+  <x:Double x:Key="TabStripItemPipeThickness">2</x:Double>
+
+  <ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem">
     <Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
     <Setter Property="FontWeight" Value="{DynamicResource TabItemHeaderThemeFontWeight}" />
     <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" />
@@ -25,83 +26,73 @@
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Name="PART_LayoutRoot"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                CornerRadius="{TemplateBinding CornerRadius}"
-                Padding="{TemplateBinding Padding}">
+        <Border
+            Name="PART_LayoutRoot"
+            Background="{TemplateBinding Background}"
+            BorderBrush="{TemplateBinding BorderBrush}"
+            BorderThickness="{TemplateBinding BorderThickness}"
+            CornerRadius="{TemplateBinding CornerRadius}"
+            Padding="{TemplateBinding Padding}">
           <Panel>
-            <ContentPresenter Name="PART_ContentPresenter"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                              Content="{TemplateBinding Content}"
-                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                              FontFamily="{TemplateBinding FontFamily}"
-                              FontSize="{TemplateBinding FontSize}"
-                              FontWeight="{TemplateBinding FontWeight}" />
+            <ContentPresenter
+                Name="PART_ContentPresenter"
+                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                Content="{TemplateBinding Content}"
+                ContentTemplate="{TemplateBinding ContentTemplate}"
+                FontFamily="{TemplateBinding FontFamily}"
+                FontSize="{TemplateBinding FontSize}"
+                FontWeight="{TemplateBinding FontWeight}" />
             <Border Name="PART_SelectedPipe"
-                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}" />
+                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                    Height="{DynamicResource TabStripItemPipeThickness}"
+                    IsVisible="False"
+                    Margin="0,0,0,2"
+                    VerticalAlignment="Bottom"/>
           </Panel>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="TabStripItem /template/ Border#PART_SelectedPipe">
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-  </Style>
-
-  <!--  Nornal state  -->
-  <Style Selector="TabStripItem /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{Binding $parent[TabStripItem].Background}" />
-  </Style>
-  <Style Selector="TabStripItem /template/ Border#PART_SelectedPipe">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="TabStripItem /template/ Border#PART_SelectedPipe, TabItem[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
-    <Setter Property="Height" Value="{DynamicResource TabStripItemPipeThickness}" />
-    <Setter Property="Margin" Value="0,0,0,2" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="VerticalAlignment" Value="Bottom" />
-  </Style>
 
-  <!--  Selected state  -->
-  <!--  We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background  -->
-  <Style Selector="TabStripItem:selected">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
-    <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
-  </Style>
-  <Style Selector="TabStripItem:selected /template/ Border#PART_SelectedPipe">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
+    <!--  Selected state  -->
+    <!--  We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background  -->
+    <Style Selector="^:selected">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
+      <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
+    </Style>
+    <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
 
-  <!--  PointerOver state  -->
-  <Style Selector="TabStripItem:pointerover /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
-  </Style>
+    <!--  PointerOver state  -->
+    <Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
+    </Style>
 
-  <!--  Selected PointerOver state  -->
-  <Style Selector="TabStripItem:selected:pointerover /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
-  </Style>
+    <!--  Selected PointerOver state  -->
+    <Style Selector="^:selected:pointerover /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
+    </Style>
 
-  <!--  Pressed state  -->
-  <Style Selector="TabStripItem:pressed /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
-  </Style>
+    <!--  Pressed state  -->
+    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
+    </Style>
 
-  <!--  Selected Pressed state  -->
-  <Style Selector="TabStripItem:selected:pressed /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
-  </Style>
+    <!--  Selected Pressed state  -->
+    <Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
+    </Style>
 
-  <!--  Disabled state  -->
-  <Style Selector="TabStripItem:disabled /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
-    <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
-  </Style>
-</Styles>
+    <!--  Disabled state  -->
+    <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TextBox.xaml

@@ -1,42 +1,106 @@
-<Styles xmlns="https://github.com/avaloniaui" 
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:CompileBindings="True">
   <Design.PreviewWith>
     <Border Padding="20">
-      <TextBox Text="Sample"
-               FontSize="20"
-               Width="100"
-               Classes="clearButton"
-               TextAlignment="Center"/>
+      <StackPanel Spacing="20">
+        <TextBox>Left</TextBox>
+        <TextBox TextAlignment="Center">Center</TextBox>
+        <TextBox Classes="clearButton">Clear</TextBox>
+        <TextBox PasswordChar="*" Classes="revealPasswordButton">Reveal Password</TextBox>
+        <TextBox PasswordChar="*" Classes="revealPasswordButton" RevealPassword="True">Password Revealed</TextBox>
+        <TextBox Watermark="Watermark"/>
+        <TextBox Watermark="Floating Watermark" UseFloatingWatermark="True"/>
+        <TextBox Watermark="Floating Watermark" UseFloatingWatermark="True">Content</TextBox>
+      </StackPanel>
     </Border>
   </Design.PreviewWith>
-  
-  <Styles.Resources>
-    <Thickness x:Key="TextBoxTopHeaderMargin">0,0,0,4</Thickness>
-    <StreamGeometry x:Key="TextBoxClearButtonData">M 11.416016,10 20,1.4160156 18.583984,0 10,8.5839846 1.4160156,0 0,1.4160156 8.5839844,10 0,18.583985 1.4160156,20 10,11.416015 18.583984,20 20,18.583985 Z</StreamGeometry>
-    <StreamGeometry x:Key="PasswordBoxRevealButtonData">m10.051 7.0032c2.215 0 4.0105 1.7901 4.0105 3.9984s-1.7956 3.9984-4.0105 3.9984c-2.215 0-4.0105-1.7901-4.0105-3.9984s1.7956-3.9984 4.0105-3.9984zm0 1.4994c-1.3844 0-2.5066 1.1188-2.5066 2.499s1.1222 2.499 2.5066 2.499 2.5066-1.1188 2.5066-2.499-1.1222-2.499-2.5066-2.499zm0-5.0026c4.6257 0 8.6188 3.1487 9.7267 7.5613 0.10085 0.40165-0.14399 0.80877-0.54686 0.90931-0.40288 0.10054-0.81122-0.14355-0.91208-0.54521-0.94136-3.7492-4.3361-6.4261-8.2678-6.4261-3.9334 0-7.3292 2.6792-8.2689 6.4306-0.10063 0.40171-0.50884 0.64603-0.91177 0.54571s-0.648-0.5073-0.54737-0.90901c1.106-4.4152 5.1003-7.5667 9.728-7.5667z</StreamGeometry>
-    <StreamGeometry x:Key="PasswordBoxHideButtonData">m0.21967 0.21965c-0.26627 0.26627-0.29047 0.68293-0.07262 0.97654l0.07262 0.08412 4.0346 4.0346c-1.922 1.3495-3.3585 3.365-3.9554 5.7495-0.10058 0.4018 0.14362 0.8091 0.54543 0.9097 0.40182 0.1005 0.80909-0.1436 0.90968-0.5455 0.52947-2.1151 1.8371-3.8891 3.5802-5.0341l1.8096 1.8098c-0.70751 0.7215-1.1438 1.71-1.1438 2.8003 0 2.2092 1.7909 4 4 4 1.0904 0 2.0788-0.4363 2.8004-1.1438l5.9193 5.9195c0.2929 0.2929 0.7677 0.2929 1.0606 0 0.2663-0.2662 0.2905-0.6829 0.0726-0.9765l-0.0726-0.0841-6.1135-6.1142 0.0012-0.0015-1.2001-1.1979-2.8699-2.8693 2e-3 -8e-4 -2.8812-2.8782 0.0012-0.0018-1.1333-1.1305-4.3064-4.3058c-0.29289-0.29289-0.76777-0.29289-1.0607 0zm7.9844 9.0458 3.5351 3.5351c-0.45 0.4358-1.0633 0.704-1.7392 0.704-1.3807 0-2.5-1.1193-2.5-2.5 0-0.6759 0.26824-1.2892 0.7041-1.7391zm1.7959-5.7655c-1.0003 0-1.9709 0.14807-2.8889 0.425l1.237 1.2362c0.5358-0.10587 1.0883-0.16119 1.6519-0.16119 3.9231 0 7.3099 2.6803 8.2471 6.4332 0.1004 0.4018 0.5075 0.6462 0.9094 0.5459 0.4019-0.1004 0.6463-0.5075 0.5459-0.9094-1.103-4.417-5.0869-7.5697-9.7024-7.5697zm0.1947 3.5093 3.8013 3.8007c-0.1018-2.0569-1.7488-3.7024-3.8013-3.8007z</StreamGeometry>
 
-    <MenuFlyout x:Key="DefaultTextBoxContextFlyout" Placement="Bottom">
-      <MenuItem x:Name="TextBoxContextFlyoutCutItem" Header="Cut" Command="{Binding $parent[TextBox].Cut}" IsEnabled="{Binding $parent[TextBox].CanCut}" InputGesture="{x:Static TextBox.CutGesture}" />
-      <MenuItem x:Name="TextBoxContextFlyoutCopyItem" Header="Copy" Command="{Binding $parent[TextBox].Copy}" IsEnabled="{Binding $parent[TextBox].CanCopy}" InputGesture="{x:Static TextBox.CopyGesture}"/>
-      <MenuItem x:Name="TextBoxContextFlyoutPasteItem" Header="Paste" Command="{Binding $parent[TextBox].Paste}" IsEnabled="{Binding $parent[TextBox].CanPaste}" InputGesture="{x:Static TextBox.PasteGesture}"/>
-    </MenuFlyout>
+  <Thickness x:Key="TextBoxTopHeaderMargin">0,0,0,4</Thickness>
+  <StreamGeometry x:Key="TextBoxClearButtonData">M 11.416016,10 20,1.4160156 18.583984,0 10,8.5839846 1.4160156,0 0,1.4160156 8.5839844,10 0,18.583985 1.4160156,20 10,11.416015 18.583984,20 20,18.583985 Z</StreamGeometry>
+  <StreamGeometry x:Key="PasswordBoxRevealButtonData">m10.051 7.0032c2.215 0 4.0105 1.7901 4.0105 3.9984s-1.7956 3.9984-4.0105 3.9984c-2.215 0-4.0105-1.7901-4.0105-3.9984s1.7956-3.9984 4.0105-3.9984zm0 1.4994c-1.3844 0-2.5066 1.1188-2.5066 2.499s1.1222 2.499 2.5066 2.499 2.5066-1.1188 2.5066-2.499-1.1222-2.499-2.5066-2.499zm0-5.0026c4.6257 0 8.6188 3.1487 9.7267 7.5613 0.10085 0.40165-0.14399 0.80877-0.54686 0.90931-0.40288 0.10054-0.81122-0.14355-0.91208-0.54521-0.94136-3.7492-4.3361-6.4261-8.2678-6.4261-3.9334 0-7.3292 2.6792-8.2689 6.4306-0.10063 0.40171-0.50884 0.64603-0.91177 0.54571s-0.648-0.5073-0.54737-0.90901c1.106-4.4152 5.1003-7.5667 9.728-7.5667z</StreamGeometry>
+  <StreamGeometry x:Key="PasswordBoxHideButtonData">m0.21967 0.21965c-0.26627 0.26627-0.29047 0.68293-0.07262 0.97654l0.07262 0.08412 4.0346 4.0346c-1.922 1.3495-3.3585 3.365-3.9554 5.7495-0.10058 0.4018 0.14362 0.8091 0.54543 0.9097 0.40182 0.1005 0.80909-0.1436 0.90968-0.5455 0.52947-2.1151 1.8371-3.8891 3.5802-5.0341l1.8096 1.8098c-0.70751 0.7215-1.1438 1.71-1.1438 2.8003 0 2.2092 1.7909 4 4 4 1.0904 0 2.0788-0.4363 2.8004-1.1438l5.9193 5.9195c0.2929 0.2929 0.7677 0.2929 1.0606 0 0.2663-0.2662 0.2905-0.6829 0.0726-0.9765l-0.0726-0.0841-6.1135-6.1142 0.0012-0.0015-1.2001-1.1979-2.8699-2.8693 2e-3 -8e-4 -2.8812-2.8782 0.0012-0.0018-1.1333-1.1305-4.3064-4.3058c-0.29289-0.29289-0.76777-0.29289-1.0607 0zm7.9844 9.0458 3.5351 3.5351c-0.45 0.4358-1.0633 0.704-1.7392 0.704-1.3807 0-2.5-1.1193-2.5-2.5 0-0.6759 0.26824-1.2892 0.7041-1.7391zm1.7959-5.7655c-1.0003 0-1.9709 0.14807-2.8889 0.425l1.237 1.2362c0.5358-0.10587 1.0883-0.16119 1.6519-0.16119 3.9231 0 7.3099 2.6803 8.2471 6.4332 0.1004 0.4018 0.5075 0.6462 0.9094 0.5459 0.4019-0.1004 0.6463-0.5075 0.5459-0.9094-1.103-4.417-5.0869-7.5697-9.7024-7.5697zm0.1947 3.5093 3.8013 3.8007c-0.1018-2.0569-1.7488-3.7024-3.8013-3.8007z</StreamGeometry>
 
-    <ContextMenu x:Key="DefaultTextBoxContextMenu" x:Name="TextBoxContextMenu">
-      <MenuItem x:Name="TextBoxContextMenuCutItem" Header="Cut" Command="{Binding $parent[TextBox].Cut}" IsEnabled="{Binding $parent[TextBox].CanCut}" InputGesture="{x:Static TextBox.CutGesture}" />
-      <MenuItem x:Name="TextBoxContextMenuCopyItem" Header="Copy" Command="{Binding $parent[TextBox].Copy}" IsEnabled="{Binding $parent[TextBox].CanCopy}" InputGesture="{x:Static TextBox.CopyGesture}"/>
-      <MenuItem x:Name="TextBoxContextMenuPasteItem" Header="Paste" Command="{Binding $parent[TextBox].Paste}" IsEnabled="{Binding $parent[TextBox].CanPaste}" InputGesture="{x:Static TextBox.PasteGesture}"/>
-    </ContextMenu>
-  </Styles.Resources>
+  <MenuFlyout x:Key="DefaultTextBoxContextFlyout" Placement="Bottom">
+    <MenuItem x:Name="TextBoxContextFlyoutCutItem" Header="Cut" Command="{Binding $parent[TextBox].Cut}" IsEnabled="{Binding $parent[TextBox].CanCut}" InputGesture="{x:Static TextBox.CutGesture}" />
+    <MenuItem x:Name="TextBoxContextFlyoutCopyItem" Header="Copy" Command="{Binding $parent[TextBox].Copy}" IsEnabled="{Binding $parent[TextBox].CanCopy}" InputGesture="{x:Static TextBox.CopyGesture}"/>
+    <MenuItem x:Name="TextBoxContextFlyoutPasteItem" Header="Paste" Command="{Binding $parent[TextBox].Paste}" IsEnabled="{Binding $parent[TextBox].CanPaste}" InputGesture="{x:Static TextBox.PasteGesture}"/>
+  </MenuFlyout>
 
-  <Style Selector="TextBox">
+  <ContextMenu x:Key="DefaultTextBoxContextMenu" x:Name="TextBoxContextMenu">
+    <MenuItem x:Name="TextBoxContextMenuCutItem" Header="Cut" Command="{Binding $parent[TextBox].Cut}" IsEnabled="{Binding $parent[TextBox].CanCut}" InputGesture="{x:Static TextBox.CutGesture}" />
+    <MenuItem x:Name="TextBoxContextMenuCopyItem" Header="Copy" Command="{Binding $parent[TextBox].Copy}" IsEnabled="{Binding $parent[TextBox].CanCopy}" InputGesture="{x:Static TextBox.CopyGesture}"/>
+    <MenuItem x:Name="TextBoxContextMenuPasteItem" Header="Paste" Command="{Binding $parent[TextBox].Paste}" IsEnabled="{Binding $parent[TextBox].CanPaste}" InputGesture="{x:Static TextBox.PasteGesture}"/>
+  </ContextMenu>
+
+  <ControlTheme x:Key="FluentTextBoxButton" TargetType="Button">
+    <Setter Property="Background" Value="{DynamicResource TextControlButtonBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrush}" />
+    <Setter Property="Focusable" Value="False"/>
+    <Setter Property="MinWidth" Value="34" />
+    <Setter Property="Padding" Value="{DynamicResource ButtonPadding}" />
+    <Setter Property="Width" Value="{Binding $self.Bounds.Height}"/>
+    <Setter Property="TextElement.Foreground" Value="{DynamicResource TextControlButtonForeground}"/>
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate TargetType="Button">
+          <ContentPresenter x:Name="PART_ContentPresenter"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            Content="{TemplateBinding Content}"
+                            Padding="{TemplateBinding Padding}">
+          </ContentPresenter>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrushPointerOver}" />
+      <Setter Property="Foreground" Value="{DynamicResource TextControlButtonForegroundPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrushPressed}" />
+      <Setter Property="Foreground" Value="{DynamicResource TextControlButtonForegroundPressed}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ ContentPresenter">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentTextBoxToggleButton"
+                TargetType="ToggleButton"
+                BasedOn="{StaticResource FluentTextBoxButton}">
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate TargetType="ToggleButton">
+          <ContentPresenter x:Name="PART_ContentPresenter"
+                            Background="{TemplateBinding Background}"
+                            Content="{TemplateBinding Content}"
+                            Padding="{TemplateBinding Padding}">
+          </ContentPresenter>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+
+    <Style Selector="^:checked /template/ ContentPresenter, ^:indeterminate /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrushPressed}" />
+      <Setter Property="Foreground" Value="{DynamicResource TextControlButtonForegroundPressed}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox">
     <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
     <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
     <Setter Property="CaretBrush" Value="{DynamicResource TextControlForeground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
     <Setter Property="SelectionBrush" Value="{DynamicResource TextControlSelectionHighlightColor}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />    
+    <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
@@ -62,43 +126,50 @@
             <Border
               Margin="{TemplateBinding BorderThickness}">
               <Grid ColumnDefinitions="Auto,*,Auto" >
-                <ContentPresenter Grid.Column="0" Grid.ColumnSpan="1" Content="{TemplateBinding InnerLeftContent}"/>
-                <DockPanel x:Name="PART_InnerDockPanel" Grid.Column="1" Grid.ColumnSpan="1" Margin="{TemplateBinding Padding}">
+                <ContentPresenter Grid.Column="0"
+                                  Grid.ColumnSpan="1"
+                                  Content="{TemplateBinding InnerLeftContent}"/>
+                <DockPanel x:Name="PART_InnerDockPanel"
+                           Grid.Column="1"
+                           Grid.ColumnSpan="1"
+                           Cursor="IBeam"
+                           Margin="{TemplateBinding Padding}">
                   <TextBlock Name="PART_FloatingWatermark"
                              Foreground="{DynamicResource SystemAccentColor}"
                              FontSize="{TemplateBinding FontSize}"
+                             IsVisible="False"
                              Text="{TemplateBinding Watermark}"
                              DockPanel.Dock="Top" />
                   <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
                                 VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
                                 IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
                                 AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}">
-                      <Panel>
-                        <TextBlock Name="PART_Watermark"
-                                Opacity="0.5"
-                                Text="{TemplateBinding Watermark}"
-                                TextAlignment="{TemplateBinding TextAlignment}"
-                                TextWrapping="{TemplateBinding TextWrapping}"
-                                IsVisible="{TemplateBinding Text, Converter={x:Static StringConverters.IsNullOrEmpty}}"
-                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
-                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
-                        <TextPresenter Name="PART_TextPresenter"
-                                      Text="{TemplateBinding Text, Mode=TwoWay}"
-                                      CaretIndex="{TemplateBinding CaretIndex}"
-                                      SelectionStart="{TemplateBinding SelectionStart}"
-                                      SelectionEnd="{TemplateBinding SelectionEnd}"
-                                      TextAlignment="{TemplateBinding TextAlignment}"
-                                      TextWrapping="{TemplateBinding TextWrapping}"
-                                      LineHeight="{TemplateBinding LineHeight}"
-                                      PasswordChar="{TemplateBinding PasswordChar}"
-                                      RevealPassword="{TemplateBinding RevealPassword}"
-                                      SelectionBrush="{TemplateBinding SelectionBrush}"
-                                      SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
-                                      CaretBrush="{TemplateBinding CaretBrush}"
-                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
-                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
-                      </Panel>
-                    </ScrollViewer>
+                    <Panel>
+                      <TextBlock Name="PART_Watermark"
+                              Opacity="0.5"
+                              Text="{TemplateBinding Watermark}"
+                              TextAlignment="{TemplateBinding TextAlignment}"
+                              TextWrapping="{TemplateBinding TextWrapping}"
+                              IsVisible="{TemplateBinding Text, Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                      <TextPresenter Name="PART_TextPresenter"
+                                    Text="{TemplateBinding Text, Mode=TwoWay}"
+                                    CaretIndex="{TemplateBinding CaretIndex}"
+                                    SelectionStart="{TemplateBinding SelectionStart}"
+                                    SelectionEnd="{TemplateBinding SelectionEnd}"
+                                    TextAlignment="{TemplateBinding TextAlignment}"
+                                    TextWrapping="{TemplateBinding TextWrapping}"
+                                    LineHeight="{TemplateBinding LineHeight}"
+                                    PasswordChar="{TemplateBinding PasswordChar}"
+                                    RevealPassword="{TemplateBinding RevealPassword}"
+                                    SelectionBrush="{TemplateBinding SelectionBrush}"
+                                    SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                    CaretBrush="{TemplateBinding CaretBrush}"
+                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    </Panel>
+                  </ScrollViewer>
                 </DockPanel>
                 <ContentPresenter Grid.Column="2" Grid.ColumnSpan="1" Content="{TemplateBinding InnerRightContent}"/>
               </Grid>
@@ -107,187 +178,85 @@
         </DataValidationErrors>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!-- Disabled State -->
-  <Style Selector="TextBox:disabled">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlForegroundDisabled}" />
-  </Style>
 
-  <Style Selector="TextBox:disabled /template/ Border#PART_BorderElement">
-    <Setter Property="Background" Value="{DynamicResource TextControlBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
-  </Style>
+    <!-- Disabled State -->
+    <Style Selector="^:disabled">
+      <Setter Property="Foreground" Value="{DynamicResource TextControlForegroundDisabled}" />
 
-  <Style Selector="TextBox:disabled /template/ TextBlock#PART_Watermark, TextBox:disabled /template/ TextBlock#PART_FloatingWatermark">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundDisabled}" />
-  </Style>
+      <Style Selector="^ /template/ Border#PART_BorderElement">
+        <Setter Property="Background" Value="{DynamicResource TextControlBackgroundDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
+      </Style>
 
-  <!-- PointerOver State-->
-  <Style Selector="TextBox:pointerover">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlForegroundPointerOver}" />
-  </Style>
+      <Style Selector="^ /template/ TextBlock#PART_Watermark, ^ /template/ TextBlock#PART_FloatingWatermark">
+        <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundDisabled}" />
+      </Style>
+    </Style>
 
-  <Style Selector="TextBox:pointerover /template/ Border#PART_BorderElement">
-    <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushPointerOver}"/>
-    <Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
-  </Style>
+    <!-- PointerOver State-->
+    <Style Selector="^:pointerover">
+      <Setter Property="Foreground" Value="{DynamicResource TextControlForegroundPointerOver}" />
 
-  <Style Selector="TextBox:pointerover /template/ TextBlock#PART_Watermark, TextBox:pointerover /template/ TextBlock#PART_FloatingWatermark">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundPointerOver}" />
-  </Style>
+      <Style Selector="^ /template/ Border#PART_BorderElement">
+        <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushPointerOver}"/>
+        <Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
+      </Style>
 
-  <!-- Focused State -->
-  <Style Selector="TextBox:focus">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlForegroundFocused}" />
-  </Style>
+      <Style Selector="^ /template/ TextBlock#PART_Watermark">
+        <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundPointerOver}" />
+      </Style>
+    </Style>
 
-  <Style Selector="TextBox:focus /template/ TextBlock#PART_Watermark, TextBox:focus /template/ TextBlock#PART_FloatingWatermark">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundFocused}" />
-  </Style>
+    <!-- Focused State -->
+    <Style Selector="^:focus">
+      <Setter Property="Foreground" Value="{DynamicResource TextControlForegroundFocused}" />
 
-  <Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
-    <Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushFocused}"/>
-    <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThicknessFocused}" />
-  </Style>
+      <Style Selector="^ /template/ TextBlock#PART_Watermark">
+        <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundFocused}" />
+      </Style>
 
-  <Style Selector="TextBox:error /template/ Border#PART_BorderElement">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
-  </Style>
+      <Style Selector="^ /template/ Border#PART_BorderElement">
+        <Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushFocused}"/>
+        <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThicknessFocused}" />
+      </Style>
+    </Style>
 
-  <Style Selector="TextBox /template/ DockPanel#PART_InnerDockPanel">
-    <Setter Property="Cursor" Value="IBeam" />
-  </Style>
-  
-  <Style Selector="TextBox /template/ TextBlock#PART_FloatingWatermark">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="TextBox[UseFloatingWatermark=true]:not(TextBox:empty) /template/ TextBlock#PART_FloatingWatermark">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
+    <Style Selector="^:error /template/ Border#PART_BorderElement">
+      <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
+    </Style>
 
-  <Style Selector="TextBox.revealPasswordButton[AcceptsReturn=False][IsReadOnly=False]:not(TextBox:empty)">
-    <Setter Property="InnerRightContent">
-      <Template>
-        <ToggleButton Classes="passwordBoxRevealButton"
-                      IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}" />
-      </Template>
-    </Setter>
-  </Style>
+    <Style Selector="^[UseFloatingWatermark=true]:not(:empty) /template/ TextBlock#PART_FloatingWatermark">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
 
-  <Style Selector="TextBox.clearButton[AcceptsReturn=False][IsReadOnly=False]:focus:not(TextBox:empty)">
-    <Setter Property="InnerRightContent">
-      <Template>
-        <Button Classes="textBoxClearButton"
-                Command="{Binding $parent[TextBox].Clear}" />
-      </Template>
-    </Setter>
-  </Style>
-
-  <Style Selector="ToggleButton.passwordBoxRevealButton">
-    <Setter Property="Template">
-      <Setter.Value>
-        <ControlTemplate TargetType="ToggleButton">
-          <Border x:Name="PART_ButtonLayoutBorder"
-                  BorderThickness="{TemplateBinding BorderThickness}">
+    <Style Selector="^.revealPasswordButton[AcceptsReturn=False][IsReadOnly=False]:not(TextBox:empty)">
+      <Setter Property="InnerRightContent">
+        <Template>
+          <ToggleButton Theme="{StaticResource FluentTextBoxToggleButton}"
+                        IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}">
             <Panel>
-              <Path x:Name="PART_GlyphElement_Reveal"
-                    Data="{StaticResource PasswordBoxRevealButtonData}"
-                    Height="8"
-                    Width="12"
-                    Stretch="Uniform"
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Center" />
-              <Path x:Name="PART_GlyphElement_Hide"
-                    Data="{StaticResource PasswordBoxHideButtonData}"
-                    Height="12"
-                    Width="12"
-                    Stretch="Uniform"
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Center" />
+              <PathIcon Data="{StaticResource PasswordBoxRevealButtonData}"
+                        Height="8" Width="12"
+                        IsVisible="{Binding $parent[ToggleButton].!IsChecked}"/>
+              <PathIcon Data="{StaticResource PasswordBoxHideButtonData}"
+                        Height="12" Width="12"
+                        IsVisible="{Binding $parent[ToggleButton].IsChecked}"/>
             </Panel>
-          </Border>
-        </ControlTemplate>
-      </Setter.Value>
-    </Setter>
-  </Style>
-
-  <Style Selector="Button.textBoxClearButton">
-    <Setter Property="Template">
-      <Setter.Value>
-        <ControlTemplate TargetType="Button">
-          <Border x:Name="PART_ButtonLayoutBorder"
-                  BorderThickness="{TemplateBinding BorderThickness}">
-            <Path x:Name="PART_GlyphElement"
-                  Data="{StaticResource TextBoxClearButtonData}"
-                  Height="10"
-                  Width="10"
-                  Stretch="Uniform"
-                  VerticalAlignment="Center"
-                  HorizontalAlignment="Center"/>
-          </Border>
-        </ControlTemplate>
-      </Setter.Value>
-    </Setter>
-  </Style>
-
-  <!-- TextBox.Button Normal State -->
-  <Style Selector="Button.textBoxClearButton, ToggleButton.passwordBoxRevealButton">
-    <Setter Property="MinWidth" Value="34" />
-    <Setter Property="Width" Value="{Binding $self.Bounds.Height}"/>
-    <Setter Property="Focusable" Value="False" />
-    <Setter Property="VerticalAlignment" Value="Stretch" />    
-  </Style>
-  <Style Selector="Button.textBoxClearButton /template/ Border#PART_ButtonLayoutBorder,
-                   ToggleButton.passwordBoxRevealButton /template/ Border#PART_ButtonLayoutBorder">
-    <Setter Property="Background" Value="{DynamicResource TextControlButtonBackground}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrush}" />
-  </Style>
-  <Style Selector="Button.textBoxClearButton /template/ Path#PART_GlyphElement,
-                   ToggleButton.passwordBoxRevealButton /template/ Path#PART_GlyphElement_Reveal,
-                   ToggleButton.passwordBoxRevealButton /template/ Path#PART_GlyphElement_Hide">
-    <Setter Property="Fill" Value="{DynamicResource TextControlButtonForeground}" />
-  </Style>
-
-  <!-- TextBox.Button PointerOver State -->
-  <Style Selector="Button.textBoxClearButton:pointerover /template/ Border#PART_ButtonLayoutBorder,
-                   ToggleButton.passwordBoxRevealButton:pointerover /template/ Border#PART_ButtonLayoutBorder">
-    <Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrushPointerOver}" />
-  </Style>
-  <Style Selector="Button.textBoxClearButton:pointerover /template/ Path#PART_GlyphElement,
-                   ToggleButton.passwordBoxRevealButton:pointerover /template/ Path#PART_GlyphElement_Reveal,
-                   ToggleButton.passwordBoxRevealButton:pointerover /template/ Path#PART_GlyphElement_Hide">
-    <Setter Property="Fill" Value="{DynamicResource TextControlButtonForegroundPointerOver}" />
-  </Style>
-
-  <!-- TextBox.Button Pressed State -->
-  <Style Selector="Button.textBoxClearButton:pressed /template/ Border#PART_ButtonLayoutBorder,
-                   ToggleButton.passwordBoxRevealButton:pressed /template/ Border#PART_ButtonLayoutBorder,
-                   ToggleButton.passwordBoxRevealButton:checked /template/ Border#PART_ButtonLayoutBorder,
-                   ToggleButton.passwordBoxRevealButton:indeterminate /template/ Border#PART_ButtonLayoutBorder">
-    <Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrushPressed}" />
-  </Style>
-  <Style Selector="Button.textBoxClearButton:pressed /template/ Path#PART_GlyphElement,
-                   ToggleButton.passwordBoxRevealButton:pressed /template/ Path#PART_GlyphElement_Reveal,
-                   ToggleButton.passwordBoxRevealButton:checked /template/ Path#PART_GlyphElement_Hide,
-                   ToggleButton.passwordBoxRevealButton:indeterminate /template/ Path#PART_GlyphElement_Reveal">
-    <Setter Property="Fill" Value="{DynamicResource TextControlButtonForegroundPressed}" />
-  </Style>
-
-  <!-- TextBox.Button Disabled State -->
-  <Style Selector="Button.textBoxClearButton:disabled /template/ Border#PART_ButtonLayoutBorder,
-                   ToggleButton.passwordBoxRevealButton:disabled /template/ Border#PART_ButtonLayoutBorder">
-    <Setter Property="Opacity" Value="0" />
-  </Style>
-
-  <Style Selector="ToggleButton.passwordBoxRevealButton:not(ToggleButton:checked) /template/ Path#PART_GlyphElement_Hide">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="ToggleButton.passwordBoxRevealButton:checked /template/ Path#PART_GlyphElement_Reveal">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
+          </ToggleButton>
+        </Template>
+      </Setter>
+    </Style>
 
-</Styles>
+    <Style Selector="^.clearButton[AcceptsReturn=False][IsReadOnly=False]:focus:not(TextBox:empty)">
+      <Setter Property="InnerRightContent">
+        <Template>
+          <Button Theme="{StaticResource FluentTextBoxButton}"
+                  Command="{Binding $parent[TextBox].Clear}">
+            <PathIcon Data="{StaticResource TextBoxClearButtonData}" Height="10" Width="10"/>
+          </Button>
+        </Template>
+      </Setter>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TimePicker.xaml

@@ -1,38 +1,84 @@
-<!--
+<!--
 // (c) Copyright Microsoft Corporation.
 // This source is subject to the Microsoft Public License (Ms-PL).
 // Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
 // All other rights reserved.
 -->
 
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sys="clr-namespace:System;assembly=netstandard"
         x:CompileBindings="True">
-  <Styles.Resources>
-    <x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double>
-    <x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double>
-    <Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness>
-    <Thickness x:Key="TimePickerTopHeaderMargin">0,0,0,4</Thickness>
-    <x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double>
-    <x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
-    <x:Double x:Key="TimePickerThemeMinWidth">242</x:Double>
-    <x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double>
-    <Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
-    <Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness>
-  </Styles.Resources>
+  <Design.PreviewWith>
+    <Border Padding="20" Height="500">
+      <StackPanel Spacing="20" VerticalAlignment="Center">
+        <TimePicker />
+        <TimePicker CornerRadius="10" />
+        <TimePicker IsEnabled="False"/>
+        <TimePicker>
+          <DataValidationErrors.Error>
+            <sys:Exception>
+              <x:Arguments>
+                <x:String>Error</x:String>
+              </x:Arguments>
+            </sys:Exception>
+          </DataValidationErrors.Error>
+        </TimePicker>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
 
-  <Style Selector="ListBoxItem.DateTimePickerItem.HourItem">
-    <Setter Property="Padding" Value="{DynamicResource TimePickerFlyoutPresenterItemPadding}" />
-  </Style>
-  <Style Selector="ListBoxItem.DateTimePickerItem.MinuteItem">
-    <Setter Property="Padding" Value="{DynamicResource TimePickerFlyoutPresenterItemPadding}" />
-  </Style>
-  <Style Selector="ListBoxItem.DateTimePickerItem.TimePeriodItem">
-    <Setter Property="Padding" Value="{DynamicResource TimePickerFlyoutPresenterItemPadding}" />
-  </Style>
+  <x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double>
+  <x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double>
+  <Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness>
+  <Thickness x:Key="TimePickerTopHeaderMargin">0,0,0,4</Thickness>
+  <x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double>
+  <x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
+  <x:Double x:Key="TimePickerThemeMinWidth">242</x:Double>
+  <x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double>
+  <Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
+  <Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness>
 
-  <Style Selector="TimePicker">    
+  <ControlTheme x:Key="FluentTimePickerFlyoutButton" TargetType="Button">
+    <Setter Property="RenderTransform" Value="none" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          Background="{TemplateBinding Background}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          Foreground="{TemplateBinding Foreground}"
+                          HorizontalContentAlignment="Stretch"
+                          VerticalContentAlignment="Stretch"
+                          CornerRadius="{TemplateBinding CornerRadius}"/>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}"/>
+      <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}"/>
+      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}"/>
+    </Style>
+
+    <Style Selector="^:pressed">
+      <Setter Property="RenderTransform" Value="scale(0.98)" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}"/>
+      <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}"/>
+      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}"/>
+    </Style>
+
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/>
+      <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/>
+      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/>
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
     <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}"/>
@@ -46,17 +92,18 @@
         <DataValidationErrors>
           <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
             <ContentPresenter x:Name="HeaderContentPresenter"
-                   Grid.Row="0"
-                   Content="{TemplateBinding Header}"
-                   ContentTemplate="{TemplateBinding HeaderTemplate}"
-                   Margin="{DynamicResource TimePickerTopHeaderMargin}"
-                   MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
-                   Foreground="{DynamicResource TimePickerHeaderForeground}"
-                   HorizontalAlignment="Stretch"
-                   VerticalAlignment="Top" />
+                              Grid.Row="0"
+                              Content="{TemplateBinding Header}"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}"
+                              Margin="{DynamicResource TimePickerTopHeaderMargin}"
+                              MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
+                              Foreground="{DynamicResource TimePickerHeaderForeground}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Top" />
 
             <Button x:Name="FlyoutButton"
                     Grid.Row="1"
+                    Theme="{StaticResource FluentTimePickerFlyoutButton}"
                     Foreground="{TemplateBinding Foreground}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -66,26 +113,14 @@
                     MinWidth="{DynamicResource TimePickerThemeMinWidth}"
                     MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
                     HorizontalAlignment="Stretch"
-                    HorizontalContentAlignment="Stretch"
-                    VerticalAlignment="Top"
-                    VerticalContentAlignment="Stretch">
-              <Button.Template>
-                <ControlTemplate>
-                  <ContentPresenter Name="ContentPresenter"
-                                  BorderBrush="{TemplateBinding BorderBrush}"
-                                  Background="{TemplateBinding Background}"
-                                  BorderThickness="{TemplateBinding BorderThickness}"
-                                  CornerRadius="{TemplateBinding CornerRadius}"
-                                  Content="{TemplateBinding Content}"
-                                  Foreground="{TemplateBinding Foreground}"
-                                  HorizontalContentAlignment="Stretch"
-                                  VerticalContentAlignment="Stretch" />
-                </ControlTemplate>
-              </Button.Template>
+                    VerticalAlignment="Top">
 
               <Grid Name="FlyoutButtonContentGrid">
                 <!--Ignore col defs here, set in code-->
-                <Border x:Name="FirstPickerHost" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <Border x:Name="FirstPickerHost"
+                        Grid.Column="0"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
                   <TextBlock x:Name="HourTextBlock"
                       HorizontalAlignment="Center"
                       Padding="{DynamicResource TimePickerHostPadding}"
@@ -95,39 +130,47 @@
                 </Border>
 
                 <Rectangle Name="FirstColumnDivider"
-                    Fill="{DynamicResource TimePickerSpacerFill}"
-                    HorizontalAlignment="Center"
-                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
-                    Grid.Column="1" />
+                           Fill="{DynamicResource TimePickerSpacerFill}"
+                           HorizontalAlignment="Center"
+                           Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                           Grid.Column="1" />
 
-                <Border x:Name="SecondPickerHost" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <Border x:Name="SecondPickerHost"
+                        Grid.Column="2"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
                   <TextBlock x:Name="MinuteTextBlock"
-                      HorizontalAlignment="Center"
-                      Padding="{DynamicResource TimePickerHostPadding}"
-                      FontFamily="{TemplateBinding FontFamily}"
-                      FontWeight="{TemplateBinding FontWeight}"
-                      FontSize="{TemplateBinding FontSize}"/>
+                             HorizontalAlignment="Center"
+                             Padding="{DynamicResource TimePickerHostPadding}"
+                             FontFamily="{TemplateBinding FontFamily}"
+                             FontWeight="{TemplateBinding FontWeight}"
+                             FontSize="{TemplateBinding FontSize}"/>
                 </Border>
 
                 <Rectangle Name="SecondColumnDivider"
-                    Fill="{DynamicResource TimePickerSpacerFill}"
-                    HorizontalAlignment="Center"
-                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
-                    Grid.Column="3" />
+                           Fill="{DynamicResource TimePickerSpacerFill}"
+                           HorizontalAlignment="Center"
+                           Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                           Grid.Column="3" />
 
-                <Border x:Name="ThirdPickerHost" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <Border x:Name="ThirdPickerHost"
+                        Grid.Column="4"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
                   <TextBlock x:Name="PeriodTextBlock"
-                      HorizontalAlignment="Center"
-                      Padding="{DynamicResource TimePickerHostPadding}"
-                      FontFamily="{TemplateBinding FontFamily}"
-                      FontWeight="{TemplateBinding FontWeight}"
-                      FontSize="{TemplateBinding FontSize}" />
+                             HorizontalAlignment="Center"
+                             Padding="{DynamicResource TimePickerHostPadding}"
+                             FontFamily="{TemplateBinding FontFamily}"
+                             FontWeight="{TemplateBinding FontWeight}"
+                             FontSize="{TemplateBinding FontSize}" />
                 </Border>
               </Grid>
             </Button>
 
-            <Popup Name="Popup" WindowManagerAddShadowHint="False"
-                   IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}"
+            <Popup Name="Popup"
+                   WindowManagerAddShadowHint="False"
+                   IsLightDismissEnabled="True"
+                   PlacementTarget="{TemplateBinding}"
                    PlacementMode="Bottom">
               <TimePickerPresenter Name="PickerPresenter" />
             </Popup>
@@ -136,45 +179,28 @@
         </DataValidationErrors>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="TimePicker:disabled /template/ ContentPresenter#HeaderContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}"/>
-  </Style>
-  <Style Selector="TimePicker:disabled /template/ Rectangle">
-    <Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}"/>
-  </Style>
 
-  <Style Selector="TimePicker /template/ Button#FlyoutButton:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}"/>
-    <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}"/>
-  </Style>
+    <Style Selector="^:disabled /template/ ContentPresenter#HeaderContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}"/>
+    </Style>
 
-  <Style Selector="TimePicker /template/ Button:pressed /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}"/>
-    <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}"/>
-  </Style>
+    <Style Selector="^:disabled /template/ Rectangle">
+      <Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}"/>
+    </Style>
 
-  <Style Selector="TimePicker /template/ Button:disabled /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/>
-    <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/>
-  </Style>
+    <Style Selector="^:hasnotime /template/ Button#FlyoutButton TextBlock">
+      <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
+    </Style>
 
-  <Style Selector="TimePicker:hasnotime /template/ Button#FlyoutButton TextBlock">
-    <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
-  </Style>
-  
-  <Style Selector="TimePicker:error /template/ Button#FlyoutButton /template/ ContentPresenter">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
-  </Style>
+    <Style Selector="^:error /template/ Button#FlyoutButton">
+      <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
+    </Style>
+  </ControlTheme>
 
-  <Style Selector="TimePickerPresenter">
+  <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
     <Setter Property="Width" Value="242" />
     <Setter Property="MinWidth" Value="242" />
-    <Setter Property="MaxHeight" Value="398" />    
+    <Setter Property="MaxHeight" Value="398" />
     <Setter Property="FontWeight" Value="Normal" />
     <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
@@ -196,97 +222,95 @@
                 <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                               VerticalScrollBarVisibility="Hidden">
                   <DateTimePickerPanel Name="HourSelector"
-                                          PanelType="Hour"
-                                          ShouldLoop="True"
-                                          ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
+                                       PanelType="Hour"
+                                       ShouldLoop="True"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
                 </ScrollViewer>
-                <RepeatButton Name="HourUpButton"
-                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
-                <RepeatButton Name="HourDownButton"
-                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
-
+                <RepeatButton Name="HourUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="HourDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
               </Panel>
 
               <Panel Name="MinuteHost" Grid.Column="2">
                 <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                               VerticalScrollBarVisibility="Hidden">
                   <DateTimePickerPanel Name="MinuteSelector"
-                                          PanelType="Minute"
-                                          ShouldLoop="True"
-                                          ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
+                                       PanelType="Minute"
+                                       ShouldLoop="True"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
                 </ScrollViewer>
-                <RepeatButton Name="MinuteUpButton"
-                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
-                <RepeatButton Name="MinuteDownButton"
-                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
-
+                <RepeatButton Name="MinuteUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="MinuteDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
               </Panel>
 
               <Panel Name="PeriodHost" Grid.Column="4">
                 <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                               VerticalScrollBarVisibility="Hidden">
                   <DateTimePickerPanel Name="PeriodSelector"
-                                          PanelType="TimePeriod"
-                                          ShouldLoop="False"
-                                          ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
+                                       PanelType="TimePeriod"
+                                       ShouldLoop="False"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
                 </ScrollViewer>
-                <RepeatButton Name="PeriodUpButton"
-                              Classes="DateTimeFlyoutButtonStyle UpButton"/>
-                <RepeatButton Name="PeriodDownButton"
-                              Classes="DateTimeFlyoutButtonStyle DownButton"/>
-
+                <RepeatButton Name="PeriodUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
+                <RepeatButton Name="PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
               </Panel>
 
               <Rectangle x:Name="HighlightRect" ZIndex="-1"
-                      Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
-                      Grid.Column="0"
-                      Grid.ColumnSpan="5"
-                      VerticalAlignment="Center"
-                      Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" />
-
+                         Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
+                         Grid.Column="0"
+                         Grid.ColumnSpan="5"
+                         VerticalAlignment="Center"
+                         Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" />
               <Rectangle Name="FirstSpacer"
-                  Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
-                  HorizontalAlignment="Center"
-                  Width="{DynamicResource TimePickerSpacerThemeWidth}"
-                  Grid.Column="1" />
-
+                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                         HorizontalAlignment="Center"
+                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                         Grid.Column="1" />
               <Rectangle Name="SecondSpacer"
-                  Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
-                  HorizontalAlignment="Center"
-                  Width="{DynamicResource TimePickerSpacerThemeWidth}"
-                  Grid.Column="3" />
+                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                         HorizontalAlignment="Center"
+                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                         Grid.Column="3" />
             </Grid>
 
-            <Grid Grid.Row="1" Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
-                  Name="AcceptDismissHostGrid" ColumnDefinitions="*,*">
-              <Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}"
-                      VerticalAlignment="Top"
-                      Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
-                      Grid.ColumnSpan="2" />
-              <Button Name="AcceptButton" Grid.Column="0" Classes="DateTimeFlyoutButtonStyle"
-                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                <Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round"
-                      StrokeThickness="0.75" Data="M0.5,8.5 5,13.5 15.5,3" />
+            <Grid Name="AcceptDismissGrid"
+                  Grid.Row="1"
+                  ColumnDefinitions="*,*">
+              <Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}" 
+                         VerticalAlignment="Top"
+                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
+                         Grid.ColumnSpan="2"/>
+              <Button Name="AcceptButton"
+                      Grid.Column="0"
+                      Theme="{StaticResource FluentDateTimePickerButton}"
+                      Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch">
+                <Path Stroke="{Binding $parent[Button].Foreground}"
+                      StrokeLineCap="Round"
+                      StrokeThickness="0.75"
+                      Data="M0.5,8.5 5,13.5 15.5,3" />
               </Button>
-              <Button Name="DismissButton" Grid.Column="1" Classes="DateTimeFlyoutButtonStyle"
-                         FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                <Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round"
-                      StrokeThickness="0.75" Data="M2,2 14,14 M2,14 14 2" />
+              <Button Name="DismissButton" 
+                      Grid.Column="1" 
+                      Theme="{StaticResource FluentDateTimePickerButton}"
+                      Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      FontSize="16" 
+                      HorizontalAlignment="Stretch" 
+                      VerticalAlignment="Stretch">
+                <Path Stroke="{Binding $parent[Button].Foreground}" 
+                      StrokeLineCap="Round"
+                      StrokeThickness="0.75" 
+                      Data="M2,2 14,14 M2,14 14 2" />
               </Button>
             </Grid>
-
           </Grid>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="TimePickerPresenter /template/ Panel RepeatButton">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-
-  <Style Selector="TimePickerPresenter /template/ Panel:pointerover RepeatButton">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
-  
-</Styles>
+    
+    <Style Selector="^ /template/ Panel">
+      <Style Selector="^:pointerover RepeatButton">
+        <Setter Property="IsVisible" Value="True" />
+      </Style>
+    </Style>  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TitleBar.xaml

@@ -1,53 +1,59 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Design.PreviewWith>
-    <Border>
-      <TitleBar Background="SkyBlue" Height="30" Width="300" Foreground="Black" />
-    </Border>
-  </Design.PreviewWith>
-  <Style Selector="TitleBar">
-    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>    
-    <Setter Property="VerticalAlignment" Value="Top" />
-    <Setter Property="HorizontalAlignment" Value="Stretch" />
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Panel HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="Stretch">
-          <Panel x:Name="PART_MouseTracker" Height="1" VerticalAlignment="Top" />
-          <Panel x:Name="PART_Container">
-            <Border x:Name="PART_Background" Background="{TemplateBinding Background}" />
-            <CaptionButtons x:Name="PART_CaptionButtons" VerticalAlignment="Top" HorizontalAlignment="Right" Foreground="{TemplateBinding Foreground}" />
-          </Panel>
-        </Panel>
-      </ControlTemplate>
-    </Setter>
-  </Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+      <Border Height="30" Width="300">
+        <TitleBar Background="SkyBlue" Foreground="Black" />
+      </Border>
+    </Design.PreviewWith>
 
-  <Style Selector="TitleBar:fullscreen">
-    <Setter Property="Background" Value="{DynamicResource SystemAccentColor}" />
-  </Style>
+    <ControlTheme x:Key="{x:Type TitleBar}" TargetType="TitleBar">
+      <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+      <Setter Property="VerticalAlignment" Value="Top" />
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
+      <Setter Property="Background" Value="Transparent" />
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Panel HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
+                 VerticalAlignment="Stretch">
+            <Panel x:Name="PART_MouseTracker" 
+                   Height="1" 
+                   VerticalAlignment="Top" />
+            <Panel x:Name="PART_Container">
+              <Border x:Name="PART_Background"
+                      Background="{TemplateBinding Background}"
+                      IsHitTestVisible="False"/>
+              <CaptionButtons x:Name="PART_CaptionButtons"
+                              VerticalAlignment="Top" 
+                              HorizontalAlignment="Right"
+                              Foreground="{TemplateBinding Foreground}" />
+            </Panel>
+          </Panel>
+        </ControlTemplate>
+      </Setter>
 
-  <Style Selector="TitleBar /template/ Border#PART_Background">
-    <Setter Property="IsHitTestVisible" Value="False" />
-  </Style>
+      <Style Selector="^:fullscreen">
+        <Setter Property="Background" Value="{DynamicResource SystemAccentColor}" />
+      </Style>
 
-  <Style Selector="TitleBar:fullscreen /template/ Border#PART_Background">
-    <Setter Property="IsHitTestVisible" Value="True" />
-  </Style>
+      <Style Selector="^:fullscreen /template/ Border#PART_Background">
+        <Setter Property="IsHitTestVisible" Value="True" />
+      </Style>
 
-  <Style Selector="TitleBar:fullscreen /template/ Panel#PART_MouseTracker">
-    <Setter Property="Background" Value="Transparent" />
-  </Style>
+      <Style Selector="^:fullscreen /template/ Panel#PART_MouseTracker">
+        <Setter Property="Background" Value="Transparent" />
+      </Style>
 
-  <Style Selector="TitleBar:fullscreen /template/ Panel#PART_Container">
-    <Setter Property="RenderTransform" Value="translateY(-30px)" />
-    <Setter Property="Transitions">
-      <Transitions>
-        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:.25" />
-      </Transitions>
-    </Setter>
-  </Style>
+      <Style Selector="^:fullscreen /template/ Panel#PART_Container">
+        <Setter Property="RenderTransform" Value="translateY(-30px)" />
+        <Setter Property="Transitions">
+          <Transitions>
+            <TransformOperationsTransition Property="RenderTransform" Duration="0:0:.25" />
+          </Transitions>
+        </Setter>
+      </Style>
 
-  <Style Selector="TitleBar:fullscreen:pointerover /template/ Panel#PART_Container">
-    <Setter Property="RenderTransform" Value="none" />
-  </Style>
-</Styles>
+      <Style Selector="^:fullscreen:pointerover /template/ Panel#PART_Container">
+        <Setter Property="RenderTransform" Value="none" />
+      </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ToggleButton.xaml

@@ -1,5 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
@@ -10,10 +10,9 @@
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <Thickness x:Key="ButtonPadding">8,5,8,6</Thickness>
-  </Styles.Resources>
-  <Style Selector="ToggleButton">
+  <Thickness x:Key="ButtonPadding">8,5,8,6</Thickness>
+
+  <ControlTheme x:Key="{x:Type ToggleButton}" TargetType="ToggleButton">
     <Setter Property="Background" Value="{DynamicResource ToggleButtonBackground}" />
     <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForeground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrush}" />
@@ -21,9 +20,16 @@
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="Padding" Value="{DynamicResource ButtonPadding}" />
     <Setter Property="HorizontalAlignment" Value="Left" />
-    <Setter Property="VerticalAlignment" Value="Center" />    
+    <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="FontWeight" Value="Normal" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="RenderTransform" Value="none" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:.075" />
+      </Transitions>
+    </Setter>
+
     <Setter Property="Template">
       <ControlTemplate>
         <ContentPresenter x:Name="PART_ContentPresenter"
@@ -39,75 +45,79 @@
                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
       </ControlTemplate>
     </Setter>
-  </Style>
-  
-  <Style Selector="ToggleButton /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-  </Style>
 
-  <Style Selector="ToggleButton:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushPointerOver}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundPointerOver}" />
-  </Style>
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushPointerOver}" />
+      <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pressed">
+      <Setter Property="RenderTransform" Value="scale(0.98)" />
+    </Style>
 
-  <Style Selector="ToggleButton:pressed  /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushPressed}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundPressed}" />
-  </Style>
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushPressed}" />
+      <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundPressed}" />
+    </Style>
 
-  <Style Selector="ToggleButton:disabled /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushDisabled}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundDisabled}" />
-  </Style>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushDisabled}" />
+      <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundDisabled}" />
+    </Style>
 
-  <Style Selector="ToggleButton:checked /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundChecked}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushChecked}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundChecked}" />
-  </Style>
+    <Style Selector="^:indeterminate">
+      <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundIndeterminate}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushIndeterminate}" />
+        <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundIndeterminate}" />
+      </Style>
 
-  <Style Selector="ToggleButton:checked:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushCheckedPointerOver}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedPointerOver}" />
-  </Style>
+      <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundIndeterminatePointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushIndeterminatePointerOver}" />
+        <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundIndeterminatePointerOver}" />
+      </Style>
 
-  <Style Selector="ToggleButton:checked:pressed /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushCheckedPressed}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedPressed}" />
-  </Style>
+      <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundIndeterminatePressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushIndeterminatePressed}" />
+        <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundIndeterminatePressed}" />
+      </Style>
 
-  <Style Selector="ToggleButton:checked:disabled /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushCheckedDisabled}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedDisabled}" />
-  </Style>
+      <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundIndeterminateDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushIndeterminateDisabled}" />
+        <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundIndeterminateDisabled}" />
+      </Style>
+    </Style>
 
-  <Style Selector="ToggleButton:indeterminate /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundIndeterminate}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushIndeterminate}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundIndeterminate}" />
-  </Style>
+    <Style Selector="^:checked">
+      <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundChecked}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushChecked}" />
+        <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundChecked}" />
+      </Style>
 
-  <Style Selector="ToggleButton:indeterminate:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundIndeterminatePointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushIndeterminatePointerOver}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundIndeterminatePointerOver}" />
-  </Style>
+      <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedPointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushCheckedPointerOver}" />
+        <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedPointerOver}" />
+      </Style>
 
-  <Style Selector="ToggleButton:indeterminate:pressed /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundIndeterminatePressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushIndeterminatePressed}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundIndeterminatePressed}" />
-  </Style>
+      <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedPressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushCheckedPressed}" />
+        <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedPressed}" />
+      </Style>
 
-  <Style Selector="ToggleButton:indeterminate:disabled /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundIndeterminateDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushIndeterminateDisabled}" />
-    <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundIndeterminateDisabled}" />
-  </Style>
-</Styles>
+      <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushCheckedDisabled}" />
+        <Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedDisabled}" />
+      </Style>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml

@@ -1,43 +1,27 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:sys="clr-namespace:System;assembly=netstandard">
-  <Styles.Resources>
-    <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
-    <GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength>
-    <GridLength x:Key="ToggleSwitchPostContentMargin">6</GridLength>
-    <x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double>
-  </Styles.Resources>
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Design.PreviewWith>
-    <StackPanel Margin="20" Width="250" Spacing="24" >
+    <StackPanel Margin="20" Width="250" Spacing="24">
       <StackPanel Spacing="12" >
-        <TextBlock
-          Text="Automatic updates"
-          Classes="h1"/>
-        <TextBlock
-          Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
-          TextWrapping="Wrap"/>
+        <ToggleSwitch/>
+        <ToggleSwitch IsChecked="True" />
         <ToggleSwitch HorizontalContentAlignment="Left"
-          Content="Enable automatic Updates?"
-          OffContent="Uit"
-          OnContent="Aan"
-          VerticalAlignment="Bottom"/>
-      </StackPanel>
-
-      <StackPanel Spacing="12">
-        <TextBlock
-          Text="Previewer"
-          Classes="h1"/>
-        <TextBlock
-          Text="The previewer Shows a preview off your code, this could slow down your system"
-          TextWrapping="Wrap"/>
-        <ToggleSwitch
-          Background="Green"
-          IsChecked="True" />
+                      Content="Header"
+                      OffContent="Off"
+                      OnContent="On"/>
+        <ToggleSwitch Background="Yellow"/>
       </StackPanel>
     </StackPanel>
   </Design.PreviewWith>
 
-  <Style Selector="ToggleSwitch">
+  <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
+  <GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength>
+  <GridLength x:Key="ToggleSwitchPostContentMargin">6</GridLength>
+  <x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double>
+
+  <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
     <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
     <Setter Property="HorizontalAlignment" Value="Left" />
     <Setter Property="VerticalAlignment" Value="Center" />
@@ -46,20 +30,22 @@
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid Background="{TemplateBinding Background}"
-          RowDefinitions="Auto,*">
-
-          <ContentPresenter x:Name="PART_ContentPresenter"
-            Grid.Row="0"
-            Content="{TemplateBinding Content}"
-            ContentTemplate="{TemplateBinding ContentTemplate}"
-            RecognizesAccessKey="True"
-            VerticalAlignment="Top"/>
-
-          <Grid Grid.Row="1"
-            MinWidth="{DynamicResource ToggleSwitchThemeMinWidth}"
-            HorizontalAlignment="Left"
-            VerticalAlignment="Top">
+        <Grid Background="{TemplateBinding Background}" RowDefinitions="Auto,*">
+
+          <ContentPresenter
+              x:Name="PART_ContentPresenter"
+              Grid.Row="0"
+              VerticalAlignment="Top"
+              Content="{TemplateBinding Content}"
+              ContentTemplate="{TemplateBinding ContentTemplate}"
+              Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
+              RecognizesAccessKey="True" />
+
+          <Grid
+              Grid.Row="1"
+              MinWidth="{DynamicResource ToggleSwitchThemeMinWidth}"
+              HorizontalAlignment="Left"
+              VerticalAlignment="Top">
 
             <Grid.RowDefinitions>
               <RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
@@ -73,216 +59,210 @@
               <ColumnDefinition Width="Auto" />
             </Grid.ColumnDefinitions>
 
-            <Grid x:Name="SwitchAreaGrid"
-              Grid.RowSpan="3"
-              Grid.ColumnSpan="3"
-              TemplatedControl.IsTemplateFocusTarget="True"
-              Margin="0,5" />
-
-            <ContentPresenter x:Name="PART_OffContentPresenter"
-              Grid.RowSpan="3"
-              Grid.Column="2"
-              Content="{TemplateBinding OffContent}"
-              ContentTemplate="{TemplateBinding OffContentTemplate}"
-              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
-
-            <ContentPresenter x:Name="PART_OnContentPresenter"
-              Grid.RowSpan="3"
-              Grid.Column="2"
-              Content="{TemplateBinding OnContent}"
-              ContentTemplate="{TemplateBinding OnContentTemplate}"
-              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
-
-            <Border x:Name="OuterBorder"
-              Grid.Row="1"
-              Height="20"
-              Width="40"
-              CornerRadius="10"
-              BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />
-
-            <Border x:Name="SwitchKnobBounds"
-              Grid.Row="1"
-              Height="20"
-              Width="40"
-              CornerRadius="10"
-              BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/>
-
-            <Canvas x:Name="SwitchKnob" Grid.Row="1"
-               HorizontalAlignment="Left"
-               Width="20" Height="20">
-
-              <Grid x:Name="MovingKnobs"
-                Width="20" Height="20">
-
-                <Ellipse x:Name="SwitchKnobOn"
-                         Width="10" Height="10" />
-
-                <Ellipse x:Name="SwitchKnobOff"
-                         Width="10" Height="10" />
+            <Grid
+                x:Name="SwitchAreaGrid"
+                Grid.RowSpan="3"
+                Grid.ColumnSpan="3"
+                Background="{DynamicResource ToggleSwitchContainerBackground}"
+                Margin="0,5"
+                TemplatedControl.IsTemplateFocusTarget="True" />
+
+            <ContentPresenter
+                x:Name="PART_OffContentPresenter"
+                Grid.RowSpan="3"
+                Grid.Column="2"
+                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                Content="{TemplateBinding OffContent}"
+                ContentTemplate="{TemplateBinding OffContentTemplate}" />
+
+            <ContentPresenter
+                x:Name="PART_OnContentPresenter"
+                Grid.RowSpan="3"
+                Grid.Column="2"
+                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                Content="{TemplateBinding OnContent}"
+                ContentTemplate="{TemplateBinding OnContentTemplate}" />
+
+            <Border
+                x:Name="OuterBorder"
+                Grid.Row="1"
+                Width="40"
+                Height="20"
+                Background="{DynamicResource ToggleSwitchFillOff}"
+                BorderBrush="{DynamicResource ToggleSwitchStrokeOff}"
+                BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}"
+                CornerRadius="10" />
+
+            <Border
+                x:Name="SwitchKnobBounds"
+                Grid.Row="1"
+                Width="40"
+                Height="20"
+                Background="{DynamicResource ToggleSwitchFillOn}"
+                BorderBrush="{DynamicResource ToggleSwitchStrokeOn}"
+                BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"
+                CornerRadius="10" />
+
+            <Canvas
+                x:Name="SwitchKnob"
+                Grid.Row="1"
+                Width="20"
+                Height="20"
+                HorizontalAlignment="Left">
+
+              <Grid x:Name="MovingKnobs" Width="20" Height="20">
+                <Ellipse
+                  x:Name="SwitchKnobOn"
+                  Fill="{DynamicResource ToggleSwitchKnobFillOn}"
+                  Width="10"
+                  Height="10" />
+                <Ellipse
+                  x:Name="SwitchKnobOff"
+                  Fill="{DynamicResource ToggleSwitchKnobFillOff}"
+                  Width="10"
+                  Height="10" />
               </Grid>
             </Canvas>
           </Grid>
         </Grid>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="ToggleSwitch /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="Margin" Value="{DynamicResource ToggleSwitchTopHeaderMargin}" />
-  </Style>
-  <Style Selector="ToggleSwitch /template/ ContentPresenter#PART_ContentPresenter:empty">
-    <Setter Property="Margin" Value="0" />
-  </Style>
-
-  <!-- NormalState -->
-  <Style Selector="ToggleSwitch /template/ Grid#SwitchAreaGrid">
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch /template/ Border#OuterBorder">
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOff}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch /template/ Border#SwitchKnobBounds">
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOn">
-    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOn}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOff">
-    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:not(:dragging) /template/ Grid#MovingKnobs">
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Canvas.Left" Duration="0:0:0.2" Easing="CubicEaseOut"/>
-      </Transitions>
-    </Setter>
-  </Style>
-
-  <!-- PointerOverState -->
-  <Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder">
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/>
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff">
-    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOn">
-    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:pointerover /template/ Border#SwitchKnobBounds">
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid">
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/>
-  </Style>
-
-  <!-- PressedState -->
-  <Style Selector="ToggleSwitch:pressed /template/ Border#OuterBorder">
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}"/>
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:pressed /template/ Border#SwitchKnobBounds">
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOff">
-    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOn">
-    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:pressed /template/ Grid#SwitchAreaGrid">
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}"/>
-  </Style>
-
-  <!-- DisabledState -->
-  <Style Selector="ToggleSwitch:disabled">
-    <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:disabled /template/ Border#OuterBorder">
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}"/>
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffDisabled}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOff">
-    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOn">
-    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds">
-    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
-  </Style>
-
-  <!-- CheckedState -->
-  <Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder">
-    <Setter Property="Opacity" Value="0"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:checked  /template/ Ellipse#SwitchKnobOff">
-    <Setter Property="Opacity" Value="0"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:checked  /template/ Border#SwitchKnobBounds">
-    <Setter Property="Opacity" Value="1"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn">
-    <Setter Property="Opacity" Value="1"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter">
-    <Setter Property="Opacity" Value="0"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter">
-    <Setter Property="Opacity" Value="1"/>
-  </Style>
-
-  <!--UncheckedState -->
-  <Style Selector="ToggleSwitch:unchecked /template/ Border#OuterBorder">
-    <Setter Property="Opacity" Value="1"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
-    <Setter Property="Opacity" Value="1"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOn">
-    <Setter Property="Opacity" Value="0"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:unchecked  /template/ Border#SwitchKnobBounds">
-    <Setter Property="Opacity" Value="0"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
-    <Setter Property="Opacity" Value="1"/>
-  </Style>
-
-  <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
-    <Setter Property="Opacity" Value="0"/>
-  </Style>
-</Styles>
+
+    <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty">
+      <Setter Property="Margin" Value="0" />
+    </Style>
+
+    <!--  NormalState  -->
+    <Style Selector="^:not(:dragging) /template/ Grid#MovingKnobs">
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition
+              Easing="CubicEaseOut"
+              Property="Canvas.Left"
+              Duration="0:0:0.2" />
+        </Transitions>
+      </Setter>
+    </Style>
+
+    <!--  PointerOverState  -->
+    <Style Selector="^:pointerover /template/ Border#OuterBorder">
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}" />
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Border#SwitchKnobBounds">
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Grid#SwitchAreaGrid">
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}" />
+    </Style>
+
+    <!--  PressedState  -->
+    <Style Selector="^:pressed /template/ Border#OuterBorder">
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}" />
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Border#SwitchKnobBounds">
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Grid#SwitchAreaGrid">
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}" />
+    </Style>
+
+    <!--  DisabledState  -->
+    <Style Selector="^:disabled">
+      <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Border#OuterBorder">
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}" />
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffDisabled}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Border#SwitchKnobBounds">
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
+    </Style>
+
+    <!--  CheckedState  -->
+    <Style Selector="^:checked /template/ Border#OuterBorder">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:checked  /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:checked  /template/ Border#SwitchKnobBounds">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:checked /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:checked /template/ ContentPresenter#PART_OffContentPresenter">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:checked /template/ ContentPresenter#PART_OnContentPresenter">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <!--  UncheckedState  -->
+    <Style Selector="^:unchecked /template/ Border#OuterBorder">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:unchecked  /template/ Border#SwitchKnobBounds">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/ToolTip.xaml

@@ -1,56 +1,34 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       
-        xmlns:sys="clr-namespace:System;assembly=netstandard"
-        x:CompileBindings="True">
-
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="clr-namespace:System;assembly=netstandard"
+                    x:CompileBindings="True">
   <Design.PreviewWith>
-    <Grid RowDefinitions="Auto,Auto"
-          ColumnDefinitions="Auto,Auto"
-          HorizontalAlignment="Center">
-      <Border Grid.Column="0"
-              Grid.Row="1"
-              Background="{DynamicResource SystemControlBackgroundAccentBrush}"
-              Margin="5"
-              Padding="50"
-              ToolTip.Tip="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
-        <TextBlock>Hover Here</TextBlock>
-      </Border>
-      <CheckBox Grid.Column="1"
-                Margin="5"
-                Grid.Row="0"
-                IsChecked="{Binding ElementName=Border, Path=(ToolTip.IsOpen)}"
-                Content="ToolTip Open" />
-      <Border Name="Border"
-              Grid.Column="1"
-              Grid.Row="1"
-              Background="{DynamicResource SystemControlBackgroundAccentBrush}"
-              Margin="5"
-              Padding="50"
-              ToolTip.Placement="Bottom">
-        <ToolTip.Tip>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <ToolTip Opacity="1">Text Content</ToolTip>
+        <ToolTip Opacity="1">Very long text content which should exceed the maximum with of the tooltip and wrap.</ToolTip>
+        <ToolTip Opacity="1">
           <StackPanel>
-            <TextBlock Classes="h1">ToolTip</TextBlock>
-            <TextBlock Classes="h2">A control which pops up a hint when a control is hovered</TextBlock>
+            <TextBlock>Multi-line</TextBlock>
+            <TextBlock>Control Content</TextBlock>
           </StackPanel>
-        </ToolTip.Tip>
-        <TextBlock>ToolTip bottom placement</TextBlock>
-      </Border>
-    </Grid>
+        </ToolTip>
+      </StackPanel>
+    </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <sys:Double x:Key="ToolTipContentMaxWidth">320</sys:Double>
-  </Styles.Resources>
+  <sys:Double x:Key="ToolTipContentMaxWidth">320</sys:Double>
 
-  <Style Selector="ToolTip">
+  <ControlTheme x:Key="{x:Type ToolTip}" TargetType="ToolTip">
     <Setter Property="Foreground" Value="{DynamicResource ToolTipForeground}" />
     <Setter Property="Background" Value="{DynamicResource ToolTipBackground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource ToolTipBorderBrush}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource ToolTipBorderThemeThickness}" />    
+    <Setter Property="BorderThickness" Value="{DynamicResource ToolTipBorderThemeThickness}" />
     <Setter Property="FontSize" Value="{DynamicResource ToolTipContentThemeFontSize}" />
     <Setter Property="Padding" Value="{DynamicResource ToolTipBorderThemePadding}" />
     <Setter Property="MaxWidth" Value="{DynamicResource ToolTipContentMaxWidth}" />
     <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+    <Setter Property="Opacity" Value="0" />
     <Setter Property="Transitions">
       <Transitions>
         <DoubleTransition Property="Opacity" Duration="0:0:0.15" />
@@ -67,21 +45,14 @@
           <ContentPresenter Name="PART_ContentPresenter"
                             MaxWidth="{TemplateBinding MaxWidth}"
                             Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            TextBlock.TextWrapping="Wrap"/>
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="ToolTip > TextBlock">
-    <Setter Property="TextWrapping" Value="Wrap" />
-  </Style>
-
-  <Style Selector="ToolTip">
-    <Setter Property="Opacity" Value="0" />
-  </Style>
 
-  <Style Selector="ToolTip:open">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-</Styles>
+    <Style Selector="^:open">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TransitioningContentControl.xaml

@@ -1,7 +1,6 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Style Selector="TransitioningContentControl">
-    <!-- Set Defaults -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type TransitioningContentControl}" TargetType="TransitioningContentControl">
     <Setter Property="Template">
       <ControlTemplate>
         <ContentPresenter Name="PART_ContentPresenter"
@@ -13,8 +12,8 @@
                           Content="{TemplateBinding CurrentContent}"
                           Padding="{TemplateBinding Padding}"
                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
       </ControlTemplate>
     </Setter>
-  </Style>
-</Styles>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TreeView.xaml

@@ -1,28 +1,43 @@
-<Style xmlns="https://github.com/avaloniaui"
-       Selector="TreeView">
-  <Setter Property="Background" Value="Transparent" />
-  <Setter Property="BorderBrush" Value="Transparent" />
-  <Setter Property="BorderThickness" Value="0" />
-  <Setter Property="Padding" Value="0" />
-  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
-  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-  <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Border BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}"
-              CornerRadius="{TemplateBinding CornerRadius}">
-        <ScrollViewer Background="{TemplateBinding Background}"
-                      HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                      VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
-                      IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
-                      AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}">
-          <ItemsPresenter Name="PART_ItemsPresenter"
-                          Items="{TemplateBinding Items}"
-                          ItemsPanel="{TemplateBinding ItemsPanel}"
-                          Margin="{TemplateBinding Padding}" />
-        </ScrollViewer>
-      </Border>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <TreeView>
+          <TreeViewItem Header="Root" IsExpanded="True">
+            <TreeViewItem Header="Child1"/>
+            <TreeViewItem Header="Child2"/>
+          </TreeViewItem>
+        </TreeView>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type TreeView}" TargetType="TreeView">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="Transparent" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Padding" Value="0" />
+    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+    <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <ScrollViewer Background="{TemplateBinding Background}"
+                        HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                        VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
+                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                        AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}">
+            <ItemsPresenter Name="PART_ItemsPresenter"
+                            Items="{TemplateBinding Items}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}"
+                            Margin="{TemplateBinding Padding}" />
+          </ScrollViewer>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/TreeViewItem.xaml

@@ -1,4 +1,4 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
 
@@ -6,32 +6,29 @@
     <Border Padding="20"
             MinWidth="300">
       <TreeView>
-        <TreeViewItem Header="Level 1">
-          <TreeViewItem Header="Level 2.1">
+        <TreeViewItem Header="Level 1" IsExpanded="True">
+          <TreeViewItem Header="Level 2.1" IsSelected="True" IsExpanded="True">
             <TreeViewItem Header="Level 3.1" />
-            <TreeViewItem Header="Level 3.2">
+            <TreeViewItem Header="Level 3.2" IsSelected="True">
               <TreeViewItem Header="Level 4" />
             </TreeViewItem>
           </TreeViewItem>
-          <TreeViewItem Header="Level 2.2"
-                        IsEnabled="False" />
+          <TreeViewItem Header="Level 2.2" IsEnabled="False" />
         </TreeViewItem>
       </TreeView>
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <x:Double x:Key="TreeViewItemIndent">16</x:Double>
-    <x:Double x:Key="TreeViewItemExpandCollapseChevronSize">12</x:Double>
-    <Thickness x:Key="TreeViewItemExpandCollapseChevronMargin">12, 0, 12, 0</Thickness>
-    <StreamGeometry x:Key="TreeViewItemCollapsedChevronPathData">M 1,0 10,10 l -9,10 -1,-1 L 8,10 -0,1 Z</StreamGeometry>
-    <StreamGeometry x:Key="TreeViewItemExpandedChevronPathData">M0,1 L10,10 20,1 19,0 10,8 1,0 Z</StreamGeometry>
-    <converters:MarginMultiplierConverter Indent="{StaticResource TreeViewItemIndent}"
-                                          Left="True"
-                                          x:Key="TreeViewItemLeftMarginConverter" />
-  </Styles.Resources>
+  <x:Double x:Key="TreeViewItemIndent">16</x:Double>
+  <x:Double x:Key="TreeViewItemExpandCollapseChevronSize">12</x:Double>
+  <Thickness x:Key="TreeViewItemExpandCollapseChevronMargin">12, 0, 12, 0</Thickness>
+  <StreamGeometry x:Key="TreeViewItemCollapsedChevronPathData">M 1,0 10,10 l -9,10 -1,-1 L 8,10 -0,1 Z</StreamGeometry>
+  <StreamGeometry x:Key="TreeViewItemExpandedChevronPathData">M0,1 L10,10 20,1 19,0 10,8 1,0 Z</StreamGeometry>
+  <converters:MarginMultiplierConverter Indent="{StaticResource TreeViewItemIndent}"
+                                        Left="True"
+                                        x:Key="TreeViewItemLeftMarginConverter" />
 
-  <Style Selector="ToggleButton.ExpandCollapseChevron">
+  <ControlTheme x:Key="FluentTreeViewExpandCollapseChevron" TargetType="ToggleButton">
     <Setter Property="Margin" Value="0" />
     <Setter Property="Width" Value="{StaticResource TreeViewItemExpandCollapseChevronSize}" />
     <Setter Property="Height" Value="{StaticResource TreeViewItemExpandCollapseChevronSize}" />
@@ -43,6 +40,7 @@
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center">
           <Path x:Name="ChevronPath"
+                Data="{StaticResource TreeViewItemCollapsedChevronPathData}"
                 Fill="{DynamicResource TreeViewItemForeground}"
                 Stretch="Uniform"
                 HorizontalAlignment="Center"
@@ -50,10 +48,13 @@
         </Border>
       </ControlTemplate>
     </Setter>
-  </Style>
 
-  <Style Selector="TreeViewItem">
-    <Style.Resources />
+    <Style Selector="^:checked /template/ Path#ChevronPath">
+      <Setter Property="Data" Value="{StaticResource TreeViewItemExpandedChevronPathData}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TreeViewItem}" TargetType="TreeViewItem">
     <Setter Property="Padding" Value="0" />
     <Setter Property="Background" Value="{DynamicResource TreeViewItemBackground}" />
     <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrush}" />
@@ -79,7 +80,7 @@
               <Panel Name="PART_ExpandCollapseChevronContainer"
                      Margin="{StaticResource TreeViewItemExpandCollapseChevronMargin}">
                 <ToggleButton Name="PART_ExpandCollapseChevron"
-                              Classes="ExpandCollapseChevron"
+                              Theme="{StaticResource FluentTreeViewExpandCollapseChevron}"
                               Focusable="False"
                               IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
               </Panel>
@@ -99,83 +100,75 @@
         </StackPanel>
       </ControlTemplate>
     </Setter>
-  </Style>
-
-  <!--  PointerOver state  -->
-  <Style Selector="TreeViewItem /template/ Border#PART_LayoutRoot:pointerover">
-    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushPointerOver}" />
-  </Style>
-  <Style Selector="TreeViewItem /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundPointerOver}" />
-  </Style>
 
-  <!--  Pressed state  -->
-  <Style Selector="TreeViewItem:pressed /template/ Border#PART_LayoutRoot:pointerover">
-    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushPressed}" />
-  </Style>
-  <Style Selector="TreeViewItem:pressed /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundPressed}" />
-  </Style>
+    <!--  PointerOver state  -->
+    <Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover">
+      <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushPointerOver}" />
+    </Style>
+    <Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundPointerOver}" />
+    </Style>
 
-  <!--  Disabled state  -->
-  <Style Selector="TreeViewItem:disabled /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushDisabled}" />
-  </Style>
-  <Style Selector="TreeViewItem:disabled /template/ Border#PART_LayoutRoot > ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundDisabled}" />
-  </Style>
+    <!--  Pressed state  -->
+    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
+      <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushPressed}" />
+    </Style>
+    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundPressed}" />
+    </Style>
 
-  <!--  Selected state  -->
-  <Style Selector="TreeViewItem:selected /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelected}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelected}" />
-  </Style>
-  <Style Selector="TreeViewItem:selected /template/ Border#PART_LayoutRoot > ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundSelected}" />
-  </Style>
+    <!--  Disabled state  -->
+    <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushDisabled}" />
+    </Style>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_HeaderPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundDisabled}" />
+    </Style>
 
-  <!--  Selected PointerOver state  -->
-  <Style Selector="TreeViewItem:selected /template/ Border#PART_LayoutRoot:pointerover">
-    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedPointerOver}" />
-  </Style>
-  <Style Selector="TreeViewItem:selected /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedPointerOver}" />
-  </Style>
+    <!--  Selected state  -->
+    <Style Selector="^:selected /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelected}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelected}" />
+    </Style>
+    <Style Selector="^:selected /template/ Border#PART_LayoutRoot > ContentPresenter#PART_HeaderPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundSelected}" />
+    </Style>
 
-  <!--  Selected Pressed state  -->
-  <Style Selector="TreeViewItem:pressed:selected /template/ Border#PART_LayoutRoot:pointerover">
-    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedPressed}" />
-  </Style>
-  <Style Selector="TreeViewItem:pressed:selected /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedPressed}" />
-  </Style>
+    <!--  Selected PointerOver state  -->
+    <Style Selector="^:selected /template/ Border#PART_LayoutRoot:pointerover">
+      <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedPointerOver}" />
+    </Style>
+    <Style Selector="^:selected /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedPointerOver}" />
+    </Style>
 
-  <!--  Disabled Selected state  -->
-  <Style Selector="TreeViewItem:disabled:selected /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedDisabled}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedDisabled}" />
-  </Style>
-  <Style Selector="TreeViewItem:disabled:selected /template/ Border#PART_LayoutRoot > ContentPresenter#PART_HeaderPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedDisabled}" />
-  </Style>
+    <!--  Selected Pressed state  -->
+    <Style Selector="^:pressed:selected /template/ Border#PART_LayoutRoot:pointerover">
+      <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedPressed}" />
+    </Style>
+    <Style Selector="^:pressed:selected /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedPressed}" />
+    </Style>
 
-  <!--  ExpandCollapseChevron Group states  -->
-  <Style Selector="ToggleButton.ExpandCollapseChevron /template/ Path#ChevronPath">
-    <Setter Property="Data" Value="{StaticResource TreeViewItemCollapsedChevronPathData}" />
-  </Style>
-  <Style Selector="ToggleButton.ExpandCollapseChevron:checked /template/ Path#ChevronPath">
-    <Setter Property="Data" Value="{StaticResource TreeViewItemExpandedChevronPathData}" />
-  </Style>
-  <Style Selector="TreeViewItem:empty /template/ ToggleButton#PART_ExpandCollapseChevron">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="TreeViewItem:empty /template/ Panel#PART_ExpandCollapseChevronContainer">
-    <Setter Property="Width" Value="{StaticResource TreeViewItemExpandCollapseChevronSize}" />
-  </Style>
+    <!--  Disabled Selected state  -->
+    <Style Selector="^:disabled:selected /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedDisabled}" />
+    </Style>
+    <Style Selector="^:disabled:selected /template/ Border#PART_LayoutRoot > ContentPresenter#PART_HeaderPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedDisabled}" />
+    </Style>
 
-</Styles>
+    <Style Selector="^:empty /template/ ToggleButton#PART_ExpandCollapseChevron">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:empty /template/ Panel#PART_ExpandCollapseChevronContainer">
+      <Setter Property="Width" Value="{StaticResource TreeViewItemExpandCollapseChevronSize}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/UserControl.xaml

@@ -1,16 +1,24 @@
-<Style xmlns="https://github.com/avaloniaui" Selector=":is(UserControl)">
-  <Setter Property="Template">
-    <ControlTemplate>
-      <ContentPresenter Name="PART_ContentPresenter"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        Content="{TemplateBinding Content}"
-                        Padding="{TemplateBinding Padding}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
-    </ControlTemplate>
-  </Setter>
+<Style xmlns="https://github.com/avaloniaui"
+       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+       Selector=":is(UserControl)">
+  <Style.Resources>
+    <ControlTheme x:Key="FluentUserControl" TargetType="UserControl">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <ContentPresenter Name="PART_ContentPresenter"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Content="{TemplateBinding Content}"
+                            Padding="{TemplateBinding Padding}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+        </ControlTemplate>
+      </Setter>
+    </ControlTheme>
+  </Style.Resources>
+  
+  <Setter Property="Theme" Value="{StaticResource FluentUserControl}" />
 </Style>

src/Avalonia.Themes.Fluent/Controls/Window.xaml

@@ -1,27 +1,30 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="Window">
-  <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltHighBrush}"/>  
-  <Setter Property="TransparencyBackgroundFallback" Value="{DynamicResource SystemControlBackgroundAltHighBrush}" />
-  <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
-  <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>  
-  <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Panel>
-        <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
-        <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
-        <Panel Background="Transparent" Margin="{TemplateBinding WindowDecorationMargin}" />
-        <VisualLayerManager>
-          <VisualLayerManager.ChromeOverlayLayer>
-            <TitleBar />
-          </VisualLayerManager.ChromeOverlayLayer>
-          <ContentPresenter Name="PART_ContentPresenter"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Content="{TemplateBinding Content}"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
-        </VisualLayerManager>
-      </Panel>
-    </ControlTemplate>
-  </Setter>
-</Style>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type Window}" TargetType="Window">
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundAltHighBrush}"/>
+    <Setter Property="TransparencyBackgroundFallback" Value="{DynamicResource SystemControlBackgroundAltHighBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+          <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
+          <Panel Background="Transparent" Margin="{TemplateBinding WindowDecorationMargin}" />
+          <VisualLayerManager>
+            <VisualLayerManager.ChromeOverlayLayer>
+              <TitleBar />
+            </VisualLayerManager.ChromeOverlayLayer>
+            <ContentPresenter Name="PART_ContentPresenter"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              Margin="{TemplateBinding Padding}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+          </VisualLayerManager>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/WindowNotificationManager.xaml

@@ -1,47 +1,57 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:DataType="WindowNotificationManager"
-        x:CompileBindings="True">
-  <Style Selector="WindowNotificationManager">
-    <Setter Property="Margin" Value="0 0"/>    
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:CompileBindings="True"
+                    x:DataType="WindowNotificationManager">
+  <ControlTheme x:Key="{x:Type WindowNotificationManager}" TargetType="WindowNotificationManager">
+    <Setter Property="Margin" Value="0 0" />
     <Setter Property="Template">
       <ControlTemplate>
         <ReversibleStackPanel Name="PART_Items">
           <ReversibleStackPanel.DataTemplates>
             <DataTemplate DataType="INotification">
-              <StackPanel Spacing="8" Margin="12" TextElement.Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}">
-                <TextBlock Text="{Binding Title}" FontWeight="Medium" />
-                <TextBlock MaxHeight="80" Text="{Binding Message}" TextWrapping="Wrap" Margin="0,0,12,0"/>
+              <StackPanel
+                  Margin="12"
+                  Spacing="8"
+                  TextElement.Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}">
+                <TextBlock FontWeight="Medium" Text="{Binding Title}" />
+                <TextBlock
+                    MaxHeight="80"
+                    Margin="0,0,12,0"
+                    Text="{Binding Message}"
+                    TextWrapping="Wrap" />
               </StackPanel>
             </DataTemplate>
             <DataTemplate DataType="x:String">
-              <TextBlock Text="{Binding }" Margin="12" Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+              <TextBlock
+                  Margin="12"
+                  Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}"
+                  Text="{Binding}" />
             </DataTemplate>
           </ReversibleStackPanel.DataTemplates>
         </ReversibleStackPanel>
       </ControlTemplate>
     </Setter>
-  </Style>
 
-  <Style Selector="WindowNotificationManager:topleft /template/ ReversibleStackPanel#PART_Items">
-    <Setter Property="VerticalAlignment" Value="Top"/>
-    <Setter Property="HorizontalAlignment" Value="Left"/>
-  </Style>
+    <Style Selector="^:topleft /template/ ReversibleStackPanel#PART_Items">
+      <Setter Property="VerticalAlignment" Value="Top" />
+      <Setter Property="HorizontalAlignment" Value="Left" />
+    </Style>
 
-  <Style Selector="WindowNotificationManager:topright /template/ ReversibleStackPanel#PART_Items">
-    <Setter Property="VerticalAlignment" Value="Top"/>
-    <Setter Property="HorizontalAlignment" Value="Right"/>
-  </Style>
+    <Style Selector="^:topright /template/ ReversibleStackPanel#PART_Items">
+      <Setter Property="VerticalAlignment" Value="Top" />
+      <Setter Property="HorizontalAlignment" Value="Right" />
+    </Style>
 
-  <Style Selector="WindowNotificationManager:bottomleft /template/ ReversibleStackPanel#PART_Items">
-    <Setter Property="ReverseOrder" Value="True"/>
-    <Setter Property="VerticalAlignment" Value="Bottom"/>
-    <Setter Property="HorizontalAlignment" Value="Left"/>
-  </Style>
+    <Style Selector="^:bottomleft /template/ ReversibleStackPanel#PART_Items">
+      <Setter Property="ReverseOrder" Value="True" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+      <Setter Property="HorizontalAlignment" Value="Left" />
+    </Style>
 
-  <Style Selector="WindowNotificationManager:bottomright /template/ ReversibleStackPanel#PART_Items">
-    <Setter Property="ReverseOrder" Value="True"/>
-    <Setter Property="VerticalAlignment" Value="Bottom"/>
-    <Setter Property="HorizontalAlignment" Value="Right"/>
-  </Style>
-</Styles>
+    <Style Selector="^:bottomright /template/ ReversibleStackPanel#PART_Items">
+      <Setter Property="ReverseOrder" Value="True" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+      <Setter Property="HorizontalAlignment" Value="Right" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/Markup/Avalonia.Markup.Xaml.Loader/xamlil.github

@@ -1 +1 @@
-Subproject commit d990d63774a04d2a4b3d52e626a90ee68e19e2b6
+Subproject commit a4e6be2d1407abec4f35fcb208848830ce513ead