Shortcut Guide

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 bool _isLightThemeRadioButtonChecked;
-        private bool _isSystemThemeRadioButtonChecked;
+        private int _themeIndex;
+
         private bool _autoDownloadUpdates;
 
         private UpdatingSettings.UpdatingState _updatingState = UpdatingSettings.UpdatingState.UpToDate;
@@ -255,86 +254,76 @@ 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 bool IsDarkThemeRadioButtonChecked
+        public int ThemeIndex
         {
             get
             {
-                return _isDarkThemeRadioButtonChecked;
+                return _themeIndex;
             }
 
             set
             {
-                if (value == true)
+                if (_themeIndex != value)
                 {
-                    GeneralSettingsConfig.Theme = "dark";
-                    _isDarkThemeRadioButtonChecked = value;
-                    try
+                    if (value == 0)
                     {
-                        UpdateUIThemeCallBack(GeneralSettingsConfig.Theme);
-                    }
-                    catch (Exception e)
-                    {
-                        Logger.LogError("Exception encountered when changing Settings theme", e);
+                        // set theme to dark.
+                        GeneralSettingsConfig.Theme = "dark";
+                        _themeIndex = 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);
+                        }
+
+                        NotifyPropertyChanged();
                     }
 
-                    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
+                    if (value == 1)
                     {
-                        UpdateUIThemeCallBack(GeneralSettingsConfig.Theme);
-                    }
-                    catch (Exception e)
-                    {
-                        Logger.LogError("Exception encountered when changing Settings theme", e);
+                        // set theme to light.
+                        GeneralSettingsConfig.Theme = "light";
+                        _themeIndex = 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);
+                        }
+
+                        NotifyPropertyChanged();
                     }
 
-                    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
+                    if (value == 2)
                     {
-                        UpdateUIThemeCallBack(GeneralSettingsConfig.Theme);
-                    }
-                    catch (Exception e)
-                    {
-                        Logger.LogError("Exception encountered when changing Settings theme", e);
-                    }
+                        // set theme to system default.
+                        GeneralSettingsConfig.Theme = "system";
+                        _themeIndex = value;
 
-                    NotifyPropertyChanged();
+                        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);
+                        }
+
+                        NotifyPropertyChanged();
+                    }
                 }
             }
         }

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

@@ -6,25 +6,11 @@
     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">
-        <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>
-                    <Run Text="{x:Bind Header, Mode=OneTime}"/>
-                    <Run Text="&#xE946;" FontFamily="Segoe MDL2 Assets"/>
-            </TextBlock>
-        </TextBox.Header>
-    </TextBox>
+             IsReadOnly="True"/>
+
 </UserControl>

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

@@ -22,7 +22,16 @@
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Center"
                           MinHeight="48">
-
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="RootGrid.Background" Value="Red" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="Auto"/>
                             <!-- Icon -->
@@ -70,8 +79,9 @@
                                     <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,6,0,0"/>
+                                            <Setter Property="Padding" Value="0,0,0,0"/>
                                         </Style.Setters>
                                     </Style>
                                 </ContentPresenter.Resources>

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

@@ -43,7 +43,7 @@
 
                 <Grid ColumnSpacing="16">
                     <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="240"/>
+                        <ColumnDefinition Width="160"/>
                         <ColumnDefinition Width="*" />
                     </Grid.ColumnDefinitions>
                     <Border CornerRadius="4" VerticalAlignment="Top">
@@ -60,7 +60,7 @@
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    TextWrapping="Wrap"/>
 
-                        <ItemsControl ItemsSource="{x:Bind ModuleLinks}">
+                        <ItemsControl ItemsSource="{x:Bind ModuleLinks}" Margin="0,16,0,0">
                             <ItemsControl.ItemTemplate>
                                 <DataTemplate x:DataType="local:SidePanelLink">
                                     <HyperlinkButton NavigateUri="{x:Bind Link}">

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -362,9 +362,6 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="PowerLauncher_MaximumNumberOfResults.Header" xml:space="preserve">
     <value>Maximum number of results</value>
   </data>
-  <data name="Shortcuts.Text" xml:space="preserve">
-    <value>Shortcuts</value>
-  </data>
   <data name="PowerLauncher_OpenPowerLauncher.Header" xml:space="preserve">
     <value>Open PowerToys Run</value>
   </data>
@@ -508,8 +505,11 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Restart as administrator</value>
     <comment>running PowerToys as a higher level user, account is typically referred to as an admin / administrator</comment>
   </data>
