From 8c5d9e7c235556172e9ba67a62ebff5758be075c Mon Sep 17 00:00:00 2001
From: ProJend <projend@outlook.com>
Date: Sun, 1 Dec 2024 19:54:58 +0800
Subject: [PATCH 1/8] Make content fully stretch the available area

---
 components/SettingsControls/src/SettingsCard/SettingsCard.xaml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
index 3d2e4dd3..a3678397 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
@@ -198,8 +198,8 @@
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto"
                                                   MinWidth="{ThemeResource SettingsCardLeftIndention}" />
-                                <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
                             <VisualStateManager.VisualStateGroups>
@@ -308,6 +308,7 @@
                                         <VisualState.Setters>
                                             <Setter Target="PART_ContentPresenter.(Grid.Row)" Value="1" />
                                             <Setter Target="PART_ContentPresenter.(Grid.Column)" Value="1" />
+                                            <Setter Target="PART_ContentPresenter.(Grid.ColumnSpan)" Value="2" />
                                             <Setter Target="PART_ContentPresenter.HorizontalAlignment" Value="Stretch" />
                                             <Setter Target="PART_ContentPresenter.HorizontalContentAlignment" Value="Left" />
                                             <Setter Target="HeaderPanel.Margin" Value="0" />

From 176ac15ca88245995508377e82b4b9b8fe1c945c Mon Sep 17 00:00:00 2001
From: ProJend <projend@outlook.com>
Date: Tue, 3 Dec 2024 18:21:57 +0800
Subject: [PATCH 2/8] Add 'VisualState' for stretching Content

---
 .../src/SettingsCard/SettingsCard.xaml            | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
index a3678397..50a7be23 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
@@ -198,8 +198,8 @@
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto"
                                                   MinWidth="{ThemeResource SettingsCardLeftIndention}" />
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition x:Name="COLUMN_HeaderPanel" Width="*" />
+                                <ColumnDefinition x:Name="COLUMN_ContentPresenter" Width="Auto" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
                             <VisualStateManager.VisualStateGroups>
@@ -360,6 +360,17 @@
                                             <Setter Target="PART_ContentPresenter.HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource TemplatedParent}}" />
                                         </VisualState.Setters>
                                     </VisualState>
+
+                                    <!--  Whenever the control width is more than SettingsCardWrapThreshold, the Content is always to stretch to middle  -->
+                                    <VisualState>
+                                        <VisualState.StateTriggers>
+                                            <AdaptiveTrigger MinWindowWidth="{ThemeResource SettingsCardWrapThreshold}" /> 
+                                        </VisualState.StateTriggers>
+                                        <VisualState.Setters>
+                                            <Setter Target="COLUMN_HeaderPanel.Width" Value="Auto" />
+                                            <Setter Target="COLUMN_ContentPresenter.Width" Value="*" />
+                                        </VisualState.Setters>
+                                    </VisualState>
                                 </VisualStateGroup>
 
                                 <!--  Collapsing the Content presenter whenever it's empty  -->

From 7969f5a7314fd3dd962a974ff40c73eab69aab14 Mon Sep 17 00:00:00 2001
From: ProJend <projend@outlook.com>
Date: Tue, 3 Dec 2024 21:03:15 +0800
Subject: [PATCH 3/8] Add 'MaxWidth' target to wrap header

---
 components/SettingsControls/src/SettingsCard/SettingsCard.xaml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
index 50a7be23..79b13a9a 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
@@ -102,6 +102,7 @@
     <x:Double x:Key="SettingsCardDescriptionFontSize">12</x:Double>
     <x:Double x:Key="SettingsCardHeaderIconMaxSize">20</x:Double>
     <x:Double x:Key="SettingsCardLeftIndention">0</x:Double>
+    <x:Double x:Key="SettingsCardHeaderPanelMaxWidth">477</x:Double>
     <x:Double x:Key="SettingsCardContentMinWidth">120</x:Double>
     <Thickness x:Key="SettingsCardHeaderIconMargin">2,0,20,0</Thickness>
     <Thickness x:Key="SettingsCardActionIconMargin">14,0,0,0</Thickness>
@@ -369,6 +370,7 @@
                                         <VisualState.Setters>
                                             <Setter Target="COLUMN_HeaderPanel.Width" Value="Auto" />
                                             <Setter Target="COLUMN_ContentPresenter.Width" Value="*" />
+                                            <Setter Target="HeaderPanel.MaxWidth" Value="{ThemeResource SettingsCardHeaderPanelMaxWidth}" />
                                         </VisualState.Setters>
                                     </VisualState>
                                 </VisualStateGroup>

From 791ab3afc41d6a9dd648290368584d1aa8fc6b75 Mon Sep 17 00:00:00 2001
From: ProJend <projend@outlook.com>
Date: Wed, 4 Dec 2024 13:57:02 +0800
Subject: [PATCH 4/8] Add property Horizontal ContentAlignment to SettingsCard

