Tweaked Expander ControlTheme.

And added "Rounded" option to ControlCatalog for testing.

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 CornerRadius _cornerRadius;
+        private bool _rounded;
+
+        public CornerRadius 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) : default;
+            }
+        }
+    }
+}

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

@@ -3,29 +3,39 @@
                     x:CompileBindings="True">
   <Design.PreviewWith>
     <Border Padding="20">
-      <StackPanel Orientation="Vertical" Spacing="20" Width="350">
+      <StackPanel Orientation="Vertical" Spacing="20" Width="350" Height="600">
-        <Expander ExpandDirection="Up" Header="Expand Up" CornerRadius="25">
+        <Expander ExpandDirection="Up" Header="Expand Up">
-          <Expander.Header>
-            <Grid ColumnDefinitions="*, Auto">
-              <TextBlock Grid.Column="0" Text="Expand" />
-              <TextBlock Grid.Column="1" Text="Up" />
-            </Grid>
-          </Expander.Header>
           <StackPanel>
             <TextBlock>Expanded content</TextBlock>
           </StackPanel>
         </Expander>
-        <Expander ExpandDirection="Down" Header="Expand Down" CornerRadius="25">
+        <Expander ExpandDirection="Down" Header="Expand Down">
           <StackPanel>
             <TextBlock>Expanded content</TextBlock>
           </StackPanel>
         </Expander>
-        <Expander ExpandDirection="Left" Header="Expand Left" CornerRadius="25">
+        <Expander ExpandDirection="Left" Header="Expand Left">
           <StackPanel>
             <TextBlock>Expanded content</TextBlock>
           </StackPanel>
         </Expander>
-        <Expander ExpandDirection="Right" Header="Expand Right" CornerRadius="25">
+        <Expander ExpandDirection="Right" Header="Expand Right">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <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="Up" Header="Rounded" CornerRadius="25">
           <StackPanel>
             <TextBlock>Expanded content</TextBlock>
           </StackPanel>
@@ -36,25 +46,19 @@
 
   <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}" />
 
-  <ControlTheme x:Key="FluentExpanderToggleButtonTheme" TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
+  <ControlTheme x:Key="FluentExpanderToggleButtonTheme" TargetType="ToggleButton">
     <Setter Property="Template">
       <ControlTemplate>
         <Border x:Name="ToggleButtonBackground"
@@ -94,7 +98,7 @@
         </Border>
       </ControlTemplate>
     </Setter>
-    <Style Selector="^[Tag=Expanded] /template/ Border#ExpandCollapseChevronBorder">
+    <Style Selector="^:checked /template/ Border#ExpandCollapseChevronBorder">
       <Style.Animations>
         <Animation FillMode="Both" Duration="0:0:0.0625">
           <KeyFrame Cue="100%">
@@ -103,7 +107,7 @@
         </Animation>
       </Style.Animations>
     </Style>
-    <Style Selector="^[Tag=NotExpanded] /template/ Border#ExpandCollapseChevronBorder">
+    <Style Selector="^:not(:checked) /template/ Border#ExpandCollapseChevronBorder">
       <Style.Animations>
         <Animation FillMode="Both" Duration="0:0:0.0625">
           <KeyFrame Cue="0%">
@@ -173,7 +177,7 @@
         </DockPanel>
       </ControlTemplate>
     </Setter>
- 
+
     <Style Selector="^ /template/ ToggleButton#ExpanderHeader:pressed">
       <Setter Property="RenderTransform" Value="{x:Null}" />
     </Style>
@@ -186,28 +190,28 @@
       <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius}" />
     </Style>
     <Style Selector="^:expanded:up /template/ ToggleButton#ExpanderHeader">
-      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
     </Style>
     <Style Selector="^:expanded:up /template/ Border#ExpanderContent">
-      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
     </Style>
     <Style Selector="^:expanded:down /template/ ToggleButton#ExpanderHeader">
-      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
     </Style>
     <Style Selector="^:expanded:down /template/ Border#ExpanderContent">
-      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
     </Style>
     <Style Selector="^:expanded:left /template/ ToggleButton#ExpanderHeader">
-      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
     </Style>
     <Style Selector="^:expanded:left /template/ Border#ExpanderContent">
-      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
     </Style>
     <Style Selector="^:expanded:right /template/ ToggleButton#ExpanderHeader">
-      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
     </Style>
     <Style Selector="^:expanded:right /template/ Border#ExpanderContent">
-      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
     </Style>
 
     <Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
@@ -223,14 +227,6 @@
       <Setter Property="DockPanel.Dock" Value="Top" />
     </Style>
 
-
-    <Style Selector="^:expanded /template/ ToggleButton#ExpanderHeader">
-      <Setter Property="Tag" Value="Expanded"/>
-    </Style>
-    <Style Selector="^:not(:expanded) /template/ ToggleButton#ExpanderHeader">
-      <Setter Property="Tag" Value="NotExpanded"/>
-    </Style>
-
     <Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
       <Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonLeftTheme}" />
     </Style>
@@ -244,7 +240,6 @@
       <Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonDownTheme}" />
     </Style>
 
-
     <Style Selector="^:left /template/ Border#ExpanderContent">
       <Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownLeftBorderThickness}" />
     </Style>