From fe5b543ef5784aa5a83fe8069c77e69e174407a1 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Tue, 30 Jan 2024 19:42:05 +0100
Subject: [PATCH 1/4] Adding converter for cornerradius

---
 .../samples/SettingsExpanderSample.xaml       |  87 +--
 .../src/Helpers/CornerRadiusConverter.cs      |  24 +
 .../SettingsExpander/SettingsExpander.xaml    | 568 ++++++++----------
 3 files changed, 324 insertions(+), 355 deletions(-)
 create mode 100644 components/SettingsControls/src/Helpers/CornerRadiusConverter.cs

diff --git a/components/SettingsControls/samples/SettingsExpanderSample.xaml b/components/SettingsControls/samples/SettingsExpanderSample.xaml
index a4d72d4e..4bcbc629 100644
--- a/components/SettingsControls/samples/SettingsExpanderSample.xaml
+++ b/components/SettingsControls/samples/SettingsExpanderSample.xaml
@@ -1,19 +1,23 @@
 <!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
-<Page x:Class="SettingsControlsExperiment.Samples.SettingsExpanderSample"
-      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-      xmlns:local="using:CommunityToolkit.WinUI.Controls"
-      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      xmlns:ui="using:CommunityToolkit.WinUI"
-      mc:Ignorable="d">
+<Page
+    x:Class="SettingsControlsExperiment.Samples.SettingsExpanderSample"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:CommunityToolkit.WinUI.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    mc:Ignorable="d">
 
-    <local:SettingsExpander x:Name="settingsCard"
-                            Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
-                            Header="SettingsExpander"
-                            HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}"
-                            IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}"
-                            IsExpanded="{x:Bind IsCardExpanded, Mode=OneWay}">
+    <local:SettingsExpander
+        x:Name="settingsCard"
+        VerticalAlignment="Top"
+        CornerRadius="48"
+        Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
+        Header="SettingsExpander"
+        HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}"
+        IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}"
+        IsExpanded="{x:Bind IsCardExpanded, Mode=OneWay}">
         <!--  TODO: This should be TwoWay bound but throws compile error in Uno.  -->
         <ComboBox SelectedIndex="0">
             <ComboBoxItem>Option 1</ComboBoxItem>
@@ -25,47 +29,52 @@
             <local:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
                 <Button Content="Button" />
             </local:SettingsCard>
-            <local:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
-                                Header="This item can be clicked"
-                                IsClickEnabled="True" />
+            <local:SettingsCard
+                Description="SettingsCard within an Expander can be made clickable too!"
+                Header="This item can be clicked"
+                IsClickEnabled="True" />
 
             <local:SettingsCard ContentAlignment="Left">
                 <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
             </local:SettingsCard>
 
-            <local:SettingsCard HorizontalContentAlignment="Left"
-                                ContentAlignment="Vertical"
-                                Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
-                                Header="Vertically aligned">
+            <local:SettingsCard
+                HorizontalContentAlignment="Left"
+                ContentAlignment="Vertical"
+                Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
+                Header="Vertically aligned">
                 <GridView SelectedIndex="1">
                     <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#0078D4"
-                                CornerRadius="4" />
+                        <Border
+                            Width="64"
+                            Height="64"
+                            Background="#0078D4"
+                            CornerRadius="4" />
                     </GridViewItem>
                     <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#005EB7"
-                                CornerRadius="4" />
+                        <Border
+                            Width="64"
+                            Height="64"
+                            Background="#005EB7"
+                            CornerRadius="4" />
                     </GridViewItem>
                     <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#003D92"
-                                CornerRadius="4" />
+                        <Border
+                            Width="64"
+                            Height="64"
+                            Background="#003D92"
+                            CornerRadius="4" />
                     </GridViewItem>
                     <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#001968"
-                                CornerRadius="4" />
+                        <Border
+                            Width="64"
+                            Height="64"
+                            Background="#001968"
+                            CornerRadius="4" />
                     </GridViewItem>
                 </GridView>
             </local:SettingsCard>
-            <local:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
-                                Header="Customization">
+            <local:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention" Header="Customization">
                 <local:SettingsCard.Resources>
                     <x:Double x:Key="SettingsCardLeftIndention">40</x:Double>
                 </local:SettingsCard.Resources>
diff --git a/components/SettingsControls/src/Helpers/CornerRadiusConverter.cs b/components/SettingsControls/src/Helpers/CornerRadiusConverter.cs
new file mode 100644
index 00000000..5a1a5737
--- /dev/null
+++ b/components/SettingsControls/src/Helpers/CornerRadiusConverter.cs
@@ -0,0 +1,24 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace CommunityToolkit.WinUI.Controls;
+internal class CornerRadiusConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, string language)
+    {
+        if (value is CornerRadius cornerRadius)
+        {
+            return new CornerRadius(0, 0, cornerRadius.BottomRight, cornerRadius.BottomLeft);
+        }
+        else
+        {
+            return value;
+        }
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, string language)
+    {
+        return value;
+    }
+}
diff --git a/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml b/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
index 81771370..3794919b 100644
--- a/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
+++ b/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
@@ -1,10 +1,11 @@
 <!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
-                    xmlns:local="using:CommunityToolkit.WinUI.Controls"
-                    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-                    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
+    xmlns:local="using:CommunityToolkit.WinUI.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 
 
     <ResourceDictionary.MergedDictionaries>
@@ -20,9 +21,12 @@
     <x:Double x:Key="SettingsExpanderChevronButtonWidth">32</x:Double>
     <x:Double x:Key="SettingsExpanderChevronButtonHeight">32</x:Double>
 
-    <Style x:Key="DefaultSettingsExpanderItemStyle"
-           BasedOn="{StaticResource DefaultSettingsCardStyle}"
-           TargetType="local:SettingsCard">
+    <local:CornerRadiusConverter x:Key="CornerRadiusConverter" />
+
+    <Style
+        x:Key="DefaultSettingsExpanderItemStyle"
+        BasedOn="{StaticResource DefaultSettingsCardStyle}"
+        TargetType="local:SettingsCard">
         <Style.Setters>
             <Setter Property="BorderThickness" Value="{ThemeResource SettingsExpanderItemBorderThickness}" />
             <Setter Property="MinHeight" Value="52" />
@@ -31,24 +35,24 @@
         </Style.Setters>
     </Style>
 