---
 .../src/SettingsCard/SettingsCard.Properties.cs            | 6 +++++-
 .../SettingsControls/src/SettingsCard/SettingsCard.cs      | 2 ++
 .../SettingsControls/src/SettingsCard/SettingsCard.xaml    | 7 ++++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.Properties.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.Properties.cs
index 6152a04e..8d408a2e 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.Properties.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.Properties.cs
@@ -190,5 +190,9 @@ public enum ContentAlignment
     /// <summary>
     /// The Content is vertically aligned.
     /// </summary>
-    Vertical
+    Vertical,
+    /// <summary>
+    /// The Content is horizontally aligned.
+    /// </summary>
+    Horizontal
 }
diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
index 6e1e064b..222d8828 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
@@ -26,6 +26,7 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplateVisualState(Name = RightWrappedNoIconState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = LeftState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = VerticalState, GroupName = ContentAlignmentStates)]
+[TemplateVisualState(Name = HorizontalState, GroupName = ContentAlignmentStates)]
 
 [TemplateVisualState(Name = NoContentSpacingState, GroupName = ContentSpacingStates)]
 [TemplateVisualState(Name = ContentSpacingState, GroupName = ContentSpacingStates)]
@@ -44,6 +45,7 @@ public partial class SettingsCard : ButtonBase
     internal const string RightWrappedNoIconState = "RightWrappedNoIcon";
     internal const string LeftState = "Left";
     internal const string VerticalState = "Vertical";
+    internal const string HorizontalState = "Horizontal";
 
     internal const string ContentSpacingStates = "ContentSpacingStates";
     internal const string NoContentSpacingState = "NoContentSpacing";
diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
index 79b13a9a..175b93fb 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
@@ -362,10 +362,11 @@
                                         </VisualState.Setters>
                                     </VisualState>
 
-                                    <!--  Whenever the control width is more than SettingsCardWrapThreshold, the Content is always to stretch to middle  -->
-                                    <VisualState>
+                                    <!--  Whenever the control width is more than SettingsCardWrapThreshold, the Content horizontally stretch to middle  -->
+                                    <VisualState x:Name="Horizontal">
                                         <VisualState.StateTriggers>
-                                            <AdaptiveTrigger MinWindowWidth="{ThemeResource SettingsCardWrapThreshold}" /> 
+                                            <tk:IsEqualStateTrigger Value="{Binding ContentAlignment, RelativeSource={RelativeSource TemplatedParent}}"
+                                                                    To="Horizontal" />
                                         </VisualState.StateTriggers>
                                         <VisualState.Setters>
                                             <Setter Target="COLUMN_HeaderPanel.Width" Value="Auto" />

From a1a3a6324b1efea6c872137bdcc1fe3ef611a174 Mon Sep 17 00:00:00 2001
From: ProJend <projend@outlook.com>
Date: Wed, 4 Dec 2024 17:43:11 +0800
Subject: [PATCH 5/8] Add sample SettingsCard with Horizontal ContentAlignment

---
 .../samples/SettingsExpanderSample.xaml       | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/components/SettingsControls/samples/SettingsExpanderSample.xaml b/components/SettingsControls/samples/SettingsExpanderSample.xaml
index 7c96fb97..aee8e6ca 100644
--- a/components/SettingsControls/samples/SettingsExpanderSample.xaml
+++ b/components/SettingsControls/samples/SettingsExpanderSample.xaml
@@ -65,6 +65,34 @@
                     </GridViewItem>
                 </GridView>
             </local:SettingsCard>
+            <local:SettingsCard
+                ContentAlignment="Horizontal"
+                Description="You can also align your content horizontally. Additional image will stretch to middle. You still can override this breakpoint by setting both SettingsCardWrapThreshold and additional SettingsCardHeaderPanelMaxWidth resoure to wrap vertically."
+                Header="Horizontally aligned">
+                <local:SettingsCard.Resources>
+                    <x:Double x:Key="SettingsCardHeaderPanelMaxWidth">550</x:Double>
+                    <x:Double x:Key="SettingsCardWrapThreshold">700</x:Double>
+                </local:SettingsCard.Resources>
+                <Grid x:Name="SettingsCard">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="auto" />
+                    </Grid.ColumnDefinitions>
+                    <Grid
+                        x:Name="AdditionalContent"
+                        Grid.Column="0"
+                        MaxHeight="96"
+                        Margin="0,0,20,0"
+                        Background="Pink"
+                        CornerRadius="4">
+                        <Image
+                            VerticalAlignment="Center"
+                            Source="/Assets/SplashScreen.png"
+                            Stretch="UniformToFill" />
+                    </Grid>
+                    <Button x:Name="PressedContent" Grid.Column="1">Button</Button>
+                </Grid>
+            </local:SettingsCard>
             <local:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
                                 Header="Customization">
                 <local:SettingsCard.Resources>

From 14d982150906cba177b5747f6549bab1a938ce26 Mon Sep 17 00:00:00 2001
From: ProJend <projend@outlook.com>
Date: Sun, 8 Dec 2024 21:34:42 +0800
Subject: [PATCH 6/8] Simplify RightAlignedCompactToggleSwitchStyle

