Settings erm... Block #680

alski · 2025-05-02T20:22:22Z

alski
May 2, 2025

I was looking at the home page of Win Settings.

and realised it's just a SettingsExpander that doesn't expand with a bit of skinning. So I cloned SettingsExpander.xaml, renamed the styles to avoid name collisions, and...

  <tk:SettingsExpander
            Description="CoolMon is free, with optional paid features"
            Header="Features"
            Style="{StaticResource SettingsBlock}">
            <tk:SettingsExpander.Items>
            ...

For the moment it's just a style that you add, along with a few files direct from CommunityToolkit.WinUI.Controls.SettingsControls.csproj. Would there be any interest in integrating it further?

<!--  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:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    xmlns:local="using:CommunityToolkit.WinUI.Controls"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:tk="using:CommunityToolkit.WinUI"
    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="./SettingsCard.xaml" />
        <ResourceDictionary Source="./SettingsExpander.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Thickness x:Key="SettingsBlockHeaderPadding">24,24,12,16</Thickness>
    <Thickness x:Key="SettingsBlockItemPadding">24,8,44,8</Thickness>
    <CornerRadius x:Key="SettingsBlockCornerRadius">8,8,8,8</CornerRadius>
    <Thickness x:Key="ClickableSettingsBlockItemPadding">24,8,24,8</Thickness>

    <local:CornerRadiusConverter x:Key="CornerRadiusConverter" />

    <Style
        x:Key="DefaultSettingsBlockItemStyle"
        BasedOn="{StaticResource DefaultSettingsCardStyle}"
        TargetType="local:SettingsCard">
        <Style.Setters>
            <Setter Property="BorderThickness" Value="{ThemeResource SettingsExpanderItemBorderThickness}" />
            <Setter Property="MinHeight" Value="64" />
            <Setter Property="Padding" Value="{ThemeResource SettingsBlockItemPadding}" />
            <Setter Property="CornerRadius" Value="0" />
        </Style.Setters>
    </Style>

    <Style
        x:Key="ClickableSettingsBlockItemStyle"
        BasedOn="{StaticResource DefaultSettingsExpanderItemStyle}"
        TargetType="local:SettingsCard">
        <Style.Setters>
            <Setter Property="Padding" Value="{ThemeResource ClickableSettingsBlockItemPadding}" />
        </Style.Setters>
    </Style>

    <local:SettingsExpanderItemStyleSelector
        x:Key="SettingsBlockItemStyleSelector"
        ClickableStyle="{StaticResource ClickableSettingsBlockItemStyle}"
        DefaultStyle="{StaticResource DefaultSettingsBlockItemStyle}" />

    <Style x:Key="SettingsBlock" TargetType="local:SettingsExpander">
        <Style.Setters>
            <Setter Property="Background" Value="{ThemeResource SettingsCardBackground}" />
            <Setter Property="Foreground" Value="{ThemeResource SettingsCardForeground}" />
            <Setter Property="BorderBrush" Value="{ThemeResource SettingsCardBorderBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource SettingsCardBorderThickness}" />
            <Setter Property="CornerRadius" Value="{ThemeResource SettingsBlockCornerRadius}" />
            <Setter Property="MinHeight" Value="{ThemeResource SettingsCardMinHeight}" />
            <Setter Property="MinWidth" Value="{ThemeResource SettingsCardMinWidth}" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
            <Setter Property="Padding" Value="{ThemeResource SettingsBlockHeaderPadding}" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="ItemContainerStyleSelector" Value="{StaticResource SettingsBlockItemStyleSelector}" />
            <Setter Property="FocusVisualMargin" Value="-3" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:SettingsExpander">
                        <muxc:Expander
                            MinWidth="{TemplateBinding MinWidth}"
                            MinHeight="{TemplateBinding MinHeight}"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            win:AutomationProperties.HelpText="{TemplateBinding AutomationProperties.HelpText}"
                            win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            IsExpanded="True"
                            Style="{StaticResource SettingsBlockExpanderStyle}">
                            <!--  IsExpanded="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"  -->
                            <muxc:Expander.Header>
                                <local:SettingsCard
                                    Padding="{StaticResource SettingsBlockHeaderPadding}"
                                    VerticalAlignment="Center"
                                    BorderThickness="0"
                                    Content="{TemplateBinding Content}"
                                    CornerRadius="0"
                                    Description="{TemplateBinding Description}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    Header="{TemplateBinding Header}"
                                    HeaderIcon="{TemplateBinding HeaderIcon}"
                                    IsClickEnabled="False"
                                    Style="{StaticResource SettingsBlockHeaderCardStyle}" />
                            </muxc:Expander.Header>
                            <muxc:Expander.Content>
                                <Grid CornerRadius="{Binding CornerRadius, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource CornerRadiusConverter}}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <ContentPresenter Content="{TemplateBinding ItemsHeader}" />
                                    <muxc:ItemsRepeater
                                        x:Name="PART_ItemsRepeater"
                                        Grid.Row="1"
                                        ItemTemplate="{Binding ItemTemplate, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        TabFocusNavigation="Local">
                                        <muxc:ItemsRepeater.Layout>
                                            <muxc:StackLayout Orientation="Vertical" />
                                        </muxc:ItemsRepeater.Layout>
                                    </muxc:ItemsRepeater>
                                    <ContentPresenter Grid.Row="2" Content="{TemplateBinding ItemsFooter}" />
                                </Grid>
                            </muxc:Expander.Content>
                        </muxc:Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

    <Style x:Key="SettingsBlockExpanderStyle" TargetType="muxc:Expander">
        <Setter Property="Background" Value="{ThemeResource ExpanderContentBackground}" />
        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
        <Setter Property="BorderBrush" Value="{ThemeResource ExpanderContentBorderBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource ExpanderContentDownBorderThickness}" />
        <Setter Property="CornerRadius" Value="{StaticResource SettingsBlockCornerRadius}" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="MinHeight" Value="{StaticResource ExpanderMinHeight}" />
        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="muxc:Expander">
                    <Grid MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}">
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="Row0" Height="Auto" />
                            <RowDefinition x:Name="Row1" Height="*" />
                        </Grid.RowDefinitions>
                        <ContentControl
                            x:Name="ExpanderHeader"
                            MinHeight="{TemplateBinding MinHeight}"
                            Padding="{StaticResource ExpanderHeaderPadding}"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}"
                            VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}"
                            win:AutomationProperties.AutomationId="ExpanderToggleButton"
                            win:AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
                            BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
                            BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            IsTabStop="True"
                            Style="{StaticResource SettingsBlockHeaderDownStyle}" />
                        <!--
                            IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                            IsEnabled="{TemplateBinding IsEnabled}"
                        -->
                        <!--  The clip is a composition clip applied in code  -->
                        <Border x:Name="ExpanderContentClip" Grid.Row="1">
                            <Border
                                x:Name="ExpanderContent"
                                MinHeight="{ThemeResource SettingsExpanderContentMinHeight}"
                                Padding="{TemplateBinding Padding}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                BackgroundSizing="{TemplateBinding BackgroundSizing}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{StaticResource ExpanderContentDownBorderThickness}"
                                CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}">
                                <ContentPresenter
                                    Margin="0,-2,0,0"
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
                                <Border.RenderTransform>
                                    <CompositeTransform />
                                </Border.RenderTransform>
                            </Border>
                        </Border>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ExpandStates">
                                <VisualState x:Name="ExpandUp">
                                    <VisualState.Setters>
                                        <Setter Target="ExpanderHeader.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
                                    </VisualState.Setters>
                                    <VisualState.Storyboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
                                                <SplineDoubleKeyFrame
                                                    KeySpline="0.0, 0.0, 0.0, 1.0"
                                                    KeyTime="0:0:0.333"
                                                    Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState.Storyboard>
                                </VisualState>
                                <VisualState x:Name="CollapseDown">
                                    <VisualState.Storyboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                                                <SplineDoubleKeyFrame
                                                    KeySpline="1.0, 1.0, 0.0, 1.0"
                                                    KeyTime="0:0:0.167"
                                                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState.Storyboard>
                                </VisualState>
                                <VisualState x:Name="ExpandDown">
                                    <VisualState.Setters>
                                        <Setter Target="ExpanderHeader.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
                                    </VisualState.Setters>
                                    <VisualState.Storyboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
                                                <SplineDoubleKeyFrame
                                                    KeySpline="0.0, 0.0, 0.0, 1.0"
                                                    KeyTime="0:0:0.333"
                                                    Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState.Storyboard>
                                </VisualState>
                                <VisualState x:Name="CollapseUp">
                                    <VisualState.Storyboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.167" Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                                                <SplineDoubleKeyFrame
                                                    KeySpline="1.0, 1.0, 0.0, 1.0"
                                                    KeyTime="0:0:0.167"
                                                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState.Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ExpandDirectionStates">
                                <VisualState x:Name="Down" />
                                <VisualState x:Name="Up">
                                    <VisualState.Setters>
                                        <Setter Target="ExpanderHeader.Style" Value="{StaticResource ExpanderHeaderUpStyle}" />
                                        <Setter Target="ExpanderContent.BorderThickness" Value="{StaticResource ExpanderContentUpBorderThickness}" />
                                        <Setter Target="ExpanderContent.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
                                        <Setter Target="ExpanderHeader.(Grid.Row)" Value="1" />
                                        <Setter Target="ExpanderContentClip.(Grid.Row)" Value="0" />
                                        <Setter Target="Row0.Height" Value="*" />
                                        <Setter Target="Row1.Height" Value="Auto" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalAlignment" Value="Center" />
    </Style>

    <Style x:Key="SettingsBlockHeaderDownStyle" TargetType="ContentControl">
        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Grid
                        x:Name="ToggleButtonGrid"
                        Width="{TemplateBinding Width}"
                        MinWidth="{TemplateBinding MinWidth}"
                        MinHeight="{TemplateBinding MinHeight}"
                        MaxWidth="{TemplateBinding MaxWidth}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        Background="{TemplateBinding Background}"
                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
                        BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <ContentPresenter
                            x:Name="ContentPresenter"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            win:AutomationProperties.AccessibilityView="Raw"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Foreground="{TemplateBinding Foreground}" />

                        <!--<ContentControl
                            x:Name="ExpandCollapseChevronBorder"
                            Grid.Column="1"
                            Width="{StaticResource SettingsExpanderChevronButtonWidth}"
                            Height="{StaticResource SettingsExpanderChevronButtonHeight}"
                            Margin="0,0,8,0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            HorizontalContentAlignment="Center"
                            VerticalContentAlignment="Center"
                            Background="{ThemeResource ExpanderChevronBackground}"
                            BorderBrush="{ThemeResource ExpanderChevronBorderBrush}"
                            BorderThickness="{ThemeResource ExpanderChevronBorderThickness}"
                            CornerRadius="{ThemeResource ControlCornerRadius}"
                            FocusVisualMargin="-3"
                            IsTabStop="False"
                            ToolTipService.ToolTip="{StaticResource SettingsExpanderChevronToolTip}"
                            UseSystemFocusVisuals="True"
                            Visibility="Collapsed">
                            <muxc:AnimatedIcon
                                x:Name="ExpandCollapseChevron"
                                Width="16"
                                Height="16"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                muxc:AnimatedIcon.State="NormalOff"
                                win:AutomationProperties.AccessibilityView="Raw"
                                Foreground="{ThemeResource ExpanderChevronForeground}"
                                RenderTransformOrigin="0.5, 0.5">
                                <animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
                                <muxc:AnimatedIcon.FallbackIconSource>
                                    <muxc:FontIconSource
                                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                                        FontSize="16"
                                        Glyph="{StaticResource ExpanderChevronDownGlyph}"
                                        IsTextScaleFactorEnabled="False" />
                                </muxc:AnimatedIcon.FallbackIconSource>
                            </muxc:AnimatedIcon>
                        </ContentControl>-->

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PointerOverOff" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PressedOff" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBackground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="NormalOn" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="CheckedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PointerOverOn" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="CheckedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PressedOn" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="CheckedDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="NormalOn" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Indeterminate" />
                                <VisualState x:Name="IndeterminatePointerOver" />
                                <VisualState x:Name="IndeterminatePressed" />
                                <VisualState x:Name="IndeterminateDisabled" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SettingsBlockHeaderCardStyle" TargetType="local:SettingsCard">
        <Style.Setters>
            <Setter Property="Background" Value="{ThemeResource SettingsCardBackground}" />
            <Setter Property="Foreground" Value="{ThemeResource SettingsCardForeground}" />
            <Setter Property="BorderBrush" Value="{ThemeResource SettingsCardBorderBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource SettingsCardBorderThickness}" />
            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
            <Setter Property="MinHeight" Value="{ThemeResource SettingsCardMinHeight}" />
            <!--<Setter Property="win:AutomationProperties.AutomationControlType" Value="Group" />-->
            <!--<Setter Property="win:AutomationProperties.Name" Value="{TemplateBinding Header}" />-->
            <Setter Property="MinWidth" Value="{ThemeResource SettingsCardMinWidth}" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Right" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
            <Setter Property="Padding" Value="{ThemeResource SettingsCardPadding}" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="FocusVisualMargin" Value="-3" />
            <Setter Property="local:StyleExtensions.Resources">
                <Setter.Value>
                    <ResourceDictionary>
                        <!--  Making sure ToggleSwitches are right-aligned by default  -->
                        <Style BasedOn="{StaticResource RightAlignedCompactToggleSwitchStyle}" TargetType="ToggleSwitch" />
                        <!--  Overriding the MinWidth of various types of controls so they neatly align  -->
                        <Style BasedOn="{StaticResource DefaultSliderStyle}" TargetType="Slider">
                            <Style.Setters>
                                <Setter Property="MinWidth" Value="{ThemeResource SettingsCardContentMinWidth}" />
                            </Style.Setters>
                        </Style>
                        <Style BasedOn="{StaticResource DefaultComboBoxStyle}" TargetType="ComboBox">
                            <Style.Setters>
                                <Setter Property="MinWidth" Value="{ThemeResource SettingsCardContentMinWidth}" />
                            </Style.Setters>
                        </Style>
                        <Style BasedOn="{StaticResource DefaultTextBoxStyle}" TargetType="TextBox">
                            <Style.Setters>
                                <Setter Property="MinWidth" Value="{ThemeResource SettingsCardContentMinWidth}" />
                            </Style.Setters>
                        </Style>

                        <!--  NumberBox is not recognized?  -->
                        <!--<Style
                            TargetType="NumberBox">
                            <Style.Setters>
                                <Setter Property="MinWidth" Value="{StaticResource SettingsCardContentMinWidth}" />
                            </Style.Setters>
                        </Style>-->
                    </ResourceDictionary>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:SettingsCard">
                        <Grid
                            x:Name="PART_RootGrid"
                            MinWidth="{TemplateBinding MinWidth}"
                            MinHeight="{TemplateBinding MinHeight}"
                            MaxWidth="{TemplateBinding MaxWidth}"
                            Padding="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            muxc:AnimatedIcon.State="Normal"
                            Background="{TemplateBinding Background}"
                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}">
                            <win:Grid.BackgroundTransition>
                                <win:BrushTransition Duration="0:0:0.083" />
                            </win:Grid.BackgroundTransition>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" MinWidth="{ThemeResource SettingsCardLeftIndention}" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Viewbox
                                x:Name="PART_HeaderIconPresenterHolder"
                                Grid.RowSpan="1"
                                MaxWidth="{ThemeResource SettingsCardHeaderIconMaxSize}"
                                MaxHeight="{ThemeResource SettingsCardHeaderIconMaxSize}"
                                Margin="{ThemeResource SettingsCardHeaderIconMargin}">
                                <ContentPresenter
                                    x:Name="PART_HeaderIconPresenter"
                                    win:AutomationProperties.AccessibilityView="Raw"
                                    win:HighContrastAdjustment="None"
                                    Content="{TemplateBinding HeaderIcon}" />
                            </Viewbox>

                            <StackPanel
                                x:Name="HeaderPanel"
                                Grid.Column="1"
                                Margin="0,0,24,0"
                                VerticalAlignment="Center"
                                Orientation="Vertical">
                                <ContentPresenter
                                    x:Name="PART_HeaderPresenter"
                                    Grid.Column="1"
                                    HorizontalAlignment="Left"
                                    win:HighContrastAdjustment="None"
                                    Content="{TemplateBinding Header}"
                                    FontSize="{ThemeResource SubtitleTextBlockFontSize}"
                                    FontWeight="SemiBold"
                                    TextWrapping="Wrap">
                                    <ContentPresenter.Resources>
                                        <Style BasedOn="{StaticResource SubtitleTextBlockStyle}" TargetType="TextBlock">
                                            <Style.Setters>
                                                <Setter Property="TextWrapping" Value="Wrap" />
                                            </Style.Setters>
                                        </Style>
                                        <Style BasedOn="{StaticResource DefaultHyperlinkButtonStyle}" TargetType="HyperlinkButton">
                                            <Style.Setters>
                                                <Setter Property="Padding" Value="0,0,0,-1" />
                                                <Setter Property="FontWeight" Value="SemiBold" />
                                            </Style.Setters>
                                        </Style>
                                        <Style TargetType="Hyperlink">
                                            <Style.Setters>
                                                <Setter Property="UnderlineStyle" Value="None" />
                                                <Setter Property="TextDecorations" Value="None" />
                                                <Setter Property="FontWeight" Value="SemiBold" />
                                            </Style.Setters>
                                        </Style>
                                    </ContentPresenter.Resources>
                                </ContentPresenter>

                                <ContentPresenter
                                    x:Name="PART_DescriptionPresenter"
                                    Margin="0,10"
                                    Content="{TemplateBinding Description}"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    TextWrapping="Wrap">
                                    <ContentPresenter.Resources>
                                        <Style BasedOn="{StaticResource BodyTextBlockStyle}" TargetType="TextBlock">
                                            <Style.Setters>
                                                <Setter Property="TextWrapping" Value="Wrap" />
                                            </Style.Setters>
                                        </Style>
                                        <Style BasedOn="{StaticResource DefaultHyperlinkButtonStyle}" TargetType="HyperlinkButton">
                                            <Style.Setters>
                                                <Setter Property="FontSize" Value="{ThemeResource SettingsCardDescriptionFontSize}" />
                                                <Setter Property="Padding" Value="0,0,0,-1" />
                                                <Setter Property="FontWeight" Value="SemiBold" />
                                            </Style.Setters>
                                        </Style>
                                        <Style TargetType="Hyperlink">
                                            <Style.Setters>
                                                <Setter Property="UnderlineStyle" Value="None" />
                                                <Setter Property="TextDecorations" Value="None" />
                                                <Setter Property="FontWeight" Value="SemiBold" />
                                            </Style.Setters>
                                        </Style>
                                    </ContentPresenter.Resources>
                                </ContentPresenter>
                            </StackPanel>

                            <ContentPresenter
                                x:Name="PART_ContentPresenter"
                                Grid.Column="2"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Content="{TemplateBinding Content}" />

                            <Viewbox
                                x:Name="PART_ActionIconPresenterHolder"
                                Grid.RowSpan="2"
                                Grid.Column="3"
                                MaxWidth="{ThemeResource SettingsCardActionIconMaxSize}"
                                MaxHeight="{ThemeResource SettingsCardActionIconMaxSize}"
                                Margin="{ThemeResource SettingsCardActionIconMargin}"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                win:HighContrastAdjustment="None"
                                Visibility="Collapsed">
                                <ContentPresenter
                                    x:Name="PART_ActionIconPresenter"
                                    win:AutomationProperties.AccessibilityView="Raw"
                                    win:HighContrastAdjustment="None"
                                    Content="{TemplateBinding ActionIcon}"
                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                    ToolTipService.ToolTip="{TemplateBinding ActionIconToolTip}" />
                            </Viewbox>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RootGrid" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RootGrid" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderIconPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <VisualState.Setters>
                                            <Setter Target="PART_RootGrid.(muxc:AnimatedIcon.State)" Value="PointerOver" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RootGrid" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBackgroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RootGrid" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardBorderBrushPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderIconPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_DescriptionPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <VisualState.Setters>
                                            <Setter Target="PART_RootGrid.(muxc:AnimatedIcon.State)" Value="Pressed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ActionIconPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderIconPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_DescriptionPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsCardForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <VisualState.Setters>
                                            <!--  DisabledVisual Should be handled by the control, not the animated icon.  -->
                                            <Setter Target="PART_RootGrid.(muxc:AnimatedIcon.State)" Value="Normal" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>

                                <VisualStateGroup x:Name="ContentAlignmentStates">
                                    <!--  Default  -->
                                    <VisualState x:Name="Right" />

                                    <!--  Whenever the control width is less than SettingsCardWrapThreshold, the Content is below the Header/Description  -->
                                    <VisualState x:Name="RightWrapped">
                                        <VisualState.StateTriggers>
                                            <tk:ControlSizeTrigger
                                                MinWidth="{ThemeResource SettingsCardWrapNoIconThreshold}"
                                                MaxWidth="{ThemeResource SettingsCardWrapThreshold}"
                                                TargetElement="{Binding ElementName=PART_RootGrid}" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="PART_ContentPresenter.(Grid.Row)" Value="1" />
                                            <Setter Target="PART_ContentPresenter.(Grid.Column)" Value="1" />
                                            <Setter Target="PART_ContentPresenter.HorizontalAlignment" Value="Stretch" />
                                            <Setter Target="PART_ContentPresenter.HorizontalContentAlignment" Value="Left" />
                                            <Setter Target="HeaderPanel.Margin" Value="0" />
                                        </VisualState.Setters>
                                    </VisualState>

                                    <!--  For even smaller widths: the HeaderIcon is collapsed.  -->
                                    <VisualState x:Name="RightWrappedNoIcon">
                                        <VisualState.StateTriggers>
                                            <tk:ControlSizeTrigger MaxWidth="{ThemeResource SettingsCardWrapNoIconThreshold}" TargetElement="{Binding ElementName=PART_RootGrid}" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="PART_HeaderIconPresenterHolder.Visibility" Value="Collapsed" />
                                            <Setter Target="PART_ContentPresenter.(Grid.Row)" Value="1" />
                                            <Setter Target="PART_ContentPresenter.(Grid.Column)" Value="1" />
                                            <Setter Target="PART_ContentPresenter.HorizontalAlignment" Value="Stretch" />
                                            <Setter Target="PART_ContentPresenter.HorizontalContentAlignment" Value="Left" />
                                            <Setter Target="HeaderPanel.Margin" Value="0" />
                                        </VisualState.Setters>
                                    </VisualState>

                                    <!--  Header/Description/Icon collapsed, content is to the left. Great for e.g. Checkboxes  -->
                                    <VisualState x:Name="Left">
                                        <VisualState.StateTriggers>
                                            <tk:IsEqualStateTrigger Value="{Binding ContentAlignment, RelativeSource={RelativeSource TemplatedParent}}" To="Left" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="PART_HeaderIconPresenterHolder.Visibility" Value="Collapsed" />
                                            <Setter Target="PART_DescriptionPresenter.Visibility" Value="Collapsed" />
                                            <Setter Target="PART_HeaderPresenter.Visibility" Value="Collapsed" />
                                            <Setter Target="PART_ContentPresenter.(Grid.Row)" Value="1" />
                                            <Setter Target="PART_ContentPresenter.(Grid.Column)" Value="1" />
                                            <Setter Target="PART_ContentPresenter.HorizontalAlignment" Value="Left" />
                                        </VisualState.Setters>
                                    </VisualState>

                                    <!--  Similiar to Left, but the HeaderIcon/Header/Description is visible  -->
                                    <VisualState x:Name="Vertical">
                                        <VisualState.StateTriggers>
                                            <tk:IsEqualStateTrigger Value="{Binding ContentAlignment, RelativeSource={RelativeSource TemplatedParent}}" To="Vertical" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="PART_ContentPresenter.(Grid.Row)" Value="1" />
                                            <Setter Target="PART_ContentPresenter.(Grid.Column)" Value="1" />
                                            <Setter Target="PART_ContentPresenter.HorizontalAlignment" Value="Stretch" />
                                            <Setter Target="PART_ContentPresenter.HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>

                                <!--  Collapsing the Content presenter whenever it's empty  -->
                                <VisualStateGroup x:Name="ContentVisibilityStates">
                                    <VisualState x:Name="Visible" />
                                    <VisualState x:Name="Collapsed">
                                        <VisualState.StateTriggers>
                                            <tk:IsNullOrEmptyStateTrigger Value="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="PART_ContentPresenter.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>

                                <VisualStateGroup x:Name="ContentSpacingStates">
                                    <VisualState x:Name="NoContentSpacing" />
                                    <VisualState x:Name="ContentSpacing">
                                        <VisualState.Setters>
                                            <Setter Target="PART_RootGrid.RowSpacing" Value="{ThemeResource SettingsCardVerticalHeaderContentSpacing}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