-    <Style x:Key="ClickableSettingsExpanderItemStyle"
-           BasedOn="{StaticResource DefaultSettingsExpanderItemStyle}"
-           TargetType="local:SettingsCard">
+    <Style
+        x:Key="ClickableSettingsExpanderItemStyle"
+        BasedOn="{StaticResource DefaultSettingsExpanderItemStyle}"
+        TargetType="local:SettingsCard">
         <Style.Setters>
             <Setter Property="Padding" Value="{ThemeResource ClickableSettingsExpanderItemPadding}" />
         </Style.Setters>
     </Style>
 
-    <local:SettingsExpanderItemStyleSelector x:Key="SettingsExpanderItemStyleSelector"
-                                             ClickableStyle="{StaticResource ClickableSettingsExpanderItemStyle}"
-                                             DefaultStyle="{StaticResource DefaultSettingsExpanderItemStyle}" />
+    <local:SettingsExpanderItemStyleSelector
+        x:Key="SettingsExpanderItemStyleSelector"
+        ClickableStyle="{StaticResource ClickableSettingsExpanderItemStyle}"
+        DefaultStyle="{StaticResource DefaultSettingsExpanderItemStyle}" />
 
     <!--  Implicitly applied default style  -->
-    <Style BasedOn="{StaticResource DefaultSettingsExpanderStyle}"
-           TargetType="local:SettingsExpander" />
+    <Style BasedOn="{StaticResource DefaultSettingsExpanderStyle}" TargetType="local:SettingsExpander" />
 
-    <Style x:Key="DefaultSettingsExpanderStyle"
-           TargetType="local:SettingsExpander">
+    <Style x:Key="DefaultSettingsExpanderStyle" TargetType="local:SettingsExpander">
         <Style.Setters>
             <Setter Property="Background" Value="{ThemeResource SettingsCardBackground}" />
             <Setter Property="Foreground" Value="{ThemeResource SettingsCardForeground}" />
@@ -72,25 +76,27 @@
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="local:SettingsExpander">
-                        <muxc:Expander MinWidth="{TemplateBinding MinWidth}"
-                                       MinHeight="{TemplateBinding MinHeight}"
-                                       HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                       win:AutomationProperties.HelpText="{TemplateBinding AutomationProperties.HelpText}"
-                                       win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
-                                       CornerRadius="{TemplateBinding CornerRadius}"
-                                       IsExpanded="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
-                                       Style="{StaticResource SettingsExpanderExpanderStyle}">
+                        <muxc:Expander
+                            MinWidth="{TemplateBinding MinWidth}"
+                            MinHeight="{TemplateBinding MinHeight}"
+                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            win:AutomationProperties.HelpText="{TemplateBinding AutomationProperties.HelpText}"
+                            win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            IsExpanded="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                            Style="{StaticResource SettingsExpanderExpanderStyle}">
                             <muxc:Expander.Header>
-                                <local:SettingsCard Padding="{StaticResource SettingsExpanderHeaderPadding}"
-                                                    VerticalAlignment="Center"
-                                                    Background="Transparent"
-                                                    BorderThickness="0"
-                                                    Content="{TemplateBinding Content}"
-                                                    Description="{TemplateBinding Description}"
-                                                    Header="{TemplateBinding Header}"
-                                                    HeaderIcon="{TemplateBinding HeaderIcon}"
-                                                    IsClickEnabled="False" />
+                                <local:SettingsCard
+                                    Padding="{StaticResource SettingsExpanderHeaderPadding}"
+                                    VerticalAlignment="Center"
+                                    Background="Transparent"
+                                    BorderThickness="0"
+                                    Content="{TemplateBinding Content}"
+                                    Description="{TemplateBinding Description}"
+                                    Header="{TemplateBinding Header}"
+                                    HeaderIcon="{TemplateBinding HeaderIcon}"
+                                    IsClickEnabled="False" />
                             </muxc:Expander.Header>
                             <muxc:Expander.Content>
                                 <Grid>
@@ -100,16 +106,16 @@
                                         <RowDefinition Height="Auto" />
                                     </Grid.RowDefinitions>
                                     <ContentPresenter Content="{TemplateBinding ItemsHeader}" />
-                                    <muxc:ItemsRepeater x:Name="PART_ItemsRepeater"
-                                                        Grid.Row="1"
-                                                        ItemTemplate="{Binding ItemTemplate, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
-                                                        TabFocusNavigation="Local">
+                                    <muxc:ItemsRepeater
+                                        x:Name="PART_ItemsRepeater"
+                                        Grid.Row="1"
+                                        ItemTemplate="{Binding ItemTemplate, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                        TabFocusNavigation="Local">
                                         <muxc:ItemsRepeater.Layout>
                                             <muxc:StackLayout Orientation="Vertical" />
                                         </muxc:ItemsRepeater.Layout>
                                     </muxc:ItemsRepeater>
-                                    <ContentPresenter Grid.Row="2"
-                                                      Content="{TemplateBinding ItemsFooter}" />
+                                    <ContentPresenter Grid.Row="2" Content="{TemplateBinding ItemsFooter}" />
                                 </Grid>
                             </muxc:Expander.Content>
                         </muxc:Expander>
@@ -119,8 +125,7 @@
         </Style.Setters>
     </Style>
 
-    <Style x:Key="SettingsExpanderExpanderStyle"
-           TargetType="muxc:Expander">
+    <Style x:Key="SettingsExpanderExpanderStyle" TargetType="muxc:Expander">
         <Setter Property="Background" Value="{ThemeResource ExpanderContentBackground}" />
         <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
         <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
@@ -134,14 +139,56 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="muxc:Expander">
-                    <Grid MinWidth="{TemplateBinding MinWidth}"
-                          MaxWidth="{TemplateBinding MaxWidth}">
+                    <Grid MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}">
                         <Grid.RowDefinitions>
-                            <RowDefinition x:Name="Row0"
-                                           Height="Auto" />
-                            <RowDefinition x:Name="Row1"
-                                           Height="*" />
+                            <RowDefinition x:Name="Row0" Height="Auto" />
+                            <RowDefinition x:Name="Row1" Height="*" />
                         </Grid.RowDefinitions>