---
 .../src/SettingsCard/SettingsCard.xaml        | 624 +-----------------
 1 file changed, 7 insertions(+), 617 deletions(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
index 175b93fb..bb63321f 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
@@ -1,4 +1,4 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="using:CommunityToolkit.WinUI.Controls"
@@ -141,8 +141,12 @@
                 <Setter.Value>
                     <ResourceDictionary>
                         <!--  Making sure ToggleSwitches are right-aligned by default  -->
-                        <Style BasedOn="{StaticResource RightAlignedCompactToggleSwitchStyle}"
-                               TargetType="ToggleSwitch" />
+                        <Style BasedOn="{StaticResource DefaultToggleSwitchStyle}"
+                               TargetType="ToggleSwitch" >
+                            <Style.Setters>
+                                <Setter Property="MinWidth" Value="0" />
+                            </Style.Setters>
+                        </Style>
                         <!--  Overriding the MinWidth of various types of controls so they neatly align  -->
                         <Style BasedOn="{StaticResource DefaultSliderStyle}"
                                TargetType="Slider">
@@ -483,618 +487,4 @@
             </Setter>
         </Style.Setters>
     </Style>
-
-    <Style x:Key="RightAlignedCompactToggleSwitchStyle"
-           BasedOn="{StaticResource DefaultToggleSwitchStyle}"
-           TargetType="ToggleSwitch">
-        <Style.Setters>
-            <Setter Property="MinWidth" Value="0" />
-            <Setter Property="Height" Value="36" />
-            <Setter Property="HorizontalContentAlignment" Value="Right" />
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="ToggleSwitch">
-                        <Grid VerticalAlignment="Stretch"
-                              Background="{TemplateBinding Background}"
-                              BorderBrush="{TemplateBinding BorderBrush}"
-                              BorderThickness="{TemplateBinding BorderThickness}"
-                              Control.IsTemplateFocusTarget="True"
-                              CornerRadius="{TemplateBinding CornerRadius}">
-                            <VisualStateManager.VisualStateGroups>
-                                <VisualStateGroup x:Name="CommonStates">
-                                    <VisualState x:Name="Normal">
-                                        <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                           Storyboard.TargetProperty="Stroke">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchStrokeOff}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchFillOff}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchKnobFillOff}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Background">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchKnobFillOn}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchFillOn}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Stroke">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchStrokeOn}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid"
-                                                                           Storyboard.TargetProperty="Background">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchContainerBackground}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Width">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="12" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Height">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="12" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Width">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="12" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Height">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="12" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                    <VisualState x:Name="PointerOver">
-                                        <Storyboard>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                          Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchStrokeOffPointerOver}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchFillOffPointerOver}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchKnobFillOffPointerOver}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Background">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchKnobFillOnPointerOver}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchFillOnPointerOver}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Stroke">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchStrokeOnPointerOver}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid"
-                                                                          Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchContainerBackgroundPointerOver}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Width">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="14" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Height">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="14" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Width">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="14" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Height">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="14" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                    <VisualState x:Name="Pressed">
-                                        <VisualState.Setters>
-                                            <Setter Target="SwitchKnobOn.HorizontalAlignment" Value="Right" />
-                                            <Setter Target="SwitchKnobOn.Margin" Value="0,0,3,0" />
-                                            <Setter Target="SwitchKnobOff.HorizontalAlignment" Value="Left" />
-                                            <Setter Target="SwitchKnobOff.Margin" Value="3,0,0,0" />
-                                        </VisualState.Setters>
-                                        <Storyboard>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                          Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchStrokeOffPressed}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchFillOffPressed}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchFillOnPressed}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Stroke">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchStrokeOnPressed}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchKnobFillOffPressed}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Background">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchKnobFillOnPressed}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid"
-                                                                          Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchContainerBackgroundPressed}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Width">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="17" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Height">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="14" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Width">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="17" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Height">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="14" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                    <VisualState x:Name="Disabled">
-                                        <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"
-                                                                           Storyboard.TargetProperty="Foreground">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchHeaderForegroundDisabled}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter"
-                                                                           Storyboard.TargetProperty="Foreground">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter"
-                                                                           Storyboard.TargetProperty="Foreground">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                          Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchStrokeOffDisabled}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchFillOffDisabled}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchFillOnDisabled}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Stroke">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchStrokeOnDisabled}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Fill">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchKnobFillOffDisabled}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Background">
-                                                <DiscreteObjectKeyFrame KeyTime="0"
-                                                                        Value="{ThemeResource ToggleSwitchKnobFillOnDisabled}" />
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid"
-                                                                          Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
-                                                <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                     Value="{ThemeResource ToggleSwitchContainerBackgroundDisabled}" />
-                                            </ColorAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Width">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlNormalAnimationDuration}"
-                                                                      Value="12" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Height">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlNormalAnimationDuration}"
-                                                                      Value="12" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Width">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlNormalAnimationDuration}"
-                                                                      Value="12" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
-                                                                           Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Height">
-                                                <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
-                                                                      KeyTime="{StaticResource ControlNormalAnimationDuration}"
-                                                                      Value="12" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                </VisualStateGroup>
-                                <VisualStateGroup x:Name="ToggleStates">
-                                    <VisualStateGroup.Transitions>
-                                        <VisualTransition x:Name="DraggingToOnTransition"
-                                                          win:GeneratedDuration="0"
-                                                          From="Dragging"
-                                                          To="On">
-                                            <Storyboard>
-                                                <win:RepositionThemeAnimation FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOnOffset}"
-                                                                              TargetName="SwitchKnob" />
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="1" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="0" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="1" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="0" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                            </Storyboard>
-                                        </VisualTransition>
-                                        <VisualTransition x:Name="OnToDraggingTransition"
-                                                          win:GeneratedDuration="0"
-                                                          From="On"
-                                                          To="Dragging">
-                                            <Storyboard>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="0"
-                                                                          Value="1" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="0"
-                                                                          Value="1" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="0"
-                                                                          Value="0" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                            </Storyboard>
-                                        </VisualTransition>
-                                        <VisualTransition x:Name="DraggingToOffTransition"
-                                                          win:GeneratedDuration="0"
-                                                          From="Dragging"
-                                                          To="Off">
-                                            <Storyboard>
-                                                <win:RepositionThemeAnimation FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOffOffset}"
-                                                                              TargetName="SwitchKnob" />
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="0" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="0" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="1" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                            </Storyboard>
-                                        </VisualTransition>
-                                        <VisualTransition x:Name="OnToOffTransition"
-                                                          win:GeneratedDuration="0"
-                                                          From="On"
-                                                          To="Off">
-                                            <Storyboard>
-                                                <win:RepositionThemeAnimation FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOnToOffOffset}"
-                                                                              TargetName="SwitchKnob" />
-                                            </Storyboard>
-                                        </VisualTransition>
-                                        <VisualTransition x:Name="OffToOnTransition"
-                                                          win:GeneratedDuration="0"
-                                                          From="Off"
-                                                          To="On">
-                                            <Storyboard>
-                                                <win:RepositionThemeAnimation FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOffToOnOffset}"
-                                                                              TargetName="SwitchKnob" />
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="1" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="0" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="1" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                               Storyboard.TargetProperty="Opacity">
-                                                    <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                          Value="0" />
-                                                </DoubleAnimationUsingKeyFrames>
-                                            </Storyboard>
-                                        </VisualTransition>
-                                    </VisualStateGroup.Transitions>
-                                    <VisualState x:Name="Dragging" />
-                                    <VisualState x:Name="Off" />
-                                    <VisualState x:Name="On">
-                                        <Storyboard>
-                                            <DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
-                                                             Storyboard.TargetProperty="X"
-                                                             To="20"
-                                                             Duration="0" />
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
-                                                                           Storyboard.TargetProperty="Opacity">
-                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="1" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
-                                                                           Storyboard.TargetProperty="Opacity">
-                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="0" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
-                                                                           Storyboard.TargetProperty="Opacity">
-                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="1" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
-                                                                           Storyboard.TargetProperty="Opacity">
-                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
-                                                                      Value="0" />
-                                            </DoubleAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                </VisualStateGroup>
-                                <VisualStateGroup x:Name="ContentStates">
-                                    <VisualState x:Name="OffContent">
-                                        <Storyboard>
-                                            <DoubleAnimation Storyboard.TargetName="OffContentPresenter"
-                                                             Storyboard.TargetProperty="Opacity"
-                                                             To="1"
-                                                             Duration="0" />
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter"
-                                                                           Storyboard.TargetProperty="IsHitTestVisible">
-                                                <DiscreteObjectKeyFrame KeyTime="0">
-                                                    <DiscreteObjectKeyFrame.Value>
-                                                        <x:Boolean>True</x:Boolean>
-                                                    </DiscreteObjectKeyFrame.Value>
-                                                </DiscreteObjectKeyFrame>
-                                            </ObjectAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                    <VisualState x:Name="OnContent">
-                                        <Storyboard>
-                                            <DoubleAnimation Storyboard.TargetName="OnContentPresenter"
-                                                             Storyboard.TargetProperty="Opacity"
-                                                             To="1"
-                                                             Duration="0" />
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter"
-                                                                           Storyboard.TargetProperty="IsHitTestVisible">
-                                                <DiscreteObjectKeyFrame KeyTime="0">
-                                                    <DiscreteObjectKeyFrame.Value>
-                                                        <x:Boolean>True</x:Boolean>
-                                                    </DiscreteObjectKeyFrame.Value>
-                                                </DiscreteObjectKeyFrame>
-                                            </ObjectAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                </VisualStateGroup>
-                            </VisualStateManager.VisualStateGroups>
-                            <ContentPresenter x:Name="HeaderContentPresenter"
-                                              Grid.Row="0"
-                                              Margin="{ThemeResource ToggleSwitchTopHeaderMargin}"
-                                              VerticalAlignment="Top"
-                                              win:AutomationProperties.AccessibilityView="Raw"
-                                              x:DeferLoadStrategy="Lazy"
-                                              Content="{TemplateBinding Header}"
-                                              ContentTemplate="{TemplateBinding HeaderTemplate}"
-                                              Foreground="{ThemeResource ToggleSwitchHeaderForeground}"
-                                              IsHitTestVisible="False"
-                                              TextWrapping="Wrap"
-                                              Visibility="Collapsed" />
-                            <Grid Grid.Row="1"
-                                  HorizontalAlignment="Right"
-                                  VerticalAlignment="Center">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="12"
-                                                      MaxWidth="12" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <Grid x:Name="SwitchAreaGrid"
-                                      Grid.RowSpan="3"
-                                      Grid.ColumnSpan="3"
-                                      Margin="0,5"
-                                      Background="{ThemeResource ToggleSwitchContainerBackground}"
-                                      CornerRadius="{TemplateBinding CornerRadius}" />
-                                <ContentPresenter x:Name="OffContentPresenter"
-                                                  Grid.RowSpan="3"
-                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                                  win:AutomationProperties.AccessibilityView="Raw"
-                                                  Content="{TemplateBinding OffContent}"
-                                                  ContentTemplate="{TemplateBinding OffContentTemplate}"
-                                                  Foreground="{TemplateBinding Foreground}"
-                                                  IsHitTestVisible="False"
-                                                  Opacity="0" />
-                                <ContentPresenter x:Name="OnContentPresenter"
-                                                  Grid.RowSpan="3"
-                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                                  win:AutomationProperties.AccessibilityView="Raw"
-                                                  Content="{TemplateBinding OnContent}"
-                                                  ContentTemplate="{TemplateBinding OnContentTemplate}"
-                                                  Foreground="{TemplateBinding Foreground}"
-                                                  IsHitTestVisible="False"
-                                                  Opacity="0" />
-                                <Rectangle x:Name="OuterBorder"
-                                           Grid.Row="1"
-                                           Grid.Column="2"
-                                           Width="40"
-                                           Height="20"
-                                           Fill="{ThemeResource ToggleSwitchFillOff}"
-                                           RadiusX="10"
-                                           RadiusY="10"
-                                           Stroke="{ThemeResource ToggleSwitchStrokeOff}"
-                                           StrokeThickness="{ThemeResource ToggleSwitchOuterBorderStrokeThickness}" />
-                                <Rectangle x:Name="SwitchKnobBounds"
-                                           Grid.Row="1"
-                                           Grid.Column="2"
-                                           Width="40"
-                                           Height="20"
-                                           Fill="{ThemeResource ToggleSwitchFillOn}"
-                                           Opacity="0"
-                                           RadiusX="10"
-                                           RadiusY="10"
-                                           Stroke="{ThemeResource ToggleSwitchStrokeOn}"
-                                           StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}" />
-                                <Grid x:Name="SwitchKnob"
-                                      Grid.Row="1"
-                                      Grid.Column="2"
-                                      Width="20"
-                                      Height="20"
-                                      HorizontalAlignment="Left">
-                                    <Border x:Name="SwitchKnobOn"
-                                            Width="12"
-                                            Height="12"
-                                            Margin="0,0,3,0"
-                                            HorizontalAlignment="Right"
-                                            Background="{ThemeResource ToggleSwitchKnobFillOn}"
-                                            BackgroundSizing="OuterBorderEdge"
-                                            BorderBrush="{ThemeResource ToggleSwitchKnobStrokeOn}"
-                                            CornerRadius="7"
-                                            Opacity="0"
-                                            RenderTransformOrigin="0.5, 0.5">
-                                        <Border.RenderTransform>
-                                            <CompositeTransform />
-                                        </Border.RenderTransform>
-                                    </Border>
-                                    <Rectangle x:Name="SwitchKnobOff"
-                                               Width="12"
-                                               Height="12"
-                                               Margin="3,0,0,0"
-                                               HorizontalAlignment="Left"
-                                               Fill="{ThemeResource ToggleSwitchKnobFillOff}"
-                                               RadiusX="7"
-                                               RadiusY="7"
-                                               RenderTransformOrigin="0.5, 0.5">
-                                        <Rectangle.RenderTransform>
-                                            <CompositeTransform />
-                                        </Rectangle.RenderTransform>
-                                    </Rectangle>
-                                    <Grid.RenderTransform>
-                                        <TranslateTransform x:Name="KnobTranslateTransform" />
-                                    </Grid.RenderTransform>
-                                </Grid>
-                                <Thumb x:Name="SwitchThumb"
-                                       Grid.RowSpan="3"
-                                       Grid.ColumnSpan="3"
-                                       win:AutomationProperties.AccessibilityView="Raw">
-                                    <Thumb.Template>
-                                        <ControlTemplate TargetType="Thumb">
-                                            <Rectangle Fill="Transparent" />
-                                        </ControlTemplate>
-                                    </Thumb.Template>
-                                </Thumb>
-                            </Grid>
-                        </Grid>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style.Setters>
-    </Style>
 </ResourceDictionary>

