[Settings] New UX (#12470)

* Removed hardcoded background

* Background

* Updated pages

* Added OOBE to shellpage

* Margin fixes

* Fix

* Resource update

* Resource string update

* Removed reference from installer file

* Updated UI fixes and remove conflicts

* Adding new settings control

* PowerRename

* Sidepanel updates

* Shortcut Guide

* Updates screeens

* General page updates

* Awake UX update

* Changed order for power preview note

* Fixes

* UI fixes

* KBM

* IsEnabled state support

* Added new controls

* Update

* Updated nugest packages

* Replaced itemscontrol

* Introducing setting button style

* FancyZones page

* Plugin page

* Switch case

* Fixed typo

* Plugin manager update

* Introducing SettingExpander

* Setting automation properties

* Accesibility improvements

* VCM and cleanup

* Refactoring OOBE pages part 1

* OOBE XAML refactoring

* Added MinWidth to actioncontent controls

* Updates to various settings

* Spell update

* Update to author label

* Clean up

* Removing redunant files

* Move file

* Updated files

* Revert "Updated files"

This reverts commit 1a5c887eae.

* Revert "Move file"

This reverts commit 2b06c75c1f.

* Revert "Removing redunant files"

This reverts commit fe79ec1701.

* Revert "Clean up"

This reverts commit 028e15fab6.

* Removed redundant styles

* Revert "Removed redundant styles"

This reverts commit dfdfd65021.

* Files cleanup

* Removing converter, updating background and paddings

* Styling updates

* Unit test updates

* Fixes

* Installer fixes

* Update Resources.resw

* Shell page updates

* Updated pagelinks

* Styles re-ordering

* Updated converter

* Updated ToggleSwitch style

* Bugfixes

* Typo fix

* [Settings] New UX - installer dll fixes (#12818)

* [Settings] New UX - Fix some failing tests (#12822)

* Bugfixes

* Typo fix

* Hiding VCM

* Bugfixes

* Download button fix

* Remove Newtonsoft.Json from installer file

* Updated visuals

* Bugfixes

* Syntax fix

* Updated installer file

* Bugfixes

* New label

* Theming support for OOBE

* Put back in Documentation hyperlink

* Right uid

Co-authored-by: Niels Laute <niels9001@hotmail.com>
Co-authored-by: Jaime Bernardo <jaime@janeasystems.com>

.github/actions/spell-check/expect.txt

@@ -15,6 +15,7 @@ accessibilityinsights
 Acl
 aclapi
 AColumn
+Accessible
 acos
 acrt
 Actioncenter
@@ -270,6 +271,7 @@ codereview
 Codespaces
 COINIT
 colorconv
+colorformat
 colorhistory
 colorhistorylimit
 COLORKEY

installer/PowerToysSetup/Product.wxs

@@ -794,7 +794,7 @@
         <File Source="$(var.BinX64Dir)Settings\PowerToys.Settings.exe"/>
         <File Source="$(var.BinX64Dir)Settings\Microsoft.PowerToys.Settings.UI.exe"/>
         <!-- dll -->
-        <?foreach File in concrt140_app.dll;Microsoft.Bcl.AsyncInterfaces.dll;System.IO.Abstractions.dll;Microsoft.PowerToys.Settings.UI.Lib.dll;PowerToys.Settings.dll;Microsoft.Toolkit.dll;Microsoft.Toolkit.Uwp.dll;Microsoft.Toolkit.Uwp.UI.dll;Microsoft.Toolkit.Win32.UI.XamlHost.dll;Microsoft.Toolkit.Win32.UI.XamlHost.Managed.dll;Microsoft.Toolkit.Wpf.UI.Controls.dll;Microsoft.Toolkit.Wpf.UI.XamlHost.dll;Microsoft.UI.Xaml.dll;Microsoft.Xaml.Interactions.dll;Microsoft.Xaml.Interactivity.dll;msvcp140_1_app.dll;msvcp140_2_app.dll;msvcp140_app.dll;Newtonsoft.Json.dll;PowerToysInterop.dll;System.Runtime.CompilerServices.Unsafe.dll;System.Text.Encodings.Web.dll;System.Text.Json.dll;vcamp140_app.dll;vccorlib140_app.dll;vcomp140_app.dll;vcruntime140_1_app.dll;vcruntime140_app.dll;ManagedTelemetry.dll;ManagedCommon.dll;ColorCode.Core.dll;ColorCode.UWP.dll;Microsoft.Graphics.Canvas.winmd;Microsoft.Toolkit.Parsers.dll;Microsoft.Toolkit.Uwp.UI.Animations.dll;Microsoft.Toolkit.Uwp.UI.Controls.dll?>
+        <?foreach File in concrt140_app.dll;Microsoft.Bcl.AsyncInterfaces.dll;System.IO.Abstractions.dll;Microsoft.PowerToys.Settings.UI.Lib.dll;PowerToys.Settings.dll;Microsoft.Toolkit.dll;Microsoft.Toolkit.Uwp.dll;Microsoft.Toolkit.Uwp.UI.dll;Microsoft.Toolkit.Win32.UI.XamlHost.dll;Microsoft.Toolkit.Win32.UI.XamlHost.Managed.dll;Microsoft.Toolkit.Wpf.UI.Controls.dll;Microsoft.Toolkit.Wpf.UI.XamlHost.dll;Microsoft.UI.Xaml.dll;Microsoft.Xaml.Interactions.dll;Microsoft.Xaml.Interactivity.dll;msvcp140_1_app.dll;msvcp140_2_app.dll;msvcp140_app.dll;PowerToysInterop.dll;System.Runtime.CompilerServices.Unsafe.dll;System.Text.Encodings.Web.dll;System.Text.Json.dll;vcamp140_app.dll;vccorlib140_app.dll;vcomp140_app.dll;vcruntime140_1_app.dll;vcruntime140_app.dll;ManagedTelemetry.dll;ManagedCommon.dll;ColorCode.Core.dll;ColorCode.UWP.dll;Microsoft.Graphics.Canvas.winmd;Microsoft.Toolkit.Uwp.UI.Controls.Core.dll;Microsoft.Toolkit.Uwp.UI.Controls.DataGrid.dll;Microsoft.Toolkit.Uwp.UI.Controls.Input.dll;Microsoft.Toolkit.Uwp.UI.Controls.Layout.dll;Microsoft.Toolkit.Uwp.UI.Controls.Markdown.dll;Microsoft.Toolkit.Uwp.UI.Controls.Media.dll;Microsoft.Toolkit.Uwp.UI.Controls.Primitives.dll?>
           <File Id="SettingsV2_$(var.File)" Source="$(var.BinX64Dir)Settings\$(var.File)" />
         <?endforeach?>
         <!-- json -->
@@ -848,7 +848,7 @@
     </DirectoryRef>
     <DirectoryRef Id="SettingsV2OOBEAssetsFluentIconsInstallFolder" FileSource="$(var.BinX64Dir)Settings\Assets\FluentIcons">
       <Component Id="SettingsV2OOBEAssetsFluentIcons" Guid="6A380D5A-DA63-45B5-B68F-06D57CDD1B9C" Win64="yes">
-        <?foreach File in ColorPicker.png;FancyZones.png;Awake.png;FileExplorerPreview.png;ImageResizer.png;KeyboardManager.png;PowerRename.png;PowerToys.png;PowerToysRun.png;ShortcutGuide.png;VideoConferenceMute.png ?>
+        <?foreach File in ColorPicker.png;FancyZones.png;Awake.png;FileExplorerPreview.png;ImageResizer.png;KeyboardManager.png;PowerRename.png;PowerToys.png;PowerToysRun.png;Settings.png;ShortcutGuide.png;VideoConferenceMute.png ?>
           <File Id="SettingsV2OOBEAssetsFluentIcons_$(var.File)"  Source="$(var.BinX64Dir)Settings\Assets\FluentIcons\FluentIcons$(var.File)" />
         <?endforeach?>
       </Component>
@@ -869,7 +869,7 @@
     </DirectoryRef>
     <DirectoryRef Id="SettingsV2StylesInstallFolder" FileSource="$(var.BinX64Dir)Settings\Styles">
       <Component Id="SettingsV2Styles" Guid="44B5C0E0-76DA-4604-BB86-FCD27A00EB71" Win64="yes">
-        <?foreach File in Page.xbf;TextBlock.xbf;_Colors.xbf;_FontSizes.xbf;_Sizes.xbf;_Thickness.xbf;Button.xbf?>
+        <?foreach File in TextBlock.xbf;Button.xbf?>
           <File Id="SettingsV2_Styles_$(var.File)" Source="$(var.BinX64Dir)Settings\Styles\$(var.File)" />
         <?endforeach?>
       </Component>

src/runner/Resources.resx

@@ -110,14 +110,14 @@
     <value>Settings</value>
   </data>
   <data name="DOCUMENTATION_MENU_TEXT" xml:space="preserve">
-    <value>Open documentation</value>
+    <value>Documentation</value>
   </data>
   <data name="EXIT_MENU_TEXT" xml:space="preserve">
     <value>Exit</value>
     <comment>Exit as a verb, as in Exit the application</comment>
   </data>
   <data name="SUBMIT_BUG_TEXT" xml:space="preserve">
-    <value>Report Bug</value>
+    <value>Report bug</value>
   </data>
   <data name="BUGREPORT_SUCCESS" xml:space="preserve">
     <value>Bug report .zip file has been created on your Desktop.</value>

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/ViewModels/GeneralViewModel.cs

@@ -80,14 +80,14 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             // normalization for switch statements
             switch (GeneralSettingsConfig.Theme.ToUpperInvariant())
             {
-                case "LIGHT":
-                    _isLightThemeRadioButtonChecked = true;
-                    break;
                 case "DARK":
-                    _isDarkThemeRadioButtonChecked = true;
+                    _themeIndex = 0;
+                    break;
+                case "LIGHT":
+                    _themeIndex = 1;
                     break;
                 case "SYSTEM":
-                    _isSystemThemeRadioButtonChecked = true;
+                    _themeIndex = 2;
                     break;
             }
 
@@ -116,9 +116,8 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
         private bool _isElevated;
         private bool _runElevated;
         private bool _isAdmin;
-        private bool _isDarkThemeRadioButtonChecked;
+        private int _themeIndex;
-        private bool _isLightThemeRadioButtonChecked;
+
-        private bool _isSystemThemeRadioButtonChecked;
         private bool _autoDownloadUpdates;
 
         private UpdatingSettings.UpdatingState _updatingState = UpdatingSettings.UpdatingState.UpToDate;
@@ -255,81 +254,33 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             }
         }
 
-        [SuppressMessage("Design", "CA1031:Do not catch general exception types", Justification = "This may throw if the XAML page is not initialized in tests (https://github.com/microsoft/PowerToys/pull/2676)")]
+        public int ThemeIndex
-        public bool IsDarkThemeRadioButtonChecked
         {
             get
             {
-                return _isDarkThemeRadioButtonChecked;
+                return _themeIndex;
             }
 
             set
             {
-                if (value == true)
+                if (_themeIndex != value)
                 {
-                    GeneralSettingsConfig.Theme = "dark";
+                    switch (value)
-                    _isDarkThemeRadioButtonChecked = value;
+                    {
-                    try
+                        case 0: GeneralSettingsConfig.Theme = "dark"; break;
-                    {
+                        case 1: GeneralSettingsConfig.Theme = "light"; break;
-                        UpdateUIThemeCallBack(GeneralSettingsConfig.Theme);
+                        case 2: GeneralSettingsConfig.Theme = "system"; break;
-                    }
+                    }
-                    catch (Exception e)
+
-                    {
+                    _themeIndex = value;
-                        Logger.LogError("Exception encountered when changing Settings theme", e);
+
-                    }
-
-                    NotifyPropertyChanged();
-                }
-            }
-        }
-
-        [SuppressMessage("Design", "CA1031:Do not catch general exception types", Justification = "This may throw if the XAML page is not initialized in tests (https://github.com/microsoft/PowerToys/pull/2676)")]
-        public bool IsLightThemeRadioButtonChecked
-        {
-            get
-            {
-                return _isLightThemeRadioButtonChecked;
-            }
-
-            set
-            {
-                if (value == true)
-                {
-                    GeneralSettingsConfig.Theme = "light";
-                    _isLightThemeRadioButtonChecked = value;
-                    try
-                    {
-                        UpdateUIThemeCallBack(GeneralSettingsConfig.Theme);
-                    }
-                    catch (Exception e)
-                    {
-                        Logger.LogError("Exception encountered when changing Settings theme", e);
-                    }
-
-                    NotifyPropertyChanged();
-                }
-            }
-        }
-
-        [SuppressMessage("Design", "CA1031:Do not catch general exception types", Justification = "This may throw if the XAML page is not initialized in tests (https://github.com/microsoft/PowerToys/pull/2676)")]
-        public bool IsSystemThemeRadioButtonChecked
-        {
-            get
-            {
-                return _isSystemThemeRadioButtonChecked;
-            }
-
-            set
-            {
-                if (value == true)
-                {
-                    GeneralSettingsConfig.Theme = "system";
-                    _isSystemThemeRadioButtonChecked = value;
                     try
                     {
                         UpdateUIThemeCallBack(GeneralSettingsConfig.Theme);
                     }
+#pragma warning disable CA1031 // Do not catch general exception types
                     catch (Exception e)
+#pragma warning restore CA1031 // Do not catch general exception types
                     {
                         Logger.LogError("Exception encountered when changing Settings theme", e);
                     }

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/ViewModels/PowerLauncherPluginViewModel.cs

@@ -139,21 +139,6 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             }
         }
 
-        private bool _showAdditionalInfoPanel;
-
-        public bool ShowAdditionalInfoPanel
-        {
-            get => _showAdditionalInfoPanel;
-            set
-            {
-                if (value != _showAdditionalInfoPanel)
-                {
-                    _showAdditionalInfoPanel = value;
-                    NotifyPropertyChanged();
-                }
-            }
-        }
-
         public event PropertyChangedEventHandler PropertyChanged;
 
         private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/ViewModels/PowerLauncherViewModel.cs

@@ -19,13 +19,8 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
 {
     public class PowerLauncherViewModel : Observable
     {
-        private bool _isDarkThemeRadioButtonChecked;
+        private int _themeIndex;
-        private bool _isLightThemeRadioButtonChecked;
+        private int _monitorPositionIndex;
-        private bool _isSystemThemeRadioButtonChecked;
-
-        private bool _isCursorPositionRadioButtonChecked;
-        private bool _isPrimaryMonitorPositionRadioButtonChecked;
-        private bool _isFocusPositionRadioButtonChecked;
 
         private string _searchText;
 
@@ -75,27 +70,27 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
 
             switch (settings.Properties.Theme)
             {
-                case Theme.Light:
-                    _isLightThemeRadioButtonChecked = true;
-                    break;
                 case Theme.Dark:
-                    _isDarkThemeRadioButtonChecked = true;
+                    _themeIndex = 0;
+                    break;
+                case Theme.Light:
+                    _themeIndex = 1;
                     break;
                 case Theme.System:
-                    _isSystemThemeRadioButtonChecked = true;
+                    _themeIndex = 2;
                     break;
             }
 
             switch (settings.Properties.Position)
             {
                 case StartupPosition.Cursor:
-                    _isCursorPositionRadioButtonChecked = true;
+                    _monitorPositionIndex = 0;
                     break;
                 case StartupPosition.PrimaryMonitor:
-                    _isPrimaryMonitorPositionRadioButtonChecked = true;
+                    _monitorPositionIndex = 1;
                     break;
                 case StartupPosition.Focus:
-                    _isFocusPositionRadioButtonChecked = true;
+                    _monitorPositionIndex = 2;
                     break;
             }
 
@@ -199,112 +194,46 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             }
         }
 
-        public bool IsDarkThemeRadioButtonChecked
+        public int ThemeIndex
         {
             get
             {
-                return _isDarkThemeRadioButtonChecked;
+                return _themeIndex;
             }
 
             set
             {
-                if (value == true)
+                switch (value)
                 {
-                    settings.Properties.Theme = Theme.Dark;
+                    case 0: settings.Properties.Theme = Theme.Dark; break;
-                    _isDarkThemeRadioButtonChecked = value;
+                    case 1: settings.Properties.Theme = Theme.Light; break;
+                    case 2: settings.Properties.Theme = Theme.System; break;
+                }
 
+                _themeIndex = value;
                 UpdateSettings();
             }
         }
-        }
 
-        public bool IsLightThemeRadioButtonChecked
+        public int MonitorPositionIndex
         {
             get
             {
-                return _isLightThemeRadioButtonChecked;
+                return _monitorPositionIndex;
             }
 
             set
             {
-                if (value == true)
+                if (_monitorPositionIndex != value)
                 {
-                    settings.Properties.Theme = Theme.Light;
+                    switch (value)
-                    _isDarkThemeRadioButtonChecked = value;
+                    {
-
+                        case 0: settings.Properties.Position = StartupPosition.Cursor; break;
-                    UpdateSettings();
+                        case 1: settings.Properties.Position = StartupPosition.PrimaryMonitor; break;
-                }
+                        case 2: settings.Properties.Position = StartupPosition.Focus; break;
-            }
                     }
 
-        public bool IsSystemThemeRadioButtonChecked
+                    _monitorPositionIndex = value;
-        {
-            get
-            {
-                return _isSystemThemeRadioButtonChecked;
-            }
-
-            set
-            {
-                if (value == true)
-                {
-                    settings.Properties.Theme = Theme.System;
-                    _isDarkThemeRadioButtonChecked = value;
-
-                    UpdateSettings();
-                }
-            }
-        }
-
-        public bool IsCursorPositionRadioButtonChecked
-        {
-            get
-            {
-                return _isCursorPositionRadioButtonChecked;
-            }
-
-            set
-            {
-                if (value == true)
-                {
-                    settings.Properties.Position = StartupPosition.Cursor;
-                    _isCursorPositionRadioButtonChecked = value;
-                    UpdateSettings();
-                }
-            }
-        }
-
-        public bool IsPrimaryMonitorPositionRadioButtonChecked
-        {
-            get
-            {
-                return _isPrimaryMonitorPositionRadioButtonChecked;
-            }
-
-            set
-            {
-                if (value == true)
-                {
-                    settings.Properties.Position = StartupPosition.PrimaryMonitor;
-                    _isPrimaryMonitorPositionRadioButtonChecked = value;
-                    UpdateSettings();
-                }
-            }
-        }
-
-        public bool IsFocusPositionRadioButtonChecked
-        {
-            get
-            {
-                return _isFocusPositionRadioButtonChecked;
-            }
-
-            set
-            {
-                if (value == true)
-                {
-                    settings.Properties.Position = StartupPosition.Focus;
-                    _isFocusPositionRadioButtonChecked = value;
                     UpdateSettings();
                 }
             }

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ShortcutGuideViewModel.cs

@@ -56,21 +56,11 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             _opacity = Settings.Properties.OverlayOpacity.Value;
             _disabledApps = Settings.Properties.DisabledApps.Value;
 
-            string theme = Settings.Properties.Theme.Value;
+            switch (Settings.Properties.Theme.Value)
-
-            if (theme == "dark")
             {
-                _themeIndex = 0;
+                case "dark": _themeIndex = 0; break;
-            }
+                case "light": _themeIndex = 1; break;
-
+                case "system": _themeIndex = 2; break;
-            if (theme == "light")
-            {
-                _themeIndex = 1;
-            }
-
-            if (theme == "system")
-            {
-                _themeIndex = 2;
             }
         }
 
@@ -130,30 +120,16 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             {
                 if (_themeIndex != value)
                 {
-                    if (value == 0)
+                    switch (value)
                     {
-                        // set theme to dark.
+                        case 0: Settings.Properties.Theme.Value = "dark"; break;
-                        Settings.Properties.Theme.Value = "dark";
+                        case 1: Settings.Properties.Theme.Value = "light"; break;
-                        _themeIndex = value;
+                        case 2: Settings.Properties.Theme.Value = "system"; break;
-                        NotifyPropertyChanged();
                     }
 
-                    if (value == 1)
-                    {
-                        // set theme to light.
-                        Settings.Properties.Theme.Value = "light";
                     _themeIndex = value;
                     NotifyPropertyChanged();
                 }
-
-                    if (value == 2)
-                    {
-                        // set theme to system default.
-                        Settings.Properties.Theme.Value = "system";
-                        _themeIndex = value;
-                        NotifyPropertyChanged();
-                    }
-                }
             }
         }
 

src/settings-ui/Microsoft.PowerToys.Settings.UI.UnitTests/ViewModelTests/General.cs

@@ -191,10 +191,10 @@ namespace ViewModelTests
                 sendRestartAdminIPCMessage,
                 sendCheckForUpdatesIPCMessage,
                 GeneralSettingsFileName);
-            Assert.IsFalse(viewModel.IsLightThemeRadioButtonChecked);
+            Assert.AreNotEqual(1, viewModel.ThemeIndex);
 
             // act
-            viewModel.IsLightThemeRadioButtonChecked = true;
+            viewModel.ThemeIndex = 1;
         }
 
         [TestMethod]
@@ -222,10 +222,10 @@ namespace ViewModelTests
                 sendRestartAdminIPCMessage,
                 sendCheckForUpdatesIPCMessage,
                 GeneralSettingsFileName);
-            Assert.IsFalse(viewModel.IsDarkThemeRadioButtonChecked);
+            Assert.AreNotEqual(0, viewModel.ThemeIndex);
 
             // act
-            viewModel.IsDarkThemeRadioButtonChecked = true;
+            viewModel.ThemeIndex = 0;
         }
 
         [TestMethod]

src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml

@@ -2,22 +2,27 @@
     x:Class="Microsoft.PowerToys.Settings.UI.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:xaml="using:Microsoft.Toolkit.Win32.UI.XamlHost"
+    xmlns:xaml="using:Microsoft.Toolkit.Win32.UI.XamlHost">
-    xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <XamlControlsResources ControlsResourcesVersion="Version1" xmlns="using:Microsoft.UI.Xaml.Controls" />
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" ControlsResourcesVersion="Version2" />
                 <ResourceDictionary Source="/Controls/KeyVisual/KeyVisual.xaml" />
-                <ResourceDictionary Source="/Styles/_Colors.xaml" />
-                <ResourceDictionary Source="/Styles/_FontSizes.xaml" />
-                <ResourceDictionary Source="/Styles/_Thickness.xaml" />
-                <ResourceDictionary Source="/Styles/_Sizes.xaml" />
                 <ResourceDictionary Source="/Styles/TextBlock.xaml" />
-                <ResourceDictionary Source="/Styles/Page.xaml"/>
                 <ResourceDictionary Source="/Styles/Button.xaml"/>
+                <ResourceDictionary Source="/Themes/Colors.xaml"/>
+                <ResourceDictionary Source="/Themes/SettingsExpanderStyles.xaml"/>
             </ResourceDictionary.MergedDictionaries>
-            <converters:ModuleEnabledToOpacityConverter x:Key="ModuleEnabledToOpacityConverter"/>
+
+            <Thickness x:Key="InfoBarIconMargin">6,16,16,16</Thickness>
+            <Thickness x:Key="InfoBarContentRootPadding">16,0,0,0</Thickness>
+            <x:Double x:Key="SettingActionControlMinWidth">240</x:Double>
+
+            <Style TargetType="ListViewItem" >
+                <Setter Property="Margin" Value="0,0,0,2" />
+                <Setter Property="Padding" Value="0,0,0,0" />
+                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+            </Style>
         </ResourceDictionary>
     </Application.Resources>
 </xaml:XamlApplication>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml

@@ -6,25 +6,10 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
-    AutomationProperties.Name="{x:Bind Header, Mode=OneTime}"
+   
     d:DesignHeight="300"
     d:DesignWidth="400">
     <TextBox x:Name="HotkeyTextBox"
              x:Uid="SettingsPage_SetShortcut"
-             AutomationProperties.HelpText="{Binding ElementName=ShortcutWarningLabelText, Path=Text}"
+             IsReadOnly="True"/>
-             IsReadOnly="True">
-        <ToolTipService.ToolTip>
-            <TextBlock x:Name="ShortcutWarningLabelText" TextWrapping="WrapWholeWords">
-                <Run x:Uid="ShortcutWarningLabel"/>
-                <LineBreak/>
-                <Run Text="{x:Bind Keys, Mode=OneTime}" FontWeight="SemiBold"/>
-            </TextBlock>
-        </ToolTipService.ToolTip>
-        <TextBox.Header>
-            <TextBlock AutomationProperties.Name="{x:Bind Header, Mode=OneTime}">
-                    <Run Text="{x:Bind Header, Mode=OneTime}"/>
-                    <Run Text="&#xE946;" FontFamily="Segoe MDL2 Assets"/>
-            </TextBlock>
-        </TextBox.Header>
-    </TextBox>
 </UserControl>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/OOBEPageControl/OOBEPageControl.xaml

@@ -0,0 +1,48 @@
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.Controls.OOBEPageControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+   
+    d:DesignHeight="300"
+    d:DesignWidth="400">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image x:Name="HeaderImage"
+               Source="{x:Bind ModuleImageSource}"
+               Stretch="UniformToFill" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto"
+                      Padding="32,24,32,24">
+            <StackPanel Orientation="Vertical"
+                        VerticalAlignment="Top">
+                
+                <TextBlock x:Name="TitleTxt"
+                           Text="{x:Bind ModuleTitle}"
+                           AutomationProperties.HeadingLevel="Level2"
+                           Style="{StaticResource TitleTextBlockStyle}" />
+
+                <TextBlock x:Name="DescriptionTxt"
+                           Margin="0,8,0,0"
+                           Text="{x:Bind ModuleDescription}"
+                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                           TextWrapping="Wrap" />
+
+                <ContentPresenter x:Name="ModuleContentPresenter"
+                                  Content="{x:Bind ModuleContent}"
+                                  HorizontalAlignment="Stretch"
+                                  HorizontalContentAlignment="Stretch"
+                                  Margin="0,12,0,0"/>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</UserControl>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/OOBEPageControl/OOBEPageControl.xaml.cs

