Add new Horizontal ContentAlignment for SettingsCard

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>

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();
+    }
+}

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]

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>

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>

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]

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,45 +26,18 @@
             <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" />
-
-            <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 Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
                                 Header="Customization">
                 <local:SettingsCard.Resources>

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
 }

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";