Merge pull request #346 from CommunityToolkit/niels9001/settingscontrols

[SettingsControls] Minor tweaks

Author: niels9001

labs/SettingsControls/samples/SettingsControls.Samples/SettingsCardSample.xaml

@@ -43,14 +43,15 @@
                     Style="{StaticResource AccentButtonStyle}" />
         </labs:SettingsCard>
 
-        <labs:SettingsCard Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource."
+        <labs: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"
                            IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
             <labs:SettingsCard.HeaderIcon>
                 <FontIcon Glyph="&#xE745;" />
             </labs:SettingsCard.HeaderIcon>
             <labs:SettingsCard.Resources>
                 <x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
+                <x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>
             </labs:SettingsCard.Resources>
             <Button Content="This control will wrap vertically!"
                     Style="{StaticResource AccentButtonStyle}" />

labs/SettingsControls/samples/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"

labs/SettingsControls/src/CommunityToolkit.Labs.WinUI.SettingsControls.csproj

@@ -18,7 +18,7 @@
     <Description>
       This package contains the SettingsCard and SettingsExpander controls.
     </Description>
-    <Version>0.0.10</Version>
+    <Version>0.0.11</Version>
     <LangVersion>10.0</LangVersion>
   </PropertyGroup>
 

labs/SettingsControls/src/SettingsCard/SettingsCard.xaml

@@ -97,8 +97,7 @@
     <Thickness x:Key="SettingsCardBorderThickness">1</Thickness>
     <Thickness x:Key="SettingsCardPadding">16,16,16,16</Thickness>
     <Thickness x:Key="SettingsCardIconMargin">2,0,20,0</Thickness>
-    <x:Double x:Key="SettingsCardMaxWidth">1000</x:Double>
-    <x:Double x:Key="SettingsCardMinWidth">360</x:Double>
+    <x:Double x:Key="SettingsCardMinWidth">148</x:Double>
     <x:Double x:Key="SettingsCardMinHeight">68</x:Double>
     <x:Double x:Key="SettingsCardActionButtonWidth">32</x:Double>
     <x:Double x:Key="SettingsCardActionButtonHeight">32</x:Double>
@@ -110,6 +109,7 @@
     <Thickness x:Key="SettingsCardHeaderIconMargin">2,0,20,0</Thickness>
     <Thickness x:Key="SettingsCardVerticalHeaderContentSpacing">0,4,0,0</Thickness>
     <x:Double x:Key="SettingsCardWrapThreshold">460</x:Double>
+    <x:Double x:Key="SettingsCardWrapNoIconThreshold">286</x:Double>
 
     <Style BasedOn="{StaticResource DefaultSettingsCardStyle}"
            TargetType="labs:SettingsCard" />
@@ -125,7 +125,6 @@
             <Setter Property="MinHeight" Value="{ThemeResource SettingsCardMinHeight}" />
             <!--<Setter Property="win:AutomationProperties.AutomationControlType" Value="Group" />-->
             <!--<Setter Property="win:AutomationProperties.Name" Value="{TemplateBinding Header}" />-->
-            <Setter Property="MaxWidth" Value="{ThemeResource SettingsCardMaxWidth}" />
             <Setter Property="MinWidth" Value="{ThemeResource SettingsCardMinWidth}" />
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="HorizontalAlignment" Value="Stretch" />
@@ -313,7 +312,8 @@
                                     </VisualState>
                                     <VisualState x:Name="RightWrapped">
                                         <VisualState.StateTriggers>
-                                            <labs:ControlSizeTrigger MaxWidth="{ThemeResource SettingsCardWrapThreshold}"
+                                            <labs:ControlSizeTrigger MinWidth="{ThemeResource SettingsCardWrapNoIconThreshold}"
+                                                                     MaxWidth="{ThemeResource SettingsCardWrapThreshold}"
                                                                      TargetElement="{Binding ElementName=PART_RootGrid}" />
                                         </VisualState.StateTriggers>
                                         <VisualState.Setters>
@@ -324,6 +324,20 @@
                                             <Setter Target="PART_ContentPresenter.Margin" Value="{ThemeResource SettingsCardVerticalHeaderContentSpacing}" />
                                         </VisualState.Setters>
                                     </VisualState>
+                                    <VisualState x:Name="RightWrappedNoIcon">
+                                        <VisualState.StateTriggers>
+                                            <labs: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="PART_ContentPresenter.Margin" Value="{ThemeResource SettingsCardVerticalHeaderContentSpacing}" />
+                                        </VisualState.Setters>
+                                    </VisualState>
                                     <VisualState x:Name="Vertical">
                                         <VisualState.StateTriggers>
                                             <labs:IsEqualStateTrigger Value="{Binding ContentAlignment, RelativeSource={RelativeSource TemplatedParent}}"

labs/SettingsControls/src/SettingsExpander/SettingsExpander.xaml

@@ -1,4 +1,4 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
@@ -53,7 +53,6 @@
             <Setter Property="BorderThickness" Value="{ThemeResource SettingsCardBorderThickness}" />
             <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
             <Setter Property="MinHeight" Value="{ThemeResource SettingsCardMinHeight}" />
-            <Setter Property="MaxWidth" Value="{ThemeResource SettingsCardMaxWidth}" />
             <Setter Property="MinWidth" Value="{ThemeResource SettingsCardMinWidth}" />
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="HorizontalAlignment" Value="Stretch" />