From 0b58355ef4b7b81b7b9d1a3ca99810dbcf9eaa6c Mon Sep 17 00:00:00 2001
From: Pankaj Bhojwani <pabhojwa@microsoft.com>
Date: Tue, 2 Nov 2021 10:59:52 -0700
Subject: [PATCH 1/6] testing

---
 src/cascadia/TerminalApp/App.xaml             |  2 +-
 .../CommonResources.xaml                      |  4 +-
 .../SettingContainerStyle.xaml                | 42 +++++++++++++------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/cascadia/TerminalApp/App.xaml b/src/cascadia/TerminalApp/App.xaml
index 251028dee..3a880ead3 100644
--- a/src/cascadia/TerminalApp/App.xaml
+++ b/src/cascadia/TerminalApp/App.xaml
@@ -21,7 +21,7 @@
             <ResourceDictionary.MergedDictionaries>
                 <!--  Include the MUX Controls resources  -->
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"
-                                       ControlsResourcesVersion="Version1" />
+                                       ControlsResourcesVersion="Version2" />
                 <ResourceDictionary>
 
                     <!--
diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
index c51856255..6f5fdf4f0 100644
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -48,14 +48,14 @@
     <!--  Used to stack a group of settings  -->
     <Style x:Key="SettingsStackStyle"
            TargetType="StackPanel">
-        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="Margin" Value="13,0,0,48" />
     </Style>
 
     <!--  Used to stack a group of settings inside a pivot  -->
     <Style x:Key="PivotStackStyle"
            TargetType="StackPanel">
-        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="Margin" Value="0,0,0,48" />
     </Style>
 
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
index 717e6e808..0597bcab9 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -38,19 +38,35 @@
             <Setter.Value>
                 <ControlTemplate TargetType="local:SettingContainer">
                     <StackPanel>
-
-                        <!--  Header space  -->
-                        <StackPanel Style="{StaticResource SettingContainerHeaderStyle}">
-                            <TextBlock Text="{TemplateBinding Header}" />
-                            <Button x:Name="ResetButton"
-                                    Style="{StaticResource SettingContainerResetButtonStyle}">
-                                <FontIcon Glyph="&#xE845;"
-                                          Style="{StaticResource SettingContainerFontIconStyle}" />
-                            </Button>
-                        </StackPanel>
-
-                        <!--  This is where the actual setting control will go  -->
-                        <ContentPresenter Content="{TemplateBinding Content}" />
+                        <Grid Height="60"
+                  HorizontalAlignment="Stretch"
+                  Margin="16"
+                  CornerRadius="4"
+                  Background="{ThemeResource SystemChromeMediumLowColor}">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="50" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                            <FontIcon Grid.Column="0"
+                          Style="{StaticResource SettingContainerFontIconStyle}"
+                          Glyph="&#xE710;" />
+                            <StackPanel Grid.Column="1"
+                                Orientation="Vertical"
+                                VerticalAlignment="Center">
+                                <TextBlock Text="{TemplateBinding Header}"
+                                   FontSize="16"/>
+                                <TextBlock Text="{TemplateBinding HelpText}"
+                                   FontSize="14"
+                                   Foreground="{ThemeResource SystemBaseMediumColor}"/>
+                            </StackPanel>
+                            <ContentPresenter Grid.Column="2"
+                              HorizontalAlignment="Right"
+                              VerticalAlignment="Center"
+                              Margin="8"
+                              BorderBrush="Transparent"
+                              Content="{TemplateBinding Content}"/>
+                        </Grid>
                     </StackPanel>
                 </ControlTemplate>
             </Setter.Value>

From ba4faec04fa7761742c155bbd1345de0341e3d0f Mon Sep 17 00:00:00 2001
From: Pankaj Bhojwani <pabhojwa@microsoft.com>
Date: Wed, 3 Nov 2021 15:50:29 -0700
Subject: [PATCH 2/6] got 2 styles that kinda work I guess

---
 .../TerminalSettingsEditor/Appearances.xaml   |   4 -
 .../CommonResources.xaml                      |  22 +-
 .../GlobalAppearance.xaml                     |   1 -
 .../TerminalSettingsEditor/Interaction.xaml   |   3 +-
 .../TerminalSettingsEditor/Launch.xaml        |   7 +-
 .../TerminalSettingsEditor/Profiles.xaml      |   7 -
 .../SettingContainer.cpp                      |  17 +
 .../SettingContainerStyle.xaml                | 501 +++++++++++++++++-
 8 files changed, 499 insertions(+), 63 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.xaml b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
index 497b7349a..a8f9f2ac2 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
@@ -45,7 +45,6 @@
 
             <!--  Color Scheme  -->
             <local:SettingContainer x:Uid="Profile_ColorScheme"
-                                    Margin="0"
                                     ClearSettingValue="{x:Bind Appearance.ClearColorSchemeName}"
                                     HasSettingValue="{x:Bind Appearance.HasColorSchemeName, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.ColorSchemeNameOverrideSource, Mode=OneWay}">
@@ -170,7 +169,6 @@
 
             <!--  Cursor Shape  -->
             <local:SettingContainer x:Uid="Profile_CursorShape"
-                                    Margin="0"
                                     ClearSettingValue="{x:Bind Appearance.ClearCursorShape}"
                                     HasSettingValue="{x:Bind Appearance.HasCursorShape, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.CursorShapeOverrideSource, Mode=OneWay}">
@@ -211,7 +209,6 @@
             <!--  Background Image  -->
             <local:SettingContainer x:Name="BackgroundImageContainer"
                                     x:Uid="Profile_BackgroundImage"
-                                    Margin="0"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImagePath}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImagePath, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImagePathOverrideSource, Mode=OneWay}">
@@ -450,7 +447,6 @@
 
             <!--  Intense is bold, bright  -->
             <local:SettingContainer x:Uid="Appearance_IntenseTextStyle"
-                                    Margin="0"
                                     ClearSettingValue="{x:Bind Appearance.ClearIntenseTextStyle}"
                                     HasSettingValue="{x:Bind Appearance.HasIntenseTextStyle, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.IntenseTextStyleOverrideSource, Mode=OneWay}">
diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
index 6f5fdf4f0..36cbb7980 100644
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -11,26 +11,6 @@
         <ResourceDictionary Source="SettingContainerStyle.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
-    <ResourceDictionary.ThemeDictionaries>
-        <ResourceDictionary x:Key="Light">
-            <Style x:Key="SecondaryTextBlockStyle"
-                   TargetType="TextBlock">
-                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
-            </Style>
-        </ResourceDictionary>
-        <ResourceDictionary x:Key="Dark">
-            <Style x:Key="SecondaryTextBlockStyle"
-                   TargetType="TextBlock">
-                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
-            </Style>
-        </ResourceDictionary>
-        <ResourceDictionary x:Key="HighContrast">
-            <Style x:Key="SecondaryTextBlockStyle"
-                   TargetType="TextBlock" />
-            <!--  Do not mess with the foreground color for High Contrast. Let it ride as is.  -->
-        </ResourceDictionary>
-    </ResourceDictionary.ThemeDictionaries>
-
     <x:Double x:Key="StandardIconSize">14.0</x:Double>
     <Thickness x:Key="StandardIndentMargin">13,0,0,0</Thickness>
     <Thickness x:Key="StandardControlMargin">0,24,0,0</Thickness>
@@ -56,7 +36,7 @@
     <Style x:Key="PivotStackStyle"
            TargetType="StackPanel">
         <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="Margin" Value="0,0,0,48" />
+        <Setter Property="Margin" Value="13,0,0,48" />
     </Style>
 
     <!--  Combo Box  -->
diff --git a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
index 7361ec7cb..002b7eda8 100644
--- a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
+++ b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
@@ -28,7 +28,6 @@
         <StackPanel Style="{StaticResource SettingsStackStyle}">
             <!--  Language  -->
             <local:SettingContainer x:Uid="Globals_Language"
-                                    Margin="0"
                                     Visibility="{x:Bind LanguageSelectorAvailable}">
                 <ComboBox ItemsSource="{x:Bind LanguageList}"
                           SelectedItem="{x:Bind CurrentLanguage, Mode=TwoWay}">
diff --git a/src/cascadia/TerminalSettingsEditor/Interaction.xaml b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
index 8bdf829f6..273d67eed 100644
--- a/src/cascadia/TerminalSettingsEditor/Interaction.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
@@ -27,8 +27,7 @@
     <ScrollViewer ViewChanging="ViewChanging">
         <StackPanel Style="{StaticResource SettingsStackStyle}">
             <!--  Copy On Select  -->
-            <local:SettingContainer x:Uid="Globals_CopyOnSelect"
-                                    Margin="0">
+            <local:SettingContainer x:Uid="Globals_CopyOnSelect">
                 <ToggleSwitch IsOn="{x:Bind State.Globals.CopyOnSelect, Mode=TwoWay}" />
             </local:SettingContainer>
 
diff --git a/src/cascadia/TerminalSettingsEditor/Launch.xaml b/src/cascadia/TerminalSettingsEditor/Launch.xaml
index 67a4a44d0..de7f3136d 100644
--- a/src/cascadia/TerminalSettingsEditor/Launch.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Launch.xaml
@@ -37,8 +37,8 @@
         <StackPanel>
             <StackPanel Style="{StaticResource SettingsStackStyle}">
                 <!--  Default Profile  -->
-                <local:SettingContainer x:Uid="Globals_DefaultProfile"
-                                        Margin="0">
+                <local:SettingContainer x:Name="zzzknn"
+                                        x:Uid="Globals_DefaultProfile">
                     <ComboBox x:Name="DefaultProfile"
                               ItemsSource="{x:Bind DefaultProfiles}"
                               SelectedItem="{x:Bind CurrentDefaultProfile, Mode=TwoWay}"
@@ -168,8 +168,7 @@
                            Style="{StaticResource SubtitleTextBlockStyle}" />
 
                 <!--  Columns  -->
-                <local:SettingContainer x:Uid="Globals_InitialCols"
-                                        Margin="0">
+                <local:SettingContainer x:Uid="Globals_InitialCols">
                     <muxc:NumberBox x:Uid="Globals_InitialColsBox"
                                     Style="{StaticResource LaunchSizeNumberBoxStyle}"
                                     Value="{x:Bind State.Settings.GlobalSettings.InitialCols, Mode=TwoWay}" />
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles.xaml b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
index 230cfc2e8..d11424434 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
@@ -66,7 +66,6 @@
                             so the name will always be overridden.
                         -->
                         <local:SettingContainer x:Uid="Profile_Name"
-                                                Margin="0,0,0,24"
                                                 Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.IsBaseLayer), Mode=OneWay}">
                             <TextBox Style="{StaticResource TextBoxSettingStyle}"
                                      Text="{x:Bind State.Profile.Name, Mode=TwoWay}" />
@@ -75,7 +74,6 @@
                         <!--  Commandline  -->
                         <local:SettingContainer x:Name="CommandlineContainer"
                                                 x:Uid="Profile_Commandline"