-  <data name="GeneralPage_ToggleSwitch_RunAtStartUp.Header" xml:space="preserve">
+  <data name="GeneralPage_RunAtStartUp.Header" xml:space="preserve">
     <value>Run at startup</value>
+  </data>
+	<data name="GeneralPage_RunAtStartUp.Description" xml:space="preserve">
+    <value>PowerToys will launch automatically</value>
   </data>
   <data name="PowerRename.ModuleDescription" xml:space="preserve">
     <value>A Windows Shell extension for more advanced bulk renaming using search and replace or regular expressions.</value>
@@ -574,7 +574,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Press duration before showing (ms)</value>
     <comment>pressing a key in milliseconds</comment>
   </data>
-  <data name="ShortcutGuide_Appearance_Behavior.Text" xml:space="preserve">
+  <data name="ShortcutGuide_Appearance_Behavior.Header" xml:space="preserve">
     <value>Appearance &amp; behavior</value>
   </data>
   <data name="ShortcutGuide_Enable.Header" xml:space="preserve">
@@ -584,11 +584,11 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="ShortcutGuide_OverlayOpacity.Header" xml:space="preserve">
     <value>Opacity of background</value>
   </data>
-  <data name="ShortcutGuide_DisabledApps.Text" xml:space="preserve">
-    <value>Disable for apps</value>
+	<data name="ShortcutGuide_DisabledApps.Header" xml:space="preserve">
+    <value>Exclude apps</value>
   </data>
-  <data name="ShortcutGuide_DisabledApps_TextBoxControl.Header" xml:space="preserve">
-    <value>Turn off Shortcut Guide when these applications have focus. Add one application name per line.</value>
+  <data name="ShortcutGuide_DisabledApps.Description" xml:space="preserve">
+    <value>Turns off Shortcut Guide when these applications have focus. Add one application name per line.</value>
   </data>
   <data name="ShortcutGuide_DisabledApps_TextBoxControl.PlaceholderText" xml:space="preserve">
     <value>Example: outlook.exe</value>
@@ -901,7 +901,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
   <data name="ImageResizer_FilenameFormatPlaceholder.PlaceholderText" xml:space="preserve">
     <value>Example: %1 (%2)</value>
   </data>
-  <data name="ColorModeHeader.Text" xml:space="preserve">
+  <data name="ColorModeHeader.Header" xml:space="preserve">
     <value>Choose a mode</value>
   </data>
   <data name="Radio_Theme_Dark.Content" xml:space="preserve">
@@ -916,7 +916,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
     <value>Windows default</value>
     <comment>Windows refers to the Operating system</comment>
   </data>
-  <data name="Windows_Color_Settings.Text" xml:space="preserve">
+  <data name="Windows_Color_Settings.Content" xml:space="preserve">
     <value>Windows color settings</value>
     <comment>Windows refers to the Operating system</comment>
   </data>
@@ -1087,7 +1087,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
     <value>Quick layout switch</value>
   </data>
   <data name="ShortcutGuide_OpenShortcutGuide.Header" xml:space="preserve">
-    <value>Open Shortcut Guide</value>
+    <value>Activation shortcut</value>
   </data>
   <data name="Oobe_GetStarted.Text" xml:space="preserve">
     <value>Let's get started!</value>

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

@@ -5,11 +5,10 @@
 
     <!-- Template for the header of a section of settings -->
     <DataTemplate x:Key="SectionHeaderTemplate">
-        <TextBlock
-                    Text="{Binding}"
-                    Style="{ThemeResource BodyStrongTextBlockStyle}"
-                    Margin="2,32,0,8"
-                    AutomationProperties.HeadingLevel="Level2" />
+        <TextBlock Text="{Binding}"
+                   Style="{ThemeResource BodyStrongTextBlockStyle}"
+                   Margin="2,32,0,8"
+                   AutomationProperties.HeadingLevel="Level2" />
     </DataTemplate>
 
     <!-- Template for content of a section of settings -->

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

@@ -7,6 +7,7 @@
     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:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls" xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
     AutomationProperties.LandmarkType="Main">
 
@@ -58,31 +59,53 @@
                 </HyperlinkButton>
 
 
-                <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
+                <TextBlock 
                        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" Margin="-12,0,0,0">
-                        <TextBlock x:Uid="Windows_Color_Settings" />
-                    </HyperlinkButton>
-                </StackPanel>
 