+                        <ToggleButton
+                            x:Name="ExpanderHeader"
+                            MinHeight="{TemplateBinding MinHeight}"
+                            Padding="{StaticResource ExpanderHeaderPadding}"
+                            HorizontalAlignment="Stretch"
+                            HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}"
+                            VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}"
+                            win:AutomationProperties.AutomationId="ExpanderToggleButton"
+                            win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                            BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
+                            BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                            IsEnabled="{TemplateBinding IsEnabled}"
+                            IsTabStop="True"
+                            Style="{StaticResource SettingsExpanderHeaderDownStyle}" />
+                        <!--  The clip is a composition clip applied in code  -->
+                        <Border x:Name="ExpanderContentClip" Grid.Row="1">
+                            <Border
+                                x:Name="ExpanderContent"
+                                MinHeight="{ThemeResource SettingsExpanderContentMinHeight}"
+                                Padding="{TemplateBinding Padding}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{StaticResource ExpanderContentDownBorderThickness}"
+                                CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
+                                Visibility="Collapsed">
+                                <ContentPresenter
+                                    Margin="0,-2,0,0"
+                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    Content="{TemplateBinding Content}"
+                                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
+                                <Border.RenderTransform>
+                                    <CompositeTransform />
+                                </Border.RenderTransform>
+                            </Border>
+                        </Border>
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="ExpandStates">
                                 <VisualState x:Name="ExpandUp">
@@ -150,18 +197,15 @@
                                     </VisualState.Setters>
                                     <VisualState.Storyboard>
                                         <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
-                                                                           Storyboard.TargetProperty="Visibility">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="Visible" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                             </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
-                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
-                                                <DiscreteDoubleKeyFrame KeyTime="0"
-                                                                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
-                                                <SplineDoubleKeyFrame KeySpline="0.0, 0.0, 0.0, 1.0"
-                                                                      KeyTime="0:0:0.333"
-                                                                      Value="0" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
+                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0.0, 0.0, 0.0, 1.0"
+                                                    KeyTime="0:0:0.333"
+                                                    Value="0" />
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState.Storyboard>
@@ -169,18 +213,15 @@
                                 <VisualState x:Name="CollapseDown">
                                     <VisualState.Storyboard>
                                         <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
-                                                                           Storyboard.TargetProperty="Visibility">
-                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.2"
-                                                                        Value="Collapsed" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Collapsed" />
                                             </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
-                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
-                                                <DiscreteDoubleKeyFrame KeyTime="0"
-                                                                        Value="0" />
-                                                <SplineDoubleKeyFrame KeySpline="1.0, 1.0, 0.0, 1.0"
-                                                                      KeyTime="0:0:0.167"
-                                                                      Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
+                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="1.0, 1.0, 0.0, 1.0"
+                                                    KeyTime="0:0:0.167"
+                                                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState.Storyboard>
@@ -191,18 +232,15 @@
                                     </VisualState.Setters>
                                     <VisualState.Storyboard>
                                         <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
-                                                                           Storyboard.TargetProperty="Visibility">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="Visible" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                             </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
-                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
-                                                <DiscreteDoubleKeyFrame KeyTime="0"
-                                                                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
-                                                <SplineDoubleKeyFrame KeySpline="0.0, 0.0, 0.0, 1.0"
-                                                                      KeyTime="0:0:0.333"
-                                                                      Value="0" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
+                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0.0, 0.0, 0.0, 1.0"
+                                                    KeyTime="0:0:0.333"
+                                                    Value="0" />
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState.Storyboard>
@@ -210,18 +248,15 @@
                                 <VisualState x:Name="CollapseUp">
                                     <VisualState.Storyboard>
                                         <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
-                                                                           Storyboard.TargetProperty="Visibility">
-                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.167"
-                                                                        Value="Collapsed" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.167" Value="Collapsed" />
                                             </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
-                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
-                                                <DiscreteDoubleKeyFrame KeyTime="0"
-                                                                        Value="0" />
-                                                <SplineDoubleKeyFrame KeySpline="1.0, 1.0, 0.0, 1.0"
-                                                                      KeyTime="0:0:0.167"
-                                                                      Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
+                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="1.0, 1.0, 0.0, 1.0"
+                                                    KeyTime="0:0:0.167"
+                                                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState.Storyboard>
@@ -242,126 +277,116 @@
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
-                        <ToggleButton x:Name="ExpanderHeader"
-                                      MinHeight="{TemplateBinding MinHeight}"
-                                      Padding="{StaticResource ExpanderHeaderPadding}"
-                                      HorizontalAlignment="Stretch"
-                                      HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}"
-                                      VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}"
-                                      win:AutomationProperties.AutomationId="ExpanderToggleButton"
-                                      win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
-                                      BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                                      BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
-                                      BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
-                                      Content="{TemplateBinding Header}"
-                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
-                                      ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
-                                      CornerRadius="{TemplateBinding CornerRadius}"
-                                      IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
-                                      IsEnabled="{TemplateBinding IsEnabled}"
-                                      IsTabStop="True"
-                                      Style="{StaticResource SettingsExpanderHeaderDownStyle}" />
-                        <!--  The clip is a composition clip applied in code  -->
-                        <Border x:Name="ExpanderContentClip"
-                                Grid.Row="1">
-                            <Border x:Name="ExpanderContent"
-                                    MinHeight="{ThemeResource SettingsExpanderContentMinHeight}"
-                                    Padding="{TemplateBinding Padding}"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
-                                    BorderThickness="{StaticResource ExpanderContentDownBorderThickness}"
-                                    CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
-                                    Visibility="Collapsed">
-                                <ContentPresenter Margin="0,-2,0,0"
-                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                                  Content="{TemplateBinding Content}"
-                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                                                  ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
-                                <Border.RenderTransform>
-                                    <CompositeTransform />
-                                </Border.RenderTransform>
-                            </Border>
-                        </Border>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 
-    <Style x:Key="SettingsExpanderHeaderDownStyle"
-           TargetType="ToggleButton">
+    <Style x:Key="SettingsExpanderHeaderDownStyle" TargetType="ToggleButton">
         <Setter Property="Padding" Value="0" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">