From 082620fab0134a78c25a2da7a4e6190a14fd36c8 Mon Sep 17 00:00:00 2001
From: ProJend <projend@outlook.com>
Date: Tue, 10 Dec 2024 14:18:45 +0800
Subject: [PATCH 7/8] Add sample for SettingsCard.ContentAlignment property

---
 .../ContentAlignmentSettingsCardSample.xaml   | 125 ++++++++++++++++++
 ...ContentAlignmentSettingsCardSample.xaml.cs |  17 +++
 .../SettingsControls/samples/SettingsCard.md  |   8 +-
 .../samples/SettingsCardSample.xaml           |  14 +-
 .../samples/SettingsControls.Samples.csproj   |   9 ++
 .../samples/SettingsExpander.md               |   2 -
 .../samples/SettingsExpanderSample.xaml       |  64 ---------
 7 files changed, 158 insertions(+), 81 deletions(-)
 create mode 100644 components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml
 create mode 100644 components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml.cs

diff --git a/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml b/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml
new file mode 100644
index 00000000..b16a5636
--- /dev/null
+++ b/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml
@@ -0,0 +1,125 @@
+<Page
+    x:Class="SettingsControlsExperiment.Samples.ContentAlignmentSettingsCardSample"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:tk="using:CommunityToolkit.WinUI"
+    mc:Ignorable="d">
+
+    <StackPanel Spacing="4">
+        <controls:SettingsCard
+            Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold."
+            Header="Adaptive layouts"
+            HeaderIcon="{tk:FontIcon Glyph=&#xE745;}"
+            IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <controls:SettingsCard.Resources>
+                <x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
+                <x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>
+            </controls:SettingsCard.Resources>
+            <Button Content="This control will wrap vertically!" Style="{StaticResource AccentButtonStyle}" />
+        </controls:SettingsCard>
+
+        <controls:SettingsCard ContentAlignment="Left" IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
+        </controls:SettingsCard>
+
+        <controls:SettingsCard
+            HorizontalContentAlignment="Left"
+            ContentAlignment="Vertical"
+            Description="You can align your content vertically. Make sure to set the HorizontalContentAlignment to Left when you do!"
+            Header="Vertically aligned"
+            IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <GridView SelectedIndex="1">
+                <GridViewItem>
+                    <Border
+                        Width="64"
+                        Height="64"
+                        Background="#0078D4"
+                        CornerRadius="{ThemeResource ControlCornerRadius}" />
+                </GridViewItem>
+                <GridViewItem>
+                    <Border
+                        Width="64"
+                        Height="64"
+                        Background="#005EB7"
+                        CornerRadius="{ThemeResource ControlCornerRadius}" />
+                </GridViewItem>
+                <GridViewItem>
+                    <Border
+                        Width="64"
+                        Height="64"
+                        Background="#003D92"
+                        CornerRadius="{ThemeResource ControlCornerRadius}" />
+                </GridViewItem>
+                <GridViewItem>
+                    <Border
+                        Width="64"
+                        Height="64"
+                        Background="#001968"
+                        CornerRadius="{ThemeResource ControlCornerRadius}" />
+                </GridViewItem>
+            </GridView>
+        </controls:SettingsCard>
+
+        <controls:SettingsCard
+            x:Name="settingsCard"
+            ContentAlignment="Horizontal"
+            Description="You can also align your content horizontally. Additional image will stretch to middle. You still can override this breakpoint by setting both SettingsCardWrapThreshold and additional SettingsCardHeaderPanelMaxWidth resoure to wrap vertically."
+            Header="Horizontally aligned"
+            IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <controls:SettingsCard.Resources>
+                <x:Double x:Key="SettingsCardHeaderPanelMaxWidth">550</x:Double>
+                <x:Double x:Key="SettingsCardWrapThreshold">900</x:Double>
+            </controls:SettingsCard.Resources>
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition x:Name="Left_Column" />
+                    <ColumnDefinition x:Name="Right_Column" />
+                </Grid.ColumnDefinitions>
+                <Grid
+                    x:Name="AdditionalContent"
+                    MaxHeight="100"
+                    Background="Pink"
+                    CornerRadius="{ThemeResource ControlCornerRadius}">
+                    <Image
+                        VerticalAlignment="Center"
+                        Source="/Assets/SplashScreen.png"
+                        Stretch="UniformToFill" />
+                </Grid>
+                <Button x:Name="PressedContent">Button</Button>
+            </Grid>
+        </controls:SettingsCard>
+
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="HorizontalReveredLayout">
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="Left_Column.Width" Value="*" />
+                        <Setter Target="Right_Column.Width" Value="Auto" />
+                        <Setter Target="AdditionalContent.Margin" Value="0,0,20,0" />
+                        <Setter Target="AdditionalContent.(Grid.Column)" Value="0" />
+                        <Setter Target="PressedContent.(Grid.Column)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <!--  The Breakpoint follow by SettingsCardWrapThreshold of ContentAlignment Horizontal -->
+                        <tk:ControlSizeTrigger MaxWidth="900" TargetElement="{Binding ElementName=settingsCard}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="Left_Column.Width" Value="Auto" />
+                        <Setter Target="Right_Column.Width" Value="*" />
+                        <Setter Target="AdditionalContent.Margin" Value="20,0,0,0" />
+                        <Setter Target="AdditionalContent.(Grid.Column)" Value="1" />
+                        <Setter Target="PressedContent.(Grid.Column)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+    </StackPanel>
+</Page>
diff --git a/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml.cs b/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml.cs
new file mode 100644
index 00000000..4fa3234a
--- /dev/null
+++ b/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml.cs
@@ -0,0 +1,17 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace SettingsControlsExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsCardEnabled", true, Title = "Is Enabled")]
+
+[ToolkitSample(id: nameof(ContentAlignmentSettingsCardSample), "ContentAlignmentSettingsCardSample", description: "A sample for showing how to use the SettingsCard.ContentAlignment attached property")]
+
+public sealed partial class ContentAlignmentSettingsCardSample : Page
+{
+    public ContentAlignmentSettingsCardSample()
+    {
+        this.InitializeComponent();
+    }
+}
diff --git a/components/SettingsControls/samples/SettingsCard.md b/components/SettingsControls/samples/SettingsCard.md
index 667bc703..cab4d336 100644
--- a/components/SettingsControls/samples/SettingsCard.md
+++ b/components/SettingsControls/samples/SettingsCard.md
@@ -12,11 +12,15 @@ issue-id: 0
 icon: Assets/SettingsCard.png
 ---
 