-                                                Margin="0,0,0,24"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearCommandline}"
                                                 HasSettingValue="{x:Bind State.Profile.HasCommandline, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.CommandlineOverrideSource, Mode=OneWay}"
@@ -94,7 +92,6 @@
                         <!--  Starting Directory  -->
                         <local:SettingContainer x:Name="StartingDirectoryContainer"
                                                 x:Uid="Profile_StartingDirectory"
-                                                Margin="0"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearStartingDirectory}"
                                                 HasSettingValue="{x:Bind State.Profile.HasStartingDirectory, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.StartingDirectoryOverrideSource, Mode=OneWay}">
@@ -249,7 +246,6 @@
                             <!--  Opacity  -->
                             <local:SettingContainer x:Name="OpacityContainer"
                                                     x:Uid="Profile_Opacity"
-                                                    Margin="0"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearOpacity}"
                                                     HasSettingValue="{x:Bind State.Profile.HasOpacity, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.OpacityOverrideSource, Mode=OneWay}">
@@ -271,7 +267,6 @@
 
                             <!--  Use Acrylic  -->
                             <local:SettingContainer x:Uid="Profile_UseAcrylic"
-                                                    Margin="0"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearUseAcrylic}"
                                                     HasSettingValue="{x:Bind State.Profile.HasUseAcrylic, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.UseAcrylicOverrideSource, Mode=OneWay}">
@@ -288,7 +283,6 @@
 
                             <!--  Padding  -->
                             <local:SettingContainer x:Uid="Profile_Padding"
-                                                    Margin="0"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearPadding}"
                                                     HasSettingValue="{x:Bind State.Profile.HasPadding, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.PaddingOverrideSource, Mode=OneWay}">
@@ -405,7 +399,6 @@
                     <StackPanel Style="{StaticResource PivotStackStyle}">
                         <!--  Suppress Application Title  -->
                         <local:SettingContainer x:Uid="Profile_SuppressApplicationTitle"