</ResourceDictionary>

Jay-o-Way · 2025-05-02T21:26:37Z

Jay-o-Way
May 2, 2025

Hey, that's pretty much exactly what I was looking for! Copying a full control style looks complicated to me, wondering if there's an even simpler possibility...

4 replies

alski May 2, 2025
Author

If it helps, here's a single commit to show what you need.
alski/SettingsBlockDemo@0a8fb92

add the 4 files, SettingsCard.xaml, SettingsExpander.xaml, SettingsBlock.xaml & Helpers/CornerRadiusConverter.cs (it's internal normally)
Make sure the xaml files are all Page/Do not copy, in their properties e.g.
refer to the files in the App.xaml
and add the Style on your Expanders as reqd

ghost1372 May 3, 2025

I have a SettingsGroup too😁

https://ghost1372.github.io/DevWinUIControls/controls/settingsGroup/

Jay-o-Way May 3, 2025

I have a SettingsGroup too😁

https://ghost1372.github.io/DevWinUIControls/controls/settingsGroup/

Did you make that yourself?

ghost1372 May 3, 2025

@Jay-o-Way SettingsGroup or SettingsCard?
SettingsGroup, Yes its mine.
SettingsCard, initial version ported from powertoys and then migrated to communityToolkit and again i modified it a little based my needs.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Settings erm... Block #680

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Settings erm... Block #680

Uh oh!

Uh oh!

alski May 2, 2025

Replies: 1 comment · 4 replies

Uh oh!

Jay-o-Way May 2, 2025

Uh oh!

alski May 2, 2025 Author

Uh oh!

ghost1372 May 3, 2025

Uh oh!

Jay-o-Way May 3, 2025

Uh oh!

ghost1372 May 3, 2025

alski
May 2, 2025

Replies: 1 comment 4 replies

Jay-o-Way
May 2, 2025

alski May 2, 2025
Author