-SettingsCard is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great!
+`SettingsCard` is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great!
 You can set the `Header`, `Description`, `HeaderIcon` and `Content` properties to create an easy to use experience, like so:
 
 > [!SAMPLE SettingsCardSample]
 
-SettingsCard can also be turned into a button, by setting the `IsClickEnabled` property. This can be useful whenever you want your settings component to navigate to a detail page or open an external link. You can set a custom icon by setting the `ActionIcon`, or hiding it completely by setting the `IsActionIconVisible` to `false`.
+`SettingsCard` can also be turned into a button, by setting the `IsClickEnabled` property. This can be useful whenever you want your settings component to navigate to a detail page or open an external link. You can set a custom icon by setting the `ActionIcon`, or hiding it completely by setting the `IsActionIconVisible` to `false`.
 
 > [!SAMPLE ClickableSettingsCardSample]
+
+You can easily override certain properties to create custom experiences. For instance, you can customize the `ContentAlignment` of a `SettingsCard`, to align your content to the Right (default), Left (hiding the `HeaderIcon`, `Header` and `Description`), Vertically (usually best paired with changing the `HorizontalContentAlignment` to `Stretch`) or Horizontally (attaching additional `VisualState` to reverse the Content layout).
+
+> [!SAMPLE ContentAlignmentSettingsCardSample]
diff --git a/components/SettingsControls/samples/SettingsCardSample.xaml b/components/SettingsControls/samples/SettingsCardSample.xaml
index 6e17962d..583bd122 100644
--- a/components/SettingsControls/samples/SettingsCardSample.xaml
+++ b/components/SettingsControls/samples/SettingsCardSample.xaml
@@ -1,4 +1,4 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
 <Page x:Class="SettingsControlsExperiment.Samples.SettingsCardSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -37,18 +37,6 @@
                     Style="{StaticResource AccentButtonStyle}" />
         </controls:SettingsCard>
 