-                    <Grid x:Name="ToggleButtonGrid"
-                          Width="{TemplateBinding Width}"
-                          MinWidth="{TemplateBinding MinWidth}"
-                          MinHeight="{TemplateBinding MinHeight}"
-                          MaxWidth="{TemplateBinding MaxWidth}"
-                          HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                          Background="{TemplateBinding Background}"
-                          BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                          BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
-                          BorderThickness="{TemplateBinding BorderThickness}"
-                          CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid
+                        x:Name="ToggleButtonGrid"
+                        Width="{TemplateBinding Width}"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        MaxWidth="{TemplateBinding MaxWidth}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                        BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
 
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            win:AutomationProperties.AccessibilityView="Raw"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            ContentTransitions="{TemplateBinding ContentTransitions}"
+                            Foreground="{TemplateBinding Foreground}" />
+
+                        <ContentControl
+                            x:Name="ExpandCollapseChevronBorder"
+                            Grid.Column="1"
+                            Width="{StaticResource SettingsExpanderChevronButtonWidth}"
+                            Height="{StaticResource SettingsExpanderChevronButtonHeight}"
+                            Margin="0,0,8,0"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            HorizontalContentAlignment="Center"
+                            VerticalContentAlignment="Center"
+                            Background="{ThemeResource ExpanderChevronBackground}"
+                            BorderBrush="{ThemeResource ExpanderChevronBorderBrush}"
+                            BorderThickness="{ThemeResource ExpanderChevronBorderThickness}"
+                            CornerRadius="{ThemeResource ControlCornerRadius}"
+                            FocusVisualMargin="-3"
+                            IsTabStop="False"
+                            ToolTipService.ToolTip="{StaticResource SettingsExpanderChevronToolTip}"
+                            UseSystemFocusVisuals="True">
+                            <muxc:AnimatedIcon
+                                x:Name="ExpandCollapseChevron"
+                                Width="16"
+                                Height="16"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                muxc:AnimatedIcon.State="NormalOff"
+                                win:AutomationProperties.AccessibilityView="Raw"
+                                Foreground="{ThemeResource ExpanderChevronForeground}"
+                                RenderTransformOrigin="0.5, 0.5">
+                                <animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
+                                <muxc:AnimatedIcon.FallbackIconSource>
+                                    <muxc:FontIconSource
+                                        FontFamily="{StaticResource SymbolThemeFontFamily}"
+                                        FontSize="16"
+                                        Glyph="{StaticResource ExpanderChevronDownGlyph}"
+                                        IsTextScaleFactorEnabled="False" />
+                                </muxc:AnimatedIcon.FallbackIconSource>
+                            </muxc:AnimatedIcon>
+                        </ContentControl>
+
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBorderBrush}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrush}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderChevronForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBackground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackground}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="PointerOver">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -370,25 +395,17 @@
                                 </VisualState>
                                 <VisualState x:Name="Pressed">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBorderBrushPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderChevronPressedForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBackgroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -397,44 +414,30 @@
                                 </VisualState>
                                 <VisualState x:Name="Disabled">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Checked">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderChevronForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder"
-                                                                       Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderChevronBorderBrush}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderBrush}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder"
-                                                                       Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderChevronBackground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBackground}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -443,25 +446,17 @@
                                 </VisualState>
                                 <VisualState x:Name="CheckedPointerOver">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -470,25 +465,17 @@
                                 </VisualState>
                                 <VisualState x:Name="CheckedPressed">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderChevronPressedForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBorderBrushPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBackgroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -498,20 +485,14 @@
 
                                 <VisualState x:Name="CheckedDisabled">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
-                                                                       Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -524,51 +505,6 @@
                                 <VisualState x:Name="IndeterminateDisabled" />
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
-
-                        <ContentPresenter x:Name="ContentPresenter"
-                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                          win:AutomationProperties.AccessibilityView="Raw"
-                                          Content="{TemplateBinding Content}"
-                                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                                          ContentTransitions="{TemplateBinding ContentTransitions}"
-                                          Foreground="{TemplateBinding Foreground}" />
-
-                        <ContentControl x:Name="ExpandCollapseChevronBorder"
-                                        Grid.Column="1"
-                                        Width="{StaticResource SettingsExpanderChevronButtonWidth}"
-                                        Height="{StaticResource SettingsExpanderChevronButtonHeight}"
-                                        Margin="0,0,8,0"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        HorizontalContentAlignment="Center"
-                                        VerticalContentAlignment="Center"
-                                        Background="{ThemeResource ExpanderChevronBackground}"
-                                        BorderBrush="{ThemeResource ExpanderChevronBorderBrush}"
-                                        BorderThickness="{ThemeResource ExpanderChevronBorderThickness}"
-                                        CornerRadius="{ThemeResource ControlCornerRadius}"
-                                        FocusVisualMargin="-3"
-                                        IsTabStop="False"
-                                        ToolTipService.ToolTip="{StaticResource SettingsExpanderChevronToolTip}"
-                                        UseSystemFocusVisuals="True">
-                            <muxc:AnimatedIcon x:Name="ExpandCollapseChevron"
-                                               Width="16"
-                                               Height="16"
-                                               HorizontalAlignment="Center"
-                                               VerticalAlignment="Center"
-                                               muxc:AnimatedIcon.State="NormalOff"
-                                               win:AutomationProperties.AccessibilityView="Raw"
-                                               Foreground="{ThemeResource ExpanderChevronForeground}"
-                                               RenderTransformOrigin="0.5, 0.5">
-                                <animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
-                                <muxc:AnimatedIcon.FallbackIconSource>
-                                    <muxc:FontIconSource FontFamily="{StaticResource SymbolThemeFontFamily}"
-                                                         FontSize="16"
-                                                         Glyph="{StaticResource ExpanderChevronDownGlyph}"
-                                                         IsTextScaleFactorEnabled="False" />
-                                </muxc:AnimatedIcon.FallbackIconSource>
-                            </muxc:AnimatedIcon>
-                        </ContentControl>
                     </Grid>
 
                 </ControlTemplate>

From 62ab450af1e0d9b2e97049795f604ecd1e47b964 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Tue, 30 Jan 2024 19:45:10 +0100
Subject: [PATCH 2/4] Setting the corner radius

---
 .../SettingsControls/src/SettingsExpander/SettingsExpander.xaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml b/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
index 3794919b..19cb63dc 100644
--- a/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
+++ b/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
@@ -99,7 +99,7 @@
                                     IsClickEnabled="False" />
                             </muxc:Expander.Header>
                             <muxc:Expander.Content>
-                                <Grid>
+                                <Grid CornerRadius="{Binding CornerRadius, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource CornerRadiusConverter}}">
                                     <Grid.RowDefinitions>
                                         <RowDefinition Height="Auto" />
                                         <RowDefinition Height="*" />

