[Settings] New Settings controls, XAML formatting and cleanup (#21317)

* Awake

* Always On Top

* ColorPicker

* FancyZones

* FancyZones

* Hosts file editor

* ImageResizer

* Update ImageResizerPage.xaml

* KBM

* General

* Update MeasureToolPage.xaml

* Mouse utils

* PowerAccent

* Run

* PowerOCR

* File preview

* PowerRename

* Shortcut Guide

* VCM

* XAML styler

* Update ShellPage.xaml

* XAML formatting and cleanup

* Moving converters

* Update App.xaml

* XAML formatting

* XAML formatting

* Fixes

* XAML formatting

* Image resizer updates

* Color picker page and margin tweaks

* Update PowerLauncherPage.xaml

* Tweaks based on Jay's feedback

* Resolve conflicts

* Add labs source to unit tests

* Fix feedback

* Fix KBM bug

* Infobar fix

* Fixes

* Resolve conflicts

* Add converter

src/settings-ui/Settings.UI/Views/AwakePage.xaml

@@ -1,93 +1,106 @@
 <Page
     x:Class="Microsoft.PowerToys.Settings.UI.Views.AwakePage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
-    xmlns:toolkitConverters="using:CommunityToolkit.WinUI.UI.Converters"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-    mc:Ignorable="d"
-    AutomationProperties.LandmarkType="Main">
+    xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:labs="using:CommunityToolkit.Labs.WinUI"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ui="using:CommunityToolkit.WinUI.UI"
+    AutomationProperties.LandmarkType="Main"
+    mc:Ignorable="d">
 
     <Page.Resources>
-        <toolkitConverters:BoolNegationConverter x:Key="BoolNegationConverter"/>
         <converters:AwakeModeToIntConverter x:Key="AwakeModeToIntConverter" />
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="Awake" IsTabStop="False"
-                                  ModuleImageSource="ms-appx:///Assets/Modules/Awake.png">
+    <controls:SettingsPageControl
+        x:Uid="Awake"
+        IsTabStop="False"
+        ModuleImageSource="ms-appx:///Assets/Modules/Awake.png">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
-
-                <controls:Setting x:Uid="Awake_EnableAwake" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured, Converter={StaticResource BoolNegationConverter}}">
-                    <controls:Setting.Icon>
-                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsAwake.png" ShowAsMonochrome="False" />
-                    </controls:Setting.Icon>
-                    <controls:Setting.ActionContent>
-                        <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" x:Uid="ToggleSwitch" HorizontalAlignment="Right"/>
-                    </controls:Setting.ActionContent>
-                </controls:Setting>
-                <InfoBar x:Uid="GPO_IsSettingForced"
-                    Severity="Informational"
+                <labs:SettingsCard
+                    x:Uid="Awake_EnableAwake"
+                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsAwake.png}"
+                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured, Converter={StaticResource BoolNegationConverter}}">
+                    <ToggleSwitch
+                        x:Uid="ToggleSwitch"
+                        IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
+                </labs:SettingsCard>
+                <InfoBar
+                    x:Uid="GPO_IsSettingForced"
                     IsClosable="False"
                     IsOpen="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured}"
-                    IsTabStop="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured}" />
+                    IsTabStop="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured}"
+                    Severity="Informational" />
 
-                <controls:SettingsGroup x:Uid="Awake_Behavior_GroupSettings" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                 
-                    <controls:Setting x:Uid="Awake_Mode" Icon="&#xE945;" >
-                        <controls:Setting.ActionContent>
-                            <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}"
-                                      SelectedIndex="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToIntConverter}}">
-                                <ComboBoxItem x:Uid="Awake_NoKeepAwake"/>
-                                <ComboBoxItem x:Uid="Awake_IndefiniteKeepAwake"/>
-                                <ComboBoxItem x:Uid="Awake_TemporaryKeepAwake"/>
-                            </ComboBox>
-                        </controls:Setting.ActionContent>
-                    </controls:Setting>
+                <controls:SettingsGroup
+                    x:Uid="Awake_Behavior_GroupSettings"
+                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
 