-        <controls:SettingsCard Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold."
-                               Header="Adaptive layouts"
-                               HeaderIcon="{ui:FontIcon Glyph=&#xE745;}"
-                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
-            <controls:SettingsCard.Resources>
-                <x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
-                <x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>
-            </controls:SettingsCard.Resources>
-            <Button Content="This control will wrap vertically!"
-                    Style="{StaticResource AccentButtonStyle}" />
-        </controls:SettingsCard>
-
         <controls:SettingsCard Header="This is a card with a Header only" />
     </StackPanel>
 </Page>
diff --git a/components/SettingsControls/samples/SettingsControls.Samples.csproj b/components/SettingsControls/samples/SettingsControls.Samples.csproj
index 188a0f4d..503d130e 100644
--- a/components/SettingsControls/samples/SettingsControls.Samples.csproj
+++ b/components/SettingsControls/samples/SettingsControls.Samples.csproj
@@ -7,6 +7,10 @@
 
   <!-- Sets this up as a toolkit component's sample project -->
   <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+  <ItemGroup>
+    <Content Remove="ContentAlignmentSettingsCardSample.xaml" />
+    <Content Remove="ContentAlignmentSettingsCardSample.xaml.cs" />
+  </ItemGroup>
 
   <ItemGroup>
     <ProjectReference Include="$(ToolkitExtensionsSourceProject)"></ProjectReference>