@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class OOBEPageControl : UserControl
+    {
+        public OOBEPageControl()
+        {
+            this.InitializeComponent();
+        }
+
+        public string ModuleTitle
+        {
+            get { return (string)GetValue(ModuleTitleProperty); }
+            set { SetValue(ModuleTitleProperty, value); }
+        }
+
+        public string ModuleDescription
+        {
+            get => (string)GetValue(ModuleDescriptionProperty);
+            set => SetValue(ModuleDescriptionProperty, value);
+        }
+
+        public string ModuleImageSource
+        {
+            get => (string)GetValue(ModuleImageSourceProperty);
+            set => SetValue(ModuleImageSourceProperty, value);
+        }
+
+        public object ModuleContent
+        {
+            get { return (object)GetValue(ModuleContentProperty); }
+            set { SetValue(ModuleContentProperty, value); }
+        }
+
+        public static readonly DependencyProperty ModuleTitleProperty = DependencyProperty.Register("ModuleTitle", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public static readonly DependencyProperty ModuleDescriptionProperty = DependencyProperty.Register("ModuleDescription", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public static readonly DependencyProperty ModuleImageSourceProperty = DependencyProperty.Register("ModuleImageSource", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public static readonly DependencyProperty ModuleContentProperty = DependencyProperty.Register("ModuleContent", typeof(object), typeof(SettingsPageControl), new PropertyMetadata(new Grid()));
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/Setting/Setting.cs

@@ -0,0 +1,158 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.ComponentModel;
+using Windows.UI.Accessibility;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Automation;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
+    [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
+    [TemplatePart(Name = PartIconPresenter, Type = typeof(ContentPresenter))]
+    [TemplatePart(Name = PartDescriptionPresenter, Type = typeof(ContentPresenter))]
+    public class Setting : ContentControl
+    {
+        private const string PartIconPresenter = "IconPresenter";
+        private const string PartDescriptionPresenter = "DescriptionPresenter";
+        private ContentPresenter _iconPresenter;
+        private ContentPresenter _descriptionPresenter;
+        private Setting _setting;
+
+        public Setting()
+        {
+            this.DefaultStyleKey = typeof(Setting);
+        }
+
+        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
+           "Header",
+           typeof(string),
+           typeof(Setting),
+           new PropertyMetadata(default(string), OnHeaderChanged));
+
+        public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(
+            "Description",
+            typeof(object),
+            typeof(Setting),
+            new PropertyMetadata(null, OnDescriptionChanged));
+
+        public static readonly DependencyProperty IconProperty = DependencyProperty.Register(
+            "Icon",
+            typeof(object),
+            typeof(Setting),
+            new PropertyMetadata(default(string), OnIconChanged));
+
+        public static readonly DependencyProperty ActionContentProperty = DependencyProperty.Register(
+            "ActionContent",
+            typeof(object),
+            typeof(Setting),
+            null);
+
+        [Localizable(true)]
+        public string Header
+        {
+            get => (string)GetValue(HeaderProperty);
+            set => SetValue(HeaderProperty, value);
+        }
+
+        [Localizable(true)]
+        public object Description
+        {
+            get => (object)GetValue(DescriptionProperty);
+            set => SetValue(DescriptionProperty, value);
+        }
+
+        public object Icon
+        {
+            get => (object)GetValue(IconProperty);
+            set => SetValue(IconProperty, value);
+        }
+
+        public object ActionContent
+        {
+            get => (object)GetValue(ActionContentProperty);
+            set => SetValue(ActionContentProperty, value);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            IsEnabledChanged -= Setting_IsEnabledChanged;
+            _setting = (Setting)this;
+            _iconPresenter = (ContentPresenter)_setting.GetTemplateChild(PartIconPresenter);
+            _descriptionPresenter = (ContentPresenter)_setting.GetTemplateChild(PartDescriptionPresenter);
+            Update();
+            SetEnabledState();
+            IsEnabledChanged += Setting_IsEnabledChanged;
+            base.OnApplyTemplate();
+        }
+
+        private static void OnHeaderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((Setting)d).Update();
+        }
+
+        private static void OnIconChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((Setting)d).Update();
+        }
+
+        private static void OnDescriptionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((Setting)d).Update();
+        }
+
+        private void Setting_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
+        {
+            SetEnabledState();
+        }
+
+        private void SetEnabledState()
+        {
+            VisualStateManager.GoToState(this, IsEnabled ? "Normal" : "Disabled", true);
+        }
+
+        private void Update()
+        {
+            if (_setting == null)
+            {
+                return;
+            }
+
+            if (_setting.ActionContent != null)
+            {
+                if (_setting.ActionContent.GetType() != typeof(Button))
+                {
+                    // We do not want to override the default AutomationProperties.Name of a button. Its Content property already describes what it does.
+                    if (!string.IsNullOrEmpty(_setting.Header))
+                    {
+                        AutomationProperties.SetName((UIElement)_setting.ActionContent, _setting.Header);
+                    }
+                }
+            }
+
+            if (_setting._iconPresenter != null)
+            {
+                if (_setting.Icon == null)
+                {
+                    _setting._iconPresenter.Visibility = Visibility.Collapsed;
+                }
+                else
+                {
+                    _setting._iconPresenter.Visibility = Visibility.Visible;
+                }
+            }
+
+            if (_setting.Description == null)
+            {
+                _setting._descriptionPresenter.Visibility = Visibility.Collapsed;
+            }
+            else
+            {
+                _setting._descriptionPresenter.Visibility = Visibility.Visible;
+            }
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/Setting/Setting.xaml

@@ -0,0 +1,109 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls">
+
+    <Style TargetType="controls:Setting">
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+        <Setter Property="Background" Value="{ThemeResource CardBackgroundBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource CardBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="Padding" Value="16" />
+        <Setter Property="Margin" Value="0,0,0,0"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:Setting">
+                    <Grid x:Name="RootGrid"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          Background="{TemplateBinding Background}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalAlignment="Stretch"
+                          VerticalAlignment="Center"
+                          MinHeight="48">
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="HeaderPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="DescriptionPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <!-- Icon -->
+                            <ColumnDefinition Width="*"/>
+                            <!-- Header and subtitle -->
+                            <ColumnDefinition Width="Auto"/>
+                            <!-- Action control -->
+                        </Grid.ColumnDefinitions>
+
+                        <ContentPresenter x:Name="IconPresenter"
+                          Content="{TemplateBinding Icon}"
+                          HorizontalAlignment="Center"
+                          FontSize="20"
+                          Margin="2,0,18,0"
+                          MaxWidth="26"
+                          AutomationProperties.AccessibilityView="Raw"
+                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                          Foreground="{ThemeResource CardPrimaryForegroundBrush}"
+                          VerticalAlignment="Center"/>
+
+
+                        <StackPanel
+                            VerticalAlignment="Center"
+                            Grid.Column="1"
+                            HorizontalAlignment="Stretch"
+                            Margin="0,0,16,0">
+
+                            <TextBlock
+                                x:Name="HeaderPresenter"
+                                Text="{TemplateBinding Header}"
+                                VerticalAlignment="Center"
+                                Foreground="{ThemeResource CardPrimaryForegroundBrush}" />
+
+                            <ContentPresenter
+                                x:Name="DescriptionPresenter"
+                                Content="{TemplateBinding Description}"
+                                FontSize="{StaticResource SecondaryTextFontSize}"
+                                TextWrapping="WrapWholeWords"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}">
+                                <ContentPresenter.Resources>
+                                    <Style TargetType="TextBlock" BasedOn="{StaticResource CaptionTextBlockStyle}">
+                                        <Style.Setters>
+                                            <Setter Property="TextWrapping" Value="WrapWholeWords"/>
+                                        </Style.Setters>
+                                    </Style>
+                                    <Style TargetType="HyperlinkButton" BasedOn="{StaticResource TextBlockButtonStyle}">
+                                        <Style.Setters>
+                                            <Setter Property="FontWeight" Value="SemiBold"/>
+                                            <Setter Property="FontSize" Value="12"/>
+                                            <Setter Property="Margin" Value="0"/>
+                                            <Setter Property="Padding" Value="0,0,0,0"/>
+                                        </Style.Setters>
+                                    </Style>
+                                </ContentPresenter.Resources>
+                            </ContentPresenter>
+                        </StackPanel>
+
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Content="{TemplateBinding ActionContent}"
+                            Grid.Column="2"
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Right" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SettingExpander/SettingExpander.cs

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.UI.Xaml.Controls;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Automation;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public partial class SettingExpander : Expander
+    {
+        public SettingExpander()
+        {
+            DefaultStyleKey = typeof(Expander);
+            this.Style = (Style)App.Current.Resources["SettingExpanderStyle"];
+            this.RegisterPropertyChangedCallback(Expander.HeaderProperty, OnHeaderChanged);
+        }
+
+        private static void OnHeaderChanged(DependencyObject d, DependencyProperty dp)
+        {
+            SettingExpander self = (SettingExpander)d;
+            if (self.Header != null)
+            {
+                if (self.Header.GetType() == typeof(Setting))
+                {
+                    Setting selfSetting = (Setting)self.Header;
+                    selfSetting.Style = (Style)App.Current.Resources["ExpanderHeaderSettingStyle"];
+
+                    if (!string.IsNullOrEmpty(selfSetting.Header))
+                    {
+                        AutomationProperties.SetName(self, selfSetting.Header);
+                    }
+                }
+            }
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SettingsGroup/SettingsGroup.cs

@@ -0,0 +1,59 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    /// <summary>
+    /// Represents a control that can contain multiple settings (or other) controls
+    /// </summary>
+    [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
+    [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
+    public partial class SettingsGroup : ItemsControl
+    {
+        public SettingsGroup()
+        {
+            DefaultStyleKey = typeof(SettingsGroup);
+        }
+
+        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
+            "Header",
+            typeof(string),
+            typeof(SettingsGroup),
+            new PropertyMetadata(default(string)));
+
+        [Localizable(true)]
+        public string Header
+        {
+            get => (string)GetValue(HeaderProperty);
+            set => SetValue(HeaderProperty, value);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            IsEnabledChanged -= SettingsGroup_IsEnabledChanged;
+            SetEnabledState();
+            IsEnabledChanged += SettingsGroup_IsEnabledChanged;
+            base.OnApplyTemplate();
+        }
+
+        private void SettingsGroup_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
+        {
+            SetEnabledState();
+        }
+
+        private void SetEnabledState()
+        {
+            VisualStateManager.GoToState(this, IsEnabled ? "Normal" : "Disabled", true);
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SettingsGroup/SettingsGroup.xaml

@@ -0,0 +1,48 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls">
+
+    <Style TargetType="controls:SettingsGroup">
+        <Setter Property="ItemsPanel">
+            <Setter.Value>
+                <ItemsPanelTemplate>
+                    <StackPanel Orientation="Vertical"
+                                Spacing="2"/>
+                </ItemsPanelTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:SettingsGroup">
+                    <Grid HorizontalAlignment="Stretch">
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="HeaderPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="Auto"/>
+                        </Grid.RowDefinitions>
+                        <TextBlock x:Name="HeaderPresenter"
+                                   Text="{TemplateBinding Header}"
+                                   Grid.Row="0"
+                                   Style="{ThemeResource BodyStrongTextBlockStyle}"
+                                   Margin="1,32,0,8"
+                                   AutomationProperties.HeadingLevel="Level2"/>
+                        <ItemsPresenter Grid.Row="1"/>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SettingsPageControl/PageLink.cs

@@ -6,9 +6,9 @@ using System;
 
 namespace Microsoft.PowerToys.Settings.UI.Controls
 {
-    public class SidePanelLink
+    public class PageLink
     {
-        public string Label { get; set; }
+        public string Text { get; set; }
 
         public Uri Link { get; set; }
     }

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml

@@ -0,0 +1,121 @@
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.Controls.SettingsPageControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters" xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    mc:Ignorable="d">
+
+    <UserControl.Resources>
+        <converters:DoubleToVisibilityConverter x:Name="doubleToVisibilityConverter" GreaterThan="0" TrueValue="Visible" FalseValue="Collapsed" />
+        <Style TargetType="HyperlinkButton" BasedOn="{StaticResource TextBlockButtonStyle}">
+            <Style.Setters>
+                <Setter Property="FontWeight" Value="SemiBold"/>
+                <Setter Property="Margin" Value="0,0,16,0"/>
+            </Style.Setters>
+        </Style>
+    </UserControl.Resources>
+
+    <Grid RowSpacing="24" Padding="20,0,0,0">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*"/>
+ 
+        </Grid.RowDefinitions>
+        
+        <TextBlock x:Name="Header"
+                   Text="{x:Bind ModuleTitle}"
+                   Style="{StaticResource TitleTextBlockStyle}"
+                   Margin="0,44,0,0"
+                   VerticalAlignment="Stretch"/>
+
+        <ScrollViewer Grid.Row="1">
+            <Grid RowSpacing="24"
+                  Padding="0,0,20,48" >
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition MaxWidth="1048" Width="*"/>
+                    <ColumnDefinition Width="Auto"/>
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="Auto"/>
+                </Grid.RowDefinitions>
+
+                <!-- Top panel -->
+                <Grid ColumnSpacing="16">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="160"/>
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Border CornerRadius="4" VerticalAlignment="Top">
+                        <Image AutomationProperties.AccessibilityView="Raw">
+                            <Image.Source>
+                                <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
+                            </Image.Source>
+                        </Image>
+                    </Border>
+
+                    <StackPanel Grid.Column="1">
+                        <TextBlock x:Name="AboutDescription"
+                                   Text="{x:Bind ModuleDescription}"
+                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                   TextWrapping="Wrap"/>
+
+                        <ItemsControl ItemsSource="{x:Bind PrimaryLinks}" Margin="0,8,0,0">
+                            <ItemsControl.ItemTemplate>
+                                <DataTemplate x:DataType="local:PageLink">
+                                    <HyperlinkButton NavigateUri="{x:Bind Link}">
+                                        <TextBlock Text="{x:Bind Text}" TextWrapping="Wrap" />
+                                    </HyperlinkButton>
+                                </DataTemplate>
+                            </ItemsControl.ItemTemplate>
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <controls:WrapPanel Orientation="Horizontal" HorizontalSpacing="8"/>
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                        </ItemsControl>
+                    </StackPanel>
+
+                </Grid>
+
+                <!-- Content panel -->
+                <ContentPresenter x:Name="ModuleContentPresenter"
+                                      HorizontalAlignment="Stretch"
+                                      HorizontalContentAlignment="Stretch"
+                                      Content="{x:Bind ModuleContent}"
+                                      MaxWidth="1048"
+                                      Margin="0,12,0,0" Grid.Row="1"/>
+
+                <!-- Bottom panel -->
+                <StackPanel x:Name="SecondaryLinksPanel"
+                            Grid.Row="2"
+                            Visibility="{x:Bind SecondaryLinks.Count, Converter={StaticResource doubleToVisibilityConverter}}"
+                            Orientation="Vertical">
+                    <TextBlock Text="{x:Bind SecondaryLinksHeader}"
+                               Style="{ThemeResource BodyStrongTextBlockStyle}"
+                               Margin="2,8,0,0"
+                               AutomationProperties.HeadingLevel="Level2"/>
+
+                    <ItemsControl x:Name="SecondaryLinksItemControl" Margin="2,0,0,0" ItemsSource="{x:Bind SecondaryLinks}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate x:DataType="local:PageLink">
+                                <HyperlinkButton NavigateUri="{x:Bind Link}">
+                                    <TextBlock Text="{x:Bind Text}" TextWrapping="Wrap" />
+                                </HyperlinkButton>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                        <ItemsControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <controls:WrapPanel Orientation="Horizontal" HorizontalSpacing="8"/>
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                    </ItemsControl>
+                </StackPanel>
+            </Grid>
+        </ScrollViewer>
+    </Grid>
+</UserControl>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml.cs

@@ -3,21 +3,9 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
-using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
-using Windows.Foundation;
-using Windows.Foundation.Collections;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
-using Windows.UI.Xaml.Data;
-using Windows.UI.Xaml.Documents;
-using Windows.UI.Xaml.Input;
-using Windows.UI.Xaml.Media;
-using Windows.UI.Xaml.Navigation;
 
 namespace Microsoft.PowerToys.Settings.UI.Controls
 {
@@ -26,22 +14,14 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
         public SettingsPageControl()
         {
             this.InitializeComponent();
-            ModuleLinks = new ObservableCollection<SidePanelLink>();
+            PrimaryLinks = new ObservableCollection<PageLink>();
-            AttributionLinks = new ObservableCollection<SidePanelLink>();
+            SecondaryLinks = new ObservableCollection<PageLink>();
         }
 
-        public object ModuleContent
-        {
-            get { return (object)GetValue(ModuleContentProperty); }
-            set { SetValue(ModuleContentProperty, value); }
-        }
-
-        public static readonly DependencyProperty ModuleContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(SettingsPageControl), new PropertyMetadata(new Grid()));
-
         public string ModuleTitle
         {
-            get => (string)GetValue(ModuleTitleProperty);
+            get { return (string)GetValue(ModuleTitleProperty); }
-            set => SetValue(ModuleTitleProperty, value);
+            set { SetValue(ModuleTitleProperty, value); }
         }
 
         public string ModuleDescription
@@ -63,26 +43,40 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
         }
 
 #pragma warning disable CA2227 // Collection properties should be read only
-        public ObservableCollection<SidePanelLink> ModuleLinks
+        public ObservableCollection<PageLink> PrimaryLinks
 #pragma warning restore CA2227 // Collection properties should be read only
         {
-            get => (ObservableCollection<SidePanelLink>)GetValue(ModuleLinksProperty);
+            get => (ObservableCollection<PageLink>)GetValue(PrimaryLinksProperty);
-            set => SetValue(ModuleLinksProperty, value);
+            set => SetValue(PrimaryLinksProperty, value);
+        }
+
+        public string SecondaryLinksHeader
+        {
+            get { return (string)GetValue(SecondaryLinksHeaderProperty); }
+            set { SetValue(SecondaryLinksHeaderProperty, value); }
         }
 
 #pragma warning disable CA2227 // Collection properties should be read only
-        public ObservableCollection<SidePanelLink> AttributionLinks
+        public ObservableCollection<PageLink> SecondaryLinks
 #pragma warning restore CA2227 // Collection properties should be read only
         {
-            get => (ObservableCollection<SidePanelLink>)GetValue(AttributionLinksProperty);
+            get => (ObservableCollection<PageLink>)GetValue(SecondaryLinksProperty);
-            set => SetValue(AttributionLinksProperty, value);
+            set => SetValue(SecondaryLinksProperty, value);
+        }
+
+        public object ModuleContent
+        {
+            get { return (object)GetValue(ModuleContentProperty); }
+            set { SetValue(ModuleContentProperty, value); }
         }
 
         public static readonly DependencyProperty ModuleTitleProperty = DependencyProperty.Register("ModuleTitle", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
         public static readonly DependencyProperty ModuleDescriptionProperty = DependencyProperty.Register("ModuleDescription", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
         public static readonly DependencyProperty ModuleImageSourceProperty = DependencyProperty.Register("ModuleImageSource", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
         public static readonly DependencyProperty ModuleImageLinkProperty = DependencyProperty.Register("ModuleImageLink", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
-        public static readonly DependencyProperty ModuleLinksProperty = DependencyProperty.Register("ModuleLinks", typeof(ObservableCollection<SidePanelLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<SidePanelLink>()));
+        public static readonly DependencyProperty PrimaryLinksProperty = DependencyProperty.Register("PrimaryLinks", typeof(ObservableCollection<PageLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<PageLink>()));
-        public static readonly DependencyProperty AttributionLinksProperty = DependencyProperty.Register("AttributionLinks", typeof(ObservableCollection<SidePanelLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<SidePanelLink>()));
+        public static readonly DependencyProperty SecondaryLinksHeaderProperty = DependencyProperty.Register("SecondaryLinksHeader", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public static readonly DependencyProperty SecondaryLinksProperty = DependencyProperty.Register("SecondaryLinks", typeof(ObservableCollection<PageLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<PageLink>()));
+        public static readonly DependencyProperty ModuleContentProperty = DependencyProperty.Register("ModuleContent", typeof(object), typeof(SettingsPageControl), new PropertyMetadata(new Grid()));
     }
 }

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml

@@ -1,118 +0,0 @@
-<UserControl
-    x:Class="Microsoft.PowerToys.Settings.UI.Controls.SettingsPageControl"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
-    mc:Ignorable="d"
-    >
-
-    <UserControl.Resources>
-        <converters:DoubleToVisibilityConverter x:Name="doubleToVisibilityConverter" GreaterThan="0" TrueValue="Visible" FalseValue="Collapsed" />
-    </UserControl.Resources>
-
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="LayoutVisualStates">
-                <VisualState x:Name="WideLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-                <VisualState x:Name="SmallLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
-                        <AdaptiveTrigger MinWindowWidth="0" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
-                        <Setter Target="SidePanel.Width" Value="Auto"/>
-                        <Setter Target="ModuleContentPresenter.(Grid.Row)" Value="1" />
-                        <Setter Target="ModuleContentPresenter.Margin" Value="0" />
-                        <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
-                        <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
-                        <Setter Target="LinksPanel.Margin" Value="0,12,0,0" />
-                        <Setter Target="AboutImage.Margin" Value="0,12,12,0" />
-                        <Setter Target="AboutTitle.Visibility" Value="Collapsed" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-
-        <ContentPresenter x:Name="ModuleContentPresenter"
-                          Content="{x:Bind ModuleContent}"
-                           Margin="0,0,48,0"
-                          HorizontalAlignment="Left"
-                          MaxWidth="{StaticResource MaxContentWidth}"/>
-
-        <RelativePanel Grid.Column="1" x:Name="SidePanel" Width="{StaticResource SidePanelWidth}">
-            <StackPanel x:Name="DescriptionPanel">
-                <TextBlock  x:Name="AboutTitle"
-                        Text="{x:Bind ModuleTitle}"
-                        Style="{StaticResource SettingsGroupTitleStyle}"
-                        Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock Text="{x:Bind ModuleDescription}"
-                           TextWrapping="Wrap">
-                </TextBlock>
-            </StackPanel>
-
-            <HyperlinkButton x:Name="AboutImage"
-                         RelativePanel.Below="DescriptionPanel"
-                         MaxWidth="240"
-                         CornerRadius="4"
-                         x:Uid="Learn_More_Description"
-                         NavigateUri="{x:Bind ModuleImageLink}"
-                         Margin="{StaticResource SmallTopBottomMargin}">
-                <Image>
-                    <Image.Source>
-                        <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
-                    </Image.Source>
-                </Image>
-            </HyperlinkButton>
-
-            <StackPanel x:Name="LinksPanel"
-                    Margin="0,1,0,0"
-                    RelativePanel.Below="AboutImage"
-                    Orientation="Vertical">
-
-                <StackPanel x:Name="ModuleLinksPanel" Orientation="Vertical">
-                    <ItemsControl ItemsSource="{x:Bind ModuleLinks}">
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate x:DataType="local:SidePanelLink">
-                                <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="0,-3,0,0">
-                                    <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
-                                </HyperlinkButton>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </StackPanel>
-
-                <StackPanel x:Name="AttributionPanel"
-                              Visibility="{x:Bind AttributionLinks.Count, Converter={StaticResource doubleToVisibilityConverter}}"
-                            Orientation="Vertical">
-                    <TextBlock x:Uid="AttributionTitle" Style="{StaticResource SettingsGroupTitleStyle}" />
-
-                    <ItemsControl x:Name="AttributionLinksItemControl" ItemsSource="{x:Bind AttributionLinks}">
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate x:DataType="local:SidePanelLink">
-                                <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="0,-3,0,0">
-                                    <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
-                                </HyperlinkButton>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </StackPanel>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
-</UserControl>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/UpdateStateToBoolConverter.cs

@@ -3,24 +3,33 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
-using Windows.UI.Xaml;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.PowerToys.Settings.UI.Library;
 using Windows.UI.Xaml.Data;
-using Windows.UI.Xaml.Media;
 
 namespace Microsoft.PowerToys.Settings.UI.Converters
 {
-    public sealed class ModuleEnabledToOpacityConverter : IValueConverter
+    public sealed class UpdateStateToBoolConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, string language)
         {
-            bool isEnabled = (bool)value;
+            if (value == null || parameter == null)
-            if (isEnabled)
             {
-                return 1.0;
+                return false;
             }
             else
             {
-                return 0.4;
+                if (value.ToString() == (string)parameter)
+                {
+                    return true;
+                }
+                else
+                {
+                    return false;
+                }
             }
         }
 

src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/UpdatingStateCannotDownloadToVisibilityConverter.cs

@@ -1,24 +0,0 @@
-// Copyright (c) Microsoft Corporation
-// The Microsoft Corporation licenses this file to you under the MIT license.
-// See the LICENSE file in the project root for more information.
-
-using System;
-using Microsoft.PowerToys.Settings.UI.Library;
-using Windows.UI.Xaml;
-using Windows.UI.Xaml.Data;
-
-namespace Microsoft.PowerToys.Settings.UI.Converters
-{
-    public sealed class UpdatingStateCannotDownloadToVisibilityConverter : IValueConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, string language)
-        {
-            return (UpdatingSettings.UpdatingState)value == UpdatingSettings.UpdatingState.ErrorDownloading ? Visibility.Visible : Visibility.Collapsed;
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, string language)
-        {
-            return value;
-        }
-    }
-}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/UpdatingStateReadyToDownloadToVisibilityConverter.cs

@@ -1,24 +0,0 @@
-// Copyright (c) Microsoft Corporation
-// The Microsoft Corporation licenses this file to you under the MIT license.
-// See the LICENSE file in the project root for more information.
-
-using System;
-using Microsoft.PowerToys.Settings.UI.Library;
-using Windows.UI.Xaml;
-using Windows.UI.Xaml.Data;
-
-namespace Microsoft.PowerToys.Settings.UI.Converters
-{
-    public sealed class UpdatingStateReadyToDownloadToVisibilityConverter : IValueConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, string language)
-        {
-            return (UpdatingSettings.UpdatingState)value == UpdatingSettings.UpdatingState.ReadyToDownload ? Visibility.Visible : Visibility.Collapsed;
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, string language)
-        {
-            return value;
-        }
-    }
-}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/UpdatingStateReadyToInstallToVisibilityConverter.cs

@@ -1,24 +0,0 @@
-// Copyright (c) Microsoft Corporation
-// The Microsoft Corporation licenses this file to you under the MIT license.
-// See the LICENSE file in the project root for more information.
-
-using System;
-using Microsoft.PowerToys.Settings.UI.Library;
-using Windows.UI.Xaml;
-using Windows.UI.Xaml.Data;
-
-namespace Microsoft.PowerToys.Settings.UI.Converters
-{
-    public sealed class UpdatingStateReadyToInstallToVisibilityConverter : IValueConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, string language)
-        {
-            return (UpdatingSettings.UpdatingState)value == UpdatingSettings.UpdatingState.ReadyToInstall ? Visibility.Visible : Visibility.Collapsed;
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, string language)
-        {
-            return value;
-        }
-    }
-}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/UpdatingStateUpToDateToVisibilityConverter.cs

@@ -1,24 +0,0 @@
-// Copyright (c) Microsoft Corporation
-// The Microsoft Corporation licenses this file to you under the MIT license.
-// See the LICENSE file in the project root for more information.
-
-using System;
-using Microsoft.PowerToys.Settings.UI.Library;
-using Windows.UI.Xaml;
-using Windows.UI.Xaml.Data;
-
-namespace Microsoft.PowerToys.Settings.UI.Converters
-{
-    public sealed class UpdatingStateUpToDateToVisibilityConverter : IValueConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, string language)
-        {
-            return (UpdatingSettings.UpdatingState)value == UpdatingSettings.UpdatingState.UpToDate ? Visibility.Visible : Visibility.Collapsed;
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, string language)
-        {
-            return value;
-        }
-    }
-}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj

@@ -99,24 +99,26 @@
       <DependentUpon>HotkeySettingsControl.xaml</DependentUpon>
     </Compile>
     <Compile Include="Controls\KeyVisual\KeyVisual.cs" />
+    <Compile Include="Controls\SettingExpander\SettingExpander.cs" />
+    <Compile Include="Controls\SettingsGroup\SettingsGroup.cs" />
+    <Compile Include="Controls\Setting\Setting.cs" />
     <Compile Include="Controls\ShortcutTextControl.xaml.cs">
       <DependentUpon>ShortcutTextControl.xaml</DependentUpon>
     </Compile>
     <Compile Include="Controls\ShortcutVisualControl.xaml.cs">
       <DependentUpon>ShortcutVisualControl.xaml</DependentUpon>
     </Compile>
-    <Compile Include="Controls\SidePanel\SettingsPageControl.xaml.cs">
+    <Compile Include="Controls\SettingsPageControl\SettingsPageControl.xaml.cs">
       <DependentUpon>SettingsPageControl.xaml</DependentUpon>
     </Compile>
-    <Compile Include="Controls\SidePanel\SidePanelLink.cs" />
+    <Compile Include="Controls\OOBEPageControl\OOBEPageControl.xaml.cs">
+      <DependentUpon>OOBEPageControl.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Controls\SettingsPageControl\PageLink.cs" />
     <Compile Include="Converters\AwakeModeToBoolConverter.cs" />
     <Compile Include="Converters\ImageResizerFitToStringConverter.cs" />
     <Compile Include="Converters\ImageResizerUnitToStringConverter.cs" />
-    <Compile Include="Converters\ModuleEnabledToOpacityConverter.cs" />
+    <Compile Include="Converters\UpdateStateToBoolConverter.cs" />
-    <Compile Include="Converters\UpdatingStateCannotDownloadToVisibilityConverter.cs" />
-    <Compile Include="Converters\UpdatingStateReadyToDownloadToVisibilityConverter.cs" />
-    <Compile Include="Converters\UpdatingStateReadyToInstallToVisibilityConverter.cs" />
-    <Compile Include="Converters\UpdatingStateUpToDateToVisibilityConverter.cs" />
     <Compile Include="Generated Files\AssemblyInfo.cs">
       <SubType>Code</SubType>
     </Compile>
@@ -225,6 +227,7 @@
     <Content Include="Assets\FluentIcons\FluentIconsPowerRename.png" />
     <Content Include="Assets\FluentIcons\FluentIconsPowerToys.png" />
     <Content Include="Assets\FluentIcons\FluentIconsPowerToysRun.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsSettings.png" />
     <Content Include="Assets\FluentIcons\FluentIconsShortcutGuide.png" />
     <Content Include="Assets\FluentIcons\FluentIconsVideoConferenceMute.png" />
     <Content Include="Assets\Logo.scale-200.png" />
@@ -267,16 +270,16 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
-      <Version>6.2.10</Version>
+      <Version>6.2.12</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.Toolkit.Uwp.UI">
-      <Version>6.1.1</Version>
+      <Version>7.0.2</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls">
-      <Version>6.1.1</Version>
+      <Version>7.0.2</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.Toolkit.Win32.UI.XamlApplication">
-      <Version>6.1.2</Version>
+      <Version>6.1.3</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.UI.Xaml">
       <Version>2.6.0-prerelease.210623001</Version>
@@ -307,6 +310,14 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\SettingsGroup\SettingsGroup.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="Controls\Setting\Setting.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Controls\ShortcutTextControl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -315,7 +326,11 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="Controls\SidePanel\SettingsPageControl.xaml">
+    <Page Include="Controls\SettingsPageControl\SettingsPageControl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Controls\OOBEPageControl\OOBEPageControl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
@@ -371,29 +386,21 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="Styles\Page.xaml">
-      <Generator>MSBuild:Compile</Generator>
-      <SubType>Designer</SubType>
-    </Page>
     <Page Include="Styles\TextBlock.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
-    <Page Include="Styles\_Colors.xaml">
+    <Page Include="Themes\Colors.xaml">
-      <Generator>MSBuild:Compile</Generator>
-      <SubType>Designer</SubType>
-    </Page>
-    <Page Include="Styles\_FontSizes.xaml">
-      <Generator>MSBuild:Compile</Generator>
-      <SubType>Designer</SubType>
-    </Page>
-    <Page Include="Styles\_Sizes.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="Styles\_Thickness.xaml">
+    <Page Include="Themes\Generic.xaml">
-      <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Themes\SettingsExpanderStyles.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
     </Page>
     <Page Include="Views\AwakePage.xaml">
       <Generator>MSBuild:Compile</Generator>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeAwake.xaml

@@ -5,67 +5,33 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
-      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls">
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-        <Grid.RowDefinitions>
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-            <RowDefinition Height="280" />
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-               AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-                
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-                
-                <TextBlock TextWrapping="Wrap"
-                           Margin="0,4,0,0"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToUse"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_Awake_HowToUse" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
-                           Style="{StaticResource OobeSubtitleStyle}"/>
 
                 <controls:ShortcutTextControl x:Uid="Oobe_Awake_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                            Spacing="4"
+                    <Button x:Uid="OOBE_Settings"
-                            Margin="0,32,0,0">
+                            Click="SettingsLaunchButton_Click"/>
-                    <Button Click="SettingsLaunchButton_Click"
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
+                        <TextBlock x:Uid="LearnMore_Awake"
-                        <StackPanel Orientation="Horizontal"
+                               TextWrapping="Wrap" />
-                                    Spacing="8">
+                    </HyperlinkButton>
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeColorPicker.xaml

@@ -6,73 +6,34 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
-      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls">
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-        <Grid.RowDefinitions>
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-            <RowDefinition Height="280" />
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-                AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-                
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-                
-                <TextBlock TextWrapping="Wrap"
-                           Margin="0,4,0,0"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToUse"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_ColorPicker_HowToUse" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
-                           Style="{StaticResource OobeSubtitleStyle}"/>
 
                 <controls:ShortcutTextControl x:Uid="Oobe_ColorPicker_TipsAndTricks" />
 
-            <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                        Spacing="4"
+                    <Button x:Uid="Launch_ColorPicker" Style="{StaticResource AccentButtonStyle}" Click="Start_ColorPicker_Click"/>
-                        Margin="0,32,0,0">
+                    <Button x:Uid="OOBE_Settings"
-                <Button Style="{StaticResource AccentButtonStyle}" Click="Start_ColorPicker_Click">
+                            Click="SettingsLaunchButton_Click"/>
-                    <TextBlock>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                        <Run x:Uid="Oobe_Launch"/>
+                        <TextBlock x:Uid="LearnMore_ColorPicker"
-                        <Run Text="{x:Bind ViewModel.ModuleName}"/>
+                               TextWrapping="Wrap" />
-                    </TextBlock>
+                    </HyperlinkButton>
-                </Button>
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFancyZones.xaml

@@ -6,67 +6,33 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      mc:Ignorable="d"
+      mc:Ignorable="d">
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-        <Grid.RowDefinitions>
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-            <RowDefinition Height="280" />
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-                AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-                <TextBlock TextWrapping="Wrap"
-                           Margin="0,4,0,0"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToUse"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
-
 
                 <controls:ShortcutTextControl x:Uid="Oobe_FancyZones_HowToUse" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_FancyZones_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                            Spacing="4"
+                    <Button x:Uid="OOBE_Settings"
-                            Margin="0,32,0,0">
+                            Click="SettingsLaunchButton_Click"/>
-                    <Button Click="SettingsLaunchButton_Click"
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
+                        <TextBlock x:Uid="LearnMore_FancyZones"
-                        <StackPanel Orientation="Horizontal"
+                               TextWrapping="Wrap" />
-                                    Spacing="8">
+                    </HyperlinkButton>
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFileExplorer.xaml

@@ -5,63 +5,28 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      mc:Ignorable="d"
+      mc:Ignorable="d">
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-        <Grid.RowDefinitions>
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-            <RowDefinition Height="280" />
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-               AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToEnable"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_FileExplorer_HowToEnable" />
 
-                <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                            Spacing="4"
+                    <Button x:Uid="OOBE_Settings"
-                            Margin="0,32,0,0">
+                            Click="SettingsLaunchButton_Click"/>
-
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                    <Button Click="SettingsLaunchButton_Click"
+                        <TextBlock x:Uid="LearnMore_PowerPreview"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
+                               TextWrapping="Wrap" />
-                        <StackPanel Orientation="Horizontal"
+                    </HyperlinkButton>
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml

@@ -6,68 +6,33 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      mc:Ignorable="d"
+      mc:Ignorable="d">
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-        <Grid.RowDefinitions>
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-            <RowDefinition Height="280" />
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-                AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToLaunch"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_ImageResizer_HowToLaunch" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_ImageResizer_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                            Spacing="4"
+                    <Button x:Uid="OOBE_Settings"
-                            Margin="0,32,0,0">
+                            Click="SettingsLaunchButton_Click"/>
-                    <Button Click="SettingsLaunchButton_Click"
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
+                        <TextBlock x:Uid="LearnMore_ImageResizer"
-                        <StackPanel Orientation="Horizontal"
+                               TextWrapping="Wrap" />
-                                    Spacing="8">
+                    </HyperlinkButton>
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel"/>
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeKBM.xaml

@@ -1,72 +1,36 @@
 <Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeKBM"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-      xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
       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:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      mc:Ignorable="d"
+      mc:Ignorable="d">
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
-    <Grid>
+        <controls:OOBEPageControl.ModuleContent>
-        <Grid.RowDefinitions>
+            <StackPanel Orientation="Vertical">
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-               AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
 
                 <TextBlock x:Uid="Oobe_HowToCreateMappings"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_KBM_HowToCreateMappings" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_KBM_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                            Spacing="4"
+                    <Button x:Uid="OOBE_Settings"
-                            Margin="0,32,0,0">
+                            Click="SettingsLaunchButton_Click"/>
-                    <Button Click="SettingsLaunchButton_Click"
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
+                        <TextBlock x:Uid="LearnMore_KBM"
-                        <StackPanel Orientation="Horizontal"
+                               TextWrapping="Wrap" />
-                                    Spacing="8">
+                    </HyperlinkButton>
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeOverview.xaml

@@ -4,58 +4,32 @@
       xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      mc:Ignorable="d"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+      mc:Ignorable="d">
 
-    <Grid>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-        <Grid.RowDefinitions>
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}">
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
 
-        <Image Stretch="UniformToFill"
+        <controls:OOBEPageControl.ModuleContent>
-                AutomationProperties.AccessibilityView="Raw"
+            <StackPanel Orientation="Vertical">
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
+                <TextBlock Margin="0,4,0,8"
+                           x:Uid="Oobe_Overview_Description"
+                           TextWrapping="Wrap"/>
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.DescriptionLink}" Style="{StaticResource HyperlinkButtonStyle}">
+                    <TextBlock x:Uid="Oobe_Overview_DescriptionLinkText"
+                               TextWrapping="Wrap" />
+                </HyperlinkButton>
 
