Add property Horizontal ContentAlignment to SettingsCard

CommunityToolkit · Dec 4, 2024 · 791ab3a · 791ab3a
1 parent 7969f5a
commit 791ab3a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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" />