@@ -23,4 +27,9 @@
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="ContentAlignmentSettingsCardSample.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+  </ItemGroup>
 </Project>
diff --git a/components/SettingsControls/samples/SettingsExpander.md b/components/SettingsControls/samples/SettingsExpander.md
index 3fd0566d..e021d516 100644
--- a/components/SettingsControls/samples/SettingsExpander.md
+++ b/components/SettingsControls/samples/SettingsExpander.md
@@ -18,8 +18,6 @@ A `SettingsExpander` can have it's own content to display a setting on the right
 
 > [!SAMPLE SettingsExpanderSample]
 
-You can easily override certain properties to create custom experiences. For instance, you can customize the `ContentAlignment` of a `SettingsCard`, to align your content to the Right (default), Left (hiding the `HeaderIcon`, `Header` and `Description`) or Vertically (usually best paired with changing the `HorizontalContentAlignment` to `Stretch`).
-
 `SettingsExpander` is also an `ItemsControl`, so its items can be driven by a collection and the `ItemsSource` property. You can use the `ItemTemplate` to define how your data object is represented as a `SettingsCard`, as shown below. The `ItemsHeader` and `ItemsFooter` property can be used to host custom content at the start or end of the items list.
 
 > [!SAMPLE SettingsExpanderItemsSourceSample]