-        <ScrollViewer Grid.Row="1"
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                      VerticalScrollBarVisibility="Auto">
+                    <TextBlock x:Uid="Oobe_Overview_LatestVersionLink"
-            <StackPanel Orientation="Vertical"
+                               TextWrapping="Wrap" />
-                        Margin="{StaticResource OobePageContentMargin}"
+                </HyperlinkButton>
-                        VerticalAlignment="Top">
 
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                           AutomationProperties.HeadingLevel="Level2"
+                    <Button x:Uid="OOBE_Settings"
-                           Style="{StaticResource PageTitleStyle}" />
+                            Click="SettingsLaunchButton_Click"/>
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap">
-                    <Run x:Uid="Oobe_Overview_Description" />
-                    <Hyperlink NavigateUri="{x:Bind ViewModel.DescriptionLink}">
-                        <Run x:Uid="Oobe_Overview_DescriptionLinkText" />
-                    </Hyperlink><Run Text="." />
-                </TextBlock>
-
-                <TextBlock Margin="0,32,0,0"
-                           TextWrapping="Wrap">
-                <Run x:Uid="Oobe_Overview_CheckoutLatestVersion" />
-                <Hyperlink NavigateUri="{x:Bind ViewModel.Link}">
-                    <Run x:Uid="Oobe_Overview_LatestVersionLink" />
-                </Hyperlink><Run Text="." />
-                </TextBlock>
-
-                <Button Click="SettingsLaunchButton_Click"
-                        AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}"
-                        Margin="0,32,0,0">
-                    <StackPanel Orientation="Horizontal"
-                                Spacing="8">
-                        <TextBlock Text="&#xE115;"
-                                   Margin="0,3,0,0"
-                                   FontFamily="Segoe MDL2 Assets" />
-                        <TextBlock x:Uid="OOBE_Settings"
-                                   Name="SettingsLabel" />
                 </StackPanel>
-                </Button>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobePowerRename.xaml

@@ -5,71 +5,32 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      mc:Ignorable="d"
+      mc:Ignorable="d">
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-    <Grid>
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-        <Grid.RowDefinitions>
+        <controls:OOBEPageControl.ModuleContent>
-            <RowDefinition Height="280" />
+            <StackPanel Orientation="Vertical">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-                AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
-
 
                 <TextBlock x:Uid="Oobe_HowToUse"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_PowerRename_HowToUse" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_PowerRename_TipsAndTricks"
+                <controls:ShortcutTextControl x:Uid="Oobe_PowerRename_TipsAndTricks" />
+
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_PowerRename"
                                TextWrapping="Wrap" />
-
+                    </HyperlinkButton>
-                <StackPanel Orientation="Horizontal"
-                            Spacing="4"
-                            Margin="0,32,0,0">
-
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml

@@ -6,77 +6,34 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      mc:Ignorable="d"
+      mc:Ignorable="d">
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-        <Grid.RowDefinitions>
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-            <RowDefinition Height="280" />
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-               AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-
-                </HyperlinkButton>
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToLaunch"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_Run_HowToLaunch" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_Run_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                            Margin="0,32,0,0"
+                    <Button x:Uid="Launch_Run" Style="{StaticResource AccentButtonStyle}" Click="Start_Run_Click"/>
-                            Spacing="4">
+                    <Button x:Uid="OOBE_Settings"
-
+                            Click="SettingsLaunchButton_Click"/>
-                    <Button Click="Start_Run_Click" Style="{StaticResource AccentButtonStyle}">
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                        <TextBlock>
+                        <TextBlock x:Uid="LearnMore_Run"
-                        <Run x:Uid="Oobe_Launch" />
+                               TextWrapping="Wrap" />
-                        <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </HyperlinkButton>
-                        </TextBlock>
-                    </Button>
-
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock  x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShellPage.xaml

@@ -7,6 +7,7 @@
     xmlns:localModels="using:Microsoft.PowerToys.Settings.UI.OOBE.ViewModel"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    winui:BackdropMaterial.ApplyToRootOrPageBackground="True"
     mc:Ignorable="d"
     Loaded="UserControl_Loaded">
 
@@ -20,17 +21,17 @@
         </DataTemplate>
     </UserControl.Resources>
 
-    <Grid>
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
                 <VisualState x:Name="WideLayout">
                     <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                        <AdaptiveTrigger MinWindowWidth="720" />
                     </VisualState.StateTriggers>
                 </VisualState>
                 <VisualState x:Name="SmallLayout">
                     <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                        <AdaptiveTrigger MinWindowWidth="600" />
                         <AdaptiveTrigger MinWindowWidth="0" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
@@ -52,17 +53,6 @@
                               IsBackButtonVisible="Collapsed"
                               MenuItemsSource="{x:Bind Modules, Mode=OneTime}"
                               MenuItemTemplate="{StaticResource NavigationViewMenuItem}">
-            <winui:NavigationView.PaneCustomContent>
-                <StackPanel Grid.Column="0" Margin="16"
-                            Orientation="Vertical">
-                    <TextBlock x:Uid="Oobe_GettingStarted"
-                               TextWrapping="Wrap"
-                               FontWeight="SemiBold"
-                               AutomationProperties.HeadingLevel="Level1"
-                               Style="{StaticResource PageTitleStyle}"
-                               Margin="0,0,0,16" />
-                </StackPanel>
-            </winui:NavigationView.PaneCustomContent>
             <winui:NavigationView.Content>
                 <Frame x:Name="NavigationFrame" />
             </winui:NavigationView.Content>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShellPage.xaml.cs

@@ -5,9 +5,11 @@
 using System;
 using System.Collections.ObjectModel;
 using System.Diagnostics.CodeAnalysis;
+using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
 using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
 using Windows.ApplicationModel.Resources;
+using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 
 namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
@@ -53,7 +55,7 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
 
             DataContext = ViewModel;
             OobeShellHandler = this;
-
+            UpdateUITheme();
             Modules = new ObservableCollection<OobePowerToysModule>();
             ResourceLoader loader = ResourceLoader.GetForViewIndependentUse();
 
@@ -177,6 +179,7 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
                 PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/OOBEShortcutGuide.png",
                 Link = "https://aka.ms/PowerToysOverview_ShortcutGuide",
             });