-                                                Margin="0"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearSuppressApplicationTitle}"
                                                 HasSettingValue="{x:Bind State.Profile.HasSuppressApplicationTitle, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.SuppressApplicationTitleOverrideSource, Mode=OneWay}">
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp b/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
index 7d53785c6..0dac71246 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
@@ -72,6 +72,23 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
     void SettingContainer::OnApplyTemplate()
     {
+        if (const auto& child{ GetTemplateChild(L"ExpanderButton") })
+        {
+            if (const auto& toggleButton{ child.try_as<Controls::Primitives::ToggleButton>() })
+            {
+                toggleButton.Click([=](auto&&, auto&&) {
+                    if (const auto& expanderChild{ GetTemplateChild(L"MainContentContainer") })
+                    {
+                        if (const auto& expander{ expanderChild.try_as<Controls::Border>() })
+                        {
+                            const auto newVisibility = expander.Visibility() == Visibility::Visible ? Visibility::Collapsed : Visibility::Visible;
+                            expander.Visibility(newVisibility);
+                        }
+                    }
+                });
+            }
+        }
+
         if (const auto& child{ GetTemplateChild(L"ResetButton") })
         {
             if (const auto& button{ child.try_as<Controls::Button>() })
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
index 0597bcab9..0fde41dda 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -9,6 +9,48 @@
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     mc:Ignorable="d">
 
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
+                            ResourceKey="SystemControlForegroundTransparentBrush" />
+            <StaticResource x:Key="ExpanderTextColorExpandedPointerOver"
+                            ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <Style x:Key="SecondaryTextBlockStyle"
+                   TargetType="TextBlock">
+                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
+            </Style>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+            <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
+                            ResourceKey="SystemControlForegroundTransparentBrush" />
+            <StaticResource x:Key="ExpanderTextColorExpandedPointerOver"
+                            ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <Style x:Key="SecondaryTextBlockStyle"
+                   TargetType="TextBlock">
+                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
+            </Style>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="HighContrast">
+            <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
+                            ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="ExpanderTextColorExpandedPointerOver"
+                            ResourceKey="SystemColorHighlightTextColor" />
+            <Style x:Key="SecondaryTextBlockStyle"
+                   TargetType="TextBlock" />
+            <!--  Do not mess with the foreground color for High Contrast. Let it ride as is.  -->
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Dark">
+            <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
+                            ResourceKey="SystemControlForegroundTransparentBrush" />
+            <StaticResource x:Key="ExpanderTextColorExpandedPointerOver"
+                            ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <Style x:Key="SecondaryTextBlockStyle"
+                   TargetType="TextBlock">
+                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
+            </Style>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
     <Style x:Key="SettingContainerHeaderStyle"
            TargetType="StackPanel">
         <Setter Property="Orientation" Value="Horizontal" />
@@ -31,41 +73,452 @@
         <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
     </Style>
 
+    <Style x:Key="HeaderToggleButtonStyle"
+           TargetType="ToggleButton">
+        <Setter Property="Background" Value="{ThemeResource SystemControlTransparentBrush}" />
+        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="Height" Value="70" />
+        <Setter Property="Margin" Value="2" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+        <Setter Property="FontWeight" Value="SemiBold" />
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+        <Setter Property="UseSystemFocusVisuals" Value="True" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ToggleButton">
+                    <Grid x:Name="RootGrid"
+                          Background="{ThemeResource SystemChromeMediumColor}"
+                          CornerRadius="6">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <Rectangle x:Name="HoverPanel"
+                                   Grid.ColumnSpan="2"
+                                   Fill="Transparent"
+                                   Stroke="{TemplateBinding BorderBrush}"
+                                   StrokeThickness="{TemplateBinding BorderThickness}" />
+                        <ContentPresenter x:Name="ContentPresenter"
+                                          Grid.Column="0"
+                                          Width="100000000"
+                                          Margin="12,0,0,0"
+                                          Padding="{TemplateBinding Padding}"
+                                          HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                                          VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          AutomationProperties.AccessibilityView="Raw"
+                                          BorderBrush="{TemplateBinding BorderBrush}"
+                                          BorderThickness="{TemplateBinding BorderThickness}"
+                                          Content="{TemplateBinding Content}"
+                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                          ContentTransitions="{TemplateBinding ContentTransitions}"
+                                          Foreground="{TemplateBinding Foreground}"
+                                          RenderTransformOrigin="0.5,0.5" />
+                        <Slider x:Name="ArrowRotation"
+                                Maximum="180"
+                                Minimum="0"
+                                Visibility="Collapsed"
+                                Value="180" />
+                        <FontIcon x:Name="Arrow"
+                                  Grid.Column="1"
+                                  Margin="12"
+                                  FontFamily="Segoe MDL2 Assets"
+                                  FontSize="12"
+                                  Glyph="&#xE70D;"
+                                  RenderTransformOrigin="0.5,0.5">
+                            <FontIcon.RenderTransform>
+                                <RotateTransform />
+                            </FontIcon.RenderTransform>
+                        </FontIcon>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal">
+                                    <Storyboard>
+                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
+                                        <DoubleAnimation BeginTime="0:0:0"
+                                                         Storyboard.TargetName="Arrow"
+                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
+                                                         To="0.0"
+                                                         Duration="0:0:0" />
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{TemplateBinding BorderBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlBackgroundListLowBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderBorderBrushExpandedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
+                                        <DoubleAnimation BeginTime="0:0:0"
+                                                         Storyboard.TargetName="Arrow"
+                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
+                                                         To="0.0"
+                                                         Duration="0:0:0" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlBackgroundListMediumBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderBorderBrushExpandedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <DoubleAnimation BeginTime="0:0:0"
+                                                         Storyboard.TargetName="Arrow"
+                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
+                                                         To="0.0"
+                                                         Duration="0:0:0" />
+                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <DoubleAnimation BeginTime="0:0:0"
+                                                         Storyboard.TargetName="Arrow"
+                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
+                                                         To="0.0"
+                                                         Duration="0:0:0" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Checked">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlTransparentBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{TemplateBinding BorderBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
+                                        <DoubleAnimation BeginTime="0:0:0"
+                                                         Storyboard.TargetName="Arrow"
+                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
+                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
+                                                         Duration="0:0:0" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="CheckedPointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderBorderBrushExpandedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderTextColorExpandedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderTextColorExpandedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
+                                        <DoubleAnimation BeginTime="0:0:0"
+                                                         Storyboard.TargetName="Arrow"
+                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
+                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
+                                                         Duration="0:0:0" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="CheckedPressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderBorderBrushExpandedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderTextColorExpandedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ExpanderTextColorExpandedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <DoubleAnimation BeginTime="0:0:0"
+                                                         Storyboard.TargetName="Arrow"
+                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
+                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
+                                                         Duration="0:0:0" />
+                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="CheckedDisabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <DoubleAnimation BeginTime="0:0:0"
+                                                         Storyboard.TargetName="Arrow"
+                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
+                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
+                                                         Duration="0:0:0" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Indeterminate">
+                                    <Storyboard>
+                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="IndeterminatePointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="IndeterminatePressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="IndeterminateDisabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+
+                            <VisualStateGroup x:Name="ExpandDirectionStates">
+                                <VisualState x:Name="RightDirection" />
+                                <VisualState x:Name="DownDirection" />
+                                <VisualState x:Name="LeftDirection">
+                                    <VisualState.Setters>
+                                        <Setter Target="ArrowRotation.Value" Value="-90" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="UpDirection">
+                                    <VisualState.Setters>
+                                        <Setter Target="ArrowRotation.Value" Value="-90" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style TargetType="local:SettingContainer"
+           x:Key="AlternativeSettingContainerStyle">
+        <Setter Property="Margin" Value="0,0,8,0" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:SettingContainer">
+                    <Border>
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <!--  Expander header  -->
+                            <ToggleButton x:Name="ExpanderButton"
+                                          Grid.Row="0"
+                                          Grid.RowSpan="1"
+                                          RenderTransformOrigin="0.5,0.5"
+                                          Style="{StaticResource HeaderToggleButtonStyle}">
+                                <ToggleButton.Content>
+                                    <StackPanel Orientation="Horizontal">
+                                        <StackPanel Orientation="Vertical">
+                                            <TextBlock Text="{TemplateBinding Header}" />
+                                            <TextBlock FontSize="12"
+                                                       FontWeight="Normal"
+                                                       Style="{ThemeResource SecondaryTextBlockStyle}"
+                                                       Text="{TemplateBinding HelpText}" />
+                                        </StackPanel>
+                                    </StackPanel>
+                                </ToggleButton.Content>
+                            </ToggleButton>
+
+                            <!--  Expander content  -->
+                            <Border x:Name="MainContentContainer"
+                                    Grid.Row="1"
+                                    Grid.RowSpan="1"
+                                    Height="Auto"
+                                    Margin="12,4,0,0"
+                                    Visibility="Collapsed">
+                                <ContentPresenter HorizontalContentAlignment="Stretch"
+                                                  VerticalContentAlignment="Stretch"
+                                                  Content="{TemplateBinding Content}" />
+                            </Border>
+                        </Grid>
+
+                        <!--  Visual states  -->
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="ViewStates">
+                                <VisualStateGroup.Transitions>
+                                    <VisualTransition GeneratedDuration="0:0:0" />
+                                </VisualStateGroup.Transitions>
+                                <VisualState x:Name="Collapsed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainContentContainer"
+                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
+                                            <DiscreteObjectKeyFrame KeyTime="0:0:0"
+                                                                    Value="Collapsed" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Expanded">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainContentContainer"
+                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
+                                            <DiscreteObjectKeyFrame KeyTime="0:0:0"
+                                                                    Value="Visible" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style TargetType="local:SettingContainer">
-        <Setter Property="Margin" Value="0,24,0,0" />
+        <Setter Property="Margin" Value="0,0,8,0" />
         <Setter Property="IsTabStop" Value="False" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:SettingContainer">
                     <StackPanel>
-                        <Grid Height="60"
-                  HorizontalAlignment="Stretch"
-                  Margin="16"
-                  CornerRadius="4"
-                  Background="{ThemeResource SystemChromeMediumLowColor}">
+                        <Grid Height="70"
+                              Margin="2"
+                              HorizontalAlignment="Stretch"
+                              Background="{ThemeResource SystemChromeMediumColor}"
+                              CornerRadius="6">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="50" />
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="*" />
                             </Grid.ColumnDefinitions>
-                            <FontIcon Grid.Column="0"
-                          Style="{StaticResource SettingContainerFontIconStyle}"
-                          Glyph="&#xE710;" />
-                            <StackPanel Grid.Column="1"
-                                Orientation="Vertical"
-                                VerticalAlignment="Center">
-                                <TextBlock Text="{TemplateBinding Header}"
-                                   FontSize="16"/>
-                                <TextBlock Text="{TemplateBinding HelpText}"
-                                   FontSize="14"
-                                   Foreground="{ThemeResource SystemBaseMediumColor}"/>
+                            <StackPanel Grid.Column="0"
+                                        Margin="12,0,0,0"
+                                        VerticalAlignment="Center"
+                                        Orientation="Vertical">
+                                <TextBlock FontWeight="SemiBold"
+                                           Text="{TemplateBinding Header}" />
+                                <TextBlock FontSize="12"
+                                           FontWeight="Normal"
+                                           Style="{ThemeResource SecondaryTextBlockStyle}"
+                                           Text="{TemplateBinding HelpText}" />
                             </StackPanel>
-                            <ContentPresenter Grid.Column="2"
-                              HorizontalAlignment="Right"
-                              VerticalAlignment="Center"
-                              Margin="8"
-                              BorderBrush="Transparent"
-                              Content="{TemplateBinding Content}"/>
+                            <ContentPresenter Grid.Column="1"
+                                              Margin="8"
+                                              HorizontalAlignment="Right"
+                                              VerticalAlignment="Center"
+                                              BorderBrush="Transparent"
+                                              Content="{TemplateBinding Content}" />
                         </Grid>
                     </StackPanel>
                 </ControlTemplate>

From f3fd85731dbdcc65f15c8bb254e0dbaaae4e643a Mon Sep 17 00:00:00 2001
From: Pankaj Bhojwani <pabhojwa@microsoft.com>
Date: Mon, 8 Nov 2021 10:49:49 -0800
Subject: [PATCH 3/6] apparently this is the old expander

---
 .../TerminalSettingsEditor/Appearances.xaml   |   6 +-
 .../GlobalAppearance.xaml                     |   6 +-
 .../TerminalSettingsEditor/Interaction.xaml   |   6 +-
 .../TerminalSettingsEditor/Launch.xaml        |   9 +-
 .../TerminalSettingsEditor/Profiles.xaml      |  12 +-
 .../SettingContainerStyle.xaml                | 132 ++++++++++++------
 6 files changed, 117 insertions(+), 54 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.xaml b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
index a8f9f2ac2..5d5c99645 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
@@ -171,7 +171,8 @@
             <local:SettingContainer x:Uid="Profile_CursorShape"
                                     ClearSettingValue="{x:Bind Appearance.ClearCursorShape}"
                                     HasSettingValue="{x:Bind Appearance.HasCursorShape, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.CursorShapeOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.CursorShapeOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource AlternativeSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind CursorShapeList, Mode=OneWay}"
@@ -449,7 +450,8 @@
             <local:SettingContainer x:Uid="Appearance_IntenseTextStyle"
                                     ClearSettingValue="{x:Bind Appearance.ClearIntenseTextStyle}"
                                     HasSettingValue="{x:Bind Appearance.HasIntenseTextStyle, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.IntenseTextStyleOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.IntenseTextStyleOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource AlternativeSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind IntenseTextStyleList, Mode=OneWay}"
diff --git a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
index 002b7eda8..3929c2882 100644
--- a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
+++ b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
@@ -40,7 +40,8 @@
             </local:SettingContainer>
 
             <!--  Theme  -->
-            <local:SettingContainer x:Uid="Globals_Theme">
+            <local:SettingContainer x:Uid="Globals_Theme"
+                                    Style="{StaticResource AlternativeSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind ThemeList, Mode=OneWay}"
@@ -73,7 +74,8 @@
             </local:SettingContainer>
 
             <!--  Tab Width Mode  -->
-            <local:SettingContainer x:Uid="Globals_TabWidthMode">
+            <local:SettingContainer x:Uid="Globals_TabWidthMode"
+                                    Style="{StaticResource AlternativeSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind TabWidthModeList, Mode=OneWay}"
diff --git a/src/cascadia/TerminalSettingsEditor/Interaction.xaml b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
index 273d67eed..cc4548b2f 100644
--- a/src/cascadia/TerminalSettingsEditor/Interaction.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
@@ -32,7 +32,8 @@
             </local:SettingContainer>
 
             <!--  Copy Format  -->
-            <local:SettingContainer x:Uid="Globals_CopyFormat">
+            <local:SettingContainer x:Uid="Globals_CopyFormat"
+                                    Style="{StaticResource AlternativeSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind CopyFormatList, Mode=OneWay}"
@@ -62,7 +63,8 @@
             </local:SettingContainer>
 
             <!--  Tab Switcher Mode  -->
-            <local:SettingContainer x:Uid="Globals_TabSwitcherMode">
+            <local:SettingContainer x:Uid="Globals_TabSwitcherMode"
+                                    Style="{StaticResource AlternativeSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind TabSwitcherModeList}"
diff --git a/src/cascadia/TerminalSettingsEditor/Launch.xaml b/src/cascadia/TerminalSettingsEditor/Launch.xaml
index de7f3136d..7c7a81a1c 100644
--- a/src/cascadia/TerminalSettingsEditor/Launch.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Launch.xaml
@@ -135,7 +135,8 @@
 
                 <!--  First Window Behavior  -->
                 <local:SettingContainer x:Uid="Globals_FirstWindowPreference"
-                                        Visibility="{x:Bind ShowFirstWindowPreference}">
+                                        Visibility="{x:Bind ShowFirstWindowPreference}"
+                                        Style="{StaticResource AlternativeSettingContainerStyle}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind FirstWindowPreferenceList}"
@@ -145,7 +146,8 @@
 
                 <!--  Launch Mode  -->
                 <local:SettingContainer x:Name="Globals_LaunchMode"
-                                        x:Uid="Globals_LaunchMode">
+                                        x:Uid="Globals_LaunchMode"
+                                        Style="{StaticResource AlternativeSettingContainerStyle}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind LaunchModeList}"
@@ -153,7 +155,8 @@
                 </local:SettingContainer>
 
                 <!--  Launch Mode  -->
-                <local:SettingContainer x:Uid="Globals_WindowingBehavior">
+                <local:SettingContainer x:Uid="Globals_WindowingBehavior"
+                                        Style="{StaticResource AlternativeSettingContainerStyle}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind WindowingBehaviorList}"
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles.xaml b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
index d11424434..10593cd41 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
@@ -304,7 +304,8 @@
                             <local:SettingContainer x:Uid="Profile_ScrollbarVisibility"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearScrollState}"
                                                     HasSettingValue="{x:Bind State.Profile.HasScrollState, Mode=OneWay}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.ScrollStateOverrideSource, Mode=OneWay}">
+                                                    SettingOverrideSource="{x:Bind State.Profile.ScrollStateOverrideSource, Mode=OneWay}"
+                                                    Style="{StaticResource AlternativeSettingContainerStyle}">
                                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                    ItemsSource="{x:Bind ScrollStateList, Mode=OneWay}"
@@ -409,7 +410,8 @@
                         <local:SettingContainer x:Uid="Profile_AntialiasingMode"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearAntialiasingMode}"
                                                 HasSettingValue="{x:Bind State.Profile.HasAntialiasingMode, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.AntialiasingModeOverrideSource, Mode=OneWay}">
+                                                SettingOverrideSource="{x:Bind State.Profile.AntialiasingModeOverrideSource, Mode=OneWay}"
+                                                Style="{StaticResource AlternativeSettingContainerStyle}">
                             <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                                ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                ItemsSource="{x:Bind AntiAliasingModeList, Mode=OneWay}"
@@ -449,7 +451,8 @@
                         <local:SettingContainer x:Uid="Profile_CloseOnExit"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearCloseOnExit}"
                                                 HasSettingValue="{x:Bind State.Profile.HasCloseOnExit, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.CloseOnExitOverrideSource, Mode=OneWay}">
+                                                SettingOverrideSource="{x:Bind State.Profile.CloseOnExitOverrideSource, Mode=OneWay}"
+                                                Style="{StaticResource AlternativeSettingContainerStyle}">
                             <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                                ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                ItemsSource="{x:Bind CloseOnExitModeList, Mode=OneWay}"
@@ -460,7 +463,8 @@
                         <local:SettingContainer x:Uid="Profile_BellStyle"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearBellStyle}"
                                                 HasSettingValue="{x:Bind State.Profile.HasBellStyle, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.BellStyleOverrideSource, Mode=OneWay}">
+                                                SettingOverrideSource="{x:Bind State.Profile.BellStyleOverrideSource, Mode=OneWay}"
+                                                Style="{StaticResource AlternativeSettingContainerStyle}">
                             <StackPanel>
                                 <CheckBox x:Uid="Profile_BellStyleAudible"
                                           IsChecked="{x:Bind IsBellStyleFlagSet(1), BindBack=SetBellStyleAudible, Mode=TwoWay}" />
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
index 0fde41dda..07ba94b64 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -10,16 +10,6 @@
                     mc:Ignorable="d">
 
     <ResourceDictionary.ThemeDictionaries>
-        <ResourceDictionary x:Key="Default">
-            <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
-                            ResourceKey="SystemControlForegroundTransparentBrush" />
-            <StaticResource x:Key="ExpanderTextColorExpandedPointerOver"
-                            ResourceKey="SystemControlForegroundBaseHighBrush" />
-            <Style x:Key="SecondaryTextBlockStyle"
-                   TargetType="TextBlock">
-                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
-            </Style>
-        </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
             <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
                             ResourceKey="SystemControlForegroundTransparentBrush" />