-                <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_RunAtStartUp"  
-                          Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=Startup}"/>
+
+
+
+                <toolkitcontrols:HeaderedItemsControl IsEnabled="True" x:Uid="ShortcutGuide_Appearance_Behavior">
+                    <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}">
+                        <muxc:Expander.Header>
+                            <controls:Setting x:Uid="ColorModeHeader" Icon="&#xE771;" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <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}">
+                                        <ComboBoxItem x:Uid="Radio_Theme_Dark"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Light"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Default"/>
+                                    </ComboBox>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </muxc:Expander.Header>
+                        <muxc:Expander.Content>
+                            <StackPanel Orientation="Vertical">
+                                <controls:Setting x:Uid="GeneralPage_RunAtStartUp" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <ToggleSwitch  IsOn="{Binding Mode=TwoWay, Path=Startup}"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                            </StackPanel>
+                        </muxc:Expander.Content>
+                    </muxc:Expander>
+
+                </toolkitcontrols:HeaderedItemsControl>
+
+
+
+
 
 
                 <TextBlock x:Uid="General_Updates"

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

@@ -18,8 +18,7 @@
          
             <StackPanel Orientation="Vertical"
                     x:Name="PowerRenameView"
-                    HorizontalAlignment="Stretch"
-                    Margin="0,0,48,0">
+                    HorizontalAlignment="Stretch">
 
                 <controls:Setting x:Uid="PowerRename_Toggle_Enable">
                     <controls:Setting.Icon>

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

@@ -5,7 +5,8 @@
     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:muxc="using:Microsoft.UI.Xaml.Controls" 
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
     AutomationProperties.LandmarkType="Main">
@@ -21,84 +22,82 @@
 
 
             <StackPanel Orientation="Vertical"
-                    x:Name="ShortcutGuideView"
-                    HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
-                <ToggleSwitch x:Uid="ShortcutGuide_Enable"
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
+                    x:Name="ShortcutGuideView">
 
-                <TextBlock x:Uid="Shortcuts"
-                       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}"/>
 
-                <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                <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}" FlowDirection="RightToLeft" />
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-                <StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
-                    <Slider x:Uid="ShortcutGuide_OverlayOpacity"
-                    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"
-                                 Margin="-12,0,0,0"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                    <TextBlock x:Uid="Windows_Color_Settings" />
-                </HyperlinkButton>
-
-                <TextBlock x:Uid="ShortcutGuide_DisabledApps"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
-                     Margin="{StaticResource SmallTopMargin}"
-                     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:Setting x:Uid="ShortcutGuide_OpenShortcutGuide" Icon="&#xEDA7;">
+                    <controls:Setting.Description>
+                        <TextBlock>
+                            <Run x:Uid="ShortcutWarningLabel"/>
+                            <Run Text="Win, Ctrl, Alt, Shift"/>
+                        </TextBlock>
+                    </controls:Setting.Description>
+                    <controls:Setting.ActionContent>
+                        <controls:HotkeySettingsControl Width="240" HotkeySettings="{x:Bind Path=ViewModel.OpenShortcutGuide, Mode=TwoWay}" Keys="Win, Ctrl, Alt, Shift"/>
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
+                
+                <toolkitcontrols:HeaderedItemsControl x:Uid="ShortcutGuide_Appearance_Behavior">
+                    <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}">
+                        <muxc:Expander.Header>
+                            <controls:Setting x:Uid="ColorModeHeader" Icon="&#xE771;" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <controls:Setting.Description>
+                                    <HyperlinkButton Click="OpenColorsSettings_Click"
+                                                     x:Uid="Windows_Color_Settings"
+                                                     IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                                </controls:Setting.Description>
+                                <controls:Setting.ActionContent>
+                                    <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}">
+                                        <ComboBoxItem x:Uid="Radio_Theme_Dark"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Light"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Default"/>
+                                    </ComboBox>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </muxc:Expander.Header>
+                        <muxc:Expander.Content>
+                            <StackPanel Orientation="Vertical">
+                                <controls:Setting x:Uid="ShortcutGuide_OverlayOpacity" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <Slider Minimum="0"
+                                        Maximum="100"
+                                        Width="240"
+                                        Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"
+                                        IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                            </StackPanel>
+                        </muxc:Expander.Content>
+                    </muxc:Expander>
+                    <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}"    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                        <muxc:Expander.Header>
+                            <controls:Setting x:Uid="ShortcutGuide_DisabledApps" Style="{StaticResource ExpanderHeaderSettingStyle}"/>
+                        </muxc:Expander.Header>
+                        <muxc:Expander.Content>
+                            <TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
+                                         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"
+                                         MinWidth="240"
+                                         MinHeight="160" />
+                        </muxc:Expander.Content>
+                    </muxc:Expander>
+                </toolkitcontrols:HeaderedItemsControl>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
         <controls:SettingsPageControl.ModuleLinks>