From 22296a214dbe04b81711b636f51cc7c7d63c19c8 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Tue, 30 Jan 2024 19:45:36 +0100
Subject: [PATCH 3/4] XAML styler

---
 .../samples/SettingsExpanderSample.xaml       |  91 ++-
 .../SettingsExpander/SettingsExpander.xaml    | 568 ++++++++++--------
 2 files changed, 359 insertions(+), 300 deletions(-)

diff --git a/components/SettingsControls/samples/SettingsExpanderSample.xaml b/components/SettingsControls/samples/SettingsExpanderSample.xaml
index 4bcbc629..e34acb65 100644
--- a/components/SettingsControls/samples/SettingsExpanderSample.xaml
+++ b/components/SettingsControls/samples/SettingsExpanderSample.xaml
@@ -1,23 +1,21 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
-<Page
-    x:Class="SettingsControlsExperiment.Samples.SettingsExpanderSample"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="using:CommunityToolkit.WinUI.Controls"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:ui="using:CommunityToolkit.WinUI"
-    mc:Ignorable="d">
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="SettingsControlsExperiment.Samples.SettingsExpanderSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:CommunityToolkit.WinUI.Controls"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
 
-    <local:SettingsExpander
-        x:Name="settingsCard"
-        VerticalAlignment="Top"
-        CornerRadius="48"
-        Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
-        Header="SettingsExpander"
-        HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}"
-        IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}"
-        IsExpanded="{x:Bind IsCardExpanded, Mode=OneWay}">
+    <local:SettingsExpander x:Name="settingsCard"
+                            VerticalAlignment="Top"
+                            CornerRadius="48"
+                            Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
+                            Header="SettingsExpander"
+                            HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}"
+                            IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}"
+                            IsExpanded="{x:Bind IsCardExpanded, Mode=OneWay}">
         <!--  TODO: This should be TwoWay bound but throws compile error in Uno.  -->
         <ComboBox SelectedIndex="0">
             <ComboBoxItem>Option 1</ComboBoxItem>
@@ -29,52 +27,47 @@
             <local:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
                 <Button Content="Button" />
             </local:SettingsCard>
-            <local:SettingsCard
-                Description="SettingsCard within an Expander can be made clickable too!"
-                Header="This item can be clicked"
-                IsClickEnabled="True" />
+            <local:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
+                                Header="This item can be clicked"
+                                IsClickEnabled="True" />
 
             <local:SettingsCard ContentAlignment="Left">
                 <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
             </local:SettingsCard>
 
-            <local:SettingsCard
-                HorizontalContentAlignment="Left"
-                ContentAlignment="Vertical"
-                Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
-                Header="Vertically aligned">
+            <local:SettingsCard HorizontalContentAlignment="Left"
+                                ContentAlignment="Vertical"
+                                Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
+                                Header="Vertically aligned">
                 <GridView SelectedIndex="1">
                     <GridViewItem>
-                        <Border
-                            Width="64"
-                            Height="64"
-                            Background="#0078D4"
-                            CornerRadius="4" />
+                        <Border Width="64"
+                                Height="64"
+                                Background="#0078D4"
+                                CornerRadius="4" />
                     </GridViewItem>
                     <GridViewItem>
-                        <Border
-                            Width="64"
-                            Height="64"
-                            Background="#005EB7"
-                            CornerRadius="4" />
+                        <Border Width="64"
+                                Height="64"
+                                Background="#005EB7"
+                                CornerRadius="4" />
                     </GridViewItem>
                     <GridViewItem>
-                        <Border
-                            Width="64"
-                            Height="64"
-                            Background="#003D92"
-                            CornerRadius="4" />
+                        <Border Width="64"
+                                Height="64"
+                                Background="#003D92"
+                                CornerRadius="4" />
                     </GridViewItem>
                     <GridViewItem>
-                        <Border
-                            Width="64"
-                            Height="64"
-                            Background="#001968"
-                            CornerRadius="4" />
+                        <Border Width="64"
+                                Height="64"
+                                Background="#001968"
+                                CornerRadius="4" />
                     </GridViewItem>
                 </GridView>
             </local:SettingsCard>
-            <local:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention" Header="Customization">
+            <local:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
+                                Header="Customization">
                 <local:SettingsCard.Resources>
                     <x:Double x:Key="SettingsCardLeftIndention">40</x:Double>
                 </local:SettingsCard.Resources>
diff --git a/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml b/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
index 19cb63dc..7688e569 100644
--- a/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
+++ b/components/SettingsControls/src/SettingsExpander/SettingsExpander.xaml
@@ -1,11 +1,10 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
-    xmlns:local="using:CommunityToolkit.WinUI.Controls"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
+                    xmlns:local="using:CommunityToolkit.WinUI.Controls"
+                    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+                    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 
 
     <ResourceDictionary.MergedDictionaries>
@@ -23,10 +22,9 @@
 
     <local:CornerRadiusConverter x:Key="CornerRadiusConverter" />
 
-    <Style
-        x:Key="DefaultSettingsExpanderItemStyle"
-        BasedOn="{StaticResource DefaultSettingsCardStyle}"
-        TargetType="local:SettingsCard">
+    <Style x:Key="DefaultSettingsExpanderItemStyle"
+           BasedOn="{StaticResource DefaultSettingsCardStyle}"
+           TargetType="local:SettingsCard">
         <Style.Setters>
             <Setter Property="BorderThickness" Value="{ThemeResource SettingsExpanderItemBorderThickness}" />
             <Setter Property="MinHeight" Value="52" />
@@ -35,24 +33,24 @@
         </Style.Setters>
     </Style>
 
-    <Style
-        x:Key="ClickableSettingsExpanderItemStyle"
-        BasedOn="{StaticResource DefaultSettingsExpanderItemStyle}"
-        TargetType="local:SettingsCard">
+    <Style x:Key="ClickableSettingsExpanderItemStyle"
+           BasedOn="{StaticResource DefaultSettingsExpanderItemStyle}"
+           TargetType="local:SettingsCard">
         <Style.Setters>
             <Setter Property="Padding" Value="{ThemeResource ClickableSettingsExpanderItemPadding}" />
         </Style.Setters>
     </Style>
 