@@ -29,6 +19,16 @@
                    TargetType="TextBlock">
                 <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
             </Style>
+            <Color x:Key="CardBackgroundFillColorDefault">#B3FFFFFF</Color>
+            <Color x:Key="CardStrokeColorDefault">#0F000000</Color>
+            <SolidColorBrush x:Key="CardBackgroundFillColorDefaultBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
+            <SolidColorBrush x:Key="CardStrokeColorDefaultBrush" Color="{StaticResource CardStrokeColorDefault}" />
+            <SolidColorBrush x:Key="SubgroupHeaderBrush" Color="{StaticResource SystemBaseMediumColor}" />
+            <StaticResource x:Key="ExpanderHeaderBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="ExpanderHeaderBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <x:Double x:Key="FlyoutThemeMinWidth">96</x:Double>
+            <Thickness x:Key="ExpanderHeaderBorderThickness">1</Thickness>
+            <CornerRadius x:Key="ControlCornerRadius">4</CornerRadius>
         </ResourceDictionary>
         <ResourceDictionary x:Key="HighContrast">
             <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
@@ -38,6 +38,16 @@
             <Style x:Key="SecondaryTextBlockStyle"
                    TargetType="TextBlock" />
             <!--  Do not mess with the foreground color for High Contrast. Let it ride as is.  -->
+            <Color x:Key="CardBackgroundFillColorDefault">#FF0000</Color>
+            <Color x:Key="CardStrokeColorDefault">#FF0000</Color>
+            <StaticResource x:Key="CardBackgroundFillColorDefaultBrush" ResourceKey="SystemColorButtonFaceColorBrush" />
+            <StaticResource x:Key="CardStrokeColorDefaultBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <StaticResource x:Key="ExpanderHeaderBackground" ResourceKey="SystemColorButtonFaceColorBrush" />
+            <StaticResource x:Key="ExpanderHeaderBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <SolidColorBrush x:Key="SubgroupHeaderBrush" Color="{ThemeResource SystemColorWindowTextColor}" />
+            <x:Double x:Key="FlyoutThemeMinWidth">96</x:Double>
+            <Thickness x:Key="ExpanderHeaderBorderThickness">2</Thickness>
+            <CornerRadius x:Key="ControlCornerRadius">4</CornerRadius>
         </ResourceDictionary>
         <ResourceDictionary x:Key="Dark">
             <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
@@ -48,6 +58,16 @@
                    TargetType="TextBlock">
                 <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
             </Style>
+            <Color x:Key="CardBackgroundFillColorDefault">#0DFFFFFF</Color>
+            <Color x:Key="CardStrokeColorDefault">#19000000</Color>
+            <SolidColorBrush x:Key="CardBackgroundFillColorDefaultBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
+            <SolidColorBrush x:Key="CardStrokeColorDefaultBrush" Color="{StaticResource CardStrokeColorDefault}" />
+            <SolidColorBrush x:Key="SubgroupHeaderBrush" Color="{StaticResource SystemBaseMediumColor}" />
+            <StaticResource x:Key="ExpanderHeaderBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="ExpanderHeaderBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <x:Double x:Key="FlyoutThemeMinWidth">96</x:Double>
+            <Thickness x:Key="ExpanderHeaderBorderThickness">1</Thickness>
+            <CornerRadius x:Key="ControlCornerRadius">4</CornerRadius>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
@@ -73,28 +93,59 @@
         <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
     </Style>
 
+    <Style x:Key="NonExpanderGrid" TargetType="Grid">
+        <Setter Property="Background" Value="{ThemeResource ExpanderHeaderBackground}" />
+        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
+        <Setter Property="MinHeight" Value="64" />
+        <Setter Property="BorderThickness" Value="{ThemeResource ExpanderHeaderBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ExpanderHeaderBorderBrush}" />
+        <Setter Property="Padding" Value="16,0,8,0" />
+        <Setter Property="Margin" Value="0,4,0,0" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+    </Style>
+
+    <Style
+        x:Key="SettingsPageItemHeaderStyle"
+        BasedOn="{StaticResource BodyTextBlockStyle}"
+        TargetType="TextBlock">
+        <Setter Property="Margin" Value="0,12,0,0" />
+        <Setter Property="LineHeight" Value="20" />
+        <Setter Property="TextWrapping" Value="WrapWholeWords" />
+    </Style>
+
+    <Style
+        x:Key="SettingsPageItemDescriptionStyle"
+        BasedOn="{StaticResource CaptionTextBlockStyle}"
+        TargetType="TextBlock">
+        <Setter Property="Margin" Value="0,0,24,12" />
+        <Setter Property="LineHeight" Value="16" />
+        <Setter Property="Foreground" Value="{ThemeResource SubgroupHeaderBrush}" />
+        <Setter Property="TextWrapping" Value="WrapWholeWords" />
+    </Style>
+    
     <Style x:Key="HeaderToggleButtonStyle"
            TargetType="ToggleButton">
         <Setter Property="Background" Value="{ThemeResource SystemControlTransparentBrush}" />
         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
-        <Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}" />
         <Setter Property="Padding" Value="0" />
-        <Setter Property="Height" Value="70" />
-        <Setter Property="Margin" Value="2" />
+        <Setter Property="MinHeight" Value="64" />
+        <Setter Property="Margin" Value="0,4,0,0" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
-        <Setter Property="FontWeight" Value="SemiBold" />
         <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
         <Setter Property="UseSystemFocusVisuals" Value="True" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">
                     <Grid x:Name="RootGrid"
-                          Background="{ThemeResource SystemChromeMediumColor}"
-                          CornerRadius="6">
+                          Background="{ThemeResource ExpanderHeaderBackground}"
+                          CornerRadius="{ThemeResource ControlCornerRadius}"
+                          BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
+                          BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
@@ -446,10 +497,15 @@
                                     Grid.Row="1"
                                     Grid.RowSpan="1"
                                     Height="Auto"
-                                    Margin="12,4,0,0"
-                                    Visibility="Collapsed">
+                                    Margin="0,0,0,2"
+                                    CornerRadius="{ThemeResource ControlCornerRadius}"
+                                    BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
+                                    BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
+                                    Visibility="Collapsed"
+                                    Background="{ThemeResource CardStrokeColorDefaultBrush}">
                                 <ContentPresenter HorizontalContentAlignment="Stretch"
                                                   VerticalContentAlignment="Stretch"
+                                                  Margin="16,4,16,8"
                                                   Content="{TemplateBinding Content}" />
                             </Border>
                         </Grid>
@@ -493,32 +549,26 @@
             <Setter.Value>
                 <ControlTemplate TargetType="local:SettingContainer">
                     <StackPanel>
-                        <Grid Height="70"
-                              Margin="2"
-                              HorizontalAlignment="Stretch"
-                              Background="{ThemeResource SystemChromeMediumColor}"
-                              CornerRadius="6">
+                        <Grid Style="{StaticResource NonExpanderGrid}"
+                              x:Name="ayy">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
-                            <StackPanel Grid.Column="0"
-                                        Margin="12,0,0,0"
-                                        VerticalAlignment="Center"
-                                        Orientation="Vertical">
-                                <TextBlock FontWeight="SemiBold"
-                                           Text="{TemplateBinding Header}" />
-                                <TextBlock FontSize="12"
-                                           FontWeight="Normal"
-                                           Style="{ThemeResource SecondaryTextBlockStyle}"
-                                           Text="{TemplateBinding HelpText}" />
+                            <StackPanel>
+                                <TextBlock
+                                Text="{TemplateBinding Header}"
+                                Style="{StaticResource SettingsPageItemHeaderStyle}" />
+                                <TextBlock Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                                           Text="{TemplateBinding HelpText}"/>
                             </StackPanel>
-                            <ContentPresenter Grid.Column="1"
-                                              Margin="8"
-                                              HorizontalAlignment="Right"
-                                              VerticalAlignment="Center"
-                                              BorderBrush="Transparent"
-                                              Content="{TemplateBinding Content}" />
+                            <ContentPresenter
+                            Grid.Column="1"
+                            MinWidth="0"
+                            HighContrastAdjustment="None"
+                                HorizontalAlignment="Right"
+                                VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}" />
                         </Grid>
                     </StackPanel>
                 </ControlTemplate>

From 13bbcbf50f9476f22fd78a4e7f803e4de9d30f13 Mon Sep 17 00:00:00 2001
From: Pankaj Bhojwani <pabhojwa@microsoft.com>
Date: Tue, 9 Nov 2021 14:38:31 -0800
Subject: [PATCH 4/6] just use muxc:expander

---
 .../TerminalSettingsEditor/Appearances.xaml   |   8 +-
 .../GlobalAppearance.xaml                     |   4 +-
 .../TerminalSettingsEditor/Interaction.xaml   |   8 +-
 .../TerminalSettingsEditor/Launch.xaml        |   9 +-
 .../TerminalSettingsEditor/Profiles.xaml      |  18 +-
 .../SettingContainer.cpp                      |  27 +-
 .../TerminalSettingsEditor/SettingContainer.h |   1 +
 .../SettingContainer.idl                      |   3 +
 .../SettingContainerStyle.xaml                | 456 ++----------------
 9 files changed, 84 insertions(+), 450 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.xaml b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
index 5d5c99645..244140b22 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
@@ -172,7 +172,7 @@
                                     ClearSettingValue="{x:Bind Appearance.ClearCursorShape}"
                                     HasSettingValue="{x:Bind Appearance.HasCursorShape, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.CursorShapeOverrideSource, Mode=OneWay}"
-                                    Style="{StaticResource AlternativeSettingContainerStyle}">
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind CursorShapeList, Mode=OneWay}"
@@ -210,6 +210,8 @@
             <!--  Background Image  -->
             <local:SettingContainer x:Name="BackgroundImageContainer"
                                     x:Uid="Profile_BackgroundImage"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}"
+                                    CurrentValue="{x:Bind Appearance.BackgroundImagePath, Mode=OneWay}"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImagePath}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImagePath, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImagePathOverrideSource, Mode=OneWay}">
@@ -234,6 +236,7 @@
             <local:SettingContainer x:Uid="Profile_BackgroundImageStretchMode"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImageStretchMode}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImageStretchMode, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImageStretchModeOverrideSource, Mode=OneWay}"
                                     Visibility="{x:Bind Appearance.BackgroundImageSettingsVisible, Mode=OneWay}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
@@ -245,6 +248,7 @@
             <!--  Background Image Alignment  -->
             <local:SettingContainer x:Uid="Profile_BackgroundImageAlignment"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImageAlignment}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImageAlignment, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImageAlignmentOverrideSource, Mode=OneWay}"
                                     Visibility="{x:Bind Appearance.BackgroundImageSettingsVisible, Mode=OneWay}">