+
             /* Modules.Insert((int)PowerToysModulesEnum.VideoConference, new OobePowerToysModule()
             {
                 ModuleName = loader.GetString("Oobe_VideoConference"),
@@ -227,5 +230,23 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
                 case "VideoConference": NavigationFrame.Navigate(typeof(OobeVideoConference)); break;
             }
         }
+
+        public void UpdateUITheme()
+        {
+            var settingsUtils = new SettingsUtils();
+            var generalSettings = SettingsRepository<GeneralSettings>.GetInstance(settingsUtils);
+            switch (generalSettings.SettingsConfig.Theme.ToUpperInvariant())
+            {
+                case "LIGHT":
+                    this.RequestedTheme = ElementTheme.Light;
+                    break;
+                case "DARK":
+                    this.RequestedTheme = ElementTheme.Dark;
+                    break;
+                case "SYSTEM":
+                    this.RequestedTheme = ElementTheme.Default;
+                    break;
+            }
+        }
     }
 }

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShortcutGuide.xaml

@@ -6,69 +6,28 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      mc:Ignorable="d"
+      mc:Ignorable="d">
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-    <Grid>
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-        <Grid.RowDefinitions>
+        <controls:OOBEPageControl.ModuleContent>
-            <RowDefinition Height="280" />
+            <StackPanel Orientation="Vertical">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-                AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="0,0,0,4">
-
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
 
                 <TextBlock x:Uid="Oobe_HowToLaunch"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_ShortcutGuide_HowToLaunch" />
 
-                <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                            Margin="0,32,0,0"
+                    <Button x:Uid="Launch_ShortcutGuide" Style="{StaticResource AccentButtonStyle}" Click="Start_ShortcutGuide_Click"/>
-                            Spacing="8">
+                    <Button x:Uid="OOBE_Settings"
-                    <Button Click="Start_ShortcutGuide_Click" Style="{StaticResource AccentButtonStyle}">
+                            Click="SettingsLaunchButton_Click"/>
-                        <TextBlock>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                        <Run x:Uid="Oobe_Launch" />
+                        <TextBlock x:Uid="LearnMore_ShortcutGuide"
-                        <Run Text="{x:Bind ViewModel.ModuleName}" />
+                               TextWrapping="Wrap" />
-                        </TextBlock>
+                    </HyperlinkButton>
-                    </Button>
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml

@@ -6,62 +6,28 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-      mc:Ignorable="d"
+      mc:Ignorable="d">
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-        <Grid.RowDefinitions>
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-            <RowDefinition Height="280" />
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-               AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock TextWrapping="Wrap"
-                           Margin="0,4,0,0"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="0,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToLaunch"
-                           AutomationProperties.HeadingLevel="Level3"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
-                           Style="{StaticResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_VideoConference_HowToLaunch" />
 
-                <StackPanel Orientation="Horizontal"
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
-                            Margin="0,32,0,0"
+                    <Button x:Uid="OOBE_Settings"
-                            Spacing="8">
+                            Click="SettingsLaunchButton_Click"/>
-                    <Button Click="SettingsLaunchButton_Click"
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}"> 
+                        <TextBlock x:Uid="LearnMore_VCM"
-                        <StackPanel Orientation="Horizontal"
+                               TextWrapping="Wrap" />
-                                    Spacing="8">
+                    </HyperlinkButton>
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel"/>
-                        </StackPanel>
-                    </Button>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
+        </controls:OOBEPageControl.ModuleContent>
-    </Grid>
+    </controls:OOBEPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/Button.xaml

@@ -1,74 +1,508 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
+    xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)">
 
-    <Style x:Key="AddItemAppBarButtonStyle" TargetType="AppBarButton">
+    <Style x:Key="SettingButtonStyle" TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}" >
-        <Setter Property="Background" Value="{ThemeResource AppBarButtonBackground}"/>
+        <Setter Property="BorderBrush" Value="{ThemeResource CardBorderBrush}" />
-        <Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}"/>
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonBorderBrush}"/>
+        <Setter Property="Padding" Value="16,0,16,0" />
-        <Setter Property="Width" Value="Auto"/>
         <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="MaxWidth" Value="500"/>
+        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
-        <Setter Property="VerticalAlignment" Value="Top"/>
+    </Style>
-        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+
-        <Setter Property="FontWeight" Value="Normal"/>
+    <Style x:Key="HyperlinkButtonStyle" TargetType="HyperlinkButton" BasedOn="{StaticResource TextBlockButtonStyle}">
-        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
+        <Style.Setters>
-        <Setter Property="AllowFocusOnInteraction" Value="False"/>
+            <Setter Property="FontWeight" Value="SemiBold"/>
-        <Setter Property="KeyboardAcceleratorPlacementMode" Value="Hidden"/>
+            <Setter Property="Margin" Value="0,0,0,0"/>
+        </Style.Setters>
+    </Style>
+
+    <!-- This style overrides the default style so that all ToggleSwitches are right aligned, with the label on the left -->
+    <Style TargetType="ToggleSwitch">
+        <Setter Property="Foreground" Value="{ThemeResource ToggleSwitchContentForeground}" />
+        <Setter Property="HorizontalAlignment" Value="Right" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalContentAlignment" Value="Right" />
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+        <Setter Property="ManipulationMode" Value="System,TranslateX" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="MinWidth" Value="{StaticResource ToggleSwitchThemeMinWidth}"/>
+        <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
+
         <Setter Property="Template">
             <Setter.Value>
-                <ControlTemplate TargetType="AppBarButton">
+                <ControlTemplate TargetType="ToggleSwitch">
-                    <Grid x:Name="Root" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" MinWidth="{TemplateBinding MinWidth}">
+                    <Grid
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        contract7Present:CornerRadius="{TemplateBinding CornerRadius}">
+
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
-                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="Normal">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOff}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOff}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOff}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOn}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOn}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOn}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackground}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Width" EnableDependentAnimation="True" >
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Height" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Width" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Height" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
                                 <VisualState x:Name="PointerOver">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemListLowColor}"/>
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchStrokeOffPointerOver}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchFillOffPointerOver}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot"/>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchContainerBackgroundPointerOver}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Width" EnableDependentAnimation="True" >
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Height" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Width" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Height" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Pressed">
+
+                                    <VisualState.Setters>
+                                        <Setter Target="SwitchKnobOn.HorizontalAlignment" Value="Right" />
+                                        <Setter Target="SwitchKnobOn.Margin" Value="0,0,3,0" />
+                                        <Setter Target="SwitchKnobOff.HorizontalAlignment" Value="Left" />
+                                        <Setter Target="SwitchKnobOff.Margin" Value="3,0,0,0" />
+                                    </VisualState.Setters>
+
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemListMediumColor}"/>
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchStrokeOffPressed}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchFillOffPressed}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentRoot"/>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchContainerBackgroundPressed}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Width" EnableDependentAnimation="True" >
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="17" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Height" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Width" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="17" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Height" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Disabled">
-                                    <VisualState.Setters>
+                                    <Storyboard>
-                                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundDisabled}"/>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
-                                        <Setter Target="AppBarButtonInnerBorder.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushDisabled}"/>
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchHeaderForegroundDisabled}" />
-                                        <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
+                                        </ObjectAnimationUsingKeyFrames>
-                                        <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter" Storyboard.TargetProperty="Foreground">
-                                    </VisualState.Setters>
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchStrokeOffDisabled}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchFillOffDisabled}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="{ThemeResource ToggleSwitchContainerBackgroundDisabled}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Width" EnableDependentAnimation="True" >
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Height" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Width" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Height" EnableDependentAnimation="True">
+                                            <SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                    </Storyboard>
                                 </VisualState>
+
                             </VisualStateGroup>
+                            <VisualStateGroup x:Name="ToggleStates">
+
+                                <VisualStateGroup.Transitions>
+                                    <VisualTransition x:Name="DraggingToOnTransition"
+                                        From="Dragging"
+                                        To="On"
+                                        GeneratedDuration="0">
+
+                                        <Storyboard>
+                                            <RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOnOffset}" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    <VisualTransition x:Name="OnToDraggingTransition"
+                                        From="On"
+                                        To="Dragging"
+                                        GeneratedDuration="0">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="0" Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="0" Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="0" Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    <VisualTransition x:Name="DraggingToOffTransition"
+                                        From="Dragging"
+                                        To="Off"
+                                        GeneratedDuration="0">
+
+                                        <Storyboard>
+                                            <RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOffOffset}" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    <VisualTransition x:Name="OnToOffTransition"
+                                        From="On"
+                                        To="Off"
+                                        GeneratedDuration="0">
+
+                                        <Storyboard>
+                                            <RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOnToOffOffset}" />
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    <VisualTransition x:Name="OffToOnTransition"
+                                        From="Off"
+                                        To="On"
+                                        GeneratedDuration="0">
+
+                                        <Storyboard>
+                                            <RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOffToOnOffset}"/>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                </VisualStateGroup.Transitions>
+                                <VisualState x:Name="Dragging" />
+                                <VisualState x:Name="Off" />
+                                <VisualState x:Name="On">
+                                    <Storyboard>
+                                        <DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
+                                            Storyboard.TargetProperty="X"
+                                            To="20"
+                                            Duration="0" />
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
+                                            <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
+                                            <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
+                                            <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="1" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
+                                            <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}" Value="0" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="ContentStates">
+                                <VisualState x:Name="OffContent">
+
+                                    <Storyboard>
+                                        <DoubleAnimation Storyboard.TargetName="OffContentPresenter"
+                                            Storyboard.TargetProperty="Opacity"
+                                            To="1"
+                                            Duration="0" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OffContentPresenter">
+                                            <DiscreteObjectKeyFrame KeyTime="0">
+                                                <DiscreteObjectKeyFrame.Value>
+                                                    <x:Boolean>True</x:Boolean>
+                                                </DiscreteObjectKeyFrame.Value>
+                                            </DiscreteObjectKeyFrame>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="OnContent">
+
+                                    <Storyboard>
+                                        <DoubleAnimation Storyboard.TargetName="OnContentPresenter"
+                                            Storyboard.TargetProperty="Opacity"
+                                            To="1"
+                                            Duration="0" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OnContentPresenter">
+                                            <DiscreteObjectKeyFrame KeyTime="0">
+                                                <DiscreteObjectKeyFrame.Value>
+                                                    <x:Boolean>True</x:Boolean>
+                                                </DiscreteObjectKeyFrame.Value>
+                                            </DiscreteObjectKeyFrame>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+
+                            </VisualStateGroup>
+
                         </VisualStateManager.VisualStateGroups>
 
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
 
+                        <ContentPresenter x:Name="HeaderContentPresenter"
+                            x:DeferLoadStrategy="Lazy"
+                            Grid.Row="0"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            Foreground="{ThemeResource ToggleSwitchHeaderForeground}"
+                            IsHitTestVisible="False"
+                            Margin="{ThemeResource ToggleSwitchTopHeaderMargin}"
+                            TextWrapping="Wrap"
+                            VerticalAlignment="Top"
+                            Visibility="Collapsed"
+                            AutomationProperties.AccessibilityView="Raw" />
+                        <Grid
+                            Grid.Row="1"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Top">
+
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="{ThemeResource ToggleSwitchPreContentMargin}" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="{ThemeResource ToggleSwitchPostContentMargin}" />
+                            </Grid.RowDefinitions>
 
-                        <Grid x:Name="ContentRoot">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="320"/>
+                                <ColumnDefinition Width="12" MaxWidth="12" />
+                                <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
-                            <Border x:Name="AppBarButtonInnerBorder" Margin="10" CornerRadius="4" Height="40" Width="40" Background="{ThemeResource ButtonBackground}">
+                            <Grid x:Name="SwitchAreaGrid"
-                                <ContentPresenter x:Name="Content" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5">
+                                Grid.RowSpan="3"
-                                    <ContentPresenter.RenderTransform>
+                                Grid.ColumnSpan="3"
-                                        <CompositeTransform ScaleX="0.8" ScaleY="0.8"/>
+                                Margin="0,5"
-                                    </ContentPresenter.RenderTransform>
+                                contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
-                                </ContentPresenter>
+                                contract7NotPresent:CornerRadius="{StaticResource ControlCornerRadius}"
+                                Control.IsTemplateFocusTarget="True"
+                                Background="{ThemeResource ToggleSwitchContainerBackground}" />
+                            <ContentPresenter x:Name="OffContentPresenter"
+                                Grid.RowSpan="3"
+                                Grid.Column="0"
+                                Opacity="0"
+                                Foreground="{TemplateBinding Foreground}"
+                                IsHitTestVisible="False"
+                                Content="{TemplateBinding OffContent}"
+                                ContentTemplate="{TemplateBinding OffContentTemplate}"
+                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                AutomationProperties.AccessibilityView="Raw" />
+                            <ContentPresenter x:Name="OnContentPresenter"
+                                Grid.RowSpan="3"
+                                Grid.Column="0"
+                                Opacity="0"
+                                Foreground="{TemplateBinding Foreground}"
+                                IsHitTestVisible="False"
+                                Content="{TemplateBinding OnContent}"
+                                ContentTemplate="{TemplateBinding OnContentTemplate}"
+                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                AutomationProperties.AccessibilityView="Raw" />
+                            <Rectangle x:Name="OuterBorder"
+                                Grid.Row="1"
+                                               Grid.Column="2"
+                                Height="20"
+                                Width="40"
+                                RadiusX="10"
+                                RadiusY="10"
+                                Fill="{ThemeResource ToggleSwitchFillOff}"
+                                Stroke="{ThemeResource ToggleSwitchStrokeOff}"
+                                StrokeThickness="{ThemeResource ToggleSwitchOuterBorderStrokeThickness}" />
+                            <Rectangle x:Name="SwitchKnobBounds"
+                                Grid.Row="1"
+                                Height="20"
+                                Width="40"
+                                RadiusX="10"
+                                RadiusY="10"
+                                               Grid.Column="2"
+                                Fill="{ThemeResource ToggleSwitchFillOn}"
+                                Stroke="{ThemeResource ToggleSwitchStrokeOn}"
+                                StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}"
+                                Opacity="0" />
+                            <Grid x:Name="SwitchKnob"
+                                Grid.Row="1"
+                                          Grid.Column="2"
+                                HorizontalAlignment="Left"
+                                Width="20"
+                                Height="20">
+                                <Border x:Name="SwitchKnobOn"
+                                    Background="{ThemeResource ToggleSwitchKnobFillOn}"
+                                    BorderBrush="{ThemeResource ToggleSwitchKnobStrokeOn}"
+                                    contract7Present:BackgroundSizing="OuterBorderEdge"       
+                                    Width="12"
+                                    Height="12"
+                                    CornerRadius="7"
+                                                Grid.Column="2"
+                                    Opacity="0"
+                                    HorizontalAlignment="Center"
+                                    Margin="0,0,1,0"
+                                    RenderTransformOrigin="0.5, 0.5">
+                                    <Border.RenderTransform>
+                                        <CompositeTransform/>
+                                    </Border.RenderTransform>
                                 </Border>
+                                <Rectangle x:Name="SwitchKnobOff"
+                                    Fill="{ThemeResource ToggleSwitchKnobFillOff}"
+                                    Width="12"
+                                    Height="12"
+                                    RadiusX="7"
+                                                   Grid.Column="2"
+                                    RadiusY="7"
+                                    HorizontalAlignment="Center"
+                                    Margin="-1,0,0,0"
+                                    RenderTransformOrigin="0.5, 0.5">
+                                    <Rectangle.RenderTransform>
+                                        <CompositeTransform/>
+                                    </Rectangle.RenderTransform>
+                                </Rectangle>
+                                <Grid.RenderTransform>
+                                    <TranslateTransform x:Name="KnobTranslateTransform" />
+                                </Grid.RenderTransform>
+                            </Grid>
+                            <Thumb x:Name="SwitchThumb"
+                                AutomationProperties.AccessibilityView="Raw"
+                                Grid.RowSpan="3"
+                                Grid.ColumnSpan="3">
+                                <Thumb.Template>
+                                    <ControlTemplate TargetType="Thumb">
+                                        <Rectangle Fill="Transparent" />
+                                    </ControlTemplate>
+                                </Thumb.Template>
+                            </Thumb>
 
-                            <TextBlock x:Name="TextLabel" Grid.Column="1" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Foreground}" Margin="0,-2,0,0" VerticalAlignment="Center" FontSize="14" Text="{TemplateBinding Label}"/>
                         </Grid>
+
                     </Grid>
+
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
+
 </ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/Page.xaml

@@ -1,9 +0,0 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
-    <Style TargetType="Page" x:Key="PageStyle">
-        <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
-    </Style>
-
-</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/TextBlock.xaml

@@ -2,40 +2,22 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <!--Common texts-->
+    <Style x:Key="OobeSubtitleStyle" TargetType="TextBlock">
-    <Style x:Key="PageTitleStyle" TargetType="TextBlock">
+        <Setter Property="Margin" Value="0,16,0,0" />
-        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Foreground" Value="{ThemeResource DefaultTextForegroundThemeBrush}" />
+        <Setter Property="AutomationProperties.HeadingLevel" Value="Level3" />
+        <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
+        <Setter Property="FontSize" Value="{StaticResource BodyTextBlockFontSize}" />
         <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="FontSize" Value="{StaticResource LargeFontSize}" />
-        <Setter Property="TextTrimming" Value="CharacterEllipsis" />
-        <Setter Property="TextWrapping" Value="NoWrap" />
-    </Style>
-
-    <Style x:Key="BodyTextStyle" TargetType="TextBlock">
-        <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="FontSize" Value="{StaticResource MediumFontSize}" />
         <Setter Property="TextTrimming" Value="CharacterEllipsis" />
         <Setter Property="TextWrapping" Value="Wrap" />
+        <Setter Property="LineStackingStrategy" Value="MaxHeight" />
+        <Setter Property="TextLineBounds" Value="Full" />
     </Style>
 
-
+    <x:Double x:Key="SecondaryTextFontSize">12</x:Double>
-    <Style x:Key="SettingsGroupTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource SubtitleTextBlockStyle}">
+    <Style x:Key="SecondaryTextStyle" TargetType="TextBlock">
-        <Setter Property="Margin" Value="0,34,0,4" />
+        <Setter Property="FontSize" Value="{StaticResource SecondaryTextFontSize}"/>
-        <Setter Property="FontWeight" Value="SemiBold"/>
+        <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}"/>
-        <Setter Property="AutomationProperties.HeadingLevel" Value="Level2" />
-    </Style>
-
-    <Style x:Key="SettingsGroupTitleStyleAsHeader" TargetType="TextBlock" BasedOn="{StaticResource SettingsGroupTitleStyle}">
-        <Setter Property="Margin" Value="0,0,0,4" />
-    </Style>
-
-    <Style x:Key="OobeSubtitleStyle" TargetType="TextBlock">
-        <Setter Property="FontWeight" Value="SemiBold"/>
-        <Setter Property="FontSize" Value="16" />
-        <Setter Property="Margin" Value="0,16,0,0" />
-    </Style>
-
-    <Style x:Key="SemiBoldBody" TargetType="TextBlock">
-        <Setter Property="FontWeight" Value="SemiBold"/>
     </Style>
 </ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Colors.xaml

@@ -1,5 +0,0 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="ThemeControlForegroundBaseHighBrush" Color="{ThemeResource SystemBaseHighColor}"/>
-</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_FontSizes.xaml

@@ -1,8 +0,0 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
-    <x:Double x:Key="LargeFontSize">24</x:Double>
-    <x:Double x:Key="MediumFontSize">16</x:Double>
-
-</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml

@@ -1,25 +0,0 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Styles">
-
-    <x:Double x:Key="SidePanelWidth">240</x:Double>
-
-    <!-- Breakpoint for wide layout (side panel next to content) -->
-    <x:Double x:Key="WideLayoutMinWidth">720</x:Double>
-    
-    <!-- Breakpoint for small layout (side panel above content) -->
-    <x:Double x:Key="SmallLayoutMinWidth">600</x:Double>
-
-    <!-- Column spacing between content and sidepanel -->
-    <x:Double x:Key="DefaultColumnSpacing">24</x:Double>
-
-    <!-- Row spacing between content and sidepanel (in small mode) -->
-    <x:Double x:Key="DefaultRowSpacing">24</x:Double>
-
-    <!-- MaxWidth of the content panel, similar to W10 Settings -->
-    <x:Double x:Key="MaxContentWidth">460</x:Double>
-
-    <!-- Maximum Width of a combo box inside the content panel -->
-    <x:Double x:Key="MaxComboBoxWidth">444</x:Double>
-</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Thickness.xaml

@@ -1,40 +0,0 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
-    <!--Medium size margins-->
-    <Thickness x:Key="MediumLeftMargin">24,0,0,0</Thickness>
-    <Thickness x:Key="MediumTopMargin">0,24,0,0</Thickness>
-    <Thickness x:Key="MediumLeftRightMargin">24,0,24,0</Thickness>
-    <Thickness x:Key="MediumRightMargin">0,0,24,0</Thickness>
-    <Thickness x:Key="MediumTopBottomMargin">0,24,0,24</Thickness>
-    <Thickness x:Key="MediumLeftTopRightBottomMargin">24,24,24,24</Thickness>
-    <Thickness x:Key="MediumLeftRightBottomMargin">24,0,24,24</Thickness>
-    <Thickness x:Key="MediumBottomMargin">0,0,0,24</Thickness>
-
-    <!--Small size margins-->
-    <Thickness x:Key="SmallLeftMargin">12, 0, 0, 0</Thickness>
-    <Thickness x:Key="SmallTopMargin">0, 12, 0, 0</Thickness>
-    <Thickness x:Key="SmallTopBottomMargin">0, 12, 0, 12</Thickness>
-    <Thickness x:Key="SmallBottomMargin">0, 0, 0, 12</Thickness>
-    <Thickness x:Key="SmallLeftRightMargin">12, 0, 12, 0</Thickness>
-    <Thickness x:Key="SmallRightMargin">0, 0, 12, 0</Thickness>
-    <Thickness x:Key="SmallLeftRightBottomMargin">12, 0, 12, 12</Thickness>
-    <Thickness x:Key="SmallLeftTopRightBottomMargin">12, 12, 12, 12</Thickness>
-
-    <Thickness x:Key="AddItemButtonMargin">-10, 12, 0, 0</Thickness>
-
-    <!--Extra Small size margins-->
-    <Thickness x:Key="XSmallLeftMargin">8, 0, 0, 0</Thickness>
-    <Thickness x:Key="XSmallTopMargin">0, 8, 0, 0</Thickness>
-    <Thickness x:Key="XSmallBottomMargin">0, 0, 0, 8</Thickness>
-    <Thickness x:Key="XSmallLeftTopRightBottomMargin">8, 8, 8, 8</Thickness>
-
-    <!--Extra Extra Small size margins-->
-    <Thickness x:Key="XXSmallTopMargin">0, 4, 0, 0</Thickness>
-    <Thickness x:Key="XXSmallTopRightBottomMargin">0, 4, 4, 4</Thickness>
-
-    <!-- OOBE -->
-    <Thickness x:Key="OobePageContentMargin">32, 24, 32, 24</Thickness>
-    
-</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Themes/Colors.xaml

@@ -0,0 +1,27 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Dark">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
+            <Thickness x:Key="CardBorderThickness">1</Thickness>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="Light">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
+            <Thickness x:Key="CardBorderThickness">1</Thickness>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="HighContrast">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="SystemColorButtonFaceColorBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <Thickness x:Key="CardBorderThickness">2</Thickness>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Themes/Generic.xaml

@@ -0,0 +1,9 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///Controls/Setting/Setting.xaml" />
+        <ResourceDictionary Source="ms-appx:///Controls/SettingsGroup/SettingsGroup.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Themes/SettingsExpanderStyles.xaml

@@ -0,0 +1,50 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls">
+
+    <!-- Thickness -->
+    <Thickness x:Key="ExpanderContentPadding">0</Thickness>
+    <Thickness x:Key="ExpanderSettingMargin">56, 8, 40, 8</Thickness>
+
+    <SolidColorBrush x:Key="ExpanderChevronPointerOverBackground">Transparent</SolidColorBrush>
+
+    <!-- Styles -->
+    <!-- Setting used in a Expander header -->
+    <Style x:Key="ExpanderHeaderSettingStyle" TargetType="controls:Setting">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="Padding" Value="0, 14, 0, 14" />
+        <Setter Property="Margin" Value="0"/>
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+    </Style>
+
+    <Thickness x:Key="ExpanderChevronMargin">0,0,8,0</Thickness>
+
+    <!-- Setting used in a Expander header -->
+    <Style x:Key="ExpanderContentSettingStyle" TargetType="controls:Setting">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0,1,0,0" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardBorderBrush}" />
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="Padding" Value="{StaticResource ExpanderSettingMargin}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+    </Style>
+
+    <!-- Setting expander style -->
+
+    <Style x:Key="SettingExpanderStyle" TargetType="muxc:Expander">
+        <Setter Property="Background" Value="{ThemeResource CardBackgroundBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource CardBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardBorderBrush}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    </Style>
+
+    <Style x:Key="ExpanderSeparatorStyle" TargetType="Rectangle">
+        <Setter Property="Height" Value="1"/>
+        <Setter Property="Stroke" Value="{ThemeResource CardBorderBrush}" />
+    </Style>
+</ResourceDictionary>

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

@@ -5,109 +5,120 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:c="using:Microsoft.PowerToys.Settings.UI.Converters"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
     <Page.Resources>
         <c:AwakeModeToBoolConverter x:Key="AwakeModeToBoolConverter" />
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_Awake"
+    <controls:SettingsPageControl x:Uid="Awake" IsTabStop="False"
                                   ModuleImageSource="ms-appx:///Assets/Modules/Awake.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_Awake">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
-                <ToggleSwitch x:Uid="Awake_EnableAwake" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
 
-                <TextBlock x:Uid="Awake_Behavior_GroupSettings"
+                <controls:Setting x:Uid="Awake_EnableAwake">
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
+                    <controls:Setting.Icon>
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsAwake.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" HorizontalAlignment="Right"/>
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-                <CheckBox x:Uid="Awake_EnableDisplayKeepAwake"
+                <controls:SettingsGroup x:Uid="Awake_Behavior_GroupSettings" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                    <controls:Setting x:Uid="Awake_EnableDisplayKeepAwake" Icon="&#xE7FB;">
-                      IsChecked="{x:Bind ViewModel.KeepDisplayOn, Mode=TwoWay}"
+                        <controls:Setting.ActionContent>
-                      Margin="{StaticResource XSmallTopMargin}" />
+                            <ToggleSwitch IsOn="{x:Bind ViewModel.KeepDisplayOn, Mode=TwoWay}" />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <TextBlock x:Uid="Awake_Mode"
+                    <controls:SettingExpander IsExpanded="True">
-                       Margin="{StaticResource SmallTopMargin}"
+                        <controls:SettingExpander.Header>
-                       x:Name="ModeTitleLabel"
+                            <controls:Setting x:Uid="Awake_Mode"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}" />
+                                              Icon="&#xEC4E;"
-
+                                              Style="{StaticResource ExpanderHeaderSettingStyle}" />
-                <StackPanel AutomationProperties.LabeledBy="{Binding ElementName=ModeTitleLabel}"
+                        </controls:SettingExpander.Header>
-                        Margin="0,-8,0,0">
+                        <controls:SettingExpander.Content>
+                            <StackPanel Padding="56,16,16,24"
+                                        Spacing="12">
                                 <RadioButton x:Uid="Awake_NoKeepAwake"
-                             Margin="{StaticResource SmallTopMargin}"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                                              IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=0}">
                                     <RadioButton.Content>
-                            <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
+                                        <TextBlock TextWrapping="WrapWholeWords"
+                                                   LineHeight="20">
                                             <Run x:Uid="Awake_NoKeepAwakeContent"/>
                                             <LineBreak/>
-                        <Run Foreground="{ThemeResource SystemBaseMediumColor}"
+                                            <Run Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                                 x:Uid="Awake_NoKeepAwakeDescription"/>
                                         </TextBlock>
                                     </RadioButton.Content>
                                 </RadioButton>
                                 <RadioButton x:Uid="Awake_IndefiniteKeepAwake"
-                             Margin="{StaticResource SmallTopMargin}"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                                              IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=1}">
                                     <RadioButton.Content>
-                            <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
+                                        <TextBlock TextWrapping="WrapWholeWords"
+                                                   LineHeight="20">
                                             <Run x:Uid="Awake_IndefiniteKeepAwakeContent"/>
                                             <LineBreak/>
-                        <Run Foreground="{ThemeResource SystemBaseMediumColor}"
+                                            <Run Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                                  x:Uid="Awake_IndefiniteKeepAwakeDescription"/>
                                         </TextBlock>
                                     </RadioButton.Content>
                                 </RadioButton>
                                 <RadioButton x:Uid="Awake_TemporaryKeepAwake"
-                             Margin="{StaticResource SmallTopMargin}"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                                             IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=2}">
                                     <RadioButton.Content>
-                            <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
+                                        <TextBlock TextWrapping="WrapWholeWords"
+                                                   LineHeight="20">
                                             <Run x:Uid="Awake_TemporaryKeepAwakeContent"/>
                                             <LineBreak/>
-                        <Run Foreground="{ThemeResource SystemBaseMediumColor}"
+                                            <Run Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                                  x:Uid="Awake_TemporaryKeepAwakeDescription"/>
                                         </TextBlock>
                                     </RadioButton.Content>
                                 </RadioButton>
+                                <StackPanel AutomationProperties.LabeledBy="{Binding ElementName=ModeTitleLabel}"
+                                            Margin="0,-8,0,0">
 
-                    <StackPanel Margin="28,8,0,0" Orientation="Horizontal">
+                                    <StackPanel Margin="28,8,0,0"
+                                                Orientation="Horizontal">
                                         <muxc:NumberBox x:Uid="Awake_TemporaryKeepAwake_Hours"
                                                         Value="{x:Bind ViewModel.Hours, Mode=TwoWay}"
+                                                        IsEnabled="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}"
                                                         Minimum="0"
                                                         SpinButtonPlacementMode="Compact"
                                                         HorizontalAlignment="Left"
                                                         MinWidth="90"
-                            IsEnabled="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}"
                                                         SmallChange="1" 
                                                         LargeChange="5"/>
                                         <muxc:NumberBox x:Uid="Awake_TemporaryKeepAwake_Minutes"
                                                         Value="{x:Bind ViewModel.Minutes, Mode=TwoWay}"
+                                                        IsEnabled="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}"
                                                         Minimum="0"
                                                         SpinButtonPlacementMode="Compact"
                                                         Margin="8,0,0,0"
                                                         HorizontalAlignment="Left"
-                            IsEnabled="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}"
                                                         MinWidth="90"
                                                         SmallChange="1" 
                                                         LargeChange="5"/>
                                     </StackPanel>
                                 </StackPanel>
                             </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
+            </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 
-        <controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_Awake"/>
+            <controls:PageLink x:Uid="LearnMore_Awake" Link="https://aka.ms/PowerToysOverview_Awake"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-        </controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.SecondaryLinks>
-        <controls:SettingsPageControl.AttributionLinks>
+            <controls:PageLink Text="Den Delimarsky's Awake" Link="https://Awake.den.dev"/>
-            <controls:SidePanelLink Label="Den Delimarsky's Awake" Link="https://Awake.den.dev"/>
+        </controls:SettingsPageControl.SecondaryLinks>
-        </controls:SettingsPageControl.AttributionLinks>
     </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml

@@ -5,223 +5,97 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library"
-    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
-    <controls:SettingsPageControl x:Uid="About_ColorPicker"
+    <controls:SettingsPageControl x:Uid="ColorPicker"
                                   ModuleImageSource="ms-appx:///Assets/Modules/ColorPicker.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_ColorPicker">
         <controls:SettingsPageControl.ModuleContent>
 
         <StackPanel Orientation="Vertical"
-                    x:Name="ColorPickerView"
+                    x:Name="ColorPickerView">
-                    HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
-            <ToggleSwitch x:Uid="ColorPicker_EnableColorPicker" 
-                          IsOn="{Binding IsEnabled, Mode=TwoWay}"/>
 
-            <TextBlock x:Uid="Shortcuts"
+                <controls:Setting x:Uid="ColorPicker_EnableColorPicker">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                    <controls:Setting.Icon>
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-            <controls:HotkeySettingsControl x:Uid="ColorPicker_ActivationShortcut"
+                <controls:SettingsGroup x:Uid="Shortcut" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                                          Margin="{StaticResource SmallTopMargin}"
+                    <controls:Setting x:Uid="Activation_Shortcut" Icon="&#xEDA7;">
-                                          HotkeySettings="{x:Bind Path=ViewModel.ActivationShortcut, Mode=TwoWay}"
+                        <controls:Setting.Description>
-                                          Keys="Win, Ctrl, Alt, Shift"
+                            <TextBlock>
-                                          Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                            <Run x:Uid="ShortcutWarningLabel"/>
-                                          HorizontalAlignment="Left"
+                            <Run Text="Win, Ctrl, Alt, Shift"/>
-                                          MinWidth="240"
-                                          />
-
-            <TextBlock x:Uid="ColorPicker_ActivationAction"
-                       Margin="{StaticResource MediumTopMargin}"
-                       x:Name="ColorPicker_ActivationAction" 
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-            <StackPanel AutomationProperties.LabeledBy="{Binding ElementName=ColorPicker_ActivationAction}">
-                <RadioButton
-                         IsChecked="{Binding ActivationOpensColorPickerAndEditor, Mode=TwoWay}"
-                         IsEnabled="{Binding IsEnabled}"
-                         GroupName="ColorPickerActivationAction">
-                    <RadioButton.Content>
-                        <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
-                        <Run x:Uid="ColorPickerFirst"/>
-                        <LineBreak/>
-                        <Run Foreground="{ThemeResource SystemBaseMediumColor}"
-                             x:Uid="ColorPickerFirst_Description"/>
                             </TextBlock>
+                        </controls:Setting.Description>
+                        <controls:Setting.ActionContent>
+                            <controls:HotkeySettingsControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.ActivationShortcut, Mode=TwoWay}" Keys="Win, Ctrl, Alt, Shift"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+
+                <controls:SettingExpander IsExpanded="True" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:SettingExpander.Header>
+                        <controls:Setting x:Uid="ColorPicker_ActivationAction" Icon="&#xEC4E;" Style="{StaticResource ExpanderHeaderSettingStyle}" />
+                    </controls:SettingExpander.Header>
+                    <controls:SettingExpander.Content>
+                        <StackPanel Padding="56,16,16,24" Spacing="12">
+                            <RadioButton x:Uid="ColorPickerFirst_Accessible" IsChecked="{Binding ActivationOpensColorPickerAndEditor, Mode=TwoWay}" GroupName="ColorPickerActivationAction">
+                                <RadioButton.Content>
+                                    <StackPanel>
+                                        <TextBlock x:Uid="ColorPickerFirst"/>
+                                        <TextBlock x:Uid="ColorPickerFirst_Description" Style="{StaticResource SecondaryTextStyle}"/>
+                                    </StackPanel>
                                 </RadioButton.Content>
                             </RadioButton>
 
-                <RadioButton IsChecked="{Binding ActivationOpensEditor, Mode=TwoWay}"
+                            <RadioButton x:Uid="EditorFirst_Accessible" IsChecked="{Binding ActivationOpensEditor, Mode=TwoWay}" GroupName="ColorPickerActivationAction">
-                         Margin="{StaticResource SmallTopMargin}" 
-                         IsEnabled="{Binding IsEnabled}"
-                         GroupName="ColorPickerActivationAction">
                                 <RadioButton.Content>
-                        <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
+                                    <StackPanel>
-                        <Run x:Uid="EditorFirst"/>
+                                        <TextBlock x:Uid="EditorFirst"/>
-                        <LineBreak/>
+                                        <TextBlock x:Uid="EditorFirst_Description" Style="{StaticResource SecondaryTextStyle}"/>
-                        <Run Foreground="{ThemeResource SystemBaseMediumColor}" x:Uid="EditorFirst_Description"/>
+                                    </StackPanel>
-                        </TextBlock>
                                 </RadioButton.Content>
                             </RadioButton>
 
-                <RadioButton IsChecked="{Binding ActivationOpensColorPickerOnly, Mode=TwoWay}"
+                            <RadioButton x:Uid="ColorPickerOnly_Accessible" IsChecked="{Binding ActivationOpensColorPickerOnly, Mode=TwoWay}" GroupName="ColorPickerActivationAction">
-                         Margin="{StaticResource SmallTopMargin}" 
-                         IsEnabled="{Binding IsEnabled}"
-                         GroupName="ColorPickerActivationAction">
                                 <RadioButton.Content>
-                        <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
+                                    <StackPanel>
-                        <Run x:Uid="ColorPickerOnly"/>
+                                        <TextBlock x:Uid="ColorPickerOnly"/>
-                        <LineBreak/>
+                                        <TextBlock x:Uid="ColorPickerOnly_Description" Style="{StaticResource SecondaryTextStyle}"/>
-                        <Run x:Uid="ColorPickerOnly_Description" Foreground="{ThemeResource SystemBaseMediumColor}"/>
+                                    </StackPanel>
-                        </TextBlock>
                                 </RadioButton.Content>
                             </RadioButton>
                         </StackPanel>
+                    </controls:SettingExpander.Content>
+                </controls:SettingExpander>
+                </controls:SettingsGroup>
 
-            <TextBlock x:Uid="ColorFormats"
+                <controls:SettingsGroup x:Uid="ColorFormats" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                    <controls:Setting x:Uid="ColorPicker_CopiedColorRepresentation" Icon="&#xEF3C;">
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                                <controls:Setting.ActionContent>
-            
+                                    <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}"
-            <ComboBox x:Name="ColorPicker_ComboBox"
+                                              x:Name="ColorPicker_ComboBox"
-                      x:Uid="ColorPicker_CopiedColorRepresentation"
-                      MinWidth="240"
-                      Margin="{StaticResource SmallTopMargin}"
                                               HorizontalAlignment="Left"
                                               DisplayMemberPath="Value"
-                      IsEnabled="{Binding IsEnabled}"
                                               ItemsSource="{Binding SelectableColorRepresentations}"
                                               Loaded="ColorPicker_ComboBox_Loaded"
                                               SelectedValue="{Binding SelectedColorRepresentationValue, Mode=TwoWay}"
                                               SelectedValuePath="Key" />    
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
 
-            <CheckBox x:Uid="ColorPicker_ShowColorName"
-                      IsChecked="{Binding ShowColorName, Mode=TwoWay}"
-                      Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{Binding IsEnabled}"/>
-
-            <TextBlock x:Uid="ColorPicker_Editor"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}" />
-            
-            <TextBlock x:Name="ColorFormatsListViewLabel"
-                       TextWrapping="WrapWholeWords"
-                       x:Uid="ColorPicker_ColorFormatsDescription"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
-                       Margin="{StaticResource SmallTopMargin}"/>
-            
-            <!-- Disabled reordering by dragging -->
-            <!-- CanReorderItems="True" AllowDrop="True" -->
-            <ListView ItemsSource="{Binding ColorFormats, Mode=TwoWay}"
-                      MaxWidth="466"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      AutomationProperties.LabeledBy="{Binding ElementName=ColorFormatsListViewLabel}"
-                      HorizontalAlignment="Left"
-                      Margin="-12,6,0,0">
-                <ItemsControl.ItemContainerTransitions>
-                    <TransitionCollection/>
-                </ItemsControl.ItemContainerTransitions>
-                <ListView.ItemTemplate>
-                    <DataTemplate>
-                            <Grid Width="420" AutomationProperties.Name="{Binding Name}" Background="Transparent">
-                            <!-- Disabled reordering by dragging
-                            
-                            <Interactivity:Interaction.Behaviors>
-                                <Core:EventTriggerBehavior EventName="PointerEntered">
-                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=GripperIcon}" PropertyName="Visibility" Value="Visible" />
-                                </Core:EventTriggerBehavior>
-                                <Core:EventTriggerBehavior EventName="PointerExited">
-                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=GripperIcon}" PropertyName="Visibility" Value="Collapsed" />
-                                </Core:EventTriggerBehavior>
-                            </Interactivity:Interaction.Behaviors> -->
-
-                            <Interactivity:Interaction.Behaviors>
-                                <Core:EventTriggerBehavior EventName="PointerEntered">
-                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonUp}" PropertyName="Visibility" Value="Visible" />
-                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonDown}" PropertyName="Visibility" Value="Visible" />
-                                </Core:EventTriggerBehavior>
-                                <Core:EventTriggerBehavior EventName="PointerExited">
-                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonUp}" PropertyName="Visibility" Value="Collapsed" />
-                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonDown}" PropertyName="Visibility" Value="Collapsed" />
-                                </Core:EventTriggerBehavior>
-                            </Interactivity:Interaction.Behaviors>
-                            
-                            <Grid.RowDefinitions>
-                                <RowDefinition/>
-                                <RowDefinition/>
-                            </Grid.RowDefinitions>
-                            <TextBlock FontWeight="SemiBold"
-                                       FontSize="16"
-                                       Margin="0,8,0,0"
-                                       Text="{Binding Name}"/>
-                            <TextBlock Foreground="{ThemeResource SystemBaseMediumColor}"
-                                       Text="{Binding Example}"
-                                       Grid.Row="1"
-                                       Margin="0,0,0,8"/>
-                            <ToggleSwitch IsOn="{Binding IsShown, Mode=TwoWay}"
-                                          OnContent=""
-                                          OffContent=""
-                                          x:Uid="ColorPicker_ColorFormat_ToggleSwitch"
-                                          Grid.RowSpan="2"
-                                          HorizontalAlignment="Right"
-                                          Margin="0,0,-36,0"/>
-                            <!-- Disabled reordering by dragging
-                            
-                            <TextBlock Text="&#xE76F;"
-                                       Visibility="Collapsed"
-                                       x:Name="GripperIcon"
-                                       VerticalAlignment="Center"
-                                       Grid.RowSpan="2"
-                                       FontSize="16"
-                                       HorizontalAlignment="Right"
-                                       Margin="0,0,36,0"
-                                       FontFamily="Segoe MDL2 Assets" /> -->
-
-                            <Button x:Uid="ColorPicker_ButtonUp"
-                                    x:Name="ButtonUp"
-                                    Content="&#xE74A;"
-                                    IsEnabled="{Binding CanMoveUp}"
-                                    Grid.Row="0"
-                                    HorizontalAlignment="Right"
-                                    Margin="0,0,24,0"
-                                    Background="Transparent"
-                                    Visibility="Collapsed"
-                                    FontFamily="Segoe MDL2 Assets"
-                                    Click="ReorderButtonUp_Click">
-                                <Interactivity:Interaction.Behaviors>
-                                    <Core:EventTriggerBehavior EventName="Click">
-                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonUp}" PropertyName="Visibility" Value="Collapsed" />
-                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonDown}" PropertyName="Visibility" Value="Collapsed" />
-                                </Core:EventTriggerBehavior>
-                                </Interactivity:Interaction.Behaviors>
-                            </Button>
-                            <Button x:Uid="ColorPicker_ButtonDown"
-                                    x:Name="ButtonDown"
-                                    Content="&#xE74B;"
-                                    IsEnabled="{Binding CanMoveDown}"
-                                    Grid.Row="1"
-                                    HorizontalAlignment="Right"
-                                    Margin="0,0,24,0"
-                                    Background="Transparent"
-                                    Visibility="Collapsed"
-                                    FontFamily="Segoe MDL2 Assets"
-                                    Click="ReorderButtonDown_Click" >
-                                <Interactivity:Interaction.Behaviors>
-                                    <Core:EventTriggerBehavior EventName="Click">
-                                        <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonUp}" PropertyName="Visibility" Value="Collapsed" />
-                                        <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonDown}" PropertyName="Visibility" Value="Collapsed" />
-                                    </Core:EventTriggerBehavior>
-                                </Interactivity:Interaction.Behaviors>
-                            </Button>
-                        </Grid>
-                    </DataTemplate>
-                </ListView.ItemTemplate>
-            </ListView>
 
+                    <controls:Setting x:Uid="ColorPicker_ShowColorName">
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{Binding ShowColorName, Mode=TwoWay}" />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
                     <!--
             Disabling this until we have a safer way to reset cursor as 
             we can hit a state where the cursor doesn't reset
@@ -231,17 +105,84 @@
                           Margin="{StaticResource SmallTopMargin}"
                           IsEnabled="{Binding IsEnabled}"/>
                           -->
+                </controls:SettingsGroup>
+
+                <controls:SettingsGroup x:Uid="ColorPicker_Editor" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:Setting x:Name="ColorFormatsSetting" x:Uid="ColorPicker_ColorFormats" Icon="&#xE14C;"/>
+
+                    <!-- Disabled reordering by dragging -->
+                    <!-- CanReorderItems="True" AllowDrop="True" -->
+                    <ListView ItemsSource="{Binding ColorFormats, Mode=TwoWay}"
+                              AutomationProperties.Name="{Binding ElementName=ColorFormatsSetting, Path=Header}"
+                              SelectionMode="None"
+                              HorizontalAlignment="Stretch">
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="models:ColorFormatModel">
+                                <Grid AutomationProperties.Name="{x:Bind Name}"
+                                      HorizontalAlignment="Stretch"
+                                      Background="{ThemeResource CardBackgroundBrush}"
+                                      BorderThickness="{ThemeResource CardBorderThickness}"
+                                      BorderBrush="{ThemeResource CardBorderBrush}"
+                                      CornerRadius="{ThemeResource ControlCornerRadius}"
+                                      Padding="0,0,16,0"
+                                      MinHeight="68">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition/>
+                                        <RowDefinition/>
+                                    </Grid.RowDefinitions>
+                                    <TextBlock FontWeight="SemiBold"
+                                       FontSize="16"
+                                       Margin="56,8,0,0"
+                                       Text="{x:Bind Name}"/>
+                                    <TextBlock Style="{StaticResource SecondaryTextStyle}"
+                                       Text="{x:Bind Example}"
+                                       Grid.Row="1"
+                                       Margin="56,0,0,8"/>
+                                    <ToggleSwitch IsOn="{x:Bind IsShown, Mode=TwoWay}"
+                                                  OnContent=""
+                                                  OffContent=""
+                                                  Grid.RowSpan="2"
+                                                  x:Uid="Enable_ColorFormat"
+                                                  AutomationProperties.HelpText="{x:Bind Name}"
+                                                  HorizontalAlignment="Right"
+                                                  Margin="0,0,56,0"/>
+
+                                    <Button Background="Transparent"
+                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                            HorizontalAlignment="Right"
+                                            VerticalAlignment="Center"
+                                            Grid.RowSpan="2"
+                                            x:Uid="More_Options_Button"
+                                            Content="&#xE10C;">
+                                        <Button.Flyout>
+                                            <MenuFlyout>
+                                                <MenuFlyoutItem IsEnabled="{x:Bind CanMoveUp}" Icon="Up" x:Uid="MoveUp" Click="ReorderButtonUp_Click"/>
+                                                <MenuFlyoutItem IsEnabled="{x:Bind CanMoveDown}" x:Uid="MoveDown" Click="ReorderButtonDown_Click">
+                                                    <MenuFlyoutItem.Icon>
+                                                        <FontIcon Glyph="&#xE1FD;" />
+                                                    </MenuFlyoutItem.Icon>
+                                                </MenuFlyoutItem>
+                                            </MenuFlyout>
+                                        </Button.Flyout>
+                                        <ToolTipService.ToolTip>
+                                            <TextBlock x:Uid="More_Options_ButtonTooltip" />
+                                        </ToolTipService.ToolTip>
+                                    </Button>
+                                </Grid>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </controls:SettingsGroup>
             </StackPanel>
 
 </controls:SettingsPageControl.ModuleContent>
 
-<controls:SettingsPageControl.ModuleLinks>
+<controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ColorPicker"/>
+            <controls:PageLink x:Uid="LearnMore_ColorPicker" Link="https://aka.ms/PowerToysOverview_ColorPicker"/>
-    <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-</controls:SettingsPageControl.ModuleLinks>
+<controls:SettingsPageControl.SecondaryLinks>
-<controls:SettingsPageControl.AttributionLinks>
+            <controls:PageLink Text="Martin Chrzan's Color Picker" Link="https://github.com/martinchrzan/ColorPicker/"/>
-    <controls:SidePanelLink Label="Martin Chrzan's Color Picker" Link="https://github.com/martinchrzan/ColorPicker/"/>
+            <controls:PageLink Text="Niels Laute's UX concept" Link="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c"/>
-    <controls:SidePanelLink Label="Niels Laute's UX concept" Link="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c"/>
+</controls:SettingsPageControl.SecondaryLinks>
-</controls:SettingsPageControl.AttributionLinks>
 </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs

@@ -50,7 +50,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
         private void ReorderButtonUp_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
         {
-            ColorFormatModel color = ((Button)sender).DataContext as ColorFormatModel;
+            ColorFormatModel color = ((MenuFlyoutItem)sender).DataContext as ColorFormatModel;
             if (color == null)
             {
                 return;
@@ -65,7 +65,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
         private void ReorderButtonDown_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
         {
-            ColorFormatModel color = ((Button)sender).DataContext as ColorFormatModel;
+            ColorFormatModel color = ((MenuFlyoutItem)sender).DataContext as ColorFormatModel;
             if (color == null)
             {
                 return;

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml

@@ -8,235 +8,136 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"     
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
     <Page.Resources>
         <converters:StringFormatConverter x:Key="StringFormatConverter"/>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_FancyZones"
+    <controls:SettingsPageControl x:Uid="FancyZones"
                                   ModuleImageSource="ms-appx:///Assets/Modules/FancyZones.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_FancyZones">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
-            <ToggleSwitch x:Name="FancyZones_EnableToggleControl_HeaderText"
-                            x:Uid="FancyZones_EnableToggleControl_HeaderText"
-                            IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
 
-            <TextBlock x:Uid="FancyZones_Editor_GroupSettings"
+                <controls:Setting x:Uid="FancyZones_EnableToggleControl_HeaderText">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                    <controls:Setting.Icon>
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFancyZones.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}"/>
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-            <Button Margin="{StaticResource SmallTopMargin}"
+
-                    Style="{StaticResource AccentButtonStyle}"
+                <controls:SettingsGroup x:Uid="FancyZones_Editor_GroupSettings" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                    Command = "{x:Bind ViewModel.LaunchEditorEventHandler}"
+                    <Button Style="{StaticResource SettingButtonStyle}" x:Uid="FancyZones_LaunchEditorButton_Accessible" Command="{x:Bind ViewModel.LaunchEditorEventHandler}">
-                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                        <controls:Setting x:Uid="FancyZones_LaunchEditorButtonControl" Style="{StaticResource ExpanderHeaderSettingStyle}" Icon="&#xF246;">
-                    AutomationProperties.LabeledBy="{Binding ElementName=FancyZones_LaunchEditorButtonControl}">
+                            <!--<controls:Setting.Icon>
-                <StackPanel Orientation="Horizontal">
-                    <Viewbox Height="14" Width="14" Margin="-1,1,0,0">
                                 <PathIcon Data="M45,48H25.5V45H45V25.5H25.5v-3H45V3H25.5V0H48V48ZM22.5,48H3V45H22.5V3H3V0H25.5V48ZM0,48V0H3V48Z"/>
-                    </Viewbox>
+                            </controls:Setting.Icon>-->
-                    <TextBlock Margin="8,0,0,0"
+                            <controls:Setting.ActionContent>
-                               Name="FancyZones_LaunchEditorButtonControl"
+                                <FontIcon Glyph="&#xE2B4;" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
-                               x:Uid="FancyZones_LaunchEditorButtonControl"/>
+                            </controls:Setting.ActionContent>
-                </StackPanel>
+                        </controls:Setting>
                     </Button>
 
-            <controls:HotkeySettingsControl 
+
-                x:Uid="FancyZones_HotkeyEditorControl"
+
-                Margin="{StaticResource SmallTopMargin}"
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="Activation_Shortcut" Icon="&#xEDA7;" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <controls:Setting.Description>
+                                    <TextBlock>
+                                        <Run x:Uid="ShortcutWarningLabel"/>
+                                        <Run Text="Win, Ctrl, Alt, Shift"/>
+                                    </TextBlock>
+                                </controls:Setting.Description>
+                                <controls:Setting.ActionContent>
+                                    <controls:HotkeySettingsControl MinWidth="{StaticResource SettingActionControlMinWidth}"
                                                                     HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"
-                Keys="Win, Ctrl, Alt, Shift"
+                                                                    Keys="Win, Ctrl, Alt, Shift"/>
-                Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                                </controls:Setting.ActionContent>
-                HorizontalAlignment="Left"
+                            </controls:Setting>
-                MinWidth="240"
+                        </controls:SettingExpander.Header>
-                />
+
+                        <controls:SettingExpander.Content>
+                            <StackPanel>
+                                <controls:Setting x:Uid="FancyZones_UseCursorPosEditorStartupScreen" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.UseCursorPosEditorStartupScreen}"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
 
 
+                <controls:SettingsGroup x:Uid="FancyZones_Zones" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="FancyZones_ZoneBehavior_GroupSettings" Icon="&#xE620;" Style="{StaticResource ExpanderHeaderSettingStyle}" />
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel>
 
-            <CheckBox x:Uid="FancyZones_UseCursorPosEditorStartupScreen"
+                                <CheckBox x:Uid="FancyZones_ShiftDragCheckBoxControl_Header" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShiftDrag}" Margin="{StaticResource ExpanderSettingMargin}"  />
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.UseCursorPosEditorStartupScreen}"
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
-                      Margin="{StaticResource SmallTopMargin}"
+                                <CheckBox x:Uid="FancyZones_MouseDragCheckBoxControl_Header" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MouseSwitch}" Margin="{StaticResource ExpanderSettingMargin}"  />
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_ShowZonesOnAllMonitorsCheckBoxControl" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShowOnAllMonitors}" Margin="{StaticResource ExpanderSettingMargin}"  />
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_SpanZonesAcrossMonitorsCheckBoxControl" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.SpanZonesAcrossMonitors}" Margin="{StaticResource ExpanderSettingMargin}"  />
                                
-            <TextBlock x:Uid="FancyZones_ZoneBehavior_GroupSettings"
+                                <controls:Setting  x:Uid="FancyZones_OverlappingZones" Style="{StaticResource ExpanderContentSettingStyle}">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                                    <controls:Setting.ActionContent>
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                                        <ComboBox SelectedIndex="{x:Bind Path=ViewModel.OverlappingZonesAlgorithmIndex, Mode=TwoWay}" MinWidth="{StaticResource SettingActionControlMinWidth}">
-
-            <CheckBox x:Uid="FancyZones_ShiftDragCheckBoxControl_Header"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShiftDrag}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      />
-
-            <CheckBox x:Uid="FancyZones_MouseDragCheckBoxControl_Header"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MouseSwitch}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      />
-            
-            <CheckBox x:Uid="FancyZones_ShowZonesOnAllMonitorsCheckBoxControl"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShowOnAllMonitors}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-            <CheckBox x:Uid="FancyZones_SpanZonesAcrossMonitorsCheckBoxControl"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.SpanZonesAcrossMonitors}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}" />
-
-            <ComboBox x:Uid="FancyZones_OverlappingZones"
-                      SelectedIndex="{x:Bind Path=ViewModel.OverlappingZonesAlgorithmIndex, Mode=TwoWay}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      VerticalAlignment="Center"
-                      Width="{StaticResource MaxComboBoxWidth}"
-                      Margin="{StaticResource SmallTopMargin}">
                                             <ComboBoxItem x:Uid="FancyZones_OverlappingZonesSmallest" />
                                             <ComboBoxItem x:Uid="FancyZones_OverlappingZonesLargest" />
                                             <ComboBoxItem x:Uid="FancyZones_OverlappingZonesPositional" />
                                             <ComboBoxItem x:Uid="FancyZones_OverlappingZonesClosestCenter" />
                                         </ComboBox>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
 
-            <TextBlock x:Uid="FancyZones_WindowBehavior_GroupSettings"
+                                <controls:Setting x:Uid="FancyZones_HighlightOpacity" Style="{StaticResource ExpanderContentSettingStyle}">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                                    <controls:Setting.ActionContent>
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                                        <Slider Minimum="0"
-
-            <CheckBox x:Uid="FancyZones_OverrideSnapHotkeysCheckBoxControl"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.OverrideSnapHotkeys}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-            <RadioButton x:Uid="FancyZones_MoveWindowLeftRightBasedOnZoneIndex"
-                         GroupName="FancyZones_MoveWindowGroup"
-                         IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsBasedOnZoneIndex}"
-                         Margin="24,8,0,0"
-                         IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.SnapHotkeysCategoryEnabled}"/>
-
-            <RadioButton x:Uid="FancyZones_MoveWindowBasedOnRelativePosition"
-                         GroupName="FancyZones_MoveWindowGroup"
-                         IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsBasedOnPosition}"
-                         Margin="24,8,0,0"
-                         IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.SnapHotkeysCategoryEnabled}"/>
-
-            <CheckBox x:Uid="FancyZones_MoveWindowsAcrossAllMonitorsCheckBoxControl"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsAcrossMonitors}"
-                      Margin="24,8,0,0"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.SnapHotkeysCategoryEnabled}"/>
-            
-            <CheckBox x:Uid="FancyZones_DisplayChangeMoveWindowsCheckBoxControl"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.DisplayChangeMoveWindows}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      />
-
-            <CheckBox x:Uid="FancyZones_ZoneSetChangeMoveWindows"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ZoneSetChangeMoveWindows}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-            <CheckBox x:Uid="FancyZones_AppLastZoneMoveWindows"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.AppLastZoneMoveWindows}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-            <CheckBox x:Uid="FancyZones_OpenWindowOnActiveMonitor"
-                      IsChecked="{ Binding Mode=TwoWay, Path=OpenWindowOnActiveMonitor}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
-
-            <CheckBox x:Uid="FancyZones_RestoreSize"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.RestoreSize}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-
-            <TextBlock x:Uid="FancyZones_QuickLayoutSwitch_GroupSettings"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-            <CheckBox x:Uid="FancyZones_QuickLayoutSwitch"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.QuickLayoutSwitch}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-            <CheckBox x:Uid="FancyZones_FlashZonesOnQuickSwitch"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.FlashZonesOnQuickSwitch}"
-                      Margin="24,8,0,0"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.QuickSwitchEnabled}"/>
-
-            <TextBlock x:Uid="Appearance_GroupSettings"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-            <CheckBox x:Uid="FancyZones_MakeDraggedWindowTransparentCheckBoxControl"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MakeDraggedWindowsTransparent}"
-                      Margin="{StaticResource XSmallTopMargin}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-            
-            <StackPanel Orientation="Horizontal" Margin="{StaticResource SmallTopMargin}" Spacing="12">
-                <Slider x:Uid="FancyZones_HighlightOpacity"
-                    Minimum="0"
                                             Maximum="100"
-                    MinWidth="240"
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
-                    IsThumbToolTipEnabled="False"
                                             Value="{x:Bind Mode=TwoWay, Path=ViewModel.HighlightOpacity}"
-                    HorizontalAlignment="Left"
+                                            HorizontalAlignment="Right"/>
-                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
 
-                <TextBlock
+                                <controls:Setting  x:Uid="FancyZones_ZoneHighlightColor" Style="{StaticResource ExpanderContentSettingStyle}">
-                       Text="{x:Bind Mode=OneWay, Path=ViewModel.HighlightOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
+                                    <controls:Setting.ActionContent>
-                       VerticalAlignment="Center"
+                                        <muxc:DropDownButton Padding="4,4,8,4">
-                       FontWeight="SemiBold"
+                                            <Border Width="48" CornerRadius="2" Height="24">
-                       FontSize="16"
-                       Margin="0,16,0,0"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-            </StackPanel>
-
-            <TextBlock Name="FancyZones_ZoneHighlightColor"
-                x:Uid="FancyZones_ZoneHighlightColor"
-                Margin="{StaticResource SmallTopMargin}"
-                Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-            <muxc:DropDownButton Margin="0,4,0,0"
-                                 IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
-                                 Padding="4,4,8,4"
-                                 AutomationProperties.LabeledBy="{Binding ElementName=FancyZones_ZoneHighlightColor}">
-                <Border Width="48"
-                        CornerRadius="2"
-                        Height="24">
                                                 <Border.Background>
                                                     <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}"/>
                                                 </Border.Background>
                                             </Border>
                                             <muxc:DropDownButton.Flyout>
                                                 <Flyout>
-                        <muxc:ColorPicker x:Name="FancyZones_ZoneHighlightColorPicker"
+                                                    <muxc:ColorPicker IsColorSliderVisible="True"
-                              Margin="0,6,0,0"
-                              HorizontalAlignment="Left"
-                              IsColorSliderVisible="True"
                                                                       IsColorChannelTextInputVisible="True"
                                                                       IsHexInputVisible="True"
                                                                       IsAlphaEnabled="False"
                                                                       IsAlphaSliderVisible="False"
                                                                       IsAlphaTextInputVisible="False"
-                              Color="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}"
+                                                                      Color="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}" />
-                              />
                                                 </Flyout>
                                             </muxc:DropDownButton.Flyout>
-
                                         </muxc:DropDownButton>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
 
-            <TextBlock Name="FancyZones_InActiveColor"
-                x:Uid="FancyZones_InActiveColor"
-                Margin="{StaticResource SmallTopMargin}"
-                Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <muxc:DropDownButton Margin="0,4,0,0"
+                                <controls:Setting  x:Uid="FancyZones_InActiveColor" Style="{StaticResource ExpanderContentSettingStyle}">
-                                 IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
+                                    <controls:Setting.ActionContent>
-                                 Padding="4,4,8,4"
+                                        <muxc:DropDownButton Padding="4,4,8,4">
-                                 AutomationProperties.LabeledBy="{Binding ElementName=FancyZones_InActiveColor}">
                                             <Border Width="48" CornerRadius="2" Height="24">
                                                 <Border.Background>
                                                     <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}"/>
@@ -244,28 +145,22 @@
                                             </Border>
                                             <muxc:DropDownButton.Flyout>
                                                 <Flyout>
-                        <muxc:ColorPicker x:Name="FancyZones_InActiveColorPicker"
+                                                    <muxc:ColorPicker IsColorSliderVisible="True"
-                              Margin="0,6,0,0"
-                              IsColorSliderVisible="True"
                                                                       IsColorChannelTextInputVisible="True"
                                                                       IsHexInputVisible="True"
                                                                       IsAlphaEnabled="False"
                                                                       IsAlphaSliderVisible="False"
                                                                       IsAlphaTextInputVisible="False"
-                              Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}"/>
+                                                                      Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}" />
                                                 </Flyout>
                                             </muxc:DropDownButton.Flyout>
                                         </muxc:DropDownButton>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
 
-            <TextBlock Name="FancyZones_BorderColor"
+                                <controls:Setting  x:Uid="FancyZones_BorderColor" Style="{StaticResource ExpanderContentSettingStyle}">
-                x:Uid="FancyZones_BorderColor"
+                                    <controls:Setting.ActionContent>
-                Margin="{StaticResource SmallTopMargin}"
+                                        <muxc:DropDownButton Padding="4,4,8,4">
-                Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-            <muxc:DropDownButton Margin="0,4,0,0"
-                                 IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
-                                 Padding="4,4,8,4"
-                                 AutomationProperties.LabeledBy="{Binding ElementName=FancyZones_BorderColor}">
                                             <Border Width="48" CornerRadius="2" Height="24">
                                                 <Border.Background>
                                                     <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}"/>
@@ -273,45 +168,129 @@
                                             </Border>
                                             <muxc:DropDownButton.Flyout>
                                                 <Flyout>
-                        <muxc:ColorPicker x:Name="FancyZones_BorderColorPicker"
+                                                    <muxc:ColorPicker IsColorSliderVisible="True"
-                              Margin="0,6,0,0"
-                              HorizontalAlignment="Left"
-                              IsColorSliderVisible="True"                             
                                                                       IsColorChannelTextInputVisible="True"
                                                                       IsHexInputVisible="True"
                                                                       IsAlphaEnabled="False"
                                                                       IsAlphaSliderVisible="False"
                                                                       IsAlphaTextInputVisible="False"
-                              Color="{x:Bind  Path=ViewModel.ZoneBorderColor, Mode=TwoWay}"
+                                                                      Color="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}" />
-                              IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
                                                 </Flyout>
                                             </muxc:DropDownButton.Flyout>
                                         </muxc:DropDownButton>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
 
-            <TextBlock x:Uid="FancyZones_ExcludeApps"
+                            </StackPanel>
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                        </controls:SettingExpander.Content>
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
 
+                
+                <controls:SettingsGroup x:Uid="FancyZones_Windows" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="FancyZones_WindowBehavior_GroupSettings" Icon="&#xE737;" Style="{StaticResource ExpanderHeaderSettingStyle}" />
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel>
+                                <CheckBox x:Uid="FancyZones_DisplayChangeMoveWindowsCheckBoxControl" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.DisplayChangeMoveWindows}" Margin="{StaticResource ExpanderSettingMargin}"/>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_ZoneSetChangeMoveWindows" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ZoneSetChangeMoveWindows}" Margin="{StaticResource ExpanderSettingMargin}"/>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_AppLastZoneMoveWindows" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.AppLastZoneMoveWindows}" Margin="{StaticResource ExpanderSettingMargin}"/>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_OpenWindowOnActiveMonitor" IsChecked="{ Binding Mode=TwoWay, Path=OpenWindowOnActiveMonitor}" Margin="{StaticResource ExpanderSettingMargin}"/>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_RestoreSize" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.RestoreSize}" Margin="{StaticResource ExpanderSettingMargin}"/>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_MakeDraggedWindowTransparentCheckBoxControl" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MakeDraggedWindowsTransparent}" Margin="{StaticResource ExpanderSettingMargin}"/>
+                            </StackPanel>
+
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="FancyZones_OverrideSnapHotkeys" Icon="&#xE145;" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <controls:Setting.ActionContent>
+                                    <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.OverrideSnapHotkeys}"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+
+                        <controls:SettingExpander.Content>
+                            <StackPanel>
+                                <RadioButton x:Uid="FancyZones_MoveWindowLeftRightBasedOnZoneIndex"
+                                             IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsBasedOnZoneIndex}"
+                                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.SnapHotkeysCategoryEnabled}"
+                                             GroupName="OverrideSnapGroup"
+                                             Margin="{StaticResource ExpanderSettingMargin}"/>
+                                <RadioButton x:Uid="FancyZones_MoveWindowBasedOnRelativePosition"
+                                             IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsBasedOnPosition}"
+                                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.SnapHotkeysCategoryEnabled}"
+                                             GroupName="OverrideSnapGroup"
+                                             Margin="{StaticResource ExpanderSettingMargin}"/>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_MoveWindowsAcrossAllMonitorsCheckBoxControl"
+                                          Margin="56,8,16,8"
+                                          IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsAcrossMonitors}"
+                                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.SnapHotkeysCategoryEnabled}"/>
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
+
+                <controls:SettingsGroup x:Uid="FancyZones_Layouts" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="FancyZones_QuickLayoutSwitch" Icon="&#xE737;" Style="{StaticResource ExpanderHeaderSettingStyle}" >
+                                <controls:Setting.ActionContent>
+                                    <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.QuickLayoutSwitch}"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+
+                        <controls:SettingExpander.Content>
+                            <StackPanel>
+                                <CheckBox x:Uid="FancyZones_FlashZonesOnQuickSwitch" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.FlashZonesOnQuickSwitch}" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.QuickSwitchEnabled}" Margin="{StaticResource ExpanderSettingMargin}"/>
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
+
+
+
+
+
+
+                <controls:SettingsGroup x:Uid="ExcludedApps" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="FancyZones_ExcludeApps" Icon="&#xE103;" Style="{StaticResource ExpanderHeaderSettingStyle}"/>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
                             <TextBox x:Uid="FancyZones_ExcludeApps_TextBoxControl"
-                     Margin="{StaticResource SmallTopMargin}"
+                                 Margin="{StaticResource ExpanderSettingMargin}"
                                          Text="{x:Bind Mode=TwoWay, Path=ViewModel.ExcludedApps, UpdateSourceTrigger=PropertyChanged}"
-                     IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                                          ScrollViewer.VerticalScrollBarVisibility ="Visible"
                                          ScrollViewer.VerticalScrollMode="Enabled"
                                          ScrollViewer.IsVerticalRailEnabled="True"
                                          TextWrapping="Wrap"
                                          AcceptsReturn="True"
-                     HorizontalAlignment="Left"
                                          MinWidth="240"
                                          MinHeight="160" />
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
             </StackPanel>
 
         
 </controls:SettingsPageControl.ModuleContent>
 
-<controls:SettingsPageControl.ModuleLinks>
+<controls:SettingsPageControl.PrimaryLinks>
-    <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_FancyZones"/>
+            <controls:PageLink x:Uid="LearnMore_FancyZones" Link="https://aka.ms/PowerToysOverview_FancyZones"/>
-    <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-</controls:SettingsPageControl.ModuleLinks>
 </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml

@@ -7,227 +7,233 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     xmlns:localConverters="using:Microsoft.PowerToys.Settings.UI.Converters"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
     <Page.Resources>
-        <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Collapsed" FalseValue="Visible"/>
         <converters:BoolToVisibilityConverter x:Key="VisibleIfTrueConverter"/>
-        <localConverters:UpdatingStateUpToDateToVisibilityConverter x:Key="UpdatingStateUpToDateToVisibilityConverter" />
+        <converters:BoolNegationConverter x:Key="NegationConverter"/>
-        <localConverters:UpdatingStateCannotDownloadToVisibilityConverter x:Key="UpdatingStateCannotDownloadToVisibilityConverter" />
+        <localConverters:UpdateStateToBoolConverter x:Key="UpdateStateToBoolConverter" />
-        <localConverters:UpdatingStateReadyToDownloadToVisibilityConverter x:Key="UpdatingStateReadyToDownloadToVisibilityConverter" />
-        <localConverters:UpdatingStateReadyToInstallToVisibilityConverter x:Key="UpdatingStateReadyToInstallToVisibilityConverter" />
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_PowerToys"
+    <controls:SettingsPageControl x:Uid="General"
                                   ModuleImageSource="ms-appx:///Assets/Modules/PT.png"
                                   ModuleImageLink="https://aka.ms/powertoys">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
-                <Button Click="OobeButton_Click"
+                <controls:SettingsGroup x:Uid="General_Version" Margin="0,-32,0,0">
-                        Style="{StaticResource AccentButtonStyle}"
+                    <controls:Setting Header="{Binding PowerToysVersion}" Icon="&#xE117;">
-                        Margin="0,12,0,24">
+                        <controls:Setting.Description>
-                    <Button.Content>
+                            <StackPanel Orientation="Vertical">
-                        <StackPanel Orientation="Horizontal">
-                            <FontIcon FontSize="13" Glyph="&#xF133;" />
-                            <TextBlock Margin="8,0,0,0"
-                               x:Uid="Oobe_Button"/>
-                    </StackPanel>
-                    </Button.Content>
-                </Button>
                                
-                
+                            <TextBlock Style="{StaticResource SecondaryTextStyle}">
-                <TextBlock x:Uid="Admin_Mode" 
-                       FontWeight="SemiBold"
-                       TextWrapping="Wrap"
-                       AutomationProperties.HeadingLevel="Level2"
-                       Style="{StaticResource SubtitleTextBlockStyle}"/>
-
-                <TextBlock Text="{Binding Mode=TwoWay, Path=RunningAsText}"
-                       TextWrapping="Wrap"
-                       Margin="{StaticResource SmallTopMargin}"/>
-
-                <Button x:Uid="GeneralPage_RestartAsAdmin_Button"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Command = "{Binding RestartElevatedButtonEventHandler}"
-                    IsEnabled="{Binding Mode=TwoWay, Path=IsAdminButtonEnabled}"
-                    />
-
-                <TextBlock x:Uid="General_RunAsAdminRequired"
-                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
-                       TextWrapping="Wrap"
-                       Visibility="{Binding Mode=TwoWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}"
-                       Margin="0,24,0,-8" />
-
-                <ToggleSwitch Margin="{StaticResource SmallTopMargin}"
-                          x:Uid="GeneralSettings_AlwaysRunAsAdminText"
-                          IsEnabled="{Binding Mode=TwoWay, Path=IsElevated}"
-                          IsOn="{Binding Mode=TwoWay, Path=RunElevated}"/>
-
-                <HyperlinkButton NavigateUri="https://aka.ms/powertoysDetectedElevatedHelp">
-                    <TextBlock x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link" TextWrapping="Wrap" />
-                </HyperlinkButton>
-
-
-                <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-                <!-- Replaced the Radiobuttons parent control with a StackPanel to mitigate the Tab and Arrow key related keyboard navigation issues due to XAML Islands
-            Tracking issue in the winui repository - https://github.com/microsoft/microsoft-ui-xaml/issues/3156 -->
-                <TextBlock x:Name="RadioButtons_Name_Theme" 
-                       x:Uid="ColorModeHeader"
-                       Margin="{StaticResource SmallTopMargin}"/>
-                <StackPanel AutomationProperties.LabeledBy="{Binding ElementName=RadioButtons_Name_Theme}">
-                    <RadioButton x:Uid="Radio_Theme_Dark"
-                             IsChecked="{ Binding Mode=TwoWay, Path=IsDarkThemeRadioButtonChecked}"/>
-
-                    <RadioButton x:Uid="Radio_Theme_Light" 
-                             IsChecked="{ Binding Mode=TwoWay, Path=IsLightThemeRadioButtonChecked}"/>
-
-                    <RadioButton x:Uid="Radio_Theme_Default"
-                             IsChecked="{ Binding Mode=TwoWay, Path=IsSystemThemeRadioButtonChecked}"/>
-                    <HyperlinkButton Click="OpenColorsSettings_Click">
-                        <TextBlock x:Uid="Windows_Color_Settings" />
-                    </HyperlinkButton>
-                </StackPanel>
-
-                <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_RunAtStartUp"  
-                          Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=Startup}"/>
-
-
-                <TextBlock x:Uid="General_Updates"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-                
-                
-                
-                <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateUpToDateToVisibilityConverter}}">
-
-                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
-                        <Run x:Uid="General_Version" />
-                        <Run Text="{Binding PowerToysVersion}"/>
-                    </TextBlock>
-
-                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
                                 <Run x:Uid="General_VersionLastChecked" />
                                 <Run Text="{Binding UpdateCheckedDate, Mode=OneWay}"/>
                             </TextBlock>
-
+                                <HyperlinkButton x:Uid="ReleaseNotes"
-                    <TextBlock x:Uid="General_CheckingForUpdates" Margin="{StaticResource SmallTopMargin}" Visibility="{Binding IsNewVersionDownloading, Converter={StaticResource VisibleIfTrueConverter}}"/>
+                                                 NavigateUri="https://github.com/microsoft/PowerToys/releases/"
-
+                                                 Margin="0,2,0,0"/>
-                    <TextBlock x:Uid="General_UpToDate"
+                            </StackPanel>
-                               Margin="{StaticResource SmallTopMargin}"
+                        </controls:Setting.Description>
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
+                        <controls:Setting.ActionContent>
-                               Visibility="{Binding IsNewVersionCheckedAndUpToDate, Converter={StaticResource VisibleIfTrueConverter}}"/>
+                            <Grid Visibility="{Binding PowerToysUpdatingState, Mode=OneWay, Converter={StaticResource UpdateStateToBoolConverter}, ConverterParameter=UpToDate}">
+                                <StackPanel Visibility="{Binding Mode=OneWay, Path=IsNewVersionDownloading, Converter={StaticResource VisibleIfTrueConverter}}"
+                                            VerticalAlignment="Center"
+                                            Orientation="Horizontal"
+                                            Spacing="18">
+                                    <muxc:ProgressRing Height="24"
+                                                       Width="24"/>
+                                    <TextBlock x:Uid="General_CheckingForUpdates"
+                                               FontWeight="SemiBold"
+                                               VerticalAlignment="Center"
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                                </StackPanel>
 
                                 <Button x:Uid="GeneralPage_CheckForUpdates"
-                        Margin="{StaticResource SmallTopMargin}"
                                         Command="{Binding CheckForUpdatesEventHandler}"
                                         IsEnabled="{Binding IsDownloadAllowed}"
-                        />
+                                        Visibility="{Binding Mode=OneWay, Path=IsNewVersionDownloading, Converter={StaticResource NegationConverter}}"
-                </StackPanel>
+                                        HorizontalAlignment="Right"/>
+                            </Grid>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                     <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateReadyToDownloadToVisibilityConverter}}">
+                    <muxc:InfoBar x:Uid="General_UpToDate"
-
+                                  IsClosable="False"
-                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
+                                  Severity="Success"
-                        <Run x:Uid="General_Version" />
+                                  IsOpen="{Binding IsNewVersionCheckedAndUpToDate, Mode=OneWay}"/>
-                        <Run Text="{Binding PowerToysVersion}" />
-                    </TextBlock>
-
-                    <StackPanel Orientation="Horizontal"
-                            Margin="{StaticResource SmallTopMargin}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=General_Version}">
-                        <TextBlock x:Name="General_NewVersionAvailable"
-                               x:Uid="General_NewVersionAvailable"
-                               FontWeight="SemiBold"
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                        <HyperlinkButton NavigateUri="{Binding PowerToysNewAvailableVersionLink}" Content="{Binding PowerToysNewAvailableVersion}" Margin="4,-6,0,0" IsEnabled="{Binding AutoUpdatesEnabled}"/>
-                    </StackPanel>
-
-                    <TextBlock x:Name="General_Downloading"
-                           x:Uid="General_Downloading"
-                           Visibility="{Binding Mode=OneWay, Path=IsNewVersionDownloading, Converter={StaticResource VisibleIfTrueConverter}}"
-                           Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
+                    <!-- New version available -->
+                    <muxc:InfoBar x:Uid="General_NewVersionAvailable"
+                                  IsClosable="False"
+                                  Severity="Success"
+                                  IsOpen="{Binding PowerToysUpdatingState, Mode=OneWay, Converter={StaticResource UpdateStateToBoolConverter}, ConverterParameter=ReadyToDownload}"
+                                  Message="{Binding PowerToysNewAvailableVersion, Mode=OneWay}">
+                        <muxc:InfoBar.Content>
+                            <StackPanel Spacing="16">
                                 <Button x:Uid="General_DownloadAndInstall"
-                        Margin="{StaticResource SmallTopMargin}"
                                         Command="{Binding UpdateNowButtonEventHandler}"
-                        IsEnabled="{Binding IsDownloadAllowed}"/>
+                                        IsEnabled="{Binding IsDownloadAllowed, Mode=OneWay}"
+                                        Visibility="{Binding Mode=OneWay, Path=IsNewVersionDownloading, Converter={StaticResource NegationConverter}}"/>
+                                
+                                <!-- In progress panel -->
+                                <StackPanel Visibility="{Binding Mode=OneWay, Path=IsNewVersionDownloading, Converter={StaticResource VisibleIfTrueConverter}}"
+                                            Orientation="Horizontal"
+                                            Spacing="18"
+                                            Margin="0,0,0,16">
+                                    <muxc:ProgressRing Height="24"
+                                                       Width="24"/>
+                                    <TextBlock x:Uid="General_Downloading"
+                                               FontWeight="SemiBold"
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                 </StackPanel>
-
-                <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateReadyToInstallToVisibilityConverter}}">
-                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
-                            <Run x:Uid="General_Version" />
-                            <Run Text="{Binding PowerToysVersion}"/>
-                    </TextBlock>
-
-                    <StackPanel Orientation="Horizontal"
-                            Margin="{StaticResource SmallTopMargin}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=General_Version}">
-                        <TextBlock x:Name="General_NewVersionReadyToInstall"
-                               x:Uid="General_NewVersionReadyToInstall"
-                               Style="{StaticResource SemiBoldBody}"
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                        <HyperlinkButton NavigateUri="{Binding PowerToysNewAvailableVersionLink}" Content="{Binding PowerToysNewAvailableVersion}" Margin="4,-6,0,0" IsEnabled="{Binding AutoUpdatesEnabled}"/>
                             </StackPanel>
+                        </muxc:InfoBar.Content>
+                        <muxc:InfoBar.ActionButton>
+                            <HyperlinkButton x:Uid="SeeWhatsNew"
+                                             Style="{StaticResource HyperlinkButtonStyle}"
+                                             NavigateUri="{Binding PowerToysNewAvailableVersionLink}"
+                                             HorizontalAlignment="Right" />
+                        </muxc:InfoBar.ActionButton>
+                    </muxc:InfoBar>
 
+
+                    <!-- Ready to install -->
+                    <muxc:InfoBar x:Uid="General_NewVersionReadyToInstall"
+                                  IsClosable="False"
+                                  Severity="Success"
+                                  IsOpen="{Binding PowerToysUpdatingState, Mode=OneWay, Converter={StaticResource UpdateStateToBoolConverter}, ConverterParameter=ReadyToInstall}"
+                                  Message="{Binding PowerToysNewAvailableVersion}">
+                        <muxc:InfoBar.Content>
+                            <StackPanel Spacing="16">
                                 <Button x:Uid="General_InstallNow"
-                        Margin="{StaticResource SmallTopMargin}"
                                         Command="{Binding UpdateNowButtonEventHandler}"
-                        IsEnabled="{Binding AutoUpdatesEnabled}"/>
+                                        IsEnabled="{Binding IsDownloadAllowed, Mode=OneWay}"
+                                        Margin="0,0,0,16"/>
                             </StackPanel>
+                        </muxc:InfoBar.Content>
+                        <muxc:InfoBar.ActionButton>
+                            <HyperlinkButton x:Uid="SeeWhatsNew"
+                                             Style="{StaticResource HyperlinkButtonStyle}"
+                                             NavigateUri="{Binding PowerToysNewAvailableVersionLink}"
+                                             HorizontalAlignment="Right" />
+                        </muxc:InfoBar.ActionButton>
+                    </muxc:InfoBar>
 
-                <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateCannotDownloadToVisibilityConverter}}">
 
-                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
-                        <Run x:Uid="General_Version"  />
-                        <Run Text="{Binding PowerToysVersion}"/>
-                    </TextBlock>
-                    
-                    <StackPanel Orientation="Horizontal"
-                            Margin="{StaticResource SmallTopMargin}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=General_Version}">
-                        <TextBlock x:Name="General_FailedToDownloadTheNewVersion" 
-                               x:Uid="General_FailedToDownloadTheNewVersion"
-                               Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"/>
-                        <HyperlinkButton NavigateUri="{Binding PowerToysNewAvailableVersionLink}" Content="{Binding PowerToysNewAvailableVersion}" Margin="4,-6,0,0" IsEnabled="{Binding AutoUpdatesEnabled}"/>
-                    </StackPanel>
-
-                    <TextBlock x:Name="General_Downloading_TryAgain"
-                           x:Uid="General_Downloading"
-                           Visibility="{Binding Mode=OneWay, Path=IsNewVersionDownloading, Converter={StaticResource VisibleIfTrueConverter}}"
-                           Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
+                    <!-- Install failed  -->
+                    <muxc:InfoBar x:Uid="General_FailedToDownloadTheNewVersion"
+                                  IsClosable="False"
+                                  Severity="Error"
+                                  IsOpen="{Binding PowerToysUpdatingState, Mode=OneWay, Converter={StaticResource UpdateStateToBoolConverter}, ConverterParameter=ErrorDownloading}"
+                                  Message="{Binding PowerToysNewAvailableVersion}">
+                        <muxc:InfoBar.Content>
+                            <StackPanel Spacing="16">
                                 <Button x:Uid="General_TryAgainToDownloadAndInstall"
-                        Margin="{StaticResource SmallTopMargin}"
                                     Command="{Binding UpdateNowButtonEventHandler}"
-                        IsEnabled="{Binding IsDownloadAllowed}"/>
+                                    IsEnabled="{Binding IsDownloadAllowed, Mode=OneWay}"
+                                    Visibility="{Binding Mode=OneWay, Path=IsNewVersionDownloading, Converter={StaticResource NegationConverter}}"/>
+                                
+                                <!-- In progress panel -->
+                                <StackPanel Visibility="{Binding Mode=OneWay, Path=IsNewVersionDownloading, Converter={StaticResource VisibleIfTrueConverter}}"
+                                        Orientation="Horizontal"
+                                        Spacing="18"
+                                        Margin="0,0,0,16">
+                                    <muxc:ProgressRing Height="24"
+                                                   Width="24"/>
+                                    <TextBlock x:Uid="General_Downloading"
+                                               FontWeight="SemiBold"
+                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                 </StackPanel>
+                            </StackPanel>
+                        </muxc:InfoBar.Content>
+                        <muxc:InfoBar.ActionButton>
+                            <HyperlinkButton x:Uid="SeeWhatsNew"
+                                                 NavigateUri="{Binding PowerToysNewAvailableVersionLink}"
+                                                 HorizontalAlignment="Right"
+                                             Style="{StaticResource HyperlinkButtonStyle}"/>
+                        </muxc:InfoBar.ActionButton>
+                    </muxc:InfoBar>
 
-                
+                    <controls:Setting x:Uid="GeneralPage_ToggleSwitch_AutoDownloadUpdates"
-                
+                                      Margin="0,-6,0,0"
-                <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_AutoDownloadUpdates" 
+                                      Visibility="{Binding Mode=OneWay, Path=IsAdmin, Converter={StaticResource VisibleIfTrueConverter}}">
-                          Margin="{StaticResource MediumTopMargin}"
+                        <ToggleSwitch  IsOn="{Binding Mode=TwoWay, Path=AutoDownloadUpdates}"
-                          Visibility="{Binding Mode=TwoWay, Path=IsAdmin, Converter={StaticResource VisibleIfTrueConverter}}"
-                          IsOn="{Binding Mode=TwoWay, Path=AutoDownloadUpdates}"
                                        IsEnabled="{Binding AutoUpdatesEnabled}" />
-            </StackPanel>
+                    </controls:Setting>
-        </controls:SettingsPageControl.ModuleContent>
+                    </controls:SettingsGroup>
-        <!-- 
-                <HyperlinkButton Click="OobeButton_Click">
-                    <TextBlock x:Uid="Oobe_Button"/>
-                </HyperlinkButton> -->
-        <!-- Side panel -->
 
-        <controls:SettingsPageControl.ModuleLinks>
+
-            <controls:SidePanelLink x:Uid="GeneralPage_Documentation" Link="https://aka.ms/PowerToysOverview"/>
+
-            <controls:SidePanelLink x:Uid="General_Repository" Link="https://aka.ms/powertoys"/>
+
-            <controls:SidePanelLink x:Uid="GeneralPage_ReportAbug" Link="https://aka.ms/powerToysReportBug"/>
+
-            <controls:SidePanelLink x:Uid="GeneralPage_RequestAFeature_URL" Link="https://aka.ms/powerToysRequestFeature"/>
+                <controls:SettingsGroup x:Uid="Admin_Mode">
-            <controls:SidePanelLink x:Uid="GeneralPage_PrivacyStatement_URL" Link="http://go.microsoft.com/fwlink/?LinkId=521839"/>
+                    <controls:SettingExpander IsExpanded="True">
-            <controls:SidePanelLink x:Uid="OpenSource_Notice" Link="https://github.com/microsoft/PowerToys/blob/master/NOTICE.md"/>
+                        <controls:SettingExpander.Header>
-        </controls:SettingsPageControl.ModuleLinks>
+                            <controls:Setting x:Uid="Admin_Mode" Icon="&#xE1A7;" Description="{Binding Mode=OneWay, Path=RunningAsText}" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <controls:Setting.ActionContent>
+                                    <Button x:Uid="GeneralPage_RestartAsAdmin_Button"
+                                            Command = "{Binding RestartElevatedButtonEventHandler}"
+                                            IsEnabled="{Binding Mode=OneWay, Path=IsAdminButtonEnabled}"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel Orientation="Vertical">
+                                <controls:Setting x:Uid="GeneralSettings_AlwaysRunAsAdminText" IsEnabled="{Binding Mode=OneWay, Path=IsElevated}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.Description>
+                                        <HyperlinkButton NavigateUri="https://aka.ms/powertoysDetectedElevatedHelp"
+                                                         x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link"/>
+                                    </controls:Setting.Description>
+                                    <controls:Setting.ActionContent>
+                                        <ToggleSwitch IsOn="{Binding Mode=TwoWay, Path=RunElevated}"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <muxc:InfoBar x:Uid="General_RunAsAdminRequired" 
+                                          Severity="Warning"
+                                          IsClosable="False"
+                                          IsOpen="{Binding Mode=OneWay, Path=IsElevated, Converter={StaticResource NegationConverter}}"/>
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
+
+
+
+                <controls:SettingsGroup IsEnabled="True" x:Uid="ShortcutGuide_Appearance_Behavior">
+                    <controls:Setting x:Uid="ColorModeHeader" Icon="&#xE771;">
+                                <controls:Setting.Description>
+                                    <HyperlinkButton Click="OpenColorsSettings_Click"
+                                                     x:Uid="Windows_Color_Settings"/>
+                                </controls:Setting.Description>
+                                <controls:Setting.ActionContent>
+                                    <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}" MinWidth="{StaticResource SettingActionControlMinWidth}">
+                                        <ComboBoxItem x:Uid="Radio_Theme_Dark"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Light"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Default"/>
+                                    </ComboBox>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                    <controls:Setting x:Uid="GeneralPage_RunAtStartUp">
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{Binding Mode=TwoWay, Path=Startup}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
+            </StackPanel>
+               
+        </controls:SettingsPageControl.ModuleContent>
+        <controls:SettingsPageControl.PrimaryLinks>
+            <controls:PageLink x:Uid="GeneralPage_Documentation" Link="https://aka.ms/PowerToysOverview"/>
+            <controls:PageLink x:Uid="General_Repository" Link="https://aka.ms/powertoys"/>
+            <controls:PageLink x:Uid="GeneralPage_ReportAbug" Link="https://aka.ms/powerToysReportBug"/>
+            <controls:PageLink x:Uid="GeneralPage_RequestAFeature_URL" Link="https://aka.ms/powerToysRequestFeature"/>
+        </controls:SettingsPageControl.PrimaryLinks>
+        <controls:SettingsPageControl.SecondaryLinks>
+            <controls:PageLink x:Uid="GeneralPage_PrivacyStatement_URL" Link="http://go.microsoft.com/fwlink/?LinkId=521839"/>
+            <controls:PageLink x:Uid="OpenSource_Notice" Link="https://github.com/microsoft/PowerToys/blob/master/NOTICE.md"/>
+        </controls:SettingsPageControl.SecondaryLinks>
     </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml.cs

@@ -85,10 +85,5 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         {
             Helpers.StartProcessHelper.Start(Helpers.StartProcessHelper.ColorsSettings);
         }
-
-        private void OobeButton_Click(object sender, RoutedEventArgs e)
-        {
-            ShellPage.OpenOobeWindowCallback();
-        }
     }
 }

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml

@@ -10,64 +10,81 @@
     xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
     xmlns:toolkitconverters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main" x:Name="RootPage">
-
     <Page.Resources>
         <converters:ImageResizerFitToStringConverter x:Key="ImageResizerFitToStringConverter" />
         <converters:ImageResizerUnitToStringConverter x:Key="ImageResizerUnitToStringConverter" />
         <toolkitconverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" TrueValue="Visible" FalseValue="Collapsed" />
     </Page.Resources>
-    <controls:SettingsPageControl x:Uid="About_ImageResizer"
+    <controls:SettingsPageControl x:Uid="ImageResizer"
+                                    
                                   ModuleImageSource="ms-appx:///Assets/Modules/ImageResizer.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_ImageResizer">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel>
 
-                <ToggleSwitch x:Uid="ImageResizer_EnableToggle"
+                <controls:Setting x:Uid="ImageResizer_EnableToggle">
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsImageResizer.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
+
+
+                <controls:SettingsGroup x:Uid="ImageResizer_CustomSizes" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:Setting x:Uid="ImageResizer_CustomSizes" Icon="&#xE2B2;">
+                        <controls:Setting.ActionContent>
+                            <Button x:Uid="ImageResizer_AddSizeButton" Click="AddSizeButton_Click" Style="{ThemeResource AccentButtonStyle}" />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <TextBlock x:Uid="ImageResizer_CustomSizes"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
                     <ListView x:Name="ImagesSizesListView" 
                       x:Uid="ImagesSizesListView"
                       ItemsSource="{x:Bind ViewModel.Sizes, Mode=TwoWay}"
-                      Padding="-12,0,0,0"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       SelectionMode="None"
                       ScrollViewer.HorizontalScrollMode="Enabled"
                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
                       ScrollViewer.IsHorizontalRailEnabled="True"
                       ContainerContentChanging="ImagesSizesListView_ContainerContentChanging">
-
                         <ListView.ItemTemplate>
                         <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize">
-                            <Grid Padding="0,12,12,12" Width="420" AutomationProperties.Name="{x:Bind Name, Mode=OneWay}">
+                            <Grid AutomationProperties.Name="{x:Bind Name, Mode=OneWay}"
+                                  HorizontalAlignment="Stretch"
+                                  Background="{ThemeResource CardBackgroundBrush}"
+                                  BorderThickness="{ThemeResource CardBorderThickness}"
+                                  BorderBrush="{ThemeResource CardBorderBrush}"
+                                  CornerRadius="{ThemeResource ControlCornerRadius}"
+                                  Padding="0,0,16,0"
+                                  MinHeight="68">
+
+
                                 <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="40" />
+                                    <ColumnDefinition Width="56" />
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="52" />
                                 </Grid.ColumnDefinitions>
                             
-                                <FontIcon Glyph="&#xE73F;" FontSize="18" Margin="0,8,0,0" VerticalAlignment="Top" Grid.RowSpan="2" Foreground="{StaticResource SystemColorControlAccentBrush}" />
+                                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Grid.Column="1" Margin="0,0,16,0">
-                                <StackPanel Orientation="Vertical" Grid.Column="1" Margin="0,0,16,0">
+                                        <TextBlock Text="{x:Bind Name, Mode=OneWay}" FontWeight="SemiBold"
-                                    <TextBlock Text="{x:Bind Name, Mode=OneWay}" FontSize="18" />
+                                       FontSize="16"/>
-                                    <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="0,4,0,0" >
+                                    <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="0,4,0,0">
-                                        <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
+                                        <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Style="{ThemeResource SecondaryTextStyle}" Margin="0,0,4,0"/>
-                                        <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" Margin="0,0,4,0"/>
+                                        <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" Margin="0,0,4,0"  Style="{ThemeResource SecondaryTextStyle}"/>
-                                        <TextBlock Text="&#xE947;" FontFamily="Segoe MDL2 Assets" FontSize="11" AutomationProperties.AccessibilityView="Raw" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,5,4,0"/>
+                                        <TextBlock Text="&#xE947;" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="10" AutomationProperties.AccessibilityView="Raw" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,5,4,0"  Style="{ThemeResource SecondaryTextStyle}"/>
-                                        <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold" Margin="0,0,4,0"/>
+                                        <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold" Margin="0,0,4,0"  Style="{ThemeResource SecondaryTextStyle}"/>
-                                        <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
+                                        <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"  Style="{ThemeResource SecondaryTextStyle}"/>
                                     </StackPanel>
                                 </StackPanel>
-                                <StackPanel HorizontalAlignment="Right" Grid.Column="2" Orientation="Horizontal">
+
+                                <StackPanel Spacing="8" HorizontalAlignment="Right" Grid.Column="2" Orientation="Horizontal">
                                     <Button 
                                         x:Uid="EditButton"
                                         Background="Transparent"
                                         FontFamily="Segoe MDL2 Assets"
-                                        Width="36"
+                                        Width="40"
                                         Height="36"
                                         Content="&#xE70F;">
                                         <ToolTipService.ToolTip>
@@ -127,7 +144,7 @@
                                         x:Uid="RemoveButton"
                                         Background="Transparent"
                                         FontFamily="Segoe MDL2 Assets"
-                                        Width="36"
+                                        Width="40"
                                         Height="36"
                                         Content="&#xE74D;"
                                         Click="DeleteCustomSize"
@@ -143,29 +160,14 @@
                         </DataTemplate>
                     </ListView.ItemTemplate>
                 </ListView>
+                </controls:SettingsGroup>
 
 
-                <StackPanel Orientation="Horizontal">
+                <controls:SettingsGroup x:Uid="Encoding" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                    <AppBarButton Icon="Add"
+                    <controls:Setting x:Uid="ImageResizer_FallBackEncoderText">
-                              x:Name="AddSizeButton"
+                        <controls:Setting.ActionContent>
-                              Style="{StaticResource AddItemAppBarButtonStyle}"
+                            <ComboBox SelectedIndex="{x:Bind Path=ViewModel.Encoder, Mode=TwoWay}"
-                              IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" 
+                                      MinWidth="{StaticResource SettingActionControlMinWidth}">
-                              x:Uid="ImageResizer_AddSizeButton"
-                              Click="AddSizeButton_Click"
-                              Margin="{StaticResource AddItemButtonMargin}"
-                              
-                          />
-                </StackPanel>
-
-                <TextBlock x:Uid="Encoding"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <ComboBox x:Uid="ImageResizer_FallBackEncoderText"
-                          SelectedIndex="{x:Bind Path=ViewModel.Encoder, Mode=TwoWay}"
-                          MinWidth="240"
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_PNG" />
                                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_BMP" />
                                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_JPEG" />
@@ -173,34 +175,35 @@
                                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_WMPhoto" />
                                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_GIF" />
                             </ComboBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <muxc:NumberBox x:Uid="ImageResizer_Encoding"
+                    <controls:Setting x:Uid="ImageResizer_Encoding">
+                        <controls:Setting.ActionContent>
+                            <muxc:NumberBox
                             Minimum="0"
                             Maximum="100"
                             Value="{x:Bind Mode=TwoWay, Path=ViewModel.JPEGQualityLevel}"
-                            MinWidth="240"
+                            MinWidth="{StaticResource SettingActionControlMinWidth}"
-                            Margin="{StaticResource SmallTopMargin}"
                             SpinButtonPlacementMode="Compact"
-                            HorizontalAlignment="Left"
+                            HorizontalAlignment="Right"
-                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=ImageResizer_Encoding}"
                             />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <ComboBox x:Uid="ImageResizer_PNGInterlacing"
+                    <controls:Setting x:Uid="ImageResizer_PNGInterlacing">
-                          SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.PngInterlaceOption}"
+                        <controls:Setting.ActionContent>
-                          MinWidth="240"
+                            <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.PngInterlaceOption}" MinWidth="{StaticResource SettingActionControlMinWidth}">
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                                 <ComboBoxItem x:Uid="Default"/>
                                 <ComboBoxItem x:Uid="On"/>
                                 <ComboBoxItem x:Uid="Off"/>
                             </ComboBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <ComboBox x:Uid="ImageResizer_TIFFCompression"
+                    <controls:Setting x:Uid="ImageResizer_TIFFCompression">
-                          SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.TiffCompressOption}"
+                        <controls:Setting.ActionContent>
-                          MinWidth="240"
+                            <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.TiffCompressOption}" MinWidth="{StaticResource SettingActionControlMinWidth}">
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Default"/>
                                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_None"/>
                                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT3"/>
@@ -209,32 +212,25 @@
                                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_RLE"/>
                                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Zip"/>
                             </ComboBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <TextBlock x:Uid="File"
+                </controls:SettingsGroup>
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
+
+                <controls:SettingsGroup x:Uid="File" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="ImageResizer_FilenameFormatHeader" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <controls:Setting.ActionContent>
+                                    <StackPanel Spacing="4" Orientation="Horizontal">
                                         <TextBox Text="{x:Bind Mode=TwoWay, Path=ViewModel.FileName}"
-                      HorizontalAlignment="Left"
+                                         HorizontalAlignment="Right"
-                      MinWidth="240"
+                                         MinWidth="{StaticResource SettingActionControlMinWidth}"
-                      x:Uid="ImageResizer_FilenameFormatPlaceholder"
+                                         x:Uid="ImageResizer_FilenameFormatPlaceholder"/>
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                                        <Button Content="&#xE946;" FontFamily="{ThemeResource SymbolThemeFontFamily}">
-                      Margin="{StaticResource SmallTopMargin}"
+                                            <Button.Flyout>
-                      AutomationProperties.LabeledBy="{Binding ElementName=ImageResizer_FilenameFormatHeader}"
+                                                <Flyout>
-                      AutomationProperties.HelpText="{Binding ElementName=FileFormatTextBlock, Path=Text}"
-                     >
-                    <TextBox.Header>
-                        <StackPanel Orientation="Horizontal">
-                            <TextBlock Name="ImageResizer_FilenameFormatHeader"
-                            x:Uid="ImageResizer_FilenameFormatHeader"
-                            Margin="0,0,0,0"
-                            Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                            <TextBlock Text="&#xE946;" AutomationProperties.AccessibilityView="Raw"
-                           FontFamily="Segoe MDL2 Assets"
-                           Margin="4,4,0,0"/>
-                        </StackPanel>
-                    </TextBox.Header>
-                    <ToolTipService.ToolTip>
                                                     <TextBlock x:Name="FileFormatTextBlock">
                                                 <Run x:Uid="ImageResizer_FileFormatDescription"/>
                                                 <LineBreak/>
@@ -263,23 +259,34 @@
                                                 <Run Text=" - "/>
                                                 <Run x:Uid="ImageResizer_Formatting_ActualHeight"/>
                                                     </TextBlock>
-                    </ToolTipService.ToolTip>
+                                                </Flyout>
-                </TextBox>
+                                            </Button.Flyout>
+                                        </Button>
+                                    </StackPanel>
+
+                                </controls:Setting.ActionContent>
+
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
 
                             <CheckBox x:Uid="ImageResizer_UseOriginalDate"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.KeepDateModified}"
-                      Margin="{StaticResource SmallTopMargin}"
+                                      Margin="16,8,0,8" />
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.KeepDateModified}"/>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
+
+
             </StackPanel>
 
         </controls:SettingsPageControl.ModuleContent>
 
-        <controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ImageResizer"/>
+            <controls:PageLink x:Uid="LearnMore_ImageResizer" Link="https://aka.ms/PowerToysOverview_ImageResizer"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-        </controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.SecondaryLinks>
-        <controls:SettingsPageControl.AttributionLinks>
+            <controls:PageLink Text="Brice Lambson's ImageResizer" Link="https://github.com/bricelam/ImageResizer/"/>
-            <controls:SidePanelLink Label="Brice Lambson's ImageResizer" Link="https://github.com/bricelam/ImageResizer/"/>
+        </controls:SettingsPageControl.SecondaryLinks>
-        </controls:SettingsPageControl.AttributionLinks>
     </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml

@@ -5,11 +5,9 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Library"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
     <Page.Resources>
@@ -17,296 +15,205 @@
         <Style TargetType="ListViewItem" x:Name="KeysListViewContainerStyle">
             <Setter Property="IsTabStop" Value="False"/>
         </Style>
-        <DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
+
+
+        <DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
+            <Border Background="{ThemeResource ButtonBackground}"
+                    BorderBrush="{ThemeResource ButtonBorderBrush}"
+                    BorderThickness="{ThemeResource ButtonBorderThemeThickness}"
+                    CornerRadius="{ThemeResource ControlCornerRadius}"
+                    Padding="{ThemeResource ButtonPadding}"
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Left">
+                <TextBlock FontWeight="SemiBold"
+                           Foreground="{ThemeResource ButtonForeground}"
+                           VerticalAlignment="Center"
+                           TextAlignment="Center"
+                           FontSize="12"
+                           Text="{Binding}" />
+            </Border>
+        </DataTemplate>
+
+        <DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
+            <Border Background="{ThemeResource ButtonBackground}"
+                    BorderBrush="{ThemeResource AccentButtonBackground}"
+                    BorderThickness="{ThemeResource ButtonBorderThemeThickness}"
+                    CornerRadius="{ThemeResource ControlCornerRadius}"
+                    Padding="{ThemeResource ButtonPadding}"
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Left">
+                <TextBlock FontWeight="SemiBold"
+                           Foreground="{ThemeResource AccentButtonBackground}"
+                           VerticalAlignment="Center"
+                           TextAlignment="Center"
+                           FontSize="12"
+                           Text="{Binding}" />
+            </Border>
+        </DataTemplate>
+
+        <!--<DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
             <StackPanel 
                 Name="KeyboardManager_RemappedKeysListItem" 
                 x:Uid="KeyboardManager_RemappedKeysListItem"
                 Orientation="Horizontal"
                 Height="56">
-                <ItemsControl
+            
-                    ItemsSource="{x:Bind GetMappedOriginalKeys()}"
-                    IsTabStop="False">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemBaseLowColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="1"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <ItemsControl
-                    Name="KeyboardManager_RemappedTo"
-                    x:Uid="KeyboardManager_RemappedTo"
-                    ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
-                    Grid.Column="2"
-                    IsTabStop="False">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemAccentColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    Foreground="White"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
             </StackPanel>
-        </DataTemplate>
+        </DataTemplate>-->
-        <DataTemplate x:Name="ShortcutKeysListViewTemplate" x:DataType="Lib:AppSpecificKeysDataModel">
+        <!--<DataTemplate x:Name="ShortcutKeysListViewTemplate" x:DataType="Lib:AppSpecificKeysDataModel">
             <StackPanel 
                 Name="KeyboardManager_RemappedShortcutsListItem" 
                 x:Uid="KeyboardManager_RemappedShortcutsListItem"
                 Orientation="Horizontal"
                 Height="56">
-                <ItemsControl
+              
-                    ItemsSource="{x:Bind GetMappedOriginalKeys()}"
+        </DataTemplate>-->
-                    IsTabStop="False">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemBaseLowColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="1"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <ItemsControl Name="KeyboardManager_ShortcutRemappedTo"
-                    x:Uid="KeyboardManager_ShortcutRemappedTo"
-                    ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
-                    Grid.Column="2"
-                    IsTabStop="False">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemAccentColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    Foreground="White"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="3"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <Border
-                    Name="KeyboardManager_TargetApp"
-                    x:Uid="KeyboardManager_TargetApp"
-                    Background="{ThemeResource SystemAccentColor}"
-                    Grid.Column="4"
-                    CornerRadius="4"
-                    Padding="14,0,14,0"
-                    Margin="5,0,5,0"
-                    Height="36"
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Left">
-                    <TextBlock
-                        FontWeight="SemiBold"
-                        VerticalAlignment="Center"
-                        TextAlignment="Center"
-                        Foreground="White"
-                        FontSize="12"
-                        Text="{x:Bind TargetApp}" />
-                </Border>
-            </StackPanel>
-        </DataTemplate>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_KeyboardManager"
+    <controls:SettingsPageControl x:Uid="KeyboardManager"
                                   ModuleImageSource="ms-appx:///Assets/Modules/KBM.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_KeyboardManage">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
-                <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
-                          IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"/>
 
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys" Margin="{StaticResource XSmallTopMargin}">
+                <controls:Setting x:Uid="KeyboardManager_EnableToggle">
-                    <TextBlock x:Uid="KBM_KeysCannotBeRemapped" />
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsKeyboardManager.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}" />
+                    </controls:Setting.ActionContent>
+                    <controls:Setting.Description>
+                        <HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys">
+                            <TextBlock x:Uid="KBM_KeysCannotBeRemapped" FontWeight="SemiBold" />
                         </HyperlinkButton>
+                    </controls:Setting.Description>
+                </controls:Setting>
 
-                <!--<TextBlock x:Uid="KeyboardManager_ConfigHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-            <TextBlock x:Uid="KeyboardManager_ProfileDescription"
+                <controls:SettingsGroup x:Uid="KeyboardManager_Keys" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.Enabled}">
-                       Margin="{StaticResource SmallTopMargin}"/>
 
-            <ComboBox SelectedIndex="1" MinWidth="160"
+                    <Button x:Uid="KeyboardManager_RemapKeyboardButton_Accessible" Style="{StaticResource SettingButtonStyle}" Command="{Binding Path=RemapKeyboardCommand}">
-                      Margin="{StaticResource SmallTopMargin}">
+                        <controls:Setting x:Uid="KeyboardManager_RemapKeyboardButton" Style="{StaticResource ExpanderHeaderSettingStyle}" Icon="&#xE92E;">
-                <ComboBoxItem Content="Config-1"/>
+                            <controls:Setting.ActionContent>
-                <ComboBoxItem Content="Config-2"/>
+                                <FontIcon Glyph="&#xE2B4;" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
-                <ComboBoxItem Content="Config-3"/>
+                            </controls:Setting.ActionContent>
-            </ComboBox>-->
+                        </controls:Setting>
-
+                    </Button>
-                <TextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <TextBlock x:Uid="KeyboardManager_RemapKeyboardSubtitle"
-                       Margin="{StaticResource SmallTopMargin}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <Button x:Uid="KeyboardManager_RemapKeyboardButton"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Command="{Binding Path=RemapKeyboardCommand}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
 
                     <ListView x:Name="RemapKeysList"
                               x:Uid="RemapKeysList"
-                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
                               ItemsSource="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay}"
-                      ItemTemplate="{StaticResource KeysListViewTemplate}"
-                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                      BorderThickness="1" 
-                      CornerRadius="4"
-                      MinWidth="350"
-                      MaxHeight="200"
-                      Margin="{StaticResource SmallTopBottomMargin}"
-                      HorizontalAlignment="Left"
                               SelectionMode="None"
                               IsSwipeEnabled="False"
-                      Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
+                              Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}">
-                      IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                        <ListView.ItemTemplate>
-                      ItemContainerStyle="{StaticResource KeysListViewContainerStyle}"
+                            <DataTemplate x:DataType="Lib:KeysDataModel">
-                      />
+                                <StackPanel Orientation="Horizontal"
+                                            HorizontalAlignment="Stretch"
+                                            Background="{ThemeResource CardBackgroundBrush}"
+                                            BorderThickness="{ThemeResource CardBorderThickness}"
+                                            BorderBrush="{ThemeResource CardBorderBrush}"
+                                            CornerRadius="{ThemeResource ControlCornerRadius}"
+                                            MinHeight="68">
                                            
-                <!--<AppBarButton x:Uid="KeyboardManager_RemapKeyboardButton"
+                                    <ItemsControl Margin="52,0,0,0"
-                    Icon="Add"
+                                                  ItemsSource="{x:Bind GetMappedOriginalKeys()}"
-                    Width="370"
+                                                  ItemTemplate="{StaticResource OriginalKeyTemplate}"
-                    Style="{StaticResource AddItemAppBarButtonStyle}"
+                                                  IsTabStop="False">
-                    Command="{Binding Path=RemapKeyboardCommand}"
+                                        <ItemsControl.ItemsPanel>
-                    Margin="{StaticResource AddItemButtonMargin}"
+                                            <ItemsPanelTemplate>
-                    HorizontalAlignment="Left"
+                                                <StackPanel Orientation="Horizontal"/>
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>-->
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
+                                    <TextBlock Text="to"
+                                               Style="{StaticResource SecondaryTextStyle}"
+                                               VerticalAlignment="Center" 
+                                               Margin="8,0,8,0"/>
 
-                <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
+                                    <ItemsControl Name="KeyboardManager_RemappedTo"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                                                  x:Uid="KeyboardManager_RemappedTo"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                                                  ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
+                                                  ItemTemplate="{StaticResource RemappedKeyTemplate}"
+                                                  IsTabStop="False">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </controls:SettingsGroup>
 
-                <TextBlock x:Uid="KeyboardManager_RemapShortcutsSubtitle"
-                       Margin="{StaticResource SmallTopMargin}"
-                       TextWrapping="WrapWholeWords"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-                <Button x:Uid="KeyboardManager_RemapShortcutsButton"
+                <controls:SettingsGroup x:Uid="KeyboardManager_Shortcuts"   IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.Enabled}">
-                    Margin="{StaticResource SmallTopMargin}"
+                    <Button x:Uid="KeyboardManager_RemapShortcutsButton_Accessible" Style="{StaticResource SettingButtonStyle}" Command="{Binding Path=EditShortcutCommand}">
-                    Style="{StaticResource AccentButtonStyle}"
+                        <controls:Setting x:Uid="KeyboardManager_RemapShortcutsButton" Style="{StaticResource ExpanderHeaderSettingStyle}" Icon="&#xE92E;">
-                    Command="{Binding Path=EditShortcutCommand}"
+                            <controls:Setting.ActionContent>
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                                <FontIcon Glyph="&#xE2B4;" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
-                    />
+                            </controls:Setting.ActionContent>
+                        </controls:Setting>
+                    </Button>
                     
                     <ListView x:Name="RemapShortcutsList"
                               x:Uid="RemapShortcutsList"
-                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
                               ItemsSource="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay}"
-                      ItemTemplate="{StaticResource ShortcutKeysListViewTemplate}"
-                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                      BorderThickness="1" 
-                      CornerRadius="4"
-                      MinWidth="350"
-                      MaxHeight="200"
-                      Margin="{StaticResource SmallTopBottomMargin}"
-                      HorizontalAlignment="Left"
                               SelectionMode="None"
                               IsSwipeEnabled="False"
-                      Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
+                              Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}">
-                      IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                        <ListView.ItemTemplate>
-                      ScrollViewer.HorizontalScrollMode="Enabled"
+                            <DataTemplate x:DataType="Lib:AppSpecificKeysDataModel">
-                      ScrollViewer.HorizontalScrollBarVisibility="Visible"
+                                <StackPanel Orientation="Horizontal"
-                      ScrollViewer.IsHorizontalRailEnabled="True"
+                                            HorizontalAlignment="Stretch"
-                      ItemContainerStyle="{StaticResource KeysListViewContainerStyle}"
+                                            Background="{ThemeResource CardBackgroundBrush}"
-                      />
+                                            BorderThickness="{ThemeResource CardBorderThickness}"
+                                            BorderBrush="{ThemeResource CardBorderBrush}"
+                                            CornerRadius="{ThemeResource ControlCornerRadius}"
+                                            MinHeight="68">
 
-                <!--<AppBarButton x:Uid="KeyboardManager_RemapShortcutsButton"
+                                    <ItemsControl Margin="52,0,0,0"
-                    Icon="Add"
+                                                  ItemsSource="{x:Bind GetMappedOriginalKeys()}"
-                    Width="370"
+                                                  ItemTemplate="{StaticResource OriginalKeyTemplate}"
-                    Style="{StaticResource AddItemAppBarButtonStyle}"
+                                                  IsTabStop="False">
-                    Command="{Binding Path=EditShortcutCommand}"
+                                        <ItemsControl.ItemsPanel>
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                                            <ItemsPanelTemplate>
-                    Margin="{StaticResource AddItemButtonMargin}"
+                                                <StackPanel Orientation="Horizontal" Spacing="4"/>
-                    HorizontalAlignment="Left"
+                                            </ItemsPanelTemplate>
-                    />-->
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
+                                    <TextBlock x:Uid="To"
+                                               Style="{StaticResource SecondaryTextStyle}"
+                                               VerticalAlignment="Center" 
+                                               Margin="8,0,8,0"/>
+
+                                    <ItemsControl Name="KeyboardManager_RemappedTo"
+                                                  x:Uid="KeyboardManager_RemappedTo"
+                                                  ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
+                                                  ItemTemplate="{StaticResource RemappedKeyTemplate}"
+                                                  IsTabStop="False">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="4"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
+
+                                    <TextBlock Margin="8,0,0,0" Style="{StaticResource SecondaryTextStyle}" VerticalAlignment="Center">
+                                        <Run Text="{x:Bind TargetApp}" FontWeight="SemiBold"/>
+                                    </TextBlock>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
-        <controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_KeyboardManager"/>
+            <controls:PageLink x:Uid="LearnMore_KBM" Link="https://aka.ms/PowerToysOverview_KeyboardManager"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-        </controls:SettingsPageControl.ModuleLinks>
     </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml

@@ -11,7 +11,6 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
     
     <Page.Resources>
@@ -19,26 +18,48 @@
         <converters:BoolNegationConverter x:Key="BoolNegationConverter"/>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_PowerLauncher"
+    <controls:SettingsPageControl x:Uid="PowerLauncher"
                                   ModuleImageSource="ms-appx:///Assets/Modules/PowerLauncher.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_PowerToysRun">
         <controls:SettingsPageControl.ModuleContent>
 
             <StackPanel Orientation="Vertical">
-                <ToggleSwitch x:Uid="PowerLauncher_EnablePowerLauncher" 
+                <controls:Setting x:Uid="PowerLauncher_EnablePowerLauncher">
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnablePowerLauncher}" />
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsPowerToysRun.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind ViewModel.EnablePowerLauncher, Mode=TwoWay}" />
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-            <TextBlock x:Uid="Shortcuts"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <controls:HotkeySettingsControl x:Uid="PowerLauncher_OpenPowerLauncher"
+                <controls:SettingsGroup x:Uid="Shortcut" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}">
-                                                  HorizontalAlignment="Left"
+                    <controls:SettingExpander IsExpanded="True">
-                                                  MinWidth="240"
+                        <controls:SettingExpander.Header>
-                                                  Margin="{StaticResource SmallTopMargin}"
+                            <controls:Setting x:Uid="Activation_Shortcut" Icon="&#xEDA7;" Style="{StaticResource ExpanderHeaderSettingStyle}">
-                                                  HotkeySettings="{x:Bind Path=ViewModel.OpenPowerLauncher, Mode=TwoWay}"
+                                <controls:Setting.Description>
+                                    <TextBlock>
+                                            <Run x:Uid="ShortcutWarningLabel"/>
+                                            <Run Text="Win, Ctrl, Alt, Shift"/>
+                                    </TextBlock>
+                                </controls:Setting.Description>
+                                <controls:Setting.ActionContent>
+                                    <controls:HotkeySettingsControl HotkeySettings="{x:Bind Path=ViewModel.OpenPowerLauncher, Mode=TwoWay}"
                                                                     Keys="Win, Ctrl, Alt, Shift"
-                                                  Enabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
+                                                                    MinWidth="{StaticResource SettingActionControlMinWidth}"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel>
+                                <CheckBox x:Uid="PowerLauncher_IgnoreHotkeysInFullScreen" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.IgnoreHotkeysInFullScreen}" Margin="{StaticResource ExpanderSettingMargin}" />
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
+
+
                 <!--<Custom:HotkeySettingsControl x:Uid="PowerLauncher_OpenFileLocation"
                                           HorizontalAlignment="Left"
                                           Margin="{StaticResource SmallTopMargin}"
@@ -72,15 +93,25 @@
                       IsEnabled="False"
                       />-->
 
-            <CheckBox x:Uid="PowerLauncher_IgnoreHotkeysInFullScreen"
-                      Margin="{StaticResource SmallTopMargin}"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.IgnoreHotkeysInFullScreen}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-                      />
 
-            <TextBlock x:Uid="PowerLauncher_SearchResults"
+
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                <controls:SettingsGroup x:Uid="PowerLauncher_SearchResults" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}">
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="PowerLauncher_MaximumNumberOfResults" Icon="&#xE721;" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <controls:Setting.ActionContent>
+                                    <muxc:NumberBox Value="{Binding Mode=TwoWay, Path=MaximumNumberOfResults}"
+                                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                    SpinButtonPlacementMode="Compact"
+                                                    Minimum="1"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <CheckBox x:Uid="PowerLauncher_ClearInputOnLaunch" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ClearInputOnLaunch}" Margin="{StaticResource ExpanderSettingMargin}" />
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
 
                 <!--<ComboBox x:Uid="PowerLauncher_SearchResultPreference"
                       MinWidth="320"
@@ -102,251 +133,138 @@
                       IsEnabled="False"
                       />-->
 
-            <muxc:NumberBox x:Uid="PowerLauncher_MaximumNumberOfResults"
+                <controls:SettingsGroup x:Uid="Run_PositionAppearance_GroupSettings" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}">
-                            Value="{Binding Mode=TwoWay, Path=MaximumNumberOfResults}"
+                    <controls:Setting x:Uid="Run_PositionHeader" Icon="&#xE18C;">
-                            MinWidth="240"
+                        <controls:Setting.ActionContent>
-                            SpinButtonPlacementMode="Compact"
+                            <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.MonitorPositionIndex}" MinWidth="{StaticResource SettingActionControlMinWidth}">
-                            HorizontalAlignment="Left"
+                                <ComboBoxItem x:Uid="Run_Radio_Position_Cursor"/>
-                            Minimum="1"
+                                <ComboBoxItem x:Uid="Run_Radio_Position_Primary_Monitor"/>
-                            Margin="{StaticResource SmallTopMargin}"
+                                <ComboBoxItem x:Uid="Run_Radio_Position_Focus"/>
-                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
+                            </ComboBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-            <CheckBox x:Uid="PowerLauncher_ClearInputOnLaunch"
+                    <controls:Setting x:Uid="ColorModeHeader" Icon="&#xE771;">
-                      Margin="{StaticResource SmallTopMargin}"
+                        <controls:Setting.Description>
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ClearInputOnLaunch}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-            />
-
-            <TextBlock x:Uid="Run_PositionAppearance_GroupSettings"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher, Converter={StaticResource ModuleEnabledToOpacityConverter}}" />
-
-            <TextBlock x:Uid="Run_PositionHeader"
-                       x:Name="RadioButtons_Name_Position"
-                       Margin="{StaticResource SmallTopMargin}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher, Converter={StaticResource ModuleEnabledToOpacityConverter}}" />
-
-            <StackPanel AutomationProperties.LabeledBy="{Binding ElementName=RadioButtons_Name_Position}">
-       
-            <RadioButton x:Uid="Run_Radio_Position_Primary_Monitor"
-                         GroupName="Run_Position"
-                         IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.IsPrimaryMonitorPositionRadioButtonChecked}"
-                         IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
-
-            <RadioButton x:Uid="Run_Radio_Position_Cursor"
-                         GroupName="Run_Position"
-                         IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.IsCursorPositionRadioButtonChecked}"
-                         IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
-
-            <RadioButton x:Uid="Run_Radio_Position_Focus"
-                         GroupName="Run_Position"
-                         IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.IsFocusPositionRadioButtonChecked}"
-                         IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
-
-            </StackPanel>
-
-            <!-- We cannot navigate to all the radio buttons using the arrow keys because of an XYNavigation issue in the RadioButtons control.
-            The screen reader does not read the heading when we tab into a radio button, even though the LabeledBy automation property is set.
-            Link to the issue in the winui repository - https://github.com/microsoft/microsoft-ui-xaml/issues/3156 -->
-            <TextBlock x:Uid="ColorModeHeader"
-                       x:Name="RadioButtons_Name_Theme" 
-                       Margin="{StaticResource SmallTopMargin}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher, Converter={StaticResource ModuleEnabledToOpacityConverter}}" />
-            <StackPanel AutomationProperties.LabeledBy="{Binding ElementName=RadioButtons_Name_Theme}">
-                <RadioButton x:Uid="Radio_Theme_Dark"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-                             IsChecked="{Binding Mode=TwoWay, Path=IsDarkThemeRadioButtonChecked}" />
-
-                <RadioButton x:Uid="Radio_Theme_Light"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-                             IsChecked="{Binding Mode=TwoWay, Path=IsLightThemeRadioButtonChecked}" />
-
-                <RadioButton x:Uid="Radio_Theme_Default"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-                             IsChecked="{Binding Mode=TwoWay, Path=IsSystemThemeRadioButtonChecked}" />
                             <HyperlinkButton Click="OpenColorsSettings_Click"
-                                 IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}">
+                                             x:Uid="Windows_Color_Settings"/>
-                    <TextBlock x:Uid="Windows_Color_Settings" />
+                        </controls:Setting.Description>
-                </HyperlinkButton>
+                        <controls:Setting.ActionContent>
-            </StackPanel>
+                            <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}" MinWidth="{StaticResource SettingActionControlMinWidth}">
+                                <ComboBoxItem x:Uid="Radio_Theme_Dark"/>
+                                <ComboBoxItem x:Uid="Radio_Theme_Light"/>
+                                <ComboBoxItem x:Uid="Radio_Theme_Default"/>
+                            </ComboBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-            <TextBlock x:Uid="PowerLauncher_Plugins"
+                </controls:SettingsGroup>
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-            <TextBlock x:Uid="Run_PluginUseDescription"
-                       Margin="{StaticResource SmallTopMargin}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
-                       TextWrapping="Wrap"/>
 
+                <controls:SettingsGroup x:Uid="PowerLauncher_Plugins" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}">
+                    <controls:Setting x:Uid="Run_PluginUseDescription" Icon="&#xEA86;">
+                        <controls:Setting.ActionContent>
                             <AutoSuggestBox x:Uid="PowerLauncher_SearchList"
                                             QueryIcon="Find"
-                            Text="{x:Bind ViewModel.SearchText, Mode=TwoWay}"
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
-                            Margin="{StaticResource SmallTopMargin}">
+                                            Text="{x:Bind ViewModel.SearchText, Mode=TwoWay}">
                                 <i:Interaction.Behaviors>
                                     <ic:EventTriggerBehavior EventName="TextChanged">
                                         <ic:InvokeCommandAction Command="{x:Bind ViewModel.SearchPluginsCommand}" />
                                     </ic:EventTriggerBehavior>
                                 </i:Interaction.Behaviors>
                             </AutoSuggestBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                    <muxc:InfoBar x:Uid="Run_AllPluginsDisabled" Severity="Error" IsOpen="{x:Bind ViewModel.ShowAllPluginsDisabledWarning, Mode=OneWay}" IsClosable="False" />
 
-            <TextBlock x:Uid="Run_AllPluginsDisabled"
+                    <StackPanel Orientation="Horizontal" Visibility="{x:Bind ViewModel.ShowPluginsLoadingMessage, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
-                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
+                        <muxc:ProgressRing IsActive="True" Width="20" Height="20" Margin="18,18" />
-                       Visibility="{x:Bind ViewModel.ShowAllPluginsDisabledWarning, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
+                        <TextBlock x:Uid="Run_PluginsLoading" Style="{ThemeResource SecondaryTextStyle}" VerticalAlignment="Center" />
-                       TextWrapping="Wrap"
-                       Margin="{StaticResource SmallTopMargin}"/>
-
-            <TextBlock x:Uid="Run_PluginsLoading"
-                       Visibility="{x:Bind ViewModel.ShowPluginsLoadingMessage, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
-                       TextWrapping="Wrap"
-                       Margin="{StaticResource SmallTopMargin}"/>
-            <ListView ItemsSource="{x:Bind Path=ViewModel.Plugins, Mode=OneWay}"
-                      MinHeight="512"
-                      IsItemClickEnabled="True"
-                      SelectionChanged="PluginsListView_SelectionChanged"
-                      x:Name="PluginsListView"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-                      Margin="-12,12,0,0">
-                <ListView.Resources>
-                    <SolidColorBrush x:Key="ListViewItemBackgroundSelected"
-                                     Color="{ThemeResource SystemChromeLowColor}" />
-                    <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver"
-                                     Color="{ThemeResource SystemChromeLowColor}" />
-                    <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPressed"
-                                     Color="{ThemeResource SystemChromeLowColor}" />
-                </ListView.Resources>
-                <ListView.ItemContainerStyle>
-                    <Style TargetType="ListViewItem">
-                        <Setter Property="HorizontalContentAlignment"
-                                Value="Stretch" />
-                        <Setter Property="VerticalContentAlignment"
-                                Value="Stretch" />
-                        <Setter Property="Padding"
-                                Value="0,0,0,0" />
-                    </Style>
-                </ListView.ItemContainerStyle>
-                <ListView.ItemTemplate>
-                    <DataTemplate x:DataType="ViewModels:PowerLauncherPluginViewModel" x:DefaultBindMode="OneWay">
-                        <StackPanel Orientation="Vertical" Background="Transparent"
-                                    Padding="0,12,12,12">
-                            <Grid ColumnSpacing="0">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="60" />
-                                    <ColumnDefinition Width="*" />
-                                    <ColumnDefinition Width="52" />
-                                </Grid.ColumnDefinitions>
-
-                                <Image Source="{x:Bind IconPath}"
-                                       Width="36"
-                                       Opacity="{x:Bind DisabledOpacity, Mode=OneWay}"
-                                       HorizontalAlignment="Left"
-                                       VerticalAlignment="Top"
-                                       Margin="12,0,12,0"
-                                       Height="36" />
-
-                                <StackPanel Orientation="Vertical"
-                                            Grid.Column="1" Margin="0,0,16,0">
-                                    <TextBlock FontSize="18"
-                                               Text="{x:Bind Path=Name}"
-                                               Opacity="{x:Bind DisabledOpacity}"/>
-                                    <TextBlock 
-                                               Opacity="{x:Bind DisabledOpacity}"
-                                               Foreground="{ThemeResource SystemBaseMediumColor}"
-                                               Text="{x:Bind Description}"
-                                               TextWrapping="Wrap"/>
-                                    <TextBlock 
-                                        x:Uid="Run_NotAccessibleWarning"
-                                        Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
-                                        Visibility="{x:Bind ShowNotAccessibleWarning, Converter={StaticResource BoolToVisibilityConverter}}"
-                                        TextWrapping="Wrap" />
-
-                                    <TextBlock 
-                                        x:Uid="Run_NotAllowedActionKeyword"
-                                        Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
-                                        Visibility="{x:Bind ShowNotAllowedKeywordWarning, Converter={StaticResource BoolToVisibilityConverter}}"
-                                        TextWrapping="Wrap" />
                     </StackPanel>
 
+                    <ListView ItemsSource="{x:Bind Path=ViewModel.Plugins, Mode=OneWay}"
+                              IsItemClickEnabled="False"
+                              SelectionMode="None"
+                              x:Name="PluginsListView">
+                        <ListView.ItemTemplate>
+                    <DataTemplate x:DataType="ViewModels:PowerLauncherPluginViewModel" x:DefaultBindMode="OneWay">
+                                <Grid>
+                                    <controls:SettingExpander>
+                                        <controls:SettingExpander.Header>
+                                            <controls:Setting Header="{x:Bind Path=Name}" Description="{x:Bind Description}" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                                <controls:Setting.Icon>
+                                                    <Image Source="{x:Bind IconPath}"
+                                                        Width="20"
+                                                        Height="20" />
+                                                </controls:Setting.Icon>
+                                                <controls:Setting.ActionContent>
                                                     <ToggleSwitch x:Uid="PowerLauncher_EnablePluginToggle"
-                                              AutomationProperties.HelpText="{x:Bind Path=Name}"
+                                                                  IsOn="{x:Bind Path=Disabled, Converter={StaticResource BoolNegationConverter}, Mode=TwoWay}"/>
-                                              x:Name="ToggleSwitch"
+                                                </controls:Setting.ActionContent>
-                                              OnContent=""
+                                            </controls:Setting>
-                                              OffContent=""
+                                        </controls:SettingExpander.Header>
-                                              IsOn="{x:Bind Path=Disabled, Converter={StaticResource BoolNegationConverter}, Mode=TwoWay}"
+                                        <controls:SettingExpander.Content>
-                                              Grid.Column="2" />
+                                            <StackPanel>
-                            </Grid>
+                                                <controls:Setting x:Uid="PowerLauncher_ActionKeyword" Style="{StaticResource ExpanderContentSettingStyle}" IsEnabled="{x:Bind Enabled, Mode=OneWay}">
-
+                                                    <controls:Setting.ActionContent>
-                            <StackPanel Margin="60,0,0,0" 
+                                                        <TextBox Text="{x:Bind Path=ActionKeyword, Mode=TwoWay}"
-                                        x:Name="AdditionalInfoPanel" 
+                                                                 MinWidth="{StaticResource SettingActionControlMinWidth}" />
-                                        Visibility="{x:Bind ShowAdditionalInfoPanel, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
+                                                    </controls:Setting.ActionContent>
-                                <TextBlock x:Uid="PowerLauncher_ActionKeyword"
+                                                </controls:Setting>
-                                           x:Name="ActionKeywordHeaderTextBlock"
+                                                <muxc:InfoBar Severity="Warning" x:Uid="Run_NotAccessibleWarning" IsOpen="{x:Bind ShowNotAccessibleWarning}" IsClosable="False" />
-                                           Margin="{StaticResource SmallTopMargin}"
+                                                <muxc:InfoBar Severity="Error" x:Uid="Run_NotAllowedActionKeyword" IsOpen="{x:Bind ShowNotAllowedKeywordWarning}" IsClosable="False" />
-                                           Opacity="{x:Bind DisabledOpacity}" />
+                                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
-
-                                <TextBox x:Uid="PowerLauncher_ActionKeyword"
-                                         Text="{x:Bind Path=ActionKeyword, Mode=TwoWay}"
-                                         Width="86"
-                                         Margin="0,6,0,0"
-                                         AutomationProperties.LabeledBy="{Binding ElementName=ActionKeywordHeaderTextBlock}"
-                                         HorizontalAlignment="Left"
-                                         IsEnabled="{x:Bind Enabled, Mode=OneWay}" />
-
                                                 <CheckBox x:Uid="PowerLauncher_IncludeInGlobalResult"
                                                           IsChecked="{x:Bind Path=IsGlobal, Mode=TwoWay}"
                                                           IsEnabled="{x:Bind Enabled, Mode=OneWay}"
-                                          Margin="{StaticResource SmallTopMargin}"/>
+                                                          Margin="{StaticResource ExpanderSettingMargin}"/>
-
-                                    <TextBlock x:Name="AdditionalOptionsTextBlock"
-                                        x:Uid="Run_AdditionalOptions"
-                                        Margin="{StaticResource SmallTopMargin}"
-                                        Visibility="{x:Bind ShowAdditionalOptions, Converter={StaticResource BoolToVisibilityConverter}}"
-                                        Style="{StaticResource SettingsGroupTitleStyle}"
-                                        Opacity="{x:Bind DisabledOpacity}"/>
                                                
                                                 <ListView ItemsSource="{x:Bind Path=AdditionalOptions}"
                                                           SelectionMode="None"
                                                           IsEnabled="{x:Bind Enabled, Mode=OneWay}">
-                                    <ListView.ItemContainerStyle>
+
-                                        <Style TargetType="ListViewItem">
-                                            <Setter Property="HorizontalContentAlignment"
-                                                Value="Stretch" />
-                                            <Setter Property="VerticalContentAlignment"
-                                                Value="Stretch" />
-                                            <Setter Property="Padding"
-                                                Value="0,0,0,0" />
-                                        </Style>
-                                    </ListView.ItemContainerStyle>
                                                     <ListView.ItemTemplate>
                                                         <DataTemplate x:DataType="ViewModels:PluginAdditionalOptionViewModel">
+                                                            <StackPanel Orientation="Vertical">
+                                                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                                                 <CheckBox Content="{x:Bind Path=DisplayLabel}" 
-                                                      IsChecked="{x:Bind Path=Value, Mode=TwoWay}" />
+                                                                      IsChecked="{x:Bind Path=Value, Mode=TwoWay}"
+                                                                      Margin="{StaticResource ExpanderSettingMargin}"/>
+                                                            </StackPanel>
+                                                        
                                                         </DataTemplate>
                                                     </ListView.ItemTemplate>
                                                 </ListView>
 
+
+                                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                                 <TextBlock Opacity="{x:Bind DisabledOpacity}"
-                                           Foreground="{ThemeResource SystemBaseMediumColor}"
                                                            HorizontalAlignment="Right"
-                                           Margin="0,0,12,0">
+                                                           Style="{ThemeResource SecondaryTextStyle}"
+                                                           Margin="{StaticResource ExpanderSettingMargin}">
                                                                <Run x:Uid="PowerLauncher_AuthoredBy" />
                                                                <Run FontWeight="SemiBold" Text="{x:Bind Author}" />
                                                 </TextBlock>
                                             </StackPanel>
-                        </StackPanel>
+
+                                       
+
+                                        </controls:SettingExpander.Content>
+                                    </controls:SettingExpander>
+                                </Grid>
                             </DataTemplate>
                 </ListView.ItemTemplate>
             </ListView>
+                </controls:SettingsGroup>
             </StackPanel>
 
     </controls:SettingsPageControl.ModuleContent>
-        <controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_PowerToysRun"/>
+            <controls:PageLink x:Uid="LearnMore_Run" Link="https://aka.ms/PowerToysOverview_PowerToysRun"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-        </controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.SecondaryLinks>
-        <controls:SettingsPageControl.AttributionLinks>
+            <controls:PageLink Text="Wox" Link="https://github.com/Wox-launcher/Wox/"/>
-            <controls:SidePanelLink Label="Wox" Link="https://github.com/Wox-launcher/Wox/"/>
+            <controls:PageLink Text="Beta Tadele's Window Walker" Link="https://github.com/betsegaw/windowwalker/"/>
-            <controls:SidePanelLink Label="Beta Tadele's Window Walker" Link="https://github.com/betsegaw/windowwalker/"/>
+        </controls:SettingsPageControl.SecondaryLinks>
-        </controls:SettingsPageControl.AttributionLinks>
     </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml.cs

@@ -66,15 +66,6 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             Helpers.StartProcessHelper.Start(Helpers.StartProcessHelper.ColorsSettings);
         }
 
-        private void PluginsListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
-        {
-            var selectedPlugin = (sender as ListView)?.SelectedItem;
-            foreach (var plugin in ViewModel.Plugins)
-            {
-                plugin.ShowAdditionalInfoPanel = plugin == selectedPlugin;
-            }
-        }
-
         /*
         public Tuple<string, string> SelectedSearchResultPreference
         {

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml

@@ -6,63 +6,71 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
     <Page.Resources>
         <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Collapsed" FalseValue="Visible"/>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_FileExplorerPreview"
+    <controls:SettingsPageControl x:Uid="FileExplorerPreview"
                                   ModuleImageSource="ms-appx:///Assets/Modules/PowerPreview.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_FileExplorerAddOns">
         <controls:SettingsPageControl.ModuleContent>
             
+            
             <StackPanel Orientation="Vertical">
-            <TextBlock x:Uid="FileExplorerPreview_RunAsAdminRequired"
-                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
-                       Visibility="{Binding Mode=OneWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}"
-                       Margin="{StaticResource SmallBottomMargin}"
-                       TextWrapping="Wrap"/>
 
-            <TextBlock x:Uid="FileExplorerPreview_AffectsAllUsers"
+                <muxc:InfoBar Severity="Warning"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
+                                   x:Uid="FileExplorerPreview_RunAsAdminRequired"
-                       Margin="{StaticResource SmallBottomMargin}"
+                                   IsOpen="True"
-                       TextWrapping="Wrap"/>
+                                   IsClosable="False"
+                                   Visibility="{Binding Mode=OneWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}" />
 
-            <TextBlock x:Uid="FileExplorerPreview_PreviewPane_GroupSettings"
+                <muxc:InfoBar Severity="Informational"
-                       Style="{StaticResource SettingsGroupTitleStyleAsHeader}"
+                                   x:Uid="FileExplorerPreview_AffectsAllUsers"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                                   IsOpen="True"
+                                   IsClosable="False"
+                                   />
 
-            <ToggleSwitch x:Uid="FileExplorerPreview_ToggleSwitch_Preview_SVG"
+                <controls:SettingsGroup x:Uid="FileExplorerPreview_PreviewPane_GroupSettings">
-                          Margin="{StaticResource SmallTopMargin}"
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_SVG" Icon="&#xE91B;">
-                          IsOn="{Binding Mode=TwoWay, Path=SVGRenderIsEnabled}"                          
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.SVGRenderIsEnabled}"
                                           IsEnabled="{Binding Mode=OneWay, Path=IsElevated}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-            <ToggleSwitch x:Uid="FileExplorerPreview_ToggleSwitch_Preview_MD"
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_MD" Icon="&#xE943;">
-                          Margin="{StaticResource SmallTopMargin}"
+                        <controls:Setting.ActionContent>
-                          IsOn="{Binding Mode=TwoWay, Path=MDRenderIsEnabled}"
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.MDRenderIsEnabled}"
                                           IsEnabled="{Binding Mode=OneWay, Path=IsElevated}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
 
-            <TextBlock x:Uid="FileExplorerPreview_IconThumbnail_GroupSettings"
+                <controls:SettingsGroup x:Uid="FileExplorerPreview_IconThumbnail_GroupSettings">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <TextBlock x:Uid="FileExplorerPreview_RebootRequired"
+                    <muxc:InfoBar Severity="Informational"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
+                                   x:Uid="FileExplorerPreview_RebootRequired"
-                       Margin="{StaticResource SmallTopBottomMargin}"
+                                   IsOpen="True"
-                       TextWrapping="Wrap"/>
+                                   IsClosable="False"
-
+                                   />
-            <ToggleSwitch x:Uid="FileExplorerPreview_ToggleSwitch_SVG_Thumbnail"
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_SVG_Thumbnail" Icon="&#xE91B;">
-                          IsOn="{Binding Mode=TwoWay, Path=SVGThumbnailIsEnabled}"
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.SVGThumbnailIsEnabled}"
                                           IsEnabled="{Binding Mode=OneWay, Path=IsElevated}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+
+
+                </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 
-        <controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_FileExplorerAddOns"/>
+            <controls:PageLink x:Uid="LearnMore_PowerPreview" Link="https://aka.ms/PowerToysOverview_FileExplorerAddOns"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-        </controls:SettingsPageControl.ModuleLinks>
     </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml

@@ -7,82 +7,89 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
-    <controls:SettingsPageControl x:Uid="About_PowerRename"
+    <controls:SettingsPageControl x:Uid="PowerRename"
                                   ModuleImageSource="ms-appx:///Assets/Modules/PowerRename.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_PowerRename">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical"
                     x:Name="PowerRenameView"
+                    HorizontalAlignment="Stretch">
+
+                <controls:Setting x:Uid="PowerRename_Toggle_Enable">
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" />
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
+
+                <controls:SettingsGroup x:Uid="PowerRename_ShellIntegration" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:Setting x:Uid="PowerRename_Toggle_EnableOnContextMenu">
+                                <controls:Setting.ActionContent>
+                                    <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnabledOnContextMenu}"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+
+                    <controls:Setting x:Uid="PowerRename_Toggle_EnableOnExtendedContextMenu">
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnabledOnContextExtendedMenu}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
+
+                <controls:SettingsGroup x:Uid="PowerRename_AutoCompleteHeader" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="PowerRename_Toggle_AutoComplete" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <controls:Setting.ActionContent>
+                                    <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.MRUEnabled}"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel HorizontalAlignment="Stretch">
+                                <controls:Setting x:Uid="PowerRename_Toggle_MaxDispListNum"
+                                                  Style="{StaticResource ExpanderContentSettingStyle}"
+                                                  IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.GlobalAndMruEnabled}">
+                                    <controls:Setting.ActionContent>
+                                        <muxc:NumberBox SpinButtonPlacementMode="Compact"
                                             HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
-
-                <ToggleSwitch x:Uid="PowerRename_Toggle_Enable"
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"                          
-                           />
-
-                <TextBlock x:Uid="PowerRename_ShellIntegration"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <ToggleSwitch x:Uid="PowerRename_Toggle_EnableOnContextMenu"
-                          Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnabledOnContextMenu}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                           />
-
-                <ToggleSwitch x:Uid="PowerRename_Toggle_EnableOnExtendedContextMenu"
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnabledOnContextExtendedMenu}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                           />
-
-                <TextBlock x:Uid="PowerRename_AutoCompleteHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <CheckBox x:Uid="PowerRename_Toggle_AutoComplete"
-                          Margin="{StaticResource SmallTopMargin}" 
-                          IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MRUEnabled}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                           />
-
-                <muxc:NumberBox x:Uid="PowerRename_Toggle_MaxDispListNum"
-                            SpinButtonPlacementMode="Compact"
-                            HorizontalAlignment="Left"
-                            Margin="{StaticResource SmallTopMargin}"
                                             Value="{x:Bind Mode=TwoWay, Path=ViewModel.MaxDispListNum}"
                                             Minimum="0"
-                            Width="240"
                                             Maximum="20"
-                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.GlobalAndMruEnabled}"/>
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"/>  
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                    <controls:Setting x:Uid="PowerRename_Toggle_RestoreFlagsOnLaunch">
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.RestoreFlagsOnLaunch}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
               
-                <CheckBox x:Uid="PowerRename_Toggle_RestoreFlagsOnLaunch"
-                          Margin="0, 17, 0, 0" 
-                          IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.RestoreFlagsOnLaunch}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
-                <TextBlock x:Uid="PowerRename_BehaviorHeader"
+                <controls:SettingsGroup x:Uid="PowerRename_BehaviorHeader" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                    <controls:Setting x:Uid="PowerRename_Toggle_UseBoostLib">
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                        <controls:Setting.ActionContent>
-
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.UseBoostLib}" />
-                <CheckBox x:Uid="PowerRename_Toggle_UseBoostLib"
+                        </controls:Setting.ActionContent>
-                      Margin="{StaticResource SmallTopMargin}"
+                    </controls:Setting>
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.UseBoostLib}"
+                </controls:SettingsGroup>
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
             </StackPanel>
 
         </controls:SettingsPageControl.ModuleContent>
 
-        <controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_PowerRename"/>
+            <controls:PageLink x:Uid="LearnMore_PowerRename" Link="https://aka.ms/PowerToysOverview_PowerRename"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-        </controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.SecondaryLinks>
-        <controls:SettingsPageControl.AttributionLinks>
+            <controls:PageLink Text="Chris Davis's SmartRenamer" Link="https://github.com/chrdavis/SmartRename"/>
-            <controls:SidePanelLink Label="Chris Davis's SmartRenamer" Link="https://github.com/chrdavis/SmartRename"/>
+        </controls:SettingsPageControl.SecondaryLinks>
-        </controls:SettingsPageControl.AttributionLinks>
     </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml

@@ -4,12 +4,12 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:behaviors="using:Microsoft.PowerToys.Settings.UI.Behaviors"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
     xmlns:helpers="using:Microsoft.PowerToys.Settings.UI.Helpers"
     xmlns:views="using:Microsoft.PowerToys.Settings.UI.Views"
     xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
     xmlns:i="using:Microsoft.Xaml.Interactivity"
+    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True"
     mc:Ignorable="d">
 
     <i:Interaction.Behaviors>
@@ -18,115 +18,154 @@
         </ic:EventTriggerBehavior>
     </i:Interaction.Behaviors>
 
-    <Grid>
+    <Grid x:Name="RootGrid"
-        <winui:NavigationView
+          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-        x:Name="navigationView"
+
+        <muxc:NavigationView x:Name="navigationView"
                              IsBackButtonVisible="Collapsed"
+                             IsTitleBarAutoPaddingEnabled="False"
                              IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
                              SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
                              IsSettingsVisible="False"
-        OpenPaneLength="296"
+                             OpenPaneLength="288"
-        CompactModeThresholdWidth="0"
+                             CompactModeThresholdWidth="1007"
-        Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
+                             ExpandedModeThresholdWidth="1007"
                              PaneOpened="NavigationView_PaneOpened"
-        PaneClosed="NavigationView_PaneClosed"
+                             PaneClosed="NavigationView_PaneClosed">
-        SelectionChanged="NavigationView_SelectionChanged">
+            <muxc:NavigationView.Resources>
-            <winui:NavigationView.MenuItems>
+                <SolidColorBrush x:Key="NavigationViewContentBackground"
-                <winui:NavigationViewItem x:Uid="Shell_General" helpers:NavHelper.NavigateTo="views:GeneralPage">
+                                 Color="Transparent" />
-                    <winui:NavigationViewItem.Icon>
+                <SolidColorBrush x:Key="NavigationViewContentGridBorderBrush"
-                        <FontIcon Glyph="&#xE713;"/>
+                                 Color="Transparent" />
-                    </winui:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
                 
-                <winui:NavigationViewItem x:Uid="Shell_Awake" helpers:NavHelper.NavigateTo="views:AwakePage">
+            </muxc:NavigationView.Resources>
-                    <winui:NavigationViewItem.Icon>
+            <muxc:NavigationView.MenuItems>
-                        <FontIcon Glyph="&#xEC32;"/>
+                <muxc:NavigationViewItem x:Uid="Shell_General"
-                    </winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:GeneralPage"
-                </winui:NavigationViewItem>
+                                         Margin="0,0,12,0">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsSettings.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_ColorPicker" helpers:NavHelper.NavigateTo="views:ColorPickerPage">
+                <muxc:NavigationViewItem x:Uid="Shell_Awake"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:AwakePage"
-                        <FontIcon Glyph="&#xEF3C;"/>
+                                         Margin="0,0,12,0">
-                    </winui:NavigationViewItem.Icon>
+                    <muxc:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsAwake.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_FancyZones" helpers:NavHelper.NavigateTo="views:FancyZonesPage">
+                <muxc:NavigationViewItem x:Uid="Shell_ColorPicker"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:ColorPickerPage"
-                        <PathIcon Data="M45,48H25.5V45H45V25.5H25.5v-3H45V3H25.5V0H48V48ZM22.5,48H3V45H22.5V3H3V0H25.5V48ZM0,48V0H3V48Z"/>
+                                         Margin="0,0,12,0">
-                    </winui:NavigationViewItem.Icon>
+                    <muxc:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_PowerPreview" helpers:NavHelper.NavigateTo="views:PowerPreviewPage">
+                <muxc:NavigationViewItem x:Uid="Shell_FancyZones"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:FancyZonesPage"
-                        <FontIcon Glyph="&#xEC50;"/>
+                                         Margin="0,0,12,0">
-                    </winui:NavigationViewItem.Icon>
+                    <muxc:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFancyZones.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_ImageResizer" helpers:NavHelper.NavigateTo="views:ImageResizerPage">
+                <muxc:NavigationViewItem x:Uid="Shell_PowerPreview"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:PowerPreviewPage"
-                        <PathIcon Data="M0 768h1408v1152H0V768zm128 1024h870l-582-581-288 288v293zm1152 0v-102l-224-223-101 101 223 224h102zM128 896v421l288-287 448 447 192-191 224 224V896H128zm832 256q-26 0-45-19t-19-45q0-26 19-45t45-19q26 0 45 19t19 45q0 26-19 45t-45 19zm960-512V347l-339 338-90-90 338-339h-293V128h512v512h-128zm-768-512h256v128h-256V128zm-128 128H768V128h256v128zm-384 0H384V128h256v128zm-384 0H0V128h256v128zM128 640H0V384h128v256zm1920 128v256h-128V768h128zm-128 384h128v256h-128v-256zm0 384h128v256h-128v-256zm-384 256h256v128h-256v-128z"></PathIcon>
+                                         Margin="0,0,12,0">
-                    </winui:NavigationViewItem.Icon>
+                    <muxc:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFileExplorerPreview.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_KeyboardManager" helpers:NavHelper.NavigateTo="views:KeyboardManagerPage">
+                <muxc:NavigationViewItem x:Uid="Shell_ImageResizer"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:ImageResizerPage"
-                        <FontIcon Glyph="&#xE765;"/>
+                                         Margin="0,0,12,0">
-                    </winui:NavigationViewItem.Icon>
+                    <muxc:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsImageResizer.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_PowerRename" helpers:NavHelper.NavigateTo="views:PowerRenamePage">
+                <muxc:NavigationViewItem x:Uid="Shell_KeyboardManager"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:KeyboardManagerPage"
-                        <FontIcon Glyph="&#xE8AC;"/>
+                                         Margin="0,0,12,0">
-                    </winui:NavigationViewItem.Icon>
+                    <muxc:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsKeyboardManager.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_PowerLauncher" helpers:NavHelper.NavigateTo="views:PowerLauncherPage">
+                <muxc:NavigationViewItem x:Uid="Shell_PowerRename"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:PowerRenamePage"
-                        <FontIcon Glyph="&#xE773;"/>
+                                         Margin="0,0,12,0">
-                    </winui:NavigationViewItem.Icon>
+                    <muxc:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsPowerRename.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_ShortcutGuide" helpers:NavHelper.NavigateTo="views:ShortcutGuidePage">
+                <muxc:NavigationViewItem x:Uid="Shell_PowerLauncher"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:PowerLauncherPage"
-                        <FontIcon Glyph="&#xEDA7;"/>
+                                         Margin="0,0,12,0">
-                    </winui:NavigationViewItem.Icon>
+                    <muxc:NavigationViewItem.Icon>
-                </winui:NavigationViewItem>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsPowerToysRun.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_ShortcutGuide"
+                                         helpers:NavHelper.NavigateTo="views:ShortcutGuidePage"
+                                         Margin="0,0,12,0">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsShortcutGuide.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
 
                 <!--TODO(yuyoyuppe): uncomment when VCM should be enabled-->
-                <!--<winui:NavigationViewItem x:Uid="Shell_VideoConference" helpers:NavHelper.NavigateTo="views:VideoConferencePage" IsEnabled="{x:Bind ViewModel.IsVideoConferenceBuild, Mode=OneWay}">
+                <!--<muxc:NavigationViewItem x:Uid="Shell_VideoConference"
-                    <winui:NavigationViewItem.Icon>
+                                         helpers:NavHelper.NavigateTo="views:VideoConferencePage"
-                        <FontIcon Glyph="&#xE714;"/>
+                                         IsEnabled="{x:Bind ViewModel.IsVideoConferenceBuild, Mode=OneWay}"
-                    </winui:NavigationViewItem.Icon>
+                                         Margin="0,0,12,0">
-                </winui:NavigationViewItem>-->
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsVideoConferenceMute.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>-->
 
-            </winui:NavigationView.MenuItems>
+            </muxc:NavigationView.MenuItems>
+            <muxc:NavigationView.PaneFooter>
+                <StackPanel Orientation="Vertical">
+                    <muxc:NavigationViewItem x:Uid="OOBE_NavViewItem"
+                                             Tapped="OOBEItem_Tapped"
+                                             Margin="0,0,12,0">
+                        <muxc:NavigationViewItem.Icon>
+                            <FontIcon Glyph="&#xF133;"/>
+                        </muxc:NavigationViewItem.Icon>
+                    </muxc:NavigationViewItem>
+                    <muxc:NavigationViewItem x:Uid="Feedback_NavViewItem"
+                                             Tapped="FeedbackItem_Tapped"
+                                             Margin="0,0,12,0">
+                        <muxc:NavigationViewItem.Icon>
+                            <FontIcon Glyph="&#xED15;"/>
+                        </muxc:NavigationViewItem.Icon>
+                    </muxc:NavigationViewItem>
+                </StackPanel>
+            </muxc:NavigationView.PaneFooter>
             <i:Interaction.Behaviors>
-                <behaviors:NavigationViewHeaderBehavior
-                DefaultHeader="{x:Bind ViewModel.Selected.Content, Mode=OneWay}">
-                    <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
-                        <DataTemplate>
-                            <Grid Margin="0, -2, 0, 6">
-                                <TextBlock
-                                Text="{Binding}"
-                                FontWeight="Bold"
-                                Style="{ThemeResource TitleTextBlockStyle}"
-                                Margin="{StaticResource SmallLeftRightMargin}"
-                                AutomationProperties.HeadingLevel="Level1" />
-                        </Grid>
-                    </DataTemplate>
-                </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
-            </behaviors:NavigationViewHeaderBehavior>
                 <ic:EventTriggerBehavior EventName="ItemInvoked">
                     <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
                 </ic:EventTriggerBehavior>
             </i:Interaction.Behaviors>
-        <ScrollViewer x:Name="scrollViewer"
-                      VerticalScrollBarVisibility="Auto"
-                      Grid.Column="0">
-                <Grid Margin="{StaticResource MediumLeftRightBottomMargin}">
             <Frame x:Name="shellFrame" />
-                </Grid>
+        </muxc:NavigationView>
-        </ScrollViewer>
-    </winui:NavigationView>
     </Grid>
 </UserControl>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs

@@ -7,10 +7,11 @@ using System.Collections.Generic;
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.PowerToys.Settings.UI.Services;
 using Microsoft.PowerToys.Settings.UI.ViewModels;
-using Windows.ApplicationModel.Resources;
 using Windows.Data.Json;
+using Windows.UI.Xaml;
 using Windows.UI.Xaml.Automation.Peers;
 using Windows.UI.Xaml.Controls;
+using WinUI = Microsoft.UI.Xaml.Controls;
 
 namespace Microsoft.PowerToys.Settings.UI.Views
 {
@@ -158,10 +159,9 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             shellFrame.Navigate(typeof(GeneralPage));
         }
 
-        [SuppressMessage("Usage", "CA1801:Review unused parameters", Justification = "Params are required for event handler signature requirements.")]
+        private void OobeButton_Click(object sender, RoutedEventArgs e)
-        private void NavigationView_SelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
         {
-            scrollViewer.ChangeView(null, 0, null, true);
+            OpenOobeWindowCallback();
         }
 
         private bool navigationViewInitialStateProcessed; // avoid announcing initial state of the navigation pane.
@@ -218,6 +218,15 @@ namespace Microsoft.PowerToys.Settings.UI.Views
                     "navigationMenuPaneClosed");
             }
         }
-#pragma warning restore CA1822 // Mark members as static
+
+        private void OOBEItem_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
+        {
+            OpenOobeWindowCallback();
+        }
+
+        private async void FeedbackItem_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
+        {
+            await Windows.System.Launcher.LaunchUriAsync(new Uri("https://aka.ms/powerToysGiveFeedback"));
+        }
     }
 }

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml

@@ -8,102 +8,93 @@
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
     <Page.Resources>
         <converters:StringFormatConverter x:Key="StringFormatConverter"/>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_ShortcutGuide"
+    <controls:SettingsPageControl x:Uid="ShortcutGuide"
                                   ModuleImageSource="ms-appx:///Assets/Modules/ShortcutGuide.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_ShortcutGuide">
         <controls:SettingsPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
+                <controls:Setting x:Uid="ShortcutGuide_Enable">
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsShortcutGuide.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
+                <controls:SettingsGroup x:Uid="Shortcut" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
 
-            <StackPanel Orientation="Vertical"
+                    <controls:Setting x:Uid="Activation_Shortcut" Icon="&#xEDA7;" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                    x:Name="ShortcutGuideView"
+                        <controls:Setting.Description>
-                    HorizontalAlignment="Left"
+                            <TextBlock>
-                    Margin="0,0,48,0"
+                                <Run x:Uid="ShortcutWarningLabel"/>
-                    MaxWidth="{StaticResource MaxContentWidth}">
+                                <Run Text="Win, Ctrl, Alt, Shift"/>
-                <ToggleSwitch x:Uid="ShortcutGuide_Enable"
+                            </TextBlock>
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
+                        </controls:Setting.Description>
-
+                        <controls:Setting.ActionContent>
-                <TextBlock x:Uid="Shortcuts"
+                            <controls:HotkeySettingsControl HotkeySettings="{x:Bind Path=ViewModel.OpenShortcutGuide, Mode=TwoWay}"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <controls:HotkeySettingsControl x:Uid="ShortcutGuide_OpenShortcutGuide"
-                                                  HorizontalAlignment="Left"
-                                                  MinWidth="240"
-                                                  Margin="{StaticResource SmallTopMargin}"
-                                                  HotkeySettings="{x:Bind Path=ViewModel.OpenShortcutGuide, Mode=TwoWay}"
                                                             Keys="Win, Ctrl, Alt, Shift"
-                                                  Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                                                            MinWidth="{StaticResource SettingActionControlMinWidth}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
 
-                <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
+                <controls:SettingsGroup x:Uid="ShortcutGuide_Appearance_Behavior" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-                <StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
+                            <controls:Setting x:Uid="ColorModeHeader" Icon="&#xE771;">
-                    <Slider x:Uid="ShortcutGuide_OverlayOpacity"
+                                <controls:Setting.Description>
-                    Minimum="0"
-                    Maximum="100"
-                    Width="240"
-                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"
-                    IsThumbToolTipEnabled="False"
-                    HorizontalAlignment="Left"
-                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-                    <TextBlock
-                        Text="{x:Bind Mode=OneWay, Path=ViewModel.OverlayOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
-                        VerticalAlignment="Center"
-                        FontSize="16"
-                        FontWeight="SemiBold"
-                        Margin="0,16,0,0"
-                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                </StackPanel>
-
-                <!-- We cannot navigate to all the radio buttons using the arrow keys because of an XYNavigation issue in the RadioButtons control.
-            The screen reader does not read the heading when we tab into a radio button, even though the LabeledBy automation property is set.
-            Link to the issue in the winui repository - https://github.com/microsoft/microsoft-ui-xaml/issues/3156 -->
-                <TextBlock Name="ShortcutGuide_Theme"
-                x:Uid="ColorModeHeader"
-                Margin="{StaticResource SmallTopMargin}"
-                Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                <muxc:RadioButtons IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                               SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}"
-                               AutomationProperties.LabeledBy="{Binding ElementName=ShortcutGuide_Theme}">
-                    <RadioButton x:Uid="Radio_Theme_Dark" />
-                    <RadioButton x:Uid="Radio_Theme_Light" />
-                    <RadioButton x:Uid="Radio_Theme_Default"/>
-                </muxc:RadioButtons>
                                     <HyperlinkButton Click="OpenColorsSettings_Click"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                                                     x:Uid="Windows_Color_Settings"/>
-                    <TextBlock x:Uid="Windows_Color_Settings" />
+                                </controls:Setting.Description>
-                </HyperlinkButton>
+                                <controls:Setting.ActionContent>
+                                    <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}" MinWidth="{StaticResource SettingActionControlMinWidth}">
+                                        <ComboBoxItem x:Uid="Radio_Theme_Dark"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Light"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Default"/>
+                                    </ComboBox>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
 
-                <TextBlock x:Uid="ShortcutGuide_DisabledApps"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
+                    <controls:Setting x:Uid="ShortcutGuide_OverlayOpacity">
+                        <controls:Setting.ActionContent>
+                            <Slider Minimum="0"
+                                                Maximum="100"
+                                                MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
+
+                <controls:SettingsGroup x:Uid="ExcludedApps" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="ShortcutGuide_DisabledApps" Icon="&#xE103;" Style="{StaticResource ExpanderHeaderSettingStyle}"/>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
                             <TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
-                     Margin="{StaticResource SmallTopMargin}"
+                                     Margin="{StaticResource ExpanderSettingMargin}"
                                          Text="{x:Bind Mode=TwoWay, Path=ViewModel.DisabledApps, UpdateSourceTrigger=PropertyChanged}"
-                     IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                                          ScrollViewer.VerticalScrollBarVisibility ="Visible"
                                          ScrollViewer.VerticalScrollMode="Enabled"
                                          ScrollViewer.IsVerticalRailEnabled="True"
                                          TextWrapping="Wrap"
                                          AcceptsReturn="True"
-                     HorizontalAlignment="Left"
                                          MinWidth="240"
                                          MinHeight="160" />
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
-        <controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ShortcutGuide"/>
+            <controls:PageLink x:Uid="LearnMore_ShortcutGuide" Link="https://aka.ms/PowerToysOverview_ShortcutGuide"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-        </controls:SettingsPageControl.ModuleLinks>
     </controls:SettingsPageControl>
 </Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/VideoConference.xaml

@@ -5,117 +5,129 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-    mc:Ignorable="d"
+    mc:Ignorable="d">
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <controls:SettingsPageControl x:Uid="About_VideoConference"
+    <controls:SettingsPageControl x:Uid="VideoConference"
                                   ModuleImageSource="ms-appx:///Assets/Modules/VideoConference.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_VideoConference">
         <controls:SettingsPageControl.ModuleContent>
 
             <StackPanel Orientation="Vertical">
 
-                <ToggleSwitch x:Uid="VideoConference_Enable"
+                <controls:Setting x:Uid="VideoConference_Enable" IsEnabled="{ Binding Mode=OneWay, Path=IsElevated }">
-                          IsOn="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                    <controls:Setting.Icon>
-                          IsEnabled="{ Binding Mode=OneWay, Path=IsElevated }"
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png" ShowAsMonochrome="False" />
-                          />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{Binding Mode=TwoWay, Path=IsEnabled}" />
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-                <TextBlock x:Uid="VideoConference_Shortcuts"
+                <controls:SettingsGroup x:Uid="VideoConference_Shortcuts" IsEnabled="{Binding Mode=OneWay, Path=IsEnabled}">
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                    <controls:Setting x:Uid="VideoConference_CameraAndMicrophoneMuteHotkeyControl_Header">
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}" />
+                        <controls:Setting.Description>
-
+                            <TextBlock>
-                <controls:HotkeySettingsControl 
+                            <Run x:Uid="ShortcutWarningLabel"/>
-                                          x:Uid="VideoConference_CameraAndMicrophoneMuteHotkeyControl_Header"
+                            <Run Text="Win, Ctrl, Alt, Shift"/>
-                                          Width="240"
+                            </TextBlock>
-                                          HorizontalAlignment="Left"
+                        </controls:Setting.Description>
-                                          Margin="{StaticResource SmallTopMargin}"
+                        <controls:Setting.ActionContent>
+                            <controls:HotkeySettingsControl HotkeySettings="{x:Bind Path=ViewModel.CameraAndMicrophoneMuteHotkey, Mode=TwoWay}"
                                                             Keys="Win, Ctrl, Alt, Shift"
-                                          HotkeySettings="{x:Bind Path=ViewModel.CameraAndMicrophoneMuteHotkey, Mode=TwoWay}"
+                                                            MinWidth="{StaticResource SettingActionControlMinWidth}"/>
-                                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                        </controls:Setting.ActionContent>
-                                          />
+                    </controls:Setting>
 
-                <controls:HotkeySettingsControl 
+                    <controls:Setting x:Uid="VideoConference_MicrophoneMuteHotkeyControl_Header">
-                                          x:Uid="VideoConference_MicrophoneMuteHotkeyControl_Header"
+                        <controls:Setting.Description>
-                                          Width="240"
+                            <TextBlock>
-                                          HorizontalAlignment="Left"
+                            <Run x:Uid="ShortcutWarningLabel"/>
-                                          Margin="{StaticResource SmallTopMargin}"
+                            <Run Text="Win, Ctrl, Alt, Shift"/>
+                            </TextBlock>
+                        </controls:Setting.Description>
+                        <controls:Setting.ActionContent>
+                            <controls:HotkeySettingsControl HotkeySettings="{x:Bind Path=ViewModel.MicrophoneMuteHotkey, Mode=TwoWay}"
                                                             Keys="Win, Ctrl, Alt, Shift"
-                                          HotkeySettings="{x:Bind Path=ViewModel.MicrophoneMuteHotkey, Mode=TwoWay}"
+                                                            MinWidth="{StaticResource SettingActionControlMinWidth}"/>
-                                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                        </controls:Setting.ActionContent>
-                                          />
+                    </controls:Setting>
 
-                <controls:HotkeySettingsControl 
+                    <controls:Setting x:Uid="VideoConference_CameraMuteHotkeyControl_Header">
-                                          x:Uid="VideoConference_CameraMuteHotkeyControl_Header"
+                        <controls:Setting.Description>
-                                          Width="240"
+                            <TextBlock>
-                                          HorizontalAlignment="Left"
+                            <Run x:Uid="ShortcutWarningLabel"/>
-                                          Margin="{StaticResource SmallTopMargin}"
+                            <Run Text="Win, Ctrl, Alt, Shift"/>
+                            </TextBlock>
+                        </controls:Setting.Description>
+                        <controls:Setting.ActionContent>
+                            <controls:HotkeySettingsControl HotkeySettings="{x:Bind Path=ViewModel.CameraMuteHotkey, Mode=TwoWay}"
                                                             Keys="Win, Ctrl, Alt, Shift"
-                                          HotkeySettings="{x:Bind Path=ViewModel.CameraMuteHotkey, Mode=TwoWay}"
+                                                            MinWidth="{StaticResource SettingActionControlMinWidth}"/>
-                                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                        </controls:Setting.ActionContent>
-                                          />
+                    </controls:Setting>
-                <TextBlock x:Uid="VideoConference_Microphone"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-                <ComboBox x:Uid="VideoConference_SelectedMicrophone"
+                </controls:SettingsGroup>
-                      Width="240"
+
-                      HorizontalAlignment="Left"
+                <controls:SettingsGroup x:Uid="VideoConference_Microphone" IsEnabled="{Binding Mode=OneWay, Path=IsEnabled}">
-                      Margin="{StaticResource SmallTopMargin}"
+
+                    <controls:Setting x:Uid="VideoConference_SelectedMicrophone" Icon="&#xE1D6;">
+                        <controls:Setting.ActionContent>
+                            <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}"
                                       SelectedIndex="{Binding Path=SelectedMicrophoneIndex, Mode=TwoWay}"
-                      ItemsSource="{Binding MicrophoneNames, Mode=OneTime}"
+                                      ItemsSource="{Binding MicrophoneNames, Mode=OneTime}"/>
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
 
-                <TextBlock x:Uid="VideoConference_Camera"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-                <ComboBox x:Uid="VideoConference_SelectedCamera"
+                <controls:SettingsGroup x:Uid="VideoConference_Camera" IsEnabled="{Binding Mode=OneWay, Path=IsEnabled}">
-                      Width="240"
+
-                      HorizontalAlignment="Left"
+                    <controls:SettingExpander IsExpanded="True">
-                      Margin="{StaticResource SmallTopMargin}"
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="VideoConference_SelectedCamera" Icon="&#xE116;">
+                                <controls:Setting.ActionContent>
+                                    <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}"
                                               SelectedIndex="{Binding Path=SelectedCameraIndex, Mode=TwoWay}"
                                               ItemsSource="{Binding CameraNames, Mode=OneTime}"
                                               IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel Orientation="Vertical">
+                                <controls:Setting x:Uid="VideoConference_CameraOverlayImagePathHeader" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Button x:Uid="VideoConference_CameraOverlayImageBrowse"
+                                                    Command="{Binding Mode=OneWay, Path=SelectOverlayImage}" />
 
-                <TextBlock x:Uid="VideoConference_CameraOverlayImagePathHeader"
+                                            <Button x:Uid="VideoConference_CameraOverlayImageClear"
-                       Margin="{StaticResource SmallTopMargin}"/>
+                                                    Command="{Binding Mode=OneWay, Path=ClearOverlayImage}"/>
-
+                                        </StackPanel>
-                <Border CornerRadius="4"
+                                    </controls:Setting.ActionContent>
-                    HorizontalAlignment="Left"
+                                </controls:Setting>
-                    Margin="{StaticResource XXSmallTopMargin}">
+                                <Border CornerRadius="4">
                                     <Image Width="240"
                                            x:Uid="VideoConference_CameraOverlayImageAlt"
                                            ToolTipService.ToolTip="{Binding Mode=OneWay, Path=CameraImageOverlayPath}"
                                            Source="{Binding Mode=OneWay, Path=CameraImageOverlayPath}"/>
                                 </Border>
-
-                <StackPanel Orientation="Horizontal"
-                        Padding="0"
-                        Spacing="8"
-                        Margin="{StaticResource SmallTopMargin}">
-                    <Button Height="32"
-                        IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
-                        x:Uid="VideoConference_CameraOverlayImageBrowse"
-                        Command="{Binding Mode=OneWay, Path=SelectOverlayImage}"
-                        HorizontalContentAlignment="Left"
-                        HorizontalAlignment="Left" />
-
-                    <Button IsEnabled="{Binding Mode=TwoWay, Path=IsEnabled}"
-                        Height="32"
-                        x:Uid="VideoConference_CameraOverlayImageClear"
-                        Command="{Binding Mode=OneWay, Path=ClearOverlayImage}"
-                        HorizontalAlignment="Left" />
                             </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
 
-                <TextBlock x:Uid="VideoConference_Toolbar"
+                </controls:SettingsGroup>
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-                <ComboBox x:Uid="VideoConference_ToolbarPosition" 
+
-                      MinWidth="240"
+
-                      Margin="{StaticResource SmallTopMargin}"
+
-                      SelectedIndex="{ Binding Mode=TwoWay, Path=ToolbarPostionIndex}"
+                <controls:SettingsGroup x:Uid="VideoConference_Toolbar" IsEnabled="{Binding Mode=OneWay, Path=IsEnabled}">
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}">
+
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="VideoConference_ToolbarPosition" Icon="&#xEC12;">
+                                <controls:Setting.ActionContent>
+                                    <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{ Binding Mode=TwoWay, Path=ToolbarPostionIndex}">
                                         <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_TopLeftCorner"/>
                                         <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_TopCenter"/>
                                         <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_TopRightCorner"/>
@@ -123,27 +135,32 @@
                                         <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_BottomCenter"/>
                                         <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_BottomRightCorner"/>
                                     </ComboBox>
-
+                                </controls:Setting.ActionContent>
-                <ComboBox x:Uid="VideoConference_ToolbarMonitor" 
+                            </controls:Setting>
-                      MinWidth="240"
+                        </controls:SettingExpander.Header>
-                      Margin="{StaticResource SmallTopMargin}"
+                        <controls:SettingExpander.Content>
-                      SelectedIndex="{ Binding Mode=TwoWay, Path=ToolbarMonitorIndex}"
+                            <StackPanel Orientation="Vertical">
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}">
+                                <controls:Setting x:Uid="VideoConference_ToolbarMonitor" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{ Binding Mode=TwoWay, Path=ToolbarMonitorIndex}">
                                             <ComboBoxItem x:Uid="VideoConference_ToolbarMonitor_Main"/>
                                             <ComboBoxItem x:Uid="VideoConference_ToolbarMonitor_All"/>
                                         </ComboBox>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
 
-                <CheckBox x:Uid="VideoConference_HideToolbarWhenUnmuted"
+                                <CheckBox x:Uid="VideoConference_HideToolbarWhenUnmuted" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.HideToolbarWhenUnmuted}" Margin="{StaticResource ExpanderSettingMargin}" />
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.HideToolbarWhenUnmuted}"
+                            </StackPanel>
-                      Margin="{StaticResource SmallTopMargin}"
+                        </controls:SettingExpander.Content>
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                    </controls:SettingExpander>
-                      />
+
+                </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 
-        <controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_VideoConference"/>
+            <controls:PageLink x:Uid="LearnMore_VCM" Link="https://aka.ms/PowerToysOverview_VideoConference"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.PrimaryLinks>
-        </controls:SettingsPageControl.ModuleLinks>
     </controls:SettingsPageControl>
 </Page>