ContentAlignmentSettingsCardSample.xaml

<!--  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.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">

        <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>
        <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="SettingsCardContentPresenterMinWidth">0</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>
    </StackPanel>
</Page>