-    <local:SettingsExpanderItemStyleSelector
-        x:Key="SettingsExpanderItemStyleSelector"
-        ClickableStyle="{StaticResource ClickableSettingsExpanderItemStyle}"
-        DefaultStyle="{StaticResource DefaultSettingsExpanderItemStyle}" />
+    <local:SettingsExpanderItemStyleSelector x:Key="SettingsExpanderItemStyleSelector"
+                                             ClickableStyle="{StaticResource ClickableSettingsExpanderItemStyle}"
+                                             DefaultStyle="{StaticResource DefaultSettingsExpanderItemStyle}" />
 
     <!--  Implicitly applied default style  -->
-    <Style BasedOn="{StaticResource DefaultSettingsExpanderStyle}" TargetType="local:SettingsExpander" />
+    <Style BasedOn="{StaticResource DefaultSettingsExpanderStyle}"
+           TargetType="local:SettingsExpander" />
 
-    <Style x:Key="DefaultSettingsExpanderStyle" TargetType="local:SettingsExpander">
+    <Style x:Key="DefaultSettingsExpanderStyle"
+           TargetType="local:SettingsExpander">
         <Style.Setters>
             <Setter Property="Background" Value="{ThemeResource SettingsCardBackground}" />
             <Setter Property="Foreground" Value="{ThemeResource SettingsCardForeground}" />
@@ -76,27 +74,25 @@
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="local:SettingsExpander">
-                        <muxc:Expander
-                            MinWidth="{TemplateBinding MinWidth}"
-                            MinHeight="{TemplateBinding MinHeight}"
-                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            win:AutomationProperties.HelpText="{TemplateBinding AutomationProperties.HelpText}"
-                            win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
-                            CornerRadius="{TemplateBinding CornerRadius}"
-                            IsExpanded="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
-                            Style="{StaticResource SettingsExpanderExpanderStyle}">
+                        <muxc:Expander MinWidth="{TemplateBinding MinWidth}"
+                                       MinHeight="{TemplateBinding MinHeight}"
+                                       HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                       win:AutomationProperties.HelpText="{TemplateBinding AutomationProperties.HelpText}"
+                                       win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                                       CornerRadius="{TemplateBinding CornerRadius}"
+                                       IsExpanded="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                       Style="{StaticResource SettingsExpanderExpanderStyle}">
                             <muxc:Expander.Header>
-                                <local:SettingsCard
-                                    Padding="{StaticResource SettingsExpanderHeaderPadding}"
-                                    VerticalAlignment="Center"
-                                    Background="Transparent"
-                                    BorderThickness="0"
-                                    Content="{TemplateBinding Content}"
-                                    Description="{TemplateBinding Description}"
-                                    Header="{TemplateBinding Header}"
-                                    HeaderIcon="{TemplateBinding HeaderIcon}"
-                                    IsClickEnabled="False" />
+                                <local:SettingsCard Padding="{StaticResource SettingsExpanderHeaderPadding}"
+                                                    VerticalAlignment="Center"
+                                                    Background="Transparent"
+                                                    BorderThickness="0"
+                                                    Content="{TemplateBinding Content}"
+                                                    Description="{TemplateBinding Description}"
+                                                    Header="{TemplateBinding Header}"
+                                                    HeaderIcon="{TemplateBinding HeaderIcon}"
+                                                    IsClickEnabled="False" />
                             </muxc:Expander.Header>
                             <muxc:Expander.Content>
                                 <Grid CornerRadius="{Binding CornerRadius, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource CornerRadiusConverter}}">
@@ -106,16 +102,16 @@
                                         <RowDefinition Height="Auto" />
                                     </Grid.RowDefinitions>
                                     <ContentPresenter Content="{TemplateBinding ItemsHeader}" />
-                                    <muxc:ItemsRepeater
-                                        x:Name="PART_ItemsRepeater"
-                                        Grid.Row="1"
-                                        ItemTemplate="{Binding ItemTemplate, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
-                                        TabFocusNavigation="Local">
+                                    <muxc:ItemsRepeater x:Name="PART_ItemsRepeater"
+                                                        Grid.Row="1"
+                                                        ItemTemplate="{Binding ItemTemplate, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                                        TabFocusNavigation="Local">
                                         <muxc:ItemsRepeater.Layout>
                                             <muxc:StackLayout Orientation="Vertical" />
                                         </muxc:ItemsRepeater.Layout>
                                     </muxc:ItemsRepeater>
-                                    <ContentPresenter Grid.Row="2" Content="{TemplateBinding ItemsFooter}" />
+                                    <ContentPresenter Grid.Row="2"
+                                                      Content="{TemplateBinding ItemsFooter}" />
                                 </Grid>
                             </muxc:Expander.Content>
                         </muxc:Expander>
@@ -125,7 +121,8 @@
         </Style.Setters>
     </Style>
 
-    <Style x:Key="SettingsExpanderExpanderStyle" TargetType="muxc:Expander">
+    <Style x:Key="SettingsExpanderExpanderStyle"
+           TargetType="muxc:Expander">
         <Setter Property="Background" Value="{ThemeResource ExpanderContentBackground}" />
         <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
         <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
@@ -139,56 +136,14 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="muxc:Expander">
-                    <Grid MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}">
+                    <Grid MinWidth="{TemplateBinding MinWidth}"
+                          MaxWidth="{TemplateBinding MaxWidth}">
                         <Grid.RowDefinitions>
-                            <RowDefinition x:Name="Row0" Height="Auto" />
-                            <RowDefinition x:Name="Row1" Height="*" />
+                            <RowDefinition x:Name="Row0"
+                                           Height="Auto" />
+                            <RowDefinition x:Name="Row1"
+                                           Height="*" />
                         </Grid.RowDefinitions>