@@ -451,7 +455,7 @@
                                     ClearSettingValue="{x:Bind Appearance.ClearIntenseTextStyle}"
                                     HasSettingValue="{x:Bind Appearance.HasIntenseTextStyle, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.IntenseTextStyleOverrideSource, Mode=OneWay}"
-                                    Style="{StaticResource AlternativeSettingContainerStyle}">
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind IntenseTextStyleList, Mode=OneWay}"
diff --git a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
index 3929c2882..4f969e8d5 100644
--- a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
+++ b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
@@ -41,7 +41,7 @@
 
             <!--  Theme  -->
             <local:SettingContainer x:Uid="Globals_Theme"
-                                    Style="{StaticResource AlternativeSettingContainerStyle}">
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind ThemeList, Mode=OneWay}"
@@ -75,7 +75,7 @@
 
             <!--  Tab Width Mode  -->
             <local:SettingContainer x:Uid="Globals_TabWidthMode"
-                                    Style="{StaticResource AlternativeSettingContainerStyle}">
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind TabWidthModeList, Mode=OneWay}"
diff --git a/src/cascadia/TerminalSettingsEditor/Interaction.xaml b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
index cc4548b2f..de64f99c8 100644
--- a/src/cascadia/TerminalSettingsEditor/Interaction.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
@@ -33,7 +33,7 @@
 
             <!--  Copy Format  -->
             <local:SettingContainer x:Uid="Globals_CopyFormat"
-                                    Style="{StaticResource AlternativeSettingContainerStyle}">
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind CopyFormatList, Mode=OneWay}"
@@ -51,7 +51,9 @@
             </local:SettingContainer>
 
             <!--  Word Delimiters  -->
-            <local:SettingContainer x:Uid="Globals_WordDelimiters">
+            <local:SettingContainer x:Uid="Globals_WordDelimiters"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}"
+                                    CurrentValue="{x:Bind State.Globals.WordDelimiters, Mode=OneWay}">
                 <TextBox IsSpellCheckEnabled="False"
                          Style="{StaticResource TextBoxSettingStyle}"
                          Text="{x:Bind State.Globals.WordDelimiters, Mode=TwoWay}" />
@@ -64,7 +66,7 @@
 
             <!--  Tab Switcher Mode  -->
             <local:SettingContainer x:Uid="Globals_TabSwitcherMode"
-                                    Style="{StaticResource AlternativeSettingContainerStyle}">
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind TabSwitcherModeList}"
diff --git a/src/cascadia/TerminalSettingsEditor/Launch.xaml b/src/cascadia/TerminalSettingsEditor/Launch.xaml
index 7c7a81a1c..c5e770a47 100644
--- a/src/cascadia/TerminalSettingsEditor/Launch.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Launch.xaml
@@ -37,8 +37,7 @@
         <StackPanel>
             <StackPanel Style="{StaticResource SettingsStackStyle}">
                 <!--  Default Profile  -->
-                <local:SettingContainer x:Name="zzzknn"
-                                        x:Uid="Globals_DefaultProfile">
+                <local:SettingContainer x:Uid="Globals_DefaultProfile">
                     <ComboBox x:Name="DefaultProfile"
                               ItemsSource="{x:Bind DefaultProfiles}"
                               SelectedItem="{x:Bind CurrentDefaultProfile, Mode=TwoWay}"
@@ -136,7 +135,7 @@
                 <!--  First Window Behavior  -->
                 <local:SettingContainer x:Uid="Globals_FirstWindowPreference"
                                         Visibility="{x:Bind ShowFirstWindowPreference}"
-                                        Style="{StaticResource AlternativeSettingContainerStyle}">
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind FirstWindowPreferenceList}"
@@ -147,7 +146,7 @@
                 <!--  Launch Mode  -->
                 <local:SettingContainer x:Name="Globals_LaunchMode"
                                         x:Uid="Globals_LaunchMode"
-                                        Style="{StaticResource AlternativeSettingContainerStyle}">
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind LaunchModeList}"
@@ -156,7 +155,7 @@
 
                 <!--  Launch Mode  -->
                 <local:SettingContainer x:Uid="Globals_WindowingBehavior"
-                                        Style="{StaticResource AlternativeSettingContainerStyle}">
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind WindowingBehaviorList}"
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles.xaml b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
index 10593cd41..e09d22ab3 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
@@ -66,6 +66,8 @@
                             so the name will always be overridden.
                         -->
                         <local:SettingContainer x:Uid="Profile_Name"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}"
+                                                CurrentValue="{x:Bind State.Profile.Name, Mode=OneWay}"
                                                 Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.IsBaseLayer), Mode=OneWay}">
                             <TextBox Style="{StaticResource TextBoxSettingStyle}"
                                      Text="{x:Bind State.Profile.Name, Mode=TwoWay}" />
@@ -77,6 +79,8 @@
                                                 ClearSettingValue="{x:Bind State.Profile.ClearCommandline}"
                                                 HasSettingValue="{x:Bind State.Profile.HasCommandline, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.CommandlineOverrideSource, Mode=OneWay}"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}"
+                                                CurrentValue="{x:Bind State.Profile.Commandline, Mode=OneWay}"
                                                 Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.IsBaseLayer), Mode=OneWay}">
                             <StackPanel Orientation="Horizontal">
                                 <TextBox x:Uid="Profile_CommandlineBox"
@@ -92,6 +96,8 @@
                         <!--  Starting Directory  -->
                         <local:SettingContainer x:Name="StartingDirectoryContainer"
                                                 x:Uid="Profile_StartingDirectory"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}"
+                                                CurrentValue="{x:Bind State.Profile.StartingDirectory, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearStartingDirectory}"
                                                 HasSettingValue="{x:Bind State.Profile.HasStartingDirectory, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.StartingDirectoryOverrideSource, Mode=OneWay}">
@@ -118,6 +124,8 @@
                         <local:SettingContainer x:Uid="Profile_Icon"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearIcon}"
                                                 HasSettingValue="{x:Bind State.Profile.HasIcon, Mode=OneWay}"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}"
+                                                CurrentValue="{x:Bind State.Profile.Icon, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.IconOverrideSource, Mode=OneWay}">
                             <StackPanel Orientation="Horizontal">
                                 <TextBox x:Uid="Profile_IconBox"
@@ -134,6 +142,8 @@
                         <!--  Tab Title  -->
                         <local:SettingContainer x:Uid="Profile_TabTitle"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearTabTitle}"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}"
+                                                CurrentValue="{x:Bind State.Profile.TabTitle, Mode=OneWay}"
                                                 HasSettingValue="{x:Bind State.Profile.HasTabTitle, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.TabTitleOverrideSource, Mode=OneWay}">
                             <TextBox Style="{StaticResource TextBoxSettingStyle}"
@@ -305,7 +315,7 @@
                                                     ClearSettingValue="{x:Bind State.Profile.ClearScrollState}"
                                                     HasSettingValue="{x:Bind State.Profile.HasScrollState, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.ScrollStateOverrideSource, Mode=OneWay}"
-                                                    Style="{StaticResource AlternativeSettingContainerStyle}">
+                                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                    ItemsSource="{x:Bind ScrollStateList, Mode=OneWay}"
@@ -411,7 +421,7 @@
                                                 ClearSettingValue="{x:Bind State.Profile.ClearAntialiasingMode}"
                                                 HasSettingValue="{x:Bind State.Profile.HasAntialiasingMode, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.AntialiasingModeOverrideSource, Mode=OneWay}"
-                                                Style="{StaticResource AlternativeSettingContainerStyle}">
+                                                Style="{StaticResource ExpanderSettingContainerStyle}">
                             <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                                ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                ItemsSource="{x:Bind AntiAliasingModeList, Mode=OneWay}"
@@ -452,7 +462,7 @@
                                                 ClearSettingValue="{x:Bind State.Profile.ClearCloseOnExit}"
                                                 HasSettingValue="{x:Bind State.Profile.HasCloseOnExit, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.CloseOnExitOverrideSource, Mode=OneWay}"
-                                                Style="{StaticResource AlternativeSettingContainerStyle}">
+                                                Style="{StaticResource ExpanderSettingContainerStyle}">
                             <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                                ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                                ItemsSource="{x:Bind CloseOnExitModeList, Mode=OneWay}"
@@ -464,7 +474,7 @@
                                                 ClearSettingValue="{x:Bind State.Profile.ClearBellStyle}"
                                                 HasSettingValue="{x:Bind State.Profile.HasBellStyle, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.BellStyleOverrideSource, Mode=OneWay}"
-                                                Style="{StaticResource AlternativeSettingContainerStyle}">
+                                                Style="{StaticResource ExpanderSettingContainerStyle}">
                             <StackPanel>
                                 <CheckBox x:Uid="Profile_BellStyleAudible"
                                           IsChecked="{x:Bind IsBellStyleFlagSet(1), BindBack=SetBellStyleAudible, Mode=TwoWay}" />
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp b/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
index 0dac71246..6b1189fe0 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
@@ -12,6 +12,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
     DependencyProperty SettingContainer::_HeaderProperty{ nullptr };
     DependencyProperty SettingContainer::_HelpTextProperty{ nullptr };
+    DependencyProperty SettingContainer::_CurrentValueProperty{ nullptr };
     DependencyProperty SettingContainer::_HasSettingValueProperty{ nullptr };
     DependencyProperty SettingContainer::_SettingOverrideSourceProperty{ nullptr };
 
@@ -43,6 +44,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                     xaml_typename<Editor::SettingContainer>(),
                     PropertyMetadata{ box_value(L"") });
         }
