New Fluent expander style (#5573)

* Updated Fluent theme Expander style. closes #5358

* Fixed padding mismatch between header and content

* Fixed CornerRadii, unleashed the c o l o u r e s

* Use CornerRadiusFilterConverter instead of expander specific converters

* Formatting

* Fix default theme in ControlCatalog

Co-authored-by: Jumar Macato <[email protected]>
Co-authored-by: Max Katz <[email protected]>

samples/ControlCatalog/App.xaml.cs

@@ -39,6 +39,10 @@ namespace ControlCatalog
 
         public static Styles DefaultLight = new Styles
         {
+            new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
+            {
+                Source = new Uri("avares://Avalonia.Themes.Fluent/Accents/AccentColors.xaml")
+            },
             new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
             {
                 Source = new Uri("avares://Avalonia.Themes.Fluent/Accents/Base.xaml")
@@ -60,6 +64,10 @@ namespace ControlCatalog
 
         public static Styles DefaultDark = new Styles
         {
+            new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
+            {
+                Source = new Uri("avares://Avalonia.Themes.Fluent/Accents/AccentColors.xaml")
+            },
             new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
             {
                 Source = new Uri("avares://Avalonia.Themes.Fluent/Accents/Base.xaml")

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

@@ -1,6 +1,7 @@
 <Style xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       xmlns:sys="clr-namespace:System;assembly=netstandard">
+       xmlns:sys="using:System"
+       xmlns:converters="using:Avalonia.Controls.Converters">
   <Style.Resources>
     <!-- https://docs.microsoft.com/en-us/previous-versions/windows/apps/dn518235(v=win.10)?redirectedfrom=MSDN -->
     <!-- SystemColor Color Resources (Reflect OS High Contrast Settings) -->
@@ -30,5 +31,10 @@
     <!-- ScrollBar animation -->
     <TransformOperations x:Key="VerticalSmallScrollThumbScaleTransform">scaleX(0.125) translateX(-2px)</TransformOperations>
     <TransformOperations x:Key="HorizontalSmallScrollThumbScaleTransform">scaleY(0.125) translateY(-2px)</TransformOperations>
+
+    <converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight"/>
+    <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/>
+    <converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight"/>
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
   </Style.Resources>
 </Style>

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

@@ -1,141 +1,232 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Orientation="Vertical" Spacing="20">
+        <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="Right" Header="Expand Right">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+      </StackPanel>
+    </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="ContentTransition">
-      <Setter.Value>
-        <CrossFade Duration="00:00:00.25" />
-      </Setter.Value>
-    </Setter>
+    <Setter Property="Background" Value="{DynamicResource ExpanderBackground}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderBorderThickness}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ExpanderBorderBrush}" />
+    <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[ExpandDirection=Down]">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Border Background="{TemplateBinding Background}">
-          <Grid RowDefinitions="Auto,*">
-            <ToggleButton Name="PART_toggle" Grid.Row="0"  Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
-            <ContentPresenter Name="PART_ContentPresenter"
-                              Grid.Row="1"
-                              IsVisible="{TemplateBinding IsExpanded}"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                              Content="{TemplateBinding Content}"
-                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                              Padding="{TemplateBinding Padding}" />
-          </Grid>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-  <Style Selector="Expander[IsExpanded=true] /template/ ToggleButton#PART_toggle /template/ ContentPresenter#PART_ContentPresenter">
-    <Setter Property="TextBlock.Foreground" Value="{DynamicResource ToggleButtonForeground}"/>
-  </Style>
-  <Style Selector="Expander[ExpandDirection=Up]">
+  <Style Selector="Expander">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="{TemplateBinding Background}">
-          <Grid RowDefinitions="*,Auto">
-            <ToggleButton Name="PART_toggle" Grid.Row="1"  Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
-            <ContentPresenter Name="PART_ContentPresenter"
-                              Grid.Row="0"
-                              IsVisible="{TemplateBinding IsExpanded}"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                              Content="{TemplateBinding Content}"
+        <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="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                        IsEnabled="{TemplateBinding IsEnabled}" />
+          <Border x:Name="ExpanderContent"
+                  Padding="{DynamicResource ExpanderContentPadding}"
+                  Background="{DynamicResource ExpanderDropDownBackground}"
+                  BorderBrush="{DynamicResource ExpanderDropDownBorderBrush}"
+                  IsVisible="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
+            <ContentPresenter x:Name="PART_ContentPresenter"
                               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                               VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                              Padding="{TemplateBinding Padding}" />
-          </Grid>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-  <Style Selector="Expander[ExpandDirection=Right]">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Border Background="{TemplateBinding Background}">
-          <Grid ColumnDefinitions="Auto,*">
-            <ToggleButton Name="PART_toggle" Grid.Column="0"  Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
-            <ContentPresenter Name="PART_ContentPresenter"
-                              Grid.Column="1"
-                              IsVisible="{TemplateBinding IsExpanded}"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
                               Content="{TemplateBinding Content}"
-                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                              Padding="{TemplateBinding Padding}" />
-          </Grid>
-        </Border>
+                              ContentTemplate="{TemplateBinding ContentTemplate}" />
+          </Border>
+        </DockPanel>
       </ControlTemplate>
     </Setter>
   </Style>
-  <Style Selector="Expander[ExpandDirection=Left]">
+
+  <Style Selector="Expander /template/ ToggleButton#ExpanderHeader">
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="{TemplateBinding Background}">
+        <Border x:Name="ToggleButtonBackground">
           <Grid ColumnDefinitions="*,Auto">
-            <ToggleButton Name="PART_toggle" Grid.Column="1"  Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
-            <ContentPresenter Name="PART_ContentPresenter"
-                              Grid.Column="0"
-                              IsVisible="{TemplateBinding IsExpanded}"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                              Content="{TemplateBinding Content}"
+            <ContentPresenter x:Name="PART_ContentPresenter"
+                              Margin="{TemplateBinding Padding}"
                               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                              Padding="{TemplateBinding Padding}" />
-          </Grid>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-  <Style Selector="Expander /template/ ToggleButton#PART_toggle">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Border BorderThickness="1" Background="Transparent">
-          <Grid ColumnDefinitions="Auto,Auto">
-            <Border Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center">
-              <Path Fill="{DynamicResource SystemControlForegroundBaseHighBrush}"
-                      HorizontalAlignment="Center"
-                      VerticalAlignment="Center"
-                      Data="M 0 2 L 4 6 L 0 10 Z" />
+                              VerticalContentAlignment="Center"
+                              Background="Transparent"
+                              BorderBrush="Transparent"
+                              BorderThickness="0"
+                              Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              TextBlock.Foreground="{DynamicResource ExpanderForeground}" />
+            <Border x:Name="ExpandCollapseChevronBorder"
+                    Grid.Column="1"
+                    Width="32"
+                    Height="32"
+                    Margin="7"
+                    RenderTransformOrigin="50%,50%">
+              <Path x:Name="ExpandCollapseChevron"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    RenderTransformOrigin="50%,50%"
+                    Stretch="None"
+                    Stroke="{DynamicResource ExpanderChevronForeground}"
+                    StrokeThickness="1" />
+              <Border.RenderTransform>
+                <RotateTransform />
+              </Border.RenderTransform>
             </Border>
-            <ContentPresenter Name="PART_ContentPresenter"
-                              Grid.Column="1" 
-                              Background="Transparent" 
-                              Content="{TemplateBinding Content}" 
-                              VerticalAlignment="Center" 
-                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                              Padding="{TemplateBinding Padding}"/>
           </Grid>
         </Border>
       </ControlTemplate>
     </Setter>
   </Style>
-  <Style Selector="Expander /template/ ToggleButton#PART_toggle:pointerover /template/ Border">
-    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightBaseMediumBrush}" />
+  <Style Selector="Expander /template/ ToggleButton#ExpanderHeader:pressed">
+    <Setter Property="RenderTransform" Value="{x:Null}" />
   </Style>
-  <Style Selector="Expander:down:expanded /template/ ToggleButton#PART_toggle /template/ Path">
-    <Setter Property="RenderTransform">
-      <RotateTransform Angle="90" />
-    </Setter>
+
+  <Style Selector="Expander:left /template/ ToggleButton#ExpanderHeader, Expander:right /template/ ToggleButton#ExpanderHeader">
+    <Setter Property="VerticalAlignment" Value="Stretch" />
   </Style>
-  <Style Selector="Expander:up:expanded /template/ ToggleButton#PART_toggle /template/ Path">
-    <Setter Property="RenderTransform">
-      <RotateTransform Angle="-90" />
-    </Setter>
+
+
+  <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:left:expanded /template/ ToggleButton#PART_toggle /template/ Path">
-    <Setter Property="RenderTransform">
-      <RotateTransform Angle="180" />
-    </Setter>
+
+  <Style Selector="Expander:not(:expanded) /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
   </Style>
-  <Style Selector="Expander:right /template/ ToggleButton#PART_toggle /template/ Path">
-    <Setter Property="RenderTransform">
-      <RotateTransform Angle="180" />
-    </Setter>
+  <Style Selector="Expander:expanded:up /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
+    <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
   </Style>
-  <Style Selector="Expander:right:expanded /template/ ToggleButton#PART_toggle /template/ Path">
-    <Setter Property="RenderTransform">
-      <RotateTransform Angle="0" />
-    </Setter>
+  <Style Selector="Expander:expanded:up /template/ Border#ExpanderContent">
+    <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+  </Style>
+  <Style Selector="Expander:expanded:down /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
+    <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+  </Style>
+  <Style Selector="Expander:expanded:down /template/ Border#ExpanderContent">
+    <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+  </Style>
+  <Style Selector="Expander:expanded:left /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
+    <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+  </Style>
+  <Style Selector="Expander:expanded:left /template/ Border#ExpanderContent">
+    <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+  </Style>
+  <Style Selector="Expander:expanded:right /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground">
+    <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+  </Style>
+  <Style Selector="Expander:expanded:right /template/ Border#ExpanderContent">
+    <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+  </Style>
+
+  <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="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="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="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>