-                        <ToggleButton
-                            x:Name="ExpanderHeader"
-                            MinHeight="{TemplateBinding MinHeight}"
-                            Padding="{StaticResource ExpanderHeaderPadding}"
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}"
-                            VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}"
-                            win:AutomationProperties.AutomationId="ExpanderToggleButton"
-                            win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
-                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                            BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
-                            BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
-                            CornerRadius="{TemplateBinding CornerRadius}"
-                            IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
-                            IsEnabled="{TemplateBinding IsEnabled}"
-                            IsTabStop="True"
-                            Style="{StaticResource SettingsExpanderHeaderDownStyle}" />
-                        <!--  The clip is a composition clip applied in code  -->
-                        <Border x:Name="ExpanderContentClip" Grid.Row="1">
-                            <Border
-                                x:Name="ExpanderContent"
-                                MinHeight="{ThemeResource SettingsExpanderContentMinHeight}"
-                                Padding="{TemplateBinding Padding}"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{StaticResource ExpanderContentDownBorderThickness}"
-                                CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
-                                Visibility="Collapsed">
-                                <ContentPresenter
-                                    Margin="0,-2,0,0"
-                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    Content="{TemplateBinding Content}"
-                                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
-                                <Border.RenderTransform>
-                                    <CompositeTransform />
-                                </Border.RenderTransform>
-                            </Border>
-                        </Border>
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="ExpandStates">
                                 <VisualState x:Name="ExpandUp">
@@ -197,15 +152,18 @@
                                     </VisualState.Setters>
                                     <VisualState.Storyboard>
                                         <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
+                                                                           Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="0"
+                                                                        Value="Visible" />
                                             </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
-                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
-                                                <SplineDoubleKeyFrame
-                                                    KeySpline="0.0, 0.0, 0.0, 1.0"
-                                                    KeyTime="0:0:0.333"
-                                                    Value="0" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
+                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
+                                                <DiscreteDoubleKeyFrame KeyTime="0"
+                                                                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
+                                                <SplineDoubleKeyFrame KeySpline="0.0, 0.0, 0.0, 1.0"
+                                                                      KeyTime="0:0:0.333"
+                                                                      Value="0" />
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState.Storyboard>
@@ -213,15 +171,18 @@
                                 <VisualState x:Name="CollapseDown">
                                     <VisualState.Storyboard>
                                         <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
-                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Collapsed" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
+                                                                           Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.2"
+                                                                        Value="Collapsed" />
                                             </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
-                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
-                                                <SplineDoubleKeyFrame
-                                                    KeySpline="1.0, 1.0, 0.0, 1.0"
-                                                    KeyTime="0:0:0.167"
-                                                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
+                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
+                                                <DiscreteDoubleKeyFrame KeyTime="0"
+                                                                        Value="0" />
+                                                <SplineDoubleKeyFrame KeySpline="1.0, 1.0, 0.0, 1.0"
+                                                                      KeyTime="0:0:0.167"
+                                                                      Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState.Storyboard>
@@ -232,15 +193,18 @@
                                     </VisualState.Setters>
                                     <VisualState.Storyboard>
                                         <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
+                                                                           Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="0"
+                                                                        Value="Visible" />
                                             </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
-                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
-                                                <SplineDoubleKeyFrame
-                                                    KeySpline="0.0, 0.0, 0.0, 1.0"
-                                                    KeyTime="0:0:0.333"
-                                                    Value="0" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
+                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
+                                                <DiscreteDoubleKeyFrame KeyTime="0"
+                                                                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
+                                                <SplineDoubleKeyFrame KeySpline="0.0, 0.0, 0.0, 1.0"
+                                                                      KeyTime="0:0:0.333"
+                                                                      Value="0" />
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState.Storyboard>
@@ -248,15 +212,18 @@
                                 <VisualState x:Name="CollapseUp">
                                     <VisualState.Storyboard>
                                         <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
-                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.167" Value="Collapsed" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
+                                                                           Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.167"
+                                                                        Value="Collapsed" />
                                             </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
-                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
-                                                <SplineDoubleKeyFrame
-                                                    KeySpline="1.0, 1.0, 0.0, 1.0"
-                                                    KeyTime="0:0:0.167"
-                                                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
+                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
+                                                <DiscreteDoubleKeyFrame KeyTime="0"
+                                                                        Value="0" />
+                                                <SplineDoubleKeyFrame KeySpline="1.0, 1.0, 0.0, 1.0"
+                                                                      KeyTime="0:0:0.167"
+                                                                      Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState.Storyboard>
@@ -277,116 +244,126 @@
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
+                        <ToggleButton x:Name="ExpanderHeader"
+                                      MinHeight="{TemplateBinding MinHeight}"
+                                      Padding="{StaticResource ExpanderHeaderPadding}"
+                                      HorizontalAlignment="Stretch"
+                                      HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}"
+                                      VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}"
+                                      win:AutomationProperties.AutomationId="ExpanderToggleButton"
+                                      win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                                      BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                      BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
+                                      BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
+                                      Content="{TemplateBinding Header}"
+                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                      ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
+                                      CornerRadius="{TemplateBinding CornerRadius}"
+                                      IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                      IsEnabled="{TemplateBinding IsEnabled}"
+                                      IsTabStop="True"
+                                      Style="{StaticResource SettingsExpanderHeaderDownStyle}" />
+                        <!--  The clip is a composition clip applied in code  -->
+                        <Border x:Name="ExpanderContentClip"
+                                Grid.Row="1">
+                            <Border x:Name="ExpanderContent"
+                                    MinHeight="{ThemeResource SettingsExpanderContentMinHeight}"
+                                    Padding="{TemplateBinding Padding}"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderThickness="{StaticResource ExpanderContentDownBorderThickness}"
+                                    CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
+                                    Visibility="Collapsed">
+                                <ContentPresenter Margin="0,-2,0,0"
+                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                  Content="{TemplateBinding Content}"
+                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                  ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
+                                <Border.RenderTransform>
+                                    <CompositeTransform />
+                                </Border.RenderTransform>
+                            </Border>
+                        </Border>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 
-    <Style x:Key="SettingsExpanderHeaderDownStyle" TargetType="ToggleButton">
+    <Style x:Key="SettingsExpanderHeaderDownStyle"
+           TargetType="ToggleButton">
         <Setter Property="Padding" Value="0" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">
-                    <Grid
-                        x:Name="ToggleButtonGrid"
-                        Width="{TemplateBinding Width}"
-                        MinWidth="{TemplateBinding MinWidth}"
-                        MinHeight="{TemplateBinding MinHeight}"
-                        MaxWidth="{TemplateBinding MaxWidth}"
-                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                        Background="{TemplateBinding Background}"
-                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                        BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="ToggleButtonGrid"
+                          Width="{TemplateBinding Width}"
+                          MinWidth="{TemplateBinding MinWidth}"
+                          MinHeight="{TemplateBinding MinHeight}"
+                          MaxWidth="{TemplateBinding MaxWidth}"
+                          HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                          Background="{TemplateBinding Background}"
+                          BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                          BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
 