diff --git a/components/SettingsControls/samples/SettingsExpanderSample.xaml b/components/SettingsControls/samples/SettingsExpanderSample.xaml
index aee8e6ca..97758b21 100644
--- a/components/SettingsControls/samples/SettingsExpanderSample.xaml
+++ b/components/SettingsControls/samples/SettingsExpanderSample.xaml
@@ -29,70 +29,6 @@
             <local:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
                                 Header="This item can be clicked"
                                 IsClickEnabled="True" />
-
-            <local:SettingsCard ContentAlignment="Left">
-                <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
-            </local:SettingsCard>
-
-            <local:SettingsCard HorizontalContentAlignment="Left"
-                                ContentAlignment="Vertical"
-                                Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
-                                Header="Vertically aligned">
-                <GridView SelectedIndex="1">
-                    <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#0078D4"
-                                CornerRadius="4" />
-                    </GridViewItem>
-                    <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#005EB7"
-                                CornerRadius="4" />
-                    </GridViewItem>
-                    <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#003D92"
-                                CornerRadius="4" />
-                    </GridViewItem>
-                    <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#001968"
-                                CornerRadius="4" />
-                    </GridViewItem>
-                </GridView>
-            </local:SettingsCard>
-            <local:SettingsCard
-                ContentAlignment="Horizontal"
-                Description="You can also align your content horizontally. Additional image will stretch to middle. You still can override this breakpoint by setting both SettingsCardWrapThreshold and additional SettingsCardHeaderPanelMaxWidth resoure to wrap vertically."
-                Header="Horizontally aligned">
-                <local:SettingsCard.Resources>
-                    <x:Double x:Key="SettingsCardHeaderPanelMaxWidth">550</x:Double>
-                    <x:Double x:Key="SettingsCardWrapThreshold">700</x:Double>
-                </local:SettingsCard.Resources>
-                <Grid x:Name="SettingsCard">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="auto" />
-                    </Grid.ColumnDefinitions>
-                    <Grid
-                        x:Name="AdditionalContent"
-                        Grid.Column="0"
-                        MaxHeight="96"
-                        Margin="0,0,20,0"
-                        Background="Pink"
-                        CornerRadius="4">
-                        <Image
-                            VerticalAlignment="Center"
-                            Source="/Assets/SplashScreen.png"
-                            Stretch="UniformToFill" />
-                    </Grid>
-                    <Button x:Name="PressedContent" Grid.Column="1">Button</Button>
-                </Grid>
-            </local:SettingsCard>
             <local:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
                                 Header="Customization">
                 <local:SettingsCard.Resources>

From 250159068acc9fb337af11633d90674a1a88e07b Mon Sep 17 00:00:00 2001
From: ProJend <projend@outlook.com>
Date: Tue, 10 Dec 2024 14:18:53 +0800
Subject: [PATCH 8/8] Add more SettingsCard in SettingsExpander

---
 .../samples/SettingsExpanderSample.xaml               | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/SettingsControls/samples/SettingsExpanderSample.xaml b/components/SettingsControls/samples/SettingsExpanderSample.xaml
index 97758b21..c2a9ae43 100644
--- a/components/SettingsControls/samples/SettingsExpanderSample.xaml
+++ b/components/SettingsControls/samples/SettingsExpanderSample.xaml
@@ -1,4 +1,4 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
 <Page x:Class="SettingsControlsExperiment.Samples.SettingsExpanderSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -26,6 +26,15 @@
             <local:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
                 <Button Content="Button" />
             </local:SettingsCard>
+            <local:SettingsCard Header="A ToggleSwitch attach TextBox">
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch x:Name="toggleSwitch"/>
+                    <TextBox MinWidth="100"
+                             Margin="30,5,0,5"
+                             IsEnabled="{Binding IsOn, ElementName=toggleSwitch}"
+                             PlaceholderText="TextBox" />
+                </StackPanel>
+            </local:SettingsCard>
             <local:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
                                 Header="This item can be clicked"
                                 IsClickEnabled="True" />