+        if (!_CurrentValueProperty)
+        {
+            _CurrentValueProperty =
+                DependencyProperty::Register(
+                    L"CurrentValue",
+                    xaml_typename<hstring>(),
+                    xaml_typename<Editor::SettingContainer>(),
+                    PropertyMetadata{ box_value(L"") });
+        }
         if (!_HasSettingValueProperty)
         {
             _HasSettingValueProperty =
@@ -72,23 +82,6 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
     void SettingContainer::OnApplyTemplate()
     {
-        if (const auto& child{ GetTemplateChild(L"ExpanderButton") })
-        {
-            if (const auto& toggleButton{ child.try_as<Controls::Primitives::ToggleButton>() })
-            {
-                toggleButton.Click([=](auto&&, auto&&) {
-                    if (const auto& expanderChild{ GetTemplateChild(L"MainContentContainer") })
-                    {
-                        if (const auto& expander{ expanderChild.try_as<Controls::Border>() })
-                        {
-                            const auto newVisibility = expander.Visibility() == Visibility::Visible ? Visibility::Collapsed : Visibility::Visible;
-                            expander.Visibility(newVisibility);
-                        }
-                    }
-                });
-            }
-        }
-
         if (const auto& child{ GetTemplateChild(L"ResetButton") })
         {
             if (const auto& button{ child.try_as<Controls::Button>() })
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.h b/src/cascadia/TerminalSettingsEditor/SettingContainer.h
index de9570e7f..7accd8735 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.h
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.h
@@ -31,6 +31,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         DEPENDENCY_PROPERTY(Windows::Foundation::IInspectable, Header);
         DEPENDENCY_PROPERTY(hstring, HelpText);
+        DEPENDENCY_PROPERTY(hstring, CurrentValue);
         DEPENDENCY_PROPERTY(bool, HasSettingValue);
         DEPENDENCY_PROPERTY(IInspectable, SettingOverrideSource);
         TYPED_EVENT(ClearSettingValue, Editor::SettingContainer, Windows::Foundation::IInspectable);
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.idl b/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
index 3c75cd2dc..39638ca4f 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
@@ -13,6 +13,9 @@ namespace Microsoft.Terminal.Settings.Editor
         String HelpText;
         static Windows.UI.Xaml.DependencyProperty HelpTextProperty { get; };
 
+        String CurrentValue;
+        static Windows.UI.Xaml.DependencyProperty CurrentValueProperty { get; };
+
         Boolean HasSettingValue;
         static Windows.UI.Xaml.DependencyProperty HasSettingValueProperty { get; };
 
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
index 07ba94b64..3d88cbfe1 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -7,6 +7,7 @@
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                     xmlns:local="using:Microsoft.Terminal.Settings.Editor"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
                     mc:Ignorable="d">
 
     <ResourceDictionary.ThemeDictionaries>
@@ -124,423 +125,6 @@
         <Setter Property="Foreground" Value="{ThemeResource SubgroupHeaderBrush}" />
         <Setter Property="TextWrapping" Value="WrapWholeWords" />
     </Style>
-    
-    <Style x:Key="HeaderToggleButtonStyle"
-           TargetType="ToggleButton">
-        <Setter Property="Background" Value="{ThemeResource SystemControlTransparentBrush}" />
-        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="MinHeight" Value="64" />
-        <Setter Property="Margin" Value="0,4,0,0" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
-        <Setter Property="VerticalAlignment" Value="Stretch" />
-        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
-        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
-        <Setter Property="UseSystemFocusVisuals" Value="True" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="ToggleButton">
-                    <Grid x:Name="RootGrid"
-                          Background="{ThemeResource ExpanderHeaderBackground}"
-                          CornerRadius="{ThemeResource ControlCornerRadius}"
-                          BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
-                          BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}">
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="*" />
-                            <ColumnDefinition Width="Auto" />
-                        </Grid.ColumnDefinitions>
-                        <Rectangle x:Name="HoverPanel"
-                                   Grid.ColumnSpan="2"
-                                   Fill="Transparent"
-                                   Stroke="{TemplateBinding BorderBrush}"
-                                   StrokeThickness="{TemplateBinding BorderThickness}" />
-                        <ContentPresenter x:Name="ContentPresenter"
-                                          Grid.Column="0"
-                                          Width="100000000"
-                                          Margin="12,0,0,0"
-                                          Padding="{TemplateBinding Padding}"
-                                          HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                                          VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                          AutomationProperties.AccessibilityView="Raw"
-                                          BorderBrush="{TemplateBinding BorderBrush}"
-                                          BorderThickness="{TemplateBinding BorderThickness}"
-                                          Content="{TemplateBinding Content}"
-                                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                                          ContentTransitions="{TemplateBinding ContentTransitions}"
-                                          Foreground="{TemplateBinding Foreground}"
-                                          RenderTransformOrigin="0.5,0.5" />
-                        <Slider x:Name="ArrowRotation"
-                                Maximum="180"
-                                Minimum="0"
-                                Visibility="Collapsed"
-                                Value="180" />
-                        <FontIcon x:Name="Arrow"
-                                  Grid.Column="1"
-                                  Margin="12"
-                                  FontFamily="Segoe MDL2 Assets"
-                                  FontSize="12"
-                                  Glyph="&#xE70D;"
-                                  RenderTransformOrigin="0.5,0.5">
-                            <FontIcon.RenderTransform>
-                                <RotateTransform />
-                            </FontIcon.RenderTransform>
-                        </FontIcon>
-
-                        <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup x:Name="CommonStates">
-                                <VisualState x:Name="Normal">
-                                    <Storyboard>
-                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
-                                        <DoubleAnimation BeginTime="0:0:0"
-                                                         Storyboard.TargetName="Arrow"
-                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
-                                                         To="0.0"
-                                                         Duration="0:0:0" />
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Stroke">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{TemplateBinding BorderBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="PointerOver">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlBackgroundListLowBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Stroke">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderBorderBrushExpandedPointerOver}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
-                                        <DoubleAnimation BeginTime="0:0:0"
-                                                         Storyboard.TargetName="Arrow"
-                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
-                                                         To="0.0"
-                                                         Duration="0:0:0" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="Pressed">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlBackgroundListMediumBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Stroke">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderBorderBrushExpandedPointerOver}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <DoubleAnimation BeginTime="0:0:0"
-                                                         Storyboard.TargetName="Arrow"
-                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
-                                                         To="0.0"
-                                                         Duration="0:0:0" />
-                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="Disabled">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <DoubleAnimation BeginTime="0:0:0"
-                                                         Storyboard.TargetName="Arrow"
-                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
-                                                         To="0.0"
-                                                         Duration="0:0:0" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="Checked">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlTransparentBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Stroke">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{TemplateBinding BorderBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
-                                        <DoubleAnimation BeginTime="0:0:0"
-                                                         Storyboard.TargetName="Arrow"
-                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
-                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
-                                                         Duration="0:0:0" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="CheckedPointerOver">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Stroke">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderBorderBrushExpandedPointerOver}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderTextColorExpandedPointerOver}" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderTextColorExpandedPointerOver}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
-                                        <DoubleAnimation BeginTime="0:0:0"
-                                                         Storyboard.TargetName="Arrow"
-                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
-                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
-                                                         Duration="0:0:0" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="CheckedPressed">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Stroke">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderBorderBrushExpandedPointerOver}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderTextColorExpandedPointerOver}" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource ExpanderTextColorExpandedPointerOver}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <DoubleAnimation BeginTime="0:0:0"
-                                                         Storyboard.TargetName="Arrow"
-                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
-                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
-                                                         Duration="0:0:0" />
-                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="CheckedDisabled">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                        <DoubleAnimation BeginTime="0:0:0"
-                                                         Storyboard.TargetName="Arrow"
-                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
-                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
-                                                         Duration="0:0:0" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="Indeterminate">
-                                    <Storyboard>
-                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="IndeterminatePointerOver">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="IndeterminatePressed">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="IndeterminateDisabled">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
-                                                                       Storyboard.TargetProperty="Fill">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                    </Storyboard>
-                                </VisualState>
-                            </VisualStateGroup>
-
-                            <VisualStateGroup x:Name="ExpandDirectionStates">
-                                <VisualState x:Name="RightDirection" />
-                                <VisualState x:Name="DownDirection" />
-                                <VisualState x:Name="LeftDirection">
-                                    <VisualState.Setters>
-                                        <Setter Target="ArrowRotation.Value" Value="-90" />
-                                    </VisualState.Setters>
-                                </VisualState>
-                                <VisualState x:Name="UpDirection">
-                                    <VisualState.Setters>
-                                        <Setter Target="ArrowRotation.Value" Value="-90" />
-                                    </VisualState.Setters>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
-                    </Grid>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
-    <Style TargetType="local:SettingContainer"
-           x:Key="AlternativeSettingContainerStyle">
-        <Setter Property="Margin" Value="0,0,8,0" />
-        <Setter Property="IsTabStop" Value="False" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="local:SettingContainer">
-                    <Border>
-                        <Grid>
-                            <Grid.RowDefinitions>
-                                <RowDefinition Height="Auto" />
-                                <RowDefinition Height="*" />
-                            </Grid.RowDefinitions>
-                            <!--  Expander header  -->
-                            <ToggleButton x:Name="ExpanderButton"
-                                          Grid.Row="0"
-                                          Grid.RowSpan="1"
-                                          RenderTransformOrigin="0.5,0.5"
-                                          Style="{StaticResource HeaderToggleButtonStyle}">
-                                <ToggleButton.Content>
-                                    <StackPanel Orientation="Horizontal">
-                                        <StackPanel Orientation="Vertical">
-                                            <TextBlock Text="{TemplateBinding Header}" />
-                                            <TextBlock FontSize="12"
-                                                       FontWeight="Normal"
-                                                       Style="{ThemeResource SecondaryTextBlockStyle}"
-                                                       Text="{TemplateBinding HelpText}" />
-                                        </StackPanel>
-                                    </StackPanel>
-                                </ToggleButton.Content>
-                            </ToggleButton>
-
-                            <!--  Expander content  -->
-                            <Border x:Name="MainContentContainer"
-                                    Grid.Row="1"
-                                    Grid.RowSpan="1"
-                                    Height="Auto"
-                                    Margin="0,0,0,2"
-                                    CornerRadius="{ThemeResource ControlCornerRadius}"
-                                    BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
-                                    BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
-                                    Visibility="Collapsed"
-                                    Background="{ThemeResource CardStrokeColorDefaultBrush}">
-                                <ContentPresenter HorizontalContentAlignment="Stretch"
-                                                  VerticalContentAlignment="Stretch"
-                                                  Margin="16,4,16,8"
-                                                  Content="{TemplateBinding Content}" />
-                            </Border>
-                        </Grid>
-
-                        <!--  Visual states  -->
-                        <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup x:Name="ViewStates">
-                                <VisualStateGroup.Transitions>
-                                    <VisualTransition GeneratedDuration="0:0:0" />
-                                </VisualStateGroup.Transitions>
-                                <VisualState x:Name="Collapsed">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainContentContainer"
-                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
-                                            <DiscreteObjectKeyFrame KeyTime="0:0:0"
-                                                                    Value="Collapsed" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="Expanded">
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainContentContainer"
-                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
-                                            <DiscreteObjectKeyFrame KeyTime="0:0:0"
-                                                                    Value="Visible" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                    </Storyboard>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
-                    </Border>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
 
     <Style TargetType="local:SettingContainer">
         <Setter Property="Margin" Value="0,0,8,0" />
@@ -576,4 +160,42 @@
         </Setter>
     </Style>
 
+    <Style TargetType="local:SettingContainer"
+           x:Key="ExpanderSettingContainerStyle">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:SettingContainer">
+                    <muxc:Expander Margin="0,4,8,0"
+                                   HorizontalAlignment="Stretch"
+                                   HorizontalContentAlignment="Stretch">
+                        <muxc:Expander.Header>
+                            <Grid MinHeight="64">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <StackPanel>
+                                    <TextBlock
+                                        Text="{TemplateBinding Header}"
+                                        Style="{StaticResource SettingsPageItemHeaderStyle}" />
+                                    <TextBlock Text="{TemplateBinding HelpText}"
+                                               Style="{StaticResource SettingsPageItemDescriptionStyle}" />
+                                </StackPanel>
+                                <TextBlock Grid.Column="1"
+                                           HorizontalAlignment="Right"
+                                           Margin="0,0,-16,0"
+                                           VerticalAlignment="Center"
+                                           Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                                           Text="{TemplateBinding CurrentValue}"/>
+                            </Grid>
+                        </muxc:Expander.Header>
+                        <muxc:Expander.Content>
+                            <ContentPresenter Content="{TemplateBinding Content}"/>
+                        </muxc:Expander.Content>
+                    </muxc:Expander>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
 </ResourceDictionary>