-                        <ContentPresenter
-                            x:Name="ContentPresenter"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            win:AutomationProperties.AccessibilityView="Raw"
-                            Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            ContentTransitions="{TemplateBinding ContentTransitions}"
-                            Foreground="{TemplateBinding Foreground}" />
-
-                        <ContentControl
-                            x:Name="ExpandCollapseChevronBorder"
-                            Grid.Column="1"
-                            Width="{StaticResource SettingsExpanderChevronButtonWidth}"
-                            Height="{StaticResource SettingsExpanderChevronButtonHeight}"
-                            Margin="0,0,8,0"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            HorizontalContentAlignment="Center"
-                            VerticalContentAlignment="Center"
-                            Background="{ThemeResource ExpanderChevronBackground}"
-                            BorderBrush="{ThemeResource ExpanderChevronBorderBrush}"
-                            BorderThickness="{ThemeResource ExpanderChevronBorderThickness}"
-                            CornerRadius="{ThemeResource ControlCornerRadius}"
-                            FocusVisualMargin="-3"
-                            IsTabStop="False"
-                            ToolTipService.ToolTip="{StaticResource SettingsExpanderChevronToolTip}"
-                            UseSystemFocusVisuals="True">
-                            <muxc:AnimatedIcon
-                                x:Name="ExpandCollapseChevron"
-                                Width="16"
-                                Height="16"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                muxc:AnimatedIcon.State="NormalOff"
-                                win:AutomationProperties.AccessibilityView="Raw"
-                                Foreground="{ThemeResource ExpanderChevronForeground}"
-                                RenderTransformOrigin="0.5, 0.5">
-                                <animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
-                                <muxc:AnimatedIcon.FallbackIconSource>
-                                    <muxc:FontIconSource
-                                        FontFamily="{StaticResource SymbolThemeFontFamily}"
-                                        FontSize="16"
-                                        Glyph="{StaticResource ExpanderChevronDownGlyph}"
-                                        IsTextScaleFactorEnabled="False" />
-                                </muxc:AnimatedIcon.FallbackIconSource>
-                            </muxc:AnimatedIcon>
-                        </ContentControl>
-
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrush}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBorderBrush}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderChevronForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBackground}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="PointerOver">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -395,17 +372,25 @@
                                 </VisualState>
                                 <VisualState x:Name="Pressed">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBorderBrushPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderChevronPressedForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBackgroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -414,30 +399,44 @@
                                 </VisualState>
                                 <VisualState x:Name="Disabled">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Checked">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderChevronForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderBrush}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderChevronBorderBrush}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBackground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderChevronBackground}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -446,17 +445,25 @@
                                 </VisualState>
                                 <VisualState x:Name="CheckedPointerOver">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -465,17 +472,25 @@
                                 </VisualState>
                                 <VisualState x:Name="CheckedPressed">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderChevronPressedForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBorderBrushPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBackgroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -485,14 +500,20 @@
 
                                 <VisualState x:Name="CheckedDisabled">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -505,6 +526,51 @@
                                 <VisualState x:Name="IndeterminateDisabled" />
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
+
+                        <ContentPresenter x:Name="ContentPresenter"
+                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          win:AutomationProperties.AccessibilityView="Raw"
+                                          Content="{TemplateBinding Content}"
+                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                          ContentTransitions="{TemplateBinding ContentTransitions}"
+                                          Foreground="{TemplateBinding Foreground}" />
+
+                        <ContentControl x:Name="ExpandCollapseChevronBorder"
+                                        Grid.Column="1"
+                                        Width="{StaticResource SettingsExpanderChevronButtonWidth}"
+                                        Height="{StaticResource SettingsExpanderChevronButtonHeight}"
+                                        Margin="0,0,8,0"
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        HorizontalContentAlignment="Center"
+                                        VerticalContentAlignment="Center"
+                                        Background="{ThemeResource ExpanderChevronBackground}"
+                                        BorderBrush="{ThemeResource ExpanderChevronBorderBrush}"
+                                        BorderThickness="{ThemeResource ExpanderChevronBorderThickness}"
+                                        CornerRadius="{ThemeResource ControlCornerRadius}"
+                                        FocusVisualMargin="-3"
+                                        IsTabStop="False"
+                                        ToolTipService.ToolTip="{StaticResource SettingsExpanderChevronToolTip}"
+                                        UseSystemFocusVisuals="True">
+                            <muxc:AnimatedIcon x:Name="ExpandCollapseChevron"
+                                               Width="16"
+                                               Height="16"
+                                               HorizontalAlignment="Center"
+                                               VerticalAlignment="Center"
+                                               muxc:AnimatedIcon.State="NormalOff"
+                                               win:AutomationProperties.AccessibilityView="Raw"
+                                               Foreground="{ThemeResource ExpanderChevronForeground}"
+                                               RenderTransformOrigin="0.5, 0.5">
+                                <animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
+                                <muxc:AnimatedIcon.FallbackIconSource>
+                                    <muxc:FontIconSource FontFamily="{StaticResource SymbolThemeFontFamily}"
+                                                         FontSize="16"
+                                                         Glyph="{StaticResource ExpanderChevronDownGlyph}"
+                                                         IsTextScaleFactorEnabled="False" />
+                                </muxc:AnimatedIcon.FallbackIconSource>
+                            </muxc:AnimatedIcon>
+                        </ContentControl>
                     </Grid>
 
                 </ControlTemplate>

From e1b3bff1413af8cac4e3a8301863a9f5d63fb64a Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Tue, 30 Jan 2024 19:49:15 +0100
Subject: [PATCH 4/4] Remove cornerradius override from sample

---
 components/SettingsControls/samples/SettingsExpanderSample.xaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/SettingsControls/samples/SettingsExpanderSample.xaml b/components/SettingsControls/samples/SettingsExpanderSample.xaml
index e34acb65..7c96fb97 100644
--- a/components/SettingsControls/samples/SettingsExpanderSample.xaml
+++ b/components/SettingsControls/samples/SettingsExpanderSample.xaml
@@ -10,7 +10,6 @@
 
     <local:SettingsExpander x:Name="settingsCard"
                             VerticalAlignment="Top"
-                            CornerRadius="48"
                             Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
                             Header="SettingsExpander"
                             HeaderIcon="{ui:FontIcon Glyph=&#xE91B;}"