-                    <controls:Setting x:Uid="Awake_TimeBeforeAwake" Icon="&#xE916;" Visibility="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}">
-                        <controls:Setting.ActionContent>
-                            <StackPanel
-                                                Orientation="Horizontal">
-                                <NumberBox x:Uid="Awake_TemporaryKeepAwake_Hours"
-                                                Value="{x:Bind ViewModel.Hours, Mode=TwoWay}"
-                                                Minimum="0"
-                                                SpinButtonPlacementMode="Compact"
-                                                HorizontalAlignment="Left"
-                                                Width="96"
-                                                SmallChange="1" 
-                                                LargeChange="5"/>
-                                <NumberBox x:Uid="Awake_TemporaryKeepAwake_Minutes"
-                                                Value="{x:Bind ViewModel.Minutes, Mode=TwoWay}"
-                                                Minimum="0"
-                                                SpinButtonPlacementMode="Compact"
-                                                Margin="8,0,0,0"
-                                                HorizontalAlignment="Left"
-                                                Width="96"
-                                                Maximum="60"
-                                                SmallChange="1" 
-                                                LargeChange="5"/>
-                            </StackPanel>
-                        </controls:Setting.ActionContent>
-                    </controls:Setting>
+                    <labs:SettingsCard
+                        x:Uid="Awake_Mode"
+                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xE945;}">
+                        <ComboBox
+                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                            SelectedIndex="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToIntConverter}}">
+                            <ComboBoxItem x:Uid="Awake_NoKeepAwake" />
+                            <ComboBoxItem x:Uid="Awake_IndefiniteKeepAwake" />
+                            <ComboBoxItem x:Uid="Awake_TemporaryKeepAwake" />
+                        </ComboBox>
+                    </labs:SettingsCard>
 
-                    <controls:Setting x:Uid="Awake_EnableDisplayKeepAwake" Icon="&#xE7FB;">
-                        <controls:Setting.ActionContent>
-                            <ToggleSwitch IsOn="{x:Bind ViewModel.KeepDisplayOn, Mode=TwoWay}" x:Uid="ToggleSwitch" />
-                        </controls:Setting.ActionContent>
-                    </controls:Setting>
+                    <labs:SettingsCard
+                        x:Uid="Awake_TimeBeforeAwake"
+                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xE916;}"
+                        Visibility="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}">
+                        <StackPanel Orientation="Horizontal">
+                            <NumberBox
+                                x:Uid="Awake_TemporaryKeepAwake_Hours"
+                                Width="96"
+                                HorizontalAlignment="Left"
+                                LargeChange="5"
+                                Minimum="0"
+                                SmallChange="1"
+                                SpinButtonPlacementMode="Compact"
+                                Value="{x:Bind ViewModel.Hours, Mode=TwoWay}" />
+                            <NumberBox
+                                x:Uid="Awake_TemporaryKeepAwake_Minutes"
+                                Width="96"
+                                Margin="8,0,0,0"
+                                HorizontalAlignment="Left"
+                                LargeChange="5"
+                                Maximum="60"
+                                Minimum="0"
+                                SmallChange="1"
+                                SpinButtonPlacementMode="Compact"
+                                Value="{x:Bind ViewModel.Minutes, Mode=TwoWay}" />
+                        </StackPanel>
+                    </labs:SettingsCard>
 
+                    <labs:SettingsCard
+                        x:Uid="Awake_EnableDisplayKeepAwake"
+                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xE7FB;}"
+                        Visibility="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}">
+                        <ToggleSwitch
+                            x:Uid="ToggleSwitch"
+                            IsOn="{x:Bind ViewModel.KeepDisplayOn, Mode=TwoWay}" />
+                    </labs:SettingsCard>
                 </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 
         <controls:SettingsPageControl.PrimaryLinks>
-            <controls:PageLink x:Uid="LearnMore_Awake" Link="https://aka.ms/PowerToysOverview_Awake"/>
+            <controls:PageLink
+                x:Uid="LearnMore_Awake"
+                Link="https://aka.ms/PowerToysOverview_Awake" />
         </controls:SettingsPageControl.PrimaryLinks>
         <controls:SettingsPageControl.SecondaryLinks>
-            <controls:PageLink Text="Den Delimarsky's work on creating Awake" Link="https://Awake.den.dev"/>
+            <controls:PageLink
+                Link="https://Awake.den.dev"
+                Text="Den Delimarsky's work on creating Awake" />
         </controls:SettingsPageControl.SecondaryLinks>
     </controls:SettingsPageControl>
 </Page>