From 81d0c5c2d7a28ecbaee9b2ce9f1337d64ce79305 Mon Sep 17 00:00:00 2001
From: Pankaj Bhojwani <pabhojwa@microsoft.com>
Date: Tue, 9 Nov 2021 15:10:35 -0800
Subject: [PATCH 5/6] remove remnants of previous implementation, format

---
 .../TerminalSettingsEditor/Appearances.xaml   |  10 +-
 .../CommonResources.xaml                      |   2 +-
 .../TerminalSettingsEditor/Interaction.xaml   |   4 +-
 .../TerminalSettingsEditor/Launch.xaml        |   4 +-
 .../TerminalSettingsEditor/Profiles.xaml      |  20 ++--
 .../SettingContainerStyle.xaml                | 107 ++++++------------
 6 files changed, 53 insertions(+), 94 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.xaml b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
index 244140b22..b50416f20 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
@@ -210,11 +210,11 @@
             <!--  Background Image  -->
             <local:SettingContainer x:Name="BackgroundImageContainer"
                                     x:Uid="Profile_BackgroundImage"
-                                    Style="{StaticResource ExpanderSettingContainerStyle}"
-                                    CurrentValue="{x:Bind Appearance.BackgroundImagePath, Mode=OneWay}"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImagePath}"
+                                    CurrentValue="{x:Bind Appearance.BackgroundImagePath, Mode=OneWay}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImagePath, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.BackgroundImagePathOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.BackgroundImagePathOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <StackPanel Orientation="Vertical">
                     <StackPanel Orientation="Horizontal">
                         <TextBox IsEnabled="{x:Bind local:Converters.StringsAreNotEqual('desktopWallpaper', Appearance.BackgroundImagePath), Mode=OneWay}"
@@ -236,8 +236,8 @@
             <local:SettingContainer x:Uid="Profile_BackgroundImageStretchMode"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImageStretchMode}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImageStretchMode, Mode=OneWay}"
-                                    Style="{StaticResource ExpanderSettingContainerStyle}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImageStretchModeOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}"
                                     Visibility="{x:Bind Appearance.BackgroundImageSettingsVisible, Mode=OneWay}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
@@ -248,9 +248,9 @@
             <!--  Background Image Alignment  -->
             <local:SettingContainer x:Uid="Profile_BackgroundImageAlignment"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImageAlignment}"
-                                    Style="{StaticResource ExpanderSettingContainerStyle}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImageAlignment, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImageAlignmentOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}"
                                     Visibility="{x:Bind Appearance.BackgroundImageSettingsVisible, Mode=OneWay}">
                 <Grid HorizontalAlignment="Left">
                     <Grid.RowDefinitions>
diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
index 36cbb7980..20304fc18 100644
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -36,7 +36,7 @@
     <Style x:Key="PivotStackStyle"
            TargetType="StackPanel">
         <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="Margin" Value="13,0,0,48" />
+        <Setter Property="Margin" Value="0,0,0,48" />
     </Style>
 
     <!--  Combo Box  -->
diff --git a/src/cascadia/TerminalSettingsEditor/Interaction.xaml b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
index de64f99c8..1fba2248b 100644
--- a/src/cascadia/TerminalSettingsEditor/Interaction.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
@@ -52,8 +52,8 @@
 
             <!--  Word Delimiters  -->
             <local:SettingContainer x:Uid="Globals_WordDelimiters"
-                                    Style="{StaticResource ExpanderSettingContainerStyle}"
-                                    CurrentValue="{x:Bind State.Globals.WordDelimiters, Mode=OneWay}">
+                                    CurrentValue="{x:Bind State.Globals.WordDelimiters, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <TextBox IsSpellCheckEnabled="False"
                          Style="{StaticResource TextBoxSettingStyle}"
                          Text="{x:Bind State.Globals.WordDelimiters, Mode=TwoWay}" />
diff --git a/src/cascadia/TerminalSettingsEditor/Launch.xaml b/src/cascadia/TerminalSettingsEditor/Launch.xaml
index c5e770a47..a58730b6e 100644
--- a/src/cascadia/TerminalSettingsEditor/Launch.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Launch.xaml
@@ -134,8 +134,8 @@
 
                 <!--  First Window Behavior  -->
                 <local:SettingContainer x:Uid="Globals_FirstWindowPreference"
-                                        Visibility="{x:Bind ShowFirstWindowPreference}"
-                                        Style="{StaticResource ExpanderSettingContainerStyle}">
+                                        Style="{StaticResource ExpanderSettingContainerStyle}"
+                                        Visibility="{x:Bind ShowFirstWindowPreference}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind FirstWindowPreferenceList}"
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles.xaml b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
index e09d22ab3..ff7226823 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
@@ -66,8 +66,8 @@
                             so the name will always be overridden.
                         -->
                         <local:SettingContainer x:Uid="Profile_Name"
-                                                Style="{StaticResource ExpanderSettingContainerStyle}"
                                                 CurrentValue="{x:Bind State.Profile.Name, Mode=OneWay}"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}"
                                                 Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.IsBaseLayer), Mode=OneWay}">
                             <TextBox Style="{StaticResource TextBoxSettingStyle}"
                                      Text="{x:Bind State.Profile.Name, Mode=TwoWay}" />
@@ -77,10 +77,10 @@
                         <local:SettingContainer x:Name="CommandlineContainer"
                                                 x:Uid="Profile_Commandline"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearCommandline}"
+                                                CurrentValue="{x:Bind State.Profile.Commandline, Mode=OneWay}"
                                                 HasSettingValue="{x:Bind State.Profile.HasCommandline, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.CommandlineOverrideSource, Mode=OneWay}"
                                                 Style="{StaticResource ExpanderSettingContainerStyle}"
-                                                CurrentValue="{x:Bind State.Profile.Commandline, Mode=OneWay}"
                                                 Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.IsBaseLayer), Mode=OneWay}">
                             <StackPanel Orientation="Horizontal">
                                 <TextBox x:Uid="Profile_CommandlineBox"
@@ -96,11 +96,11 @@
                         <!--  Starting Directory  -->
                         <local:SettingContainer x:Name="StartingDirectoryContainer"
                                                 x:Uid="Profile_StartingDirectory"
-                                                Style="{StaticResource ExpanderSettingContainerStyle}"
-                                                CurrentValue="{x:Bind State.Profile.StartingDirectory, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearStartingDirectory}"
+                                                CurrentValue="{x:Bind State.Profile.StartingDirectory, Mode=OneWay}"
                                                 HasSettingValue="{x:Bind State.Profile.HasStartingDirectory, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.StartingDirectoryOverrideSource, Mode=OneWay}">
+                                                SettingOverrideSource="{x:Bind State.Profile.StartingDirectoryOverrideSource, Mode=OneWay}"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}">
                             <StackPanel Orientation="Vertical">
                                 <StackPanel Orientation="Horizontal">
                                     <TextBox x:Uid="Profile_StartingDirectoryBox"
@@ -123,10 +123,10 @@
                         <!--  Icon  -->
                         <local:SettingContainer x:Uid="Profile_Icon"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearIcon}"
-                                                HasSettingValue="{x:Bind State.Profile.HasIcon, Mode=OneWay}"
-                                                Style="{StaticResource ExpanderSettingContainerStyle}"
                                                 CurrentValue="{x:Bind State.Profile.Icon, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.IconOverrideSource, Mode=OneWay}">
+                                                HasSettingValue="{x:Bind State.Profile.HasIcon, Mode=OneWay}"
+                                                SettingOverrideSource="{x:Bind State.Profile.IconOverrideSource, Mode=OneWay}"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}">
                             <StackPanel Orientation="Horizontal">
                                 <TextBox x:Uid="Profile_IconBox"
                                          FontFamily="Segoe UI, Segoe MDL2 Assets"
@@ -142,10 +142,10 @@
                         <!--  Tab Title  -->
                         <local:SettingContainer x:Uid="Profile_TabTitle"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearTabTitle}"
-                                                Style="{StaticResource ExpanderSettingContainerStyle}"
                                                 CurrentValue="{x:Bind State.Profile.TabTitle, Mode=OneWay}"
                                                 HasSettingValue="{x:Bind State.Profile.HasTabTitle, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.TabTitleOverrideSource, Mode=OneWay}">
+                                                SettingOverrideSource="{x:Bind State.Profile.TabTitleOverrideSource, Mode=OneWay}"
+                                                Style="{StaticResource ExpanderSettingContainerStyle}">
                             <TextBox Style="{StaticResource TextBoxSettingStyle}"
                                      Text="{x:Bind State.Profile.TabTitle, Mode=TwoWay}" />
                         </local:SettingContainer>
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
index 3d88cbfe1..bfad7745c 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -12,63 +12,27 @@
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Light">
-            <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
-                            ResourceKey="SystemControlForegroundTransparentBrush" />
-            <StaticResource x:Key="ExpanderTextColorExpandedPointerOver"
-                            ResourceKey="SystemControlForegroundBaseHighBrush" />
             <Style x:Key="SecondaryTextBlockStyle"
                    TargetType="TextBlock">
                 <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
             </Style>
-            <Color x:Key="CardBackgroundFillColorDefault">#B3FFFFFF</Color>
-            <Color x:Key="CardStrokeColorDefault">#0F000000</Color>
-            <SolidColorBrush x:Key="CardBackgroundFillColorDefaultBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
-            <SolidColorBrush x:Key="CardStrokeColorDefaultBrush" Color="{StaticResource CardStrokeColorDefault}" />
-            <SolidColorBrush x:Key="SubgroupHeaderBrush" Color="{StaticResource SystemBaseMediumColor}" />
-            <StaticResource x:Key="ExpanderHeaderBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
-            <StaticResource x:Key="ExpanderHeaderBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
-            <x:Double x:Key="FlyoutThemeMinWidth">96</x:Double>
-            <Thickness x:Key="ExpanderHeaderBorderThickness">1</Thickness>
-            <CornerRadius x:Key="ControlCornerRadius">4</CornerRadius>
+            <SolidColorBrush x:Key="SubgroupHeaderBrush"
+                             Color="{StaticResource SystemBaseMediumColor}" />
         </ResourceDictionary>
         <ResourceDictionary x:Key="HighContrast">
-            <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
-                            ResourceKey="SystemControlHighlightBaseHighBrush" />
-            <StaticResource x:Key="ExpanderTextColorExpandedPointerOver"
-                            ResourceKey="SystemColorHighlightTextColor" />
             <Style x:Key="SecondaryTextBlockStyle"
                    TargetType="TextBlock" />
             <!--  Do not mess with the foreground color for High Contrast. Let it ride as is.  -->
-            <Color x:Key="CardBackgroundFillColorDefault">#FF0000</Color>
-            <Color x:Key="CardStrokeColorDefault">#FF0000</Color>
-            <StaticResource x:Key="CardBackgroundFillColorDefaultBrush" ResourceKey="SystemColorButtonFaceColorBrush" />
-            <StaticResource x:Key="CardStrokeColorDefaultBrush" ResourceKey="SystemColorButtonTextColorBrush" />
-            <StaticResource x:Key="ExpanderHeaderBackground" ResourceKey="SystemColorButtonFaceColorBrush" />
-            <StaticResource x:Key="ExpanderHeaderBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
-            <SolidColorBrush x:Key="SubgroupHeaderBrush" Color="{ThemeResource SystemColorWindowTextColor}" />
-            <x:Double x:Key="FlyoutThemeMinWidth">96</x:Double>
-            <Thickness x:Key="ExpanderHeaderBorderThickness">2</Thickness>
-            <CornerRadius x:Key="ControlCornerRadius">4</CornerRadius>
+            <SolidColorBrush x:Key="SubgroupHeaderBrush"
+                             Color="{ThemeResource SystemColorWindowTextColor}" />
         </ResourceDictionary>
         <ResourceDictionary x:Key="Dark">
-            <StaticResource x:Key="ExpanderBorderBrushExpandedPointerOver"
-                            ResourceKey="SystemControlForegroundTransparentBrush" />
-            <StaticResource x:Key="ExpanderTextColorExpandedPointerOver"
-                            ResourceKey="SystemControlForegroundBaseHighBrush" />
             <Style x:Key="SecondaryTextBlockStyle"
                    TargetType="TextBlock">
                 <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
             </Style>
-            <Color x:Key="CardBackgroundFillColorDefault">#0DFFFFFF</Color>
-            <Color x:Key="CardStrokeColorDefault">#19000000</Color>
-            <SolidColorBrush x:Key="CardBackgroundFillColorDefaultBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
-            <SolidColorBrush x:Key="CardStrokeColorDefaultBrush" Color="{StaticResource CardStrokeColorDefault}" />
-            <SolidColorBrush x:Key="SubgroupHeaderBrush" Color="{StaticResource SystemBaseMediumColor}" />
-            <StaticResource x:Key="ExpanderHeaderBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
-            <StaticResource x:Key="ExpanderHeaderBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
-            <x:Double x:Key="FlyoutThemeMinWidth">96</x:Double>
-            <Thickness x:Key="ExpanderHeaderBorderThickness">1</Thickness>
-            <CornerRadius x:Key="ControlCornerRadius">4</CornerRadius>
+            <SolidColorBrush x:Key="SubgroupHeaderBrush"
+                             Color="{StaticResource SystemBaseMediumColor}" />
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
@@ -94,7 +58,8 @@
         <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
     </Style>
 
-    <Style x:Key="NonExpanderGrid" TargetType="Grid">
+    <Style x:Key="NonExpanderGrid"
+           TargetType="Grid">
         <Setter Property="Background" Value="{ThemeResource ExpanderHeaderBackground}" />
         <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
         <Setter Property="MinHeight" Value="64" />
@@ -107,19 +72,17 @@
         <Setter Property="VerticalAlignment" Value="Stretch" />
     </Style>
 
-    <Style
-        x:Key="SettingsPageItemHeaderStyle"
-        BasedOn="{StaticResource BodyTextBlockStyle}"
-        TargetType="TextBlock">
+    <Style x:Key="SettingsPageItemHeaderStyle"
+           BasedOn="{StaticResource BodyTextBlockStyle}"
+           TargetType="TextBlock">
         <Setter Property="Margin" Value="0,12,0,0" />
         <Setter Property="LineHeight" Value="20" />
         <Setter Property="TextWrapping" Value="WrapWholeWords" />
     </Style>
 
-    <Style
-        x:Key="SettingsPageItemDescriptionStyle"
-        BasedOn="{StaticResource CaptionTextBlockStyle}"
-        TargetType="TextBlock">
+    <Style x:Key="SettingsPageItemDescriptionStyle"
+           BasedOn="{StaticResource CaptionTextBlockStyle}"
+           TargetType="TextBlock">
         <Setter Property="Margin" Value="0,0,24,12" />
         <Setter Property="LineHeight" Value="16" />
         <Setter Property="Foreground" Value="{ThemeResource SubgroupHeaderBrush}" />
@@ -133,26 +96,23 @@
             <Setter.Value>
                 <ControlTemplate TargetType="local:SettingContainer">
                     <StackPanel>
-                        <Grid Style="{StaticResource NonExpanderGrid}"
-                              x:Name="ayy">
+                        <Grid Style="{StaticResource NonExpanderGrid}">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
                             <StackPanel>
-                                <TextBlock
-                                Text="{TemplateBinding Header}"
-                                Style="{StaticResource SettingsPageItemHeaderStyle}" />
+                                <TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
+                                           Text="{TemplateBinding Header}" />
                                 <TextBlock Style="{StaticResource SettingsPageItemDescriptionStyle}"
-                                           Text="{TemplateBinding HelpText}"/>
+                                           Text="{TemplateBinding HelpText}" />
                             </StackPanel>
-                            <ContentPresenter
-                            Grid.Column="1"
-                            MinWidth="0"
-                            HighContrastAdjustment="None"
-                                HorizontalAlignment="Right"
-                                VerticalAlignment="Center"
-                            Content="{TemplateBinding Content}" />
+                            <ContentPresenter Grid.Column="1"
+                                              MinWidth="0"
+                                              HorizontalAlignment="Right"
+                                              VerticalAlignment="Center"
+                                              Content="{TemplateBinding Content}"
+                                              HighContrastAdjustment="None" />
                         </Grid>
                     </StackPanel>
                 </ControlTemplate>
@@ -160,8 +120,8 @@
         </Setter>
     </Style>
 
-    <Style TargetType="local:SettingContainer"
-           x:Key="ExpanderSettingContainerStyle">
+    <Style x:Key="ExpanderSettingContainerStyle"
+           TargetType="local:SettingContainer">
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:SettingContainer">
@@ -175,22 +135,21 @@
                                     <ColumnDefinition Width="Auto" />
                                 </Grid.ColumnDefinitions>
                                 <StackPanel>
-                                    <TextBlock
-                                        Text="{TemplateBinding Header}"
-                                        Style="{StaticResource SettingsPageItemHeaderStyle}" />
-                                    <TextBlock Text="{TemplateBinding HelpText}"
-                                               Style="{StaticResource SettingsPageItemDescriptionStyle}" />
+                                    <TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
+                                               Text="{TemplateBinding Header}" />
+                                    <TextBlock Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                                               Text="{TemplateBinding HelpText}" />
                                 </StackPanel>
                                 <TextBlock Grid.Column="1"
-                                           HorizontalAlignment="Right"
                                            Margin="0,0,-16,0"
+                                           HorizontalAlignment="Right"
                                            VerticalAlignment="Center"
                                            Style="{StaticResource SettingsPageItemDescriptionStyle}"
-                                           Text="{TemplateBinding CurrentValue}"/>
+                                           Text="{TemplateBinding CurrentValue}" />
                             </Grid>
                         </muxc:Expander.Header>
                         <muxc:Expander.Content>
-                            <ContentPresenter Content="{TemplateBinding Content}"/>
+                            <ContentPresenter Content="{TemplateBinding Content}" />
                         </muxc:Expander.Content>
                     </muxc:Expander>
                 </ControlTemplate>

From 61ae0a1a774feea8e116614e7c146aec794fcdf5 Mon Sep 17 00:00:00 2001
From: Pankaj Bhojwani <pabhojwa@microsoft.com>
Date: Wed, 10 Nov 2021 13:50:41 -0800
Subject: [PATCH 6/6] carlos comments

---
 .../CommonResources.xaml                      |  2 -
 .../SettingContainerStyle.xaml                | 44 ++++++++-----------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
index 20304fc18..2946a33a7 100644
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -28,14 +28,12 @@
     <!--  Used to stack a group of settings  -->
     <Style x:Key="SettingsStackStyle"
            TargetType="StackPanel">
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="Margin" Value="13,0,0,48" />
     </Style>
 
     <!--  Used to stack a group of settings inside a pivot  -->
     <Style x:Key="PivotStackStyle"
            TargetType="StackPanel">
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="Margin" Value="0,0,0,48" />
     </Style>
 
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
index bfad7745c..155fb792e 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -67,9 +67,7 @@
         <Setter Property="BorderBrush" Value="{ThemeResource ExpanderHeaderBorderBrush}" />
         <Setter Property="Padding" Value="16,0,8,0" />
         <Setter Property="Margin" Value="0,4,0,0" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
-        <Setter Property="VerticalAlignment" Value="Stretch" />
     </Style>
 
     <Style x:Key="SettingsPageItemHeaderStyle"
@@ -95,26 +93,22 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:SettingContainer">
-                    <StackPanel>
-                        <Grid Style="{StaticResource NonExpanderGrid}">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
-                            <StackPanel>
-                                <TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
-                                           Text="{TemplateBinding Header}" />
-                                <TextBlock Style="{StaticResource SettingsPageItemDescriptionStyle}"
-                                           Text="{TemplateBinding HelpText}" />
-                            </StackPanel>
-                            <ContentPresenter Grid.Column="1"
-                                              MinWidth="0"
-                                              HorizontalAlignment="Right"
-                                              VerticalAlignment="Center"
-                                              Content="{TemplateBinding Content}"
-                                              HighContrastAdjustment="None" />
-                        </Grid>
-                    </StackPanel>
+                    <Grid Style="{StaticResource NonExpanderGrid}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <StackPanel>
+                            <TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
+                                       Text="{TemplateBinding Header}" />
+                            <TextBlock Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                                       Text="{TemplateBinding HelpText}" />
+                        </StackPanel>
+                        <ContentPresenter Grid.Column="1"
+                                          HorizontalAlignment="Right"
+                                          VerticalAlignment="Center"
+                                          Content="{TemplateBinding Content}" />
+                    </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
@@ -127,7 +121,8 @@
                 <ControlTemplate TargetType="local:SettingContainer">
                     <muxc:Expander Margin="0,4,8,0"
                                    HorizontalAlignment="Stretch"
-                                   HorizontalContentAlignment="Stretch">
+                                   HorizontalContentAlignment="Stretch"
+                                   Content="{TemplateBinding Content}">
                         <muxc:Expander.Header>
                             <Grid MinHeight="64">
                                 <Grid.ColumnDefinitions>
@@ -148,9 +143,6 @@
                                            Text="{TemplateBinding CurrentValue}" />
                             </Grid>
                         </muxc:Expander.Header>
-                        <muxc:Expander.Content>
-                            <ContentPresenter Content="{TemplateBinding Content}" />
-                        </muxc:Expander.Content>
                     </muxc:Expander>
                 </ControlTemplate>
             </Setter.Value>