[UX] New dashboard & refactored KeyVisual (#40214)

### Updated `KeyVisual` and `Shortcut` control
- Refactoring `KeyVisual` to remove redundant properties and UI
elements, and using Styles for better customization.
- Shortcut control now shows a "Configure shortcut" label when there's
no shortcut configured.

### Other changes
- Consolidated converters that were used across pages in `App.xaml.cs`
with consistent naming.
- Renamed templated controls (from `.cs` to `.xaml.cs`) and moving those
to the `Controls` root folder vs. individual folders for a better
overview.
<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

Closes #39520
Closes #32944

---------

Co-authored-by: Jay <65828559+Jay-o-Way@users.noreply.github.com>
Co-authored-by: Jaylyn Barbee <51131738+Jaylyn-Barbee@users.noreply.github.com>

src/settings-ui/Settings.UI.Library/HotkeySettings.cs

@@ -120,9 +120,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
 
             if (Shift)
             {
-                shortcutList.Add("Shift");
+                shortcutList.Add(16); // The Shift key or button.
-
-                // shortcutList.Add(16); // The Shift key or button.
             }
 
             if (Code > 0)

src/settings-ui/Settings.UI/Converters/KeyVisualTemplateSelector.cs

@@ -1,23 +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 Microsoft.PowerToys.Settings.UI.Library;
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-
-namespace Microsoft.PowerToys.Settings.UI.Converters
-{
-    internal sealed partial class KeyVisualTemplateSelector : DataTemplateSelector
-    {
-        public DataTemplate KeyVisualTemplate { get; set; }
-
-        public DataTemplate CommaTemplate { get; set; }
-
-        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
-        {
-            var stringValue = item as string;
-            return stringValue == KeysDataModel.CommaSeparator ? CommaTemplate : KeyVisualTemplate;
-        }
-    }
-}

src/settings-ui/Settings.UI/Converters/ModuleItemTemplateSelector.cs

@@ -10,23 +10,17 @@ namespace Microsoft.PowerToys.Settings.UI.Converters
 {
     public partial class ModuleItemTemplateSelector : DataTemplateSelector
     {
-        public DataTemplate TextTemplate { get; set; }
-
-        public DataTemplate ButtonTemplate { get; set; }
-
         public DataTemplate ShortcutTemplate { get; set; }
 
-        public DataTemplate KBMTemplate { get; set; }
+        public DataTemplate ActivationTemplate { get; set; }
 
         protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
         {
             switch (item)
             {
-                case DashboardModuleButtonItem: return ButtonTemplate;
                 case DashboardModuleShortcutItem: return ShortcutTemplate;
-                case DashboardModuleTextItem: return TextTemplate;
+                case DashboardModuleActivationItem: return ActivationTemplate;
-                case DashboardModuleKBMItem: return KBMTemplate;
+                default: return ActivationTemplate;
-                default: return TextTemplate;
             }
         }
     }

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

@@ -22,6 +22,9 @@
   <ItemGroup>
     <None Remove="Assets\Settings\Modules\APDialog.dark.png" />
     <None Remove="Assets\Settings\Modules\APDialog.light.png" />
+    <None Remove="SettingsXAML\Controls\Dashboard\CheckUpdateControl.xaml" />
+    <None Remove="SettingsXAML\Controls\Dashboard\ShortcutConflictControl.xaml" />
+    <None Remove="SettingsXAML\Controls\KeyVisual\KeyCharPresenter.xaml" />
   </ItemGroup>
   <ItemGroup>
     <Page Remove="SettingsXAML\App.xaml" />
@@ -132,6 +135,15 @@
     <None Update="Assets\Settings\Scripts\DisableModule.ps1">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>
+    <Page Update="SettingsXAML\Controls\KeyVisual\KeyCharPresenter.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Update="SettingsXAML\Controls\Dashboard\ShortcutConflictControl.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Update="SettingsXAML\Controls\Dashboard\CheckUpdateControl.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
   </ItemGroup>
 
   <ItemGroup>

src/settings-ui/Settings.UI/SettingsXAML/App.xaml

@@ -3,17 +3,20 @@
     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:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
     xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                 <ResourceDictionary Source="/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml" />
+                <ResourceDictionary Source="/SettingsXAML/Controls/KeyVisual/KeyCharPresenter.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/TextBlock.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/Button.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/InfoBadge.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Themes/Colors.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Themes/Generic.xaml" />
+
                 <!--  Other merged dictionaries here  -->
             </ResourceDictionary.MergedDictionaries>
 
@@ -26,19 +29,28 @@
                 x:Key="BoolToVisibilityConverter"
                 FalseValue="Collapsed"
                 TrueValue="Visible" />
-
             <tkconverters:BoolToObjectConverter
                 x:Key="BoolToComboBoxIndexConverter"
                 FalseValue="0"
                 TrueValue="1" />
-
             <tkconverters:BoolToObjectConverter
                 x:Key="ReverseBoolToComboBoxIndexConverter"
                 FalseValue="1"
                 TrueValue="0" />
-
+            <tkconverters:DoubleToVisibilityConverter
+                x:Name="DoubleToVisibilityConverter"
+                FalseValue="Collapsed"
+                GreaterThan="0"
+                TrueValue="Visible" />
+            <tkconverters:DoubleToVisibilityConverter
+                x:Name="DoubleToInvertedVisibilityConverter"
+                FalseValue="Visible"
+                GreaterThan="0"
+                TrueValue="Collapsed" />
             <tkconverters:StringFormatConverter x:Key="StringFormatConverter" />
             <tkconverters:BoolNegationConverter x:Key="BoolNegationConverter" />
+            <converters:UpdateStateToBoolConverter x:Key="UpdateStateToBoolConverter" />
+
             <x:Double x:Key="SettingsCardSpacing">2</x:Double>
 
             <!--  Overrides  -->
@@ -46,6 +58,7 @@
             <Thickness x:Key="InfoBarContentRootPadding">16,0,0,0</Thickness>
             <x:Double x:Key="SettingActionControlMinWidth">240</x:Double>
 
+            <x:Double x:Key="PageMaxWidth">1000</x:Double>
 
             <Style TargetType="ListViewItem">
                 <Setter Property="Margin" Value="0,0,0,2" />
@@ -55,7 +68,6 @@
             </Style>
 
             <Style BasedOn="{StaticResource DefaultCheckBoxStyle}" TargetType="controls:CheckBoxWithDescriptionControl" />
-            <!--  Other app resources here  -->
 
             <TransitionCollection x:Key="SettingsCardsAnimations">
                 <EntranceThemeTransition FromVerticalOffset="50" />
@@ -63,6 +75,9 @@
                 <RepositionThemeTransition IsStaggeringEnabled="False" />
                 <!--  Smoothly animates individual cards upon whenever Expanders are expanded/collapsed  -->
             </TransitionCollection>
+
+            <!--  Additional resources or settings can be added here  -->
+
         </ResourceDictionary>
     </Application.Resources>
 </Application>

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/Card.xaml

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.Controls.Card"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Padding="8"
+    HorizontalContentAlignment="Stretch"
+    VerticalContentAlignment="Stretch"
+    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+    BorderThickness="1"
+    CornerRadius="{StaticResource OverlayCornerRadius}"
+    mc:Ignorable="d">
+    <Grid
+        VerticalAlignment="{x:Bind VerticalContentAlignment, Mode=OneWay}"
+        Background="{x:Bind Background, Mode=OneWay}"
+        BorderBrush="{x:Bind BorderBrush, Mode=OneWay}"
+        BorderThickness="{x:Bind BorderThickness, Mode=OneWay}"
+        CornerRadius="{x:Bind CornerRadius, Mode=OneWay}">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" MinHeight="44" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <Grid x:Name="TitleGrid">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <TextBlock
+                Margin="16,0,0,0"
+                VerticalAlignment="Center"
+                FontSize="16"
+                FontWeight="SemiBold"
+                Text="{x:Bind Title, Mode=OneWay}" />
+            <ContentPresenter
+                Grid.Column="2"
+                HorizontalAlignment="Right"
+                VerticalAlignment="Center"
+                Content="{x:Bind TitleContent, Mode=OneWay}" />
+        </Grid>
+        <Rectangle
+            x:Name="Divider"
+            Grid.Row="1"
+            Height="1"
+            HorizontalAlignment="Stretch"
+            Fill="{ThemeResource DividerStrokeColorDefaultBrush}"
+            Visibility="{x:Bind DividerVisibility, Mode=OneWay}" />
+
+        <ContentPresenter
+            Grid.Row="2"
+            Margin="{x:Bind Padding, Mode=OneWay}"
+            HorizontalAlignment="{x:Bind HorizontalContentAlignment, Mode=OneWay}"
+            VerticalAlignment="{x:Bind VerticalContentAlignment, Mode=OneWay}"
+            Content="{x:Bind Content, Mode=OneWay}" />
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="TitleGridVisibilityStates">
+                <VisualState x:Name="TitleGridVisible" />
+                <VisualState x:Name="TitleGridCollapsed">
+                    <VisualState.Setters>
+                        <Setter Target="TitleGrid.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+    </Grid>
+</UserControl>

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/Card.xaml.cs

@@ -0,0 +1,73 @@
+// 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 Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class Card : UserControl
+    {
+        public static readonly DependencyProperty TitleContentProperty = DependencyProperty.Register(nameof(TitleContent), typeof(object), typeof(Card), new PropertyMetadata(defaultValue: null, OnVisualPropertyChanged));
+
+        public object TitleContent
+        {
+            get => (object)GetValue(TitleContentProperty);
+            set => SetValue(TitleContentProperty, value);
+        }
+
+        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(nameof(Title), typeof(string), typeof(Card), new PropertyMetadata(defaultValue: null, OnVisualPropertyChanged));
+
+        public string Title
+        {
+            get => (string)GetValue(TitleProperty);
+            set => SetValue(TitleProperty, value);
+        }
+
+        public static new readonly DependencyProperty ContentProperty = DependencyProperty.Register(nameof(Content), typeof(object), typeof(Card), new PropertyMetadata(defaultValue: null));
+
+        [System.Diagnostics.CodeAnalysis.SuppressMessage("Design", "CA1061:Do not hide base class methods", Justification = "We need to hide the base class method")]
+        public new object Content
+        {
+            get => (object)GetValue(ContentProperty);
+            set => SetValue(ContentProperty, value);
+        }
+
+        public static readonly DependencyProperty DividerVisibilityProperty = DependencyProperty.Register(nameof(DividerVisibility), typeof(Visibility), typeof(Card), new PropertyMetadata(defaultValue: null));
+
+        public Visibility DividerVisibility
+        {
+            get => (Visibility)GetValue(DividerVisibilityProperty);
+            set => SetValue(DividerVisibilityProperty, value);
+        }
+
+        public Card()
+        {
+            InitializeComponent();
+            SetVisualStates();
+        }
+
+        private static void OnVisualPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is Card card)
+            {
+                card.SetVisualStates();
+            }
+        }
+
+        private void SetVisualStates()
+        {
+            if (string.IsNullOrEmpty(Title) && TitleContent == null)
+            {
+                VisualStateManager.GoToState(this, "TitleGridCollapsed", true);
+                DividerVisibility = Visibility.Collapsed;
+            }
+            else
+            {
+                VisualStateManager.GoToState(this, "TitleGridVisible", true);
+                DividerVisibility = Visibility.Visible;
+            }
+        }
+    }
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/CheckUpdateControl.xaml

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.Controls.CheckUpdateControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <StackPanel Orientation="Horizontal">
+        <Button
+            Click="SWVersionButtonClicked"
+            Style="{StaticResource SubtleButtonStyle}"
+            Visibility="{x:Bind UpdateAvailable, Mode=OneWay}">
+            <Grid ColumnSpacing="16">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <Border
+                    Width="20"
+                    Height="20"
+                    CornerRadius="10">
+                    <Border.Background>
+                        <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1">
+                            <GradientStop Offset="0.0" Color="#239DE0" />
+                            <GradientStop Offset="1.0" Color="#037CD6" />
+                        </LinearGradientBrush>
+                    </Border.Background>
+                    <FontIcon
+                        AutomationProperties.AccessibilityView="Raw"
+                        FontSize="11"
+                        Foreground="White"
+                        Glyph="&#xE895;" />
+                </Border>
+                <StackPanel Grid.Column="1" Orientation="Vertical">
+                    <TextBlock x:Uid="UpdateAvailableTextBlock" FontWeight="SemiBold" />
+                    <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Style="{StaticResource CaptionTextBlockStyle}">
+                        <Run x:Uid="GeneralVersion" />
+                        <Run Text="{x:Bind UpdateSettingsConfig.NewVersion, Mode=OneWay}" />
+                    </TextBlock>
+                </StackPanel>
+            </Grid>
+        </Button>
+        <Grid
+            Padding="0,0,4,0"
+            VerticalAlignment="Center"
+            ColumnSpacing="16"
+            Visibility="{x:Bind UpdateAvailable, Converter={StaticResource ReverseBoolToVisibilityConverter}, Mode=OneWay}">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Border
+                Width="20"
+                Height="20"
+                CornerRadius="10">
+                <Border.Background>
+                    <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1">
+                        <GradientStop Offset="0.0" Color="#6FB538" />
+                        <GradientStop Offset="1.0" Color="#397A24" />
+                    </LinearGradientBrush>
+                </Border.Background>
+                <FontIcon
+                    AutomationProperties.AccessibilityView="Raw"
+                    FontSize="11"
+                    Foreground="White"
+                    Glyph="&#xE73E;" />
+            </Border>
+            <StackPanel Grid.Column="1" Orientation="Vertical">
+                <TextBlock x:Uid="YoureUpToDate" FontWeight="SemiBold" />
+                <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Style="{StaticResource CaptionTextBlockStyle}">
+                    <Run x:Uid="General_VersionLastChecked" />
+                    <Run Text="{x:Bind UpdateSettingsConfig.LastCheckedDateLocalized, Mode=OneWay}" />
+                </TextBlock>
+            </StackPanel>
+        </Grid>
+    </StackPanel>
+</UserControl>

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/CheckUpdateControl.xaml.cs

@@ -0,0 +1,30 @@
+// 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 Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.Services;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class CheckUpdateControl : UserControl
+    {
+        public bool UpdateAvailable { get; set; }
+
+        public UpdatingSettings UpdateSettingsConfig { get; set; }
+
+        public CheckUpdateControl()
+        {
+            InitializeComponent();
+            UpdateSettingsConfig = UpdatingSettings.LoadSettings();
+            UpdateAvailable = UpdateSettingsConfig != null && (UpdateSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToInstall || UpdateSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToDownload);
+        }
+
+        private void SWVersionButtonClicked(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        {
+            NavigationService.Navigate(typeof(GeneralPage));
+        }
+    }
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/ShortcutConflictControl.xaml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.Controls.ShortcutConflictControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Button Click="ShortcutConflictBtn_Click" Style="{StaticResource SubtleButtonStyle}">
+            <Grid ColumnSpacing="16">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <FontIcon
+                    AutomationProperties.AccessibilityView="Raw"
+                    FontSize="20"
+                    Foreground="{ThemeResource SystemFillColorCriticalBrush}"
+                    Glyph="&#xE814;" />
+                <StackPanel Grid.Column="1" Orientation="Vertical">
+                    <TextBlock FontWeight="SemiBold" Text="Shortcut conflicts" />
+                    <TextBlock
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Style="{StaticResource CaptionTextBlockStyle}"
+                        Text="2 conflicts found" />
+                </StackPanel>
+            </Grid>
+        </Button>
+    </Grid>
+</UserControl>

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/ShortcutConflictControl.xaml.cs

@@ -0,0 +1,40 @@
+// 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.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class ShortcutConflictControl : UserControl
+    {
+        public ShortcutConflictControl()
+        {
+            InitializeComponent();
+            GetShortcutConflicts();
+        }
+
+        private void GetShortcutConflicts()
+        {
+            // TO DO: Implement the logic to retrieve and display shortcut conflicts. Make sure to Collapse this control if not conflicts are found.
+        }
+
+        private void ShortcutConflictBtn_Click(object sender, RoutedEventArgs e)
+        {
+            // TO DO: Handle the button click event to show the shortcut conflicts window.
+        }
+    }
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyCharPresenter.xaml

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<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.Controls"
+    xmlns:ui="using:CommunityToolkit.WinUI">
+
+    <Style BasedOn="{StaticResource DefaultKeyCharPresenterStyle}" TargetType="local:KeyCharPresenter" />
+
+    <Style x:Key="DefaultKeyCharPresenterStyle" TargetType="local:KeyCharPresenter">
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyCharPresenter">
+                    <Grid Height="{TemplateBinding FontSize}">
+                        <TextBlock
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            FontFamily="{TemplateBinding FontFamily}"
+                            FontSize="{TemplateBinding FontSize}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Text="{TemplateBinding Content}"
+                            TextLineBounds="Tight" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style
+        x:Key="WindowsKeyCharPresenterStyle"
+        BasedOn="{StaticResource DefaultKeyCharPresenterStyle}"
+        TargetType="local:KeyCharPresenter">
+        <!--  Scale to visually align the height of the Windows logo and text  -->
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyCharPresenter">
+                    <Grid Height="{TemplateBinding FontSize}">
+                        <Viewbox>
+                            <PathIcon Data="M9 20H0V11H9V20ZM20 20H11V11H20V20ZM9 9H0V0H9V9ZM20 9H11V0H20V9Z" />
+                        </Viewbox>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style
+        x:Key="GlyphKeyCharPresenterStyle"
+        BasedOn="{StaticResource DefaultKeyCharPresenterStyle}"
+        TargetType="local:KeyCharPresenter">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyCharPresenter">
+                    <Grid>
+                        <Viewbox>
+                            <FontIcon
+                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                FontSize="{TemplateBinding FontSize}"
+                                FontWeight="{TemplateBinding FontWeight}"
+                                Glyph="{TemplateBinding Content}" />
+                        </Viewbox>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyCharPresenter.xaml.cs

@@ -0,0 +1,32 @@
+// 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.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Documents;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls;
+
+public sealed partial class KeyCharPresenter : Control
+{
+    public KeyCharPresenter()
+    {
+        DefaultStyleKey = typeof(KeyCharPresenter);
+    }
+
+    public object Content
+    {
+        get => (object)GetValue(ContentProperty);
+        set => SetValue(ContentProperty, value);
+    }
+
+    public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(nameof(Content), typeof(object), typeof(KeyCharPresenter), new PropertyMetadata(default(string)));
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyVisual.cs

@@ -1,191 +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 Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Markup;
-using Windows.System;
-
-namespace Microsoft.PowerToys.Settings.UI.Controls
-{
-    [TemplatePart(Name = KeyPresenter, Type = typeof(ContentPresenter))]
-    [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
-    [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
-    [TemplateVisualState(Name = "Default", GroupName = "StateStates")]
-    [TemplateVisualState(Name = "Error", GroupName = "StateStates")]
-    public sealed partial class KeyVisual : Control
-    {
-        private const string KeyPresenter = "KeyPresenter";
-        private KeyVisual _keyVisual;
-        private ContentPresenter _keyPresenter;
-
-        public object Content
-        {
-            get => (object)GetValue(ContentProperty);
-            set => SetValue(ContentProperty, value);
-        }
-
-        public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(KeyVisual), new PropertyMetadata(default(string), OnContentChanged));
-
-        public VisualType VisualType
-        {
-            get => (VisualType)GetValue(VisualTypeProperty);
-            set => SetValue(VisualTypeProperty, value);
-        }
-
-        public static readonly DependencyProperty VisualTypeProperty = DependencyProperty.Register("VisualType", typeof(VisualType), typeof(KeyVisual), new PropertyMetadata(default(VisualType), OnSizeChanged));
-
-        public bool IsError
-        {
-            get => (bool)GetValue(IsErrorProperty);
-            set => SetValue(IsErrorProperty, value);
-        }
-
-        public static readonly DependencyProperty IsErrorProperty = DependencyProperty.Register("IsError", typeof(bool), typeof(KeyVisual), new PropertyMetadata(false, OnIsErrorChanged));
-
-        public KeyVisual()
-        {
-            this.DefaultStyleKey = typeof(KeyVisual);
-            this.Style = GetStyleSize("TextKeyVisualStyle");
-        }
-
-        protected override void OnApplyTemplate()
-        {
-            IsEnabledChanged -= KeyVisual_IsEnabledChanged;
-            _keyVisual = (KeyVisual)this;
-            _keyPresenter = (ContentPresenter)_keyVisual.GetTemplateChild(KeyPresenter);
-            Update();
-            SetEnabledState();
-            SetErrorState();
-            IsEnabledChanged += KeyVisual_IsEnabledChanged;
-            base.OnApplyTemplate();
-        }
-
-        private static void OnContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            ((KeyVisual)d).Update();
-        }
-
-        private static void OnSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            ((KeyVisual)d).Update();
-        }
-
-        private static void OnIsErrorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            ((KeyVisual)d).SetErrorState();
-        }
-
-        private void Update()
-        {
-            if (_keyVisual == null)
-            {
-                return;
-            }
-
-            if (_keyVisual.Content != null)
-            {
-                if (_keyVisual.Content.GetType() == typeof(string))
-                {
-                    _keyVisual.Style = GetStyleSize("TextKeyVisualStyle");
-                    _keyVisual._keyPresenter.Content = _keyVisual.Content;
-                }
-                else
-                {
-                    _keyVisual.Style = GetStyleSize("IconKeyVisualStyle");
-
-                    switch ((int)_keyVisual.Content)
-                    {
-                        /* We can enable other glyphs in the future
-                        case 13: // The Enter key or button.
-                            _keyVisual._keyPresenter.Content = "\uE751"; break;
-
-                        case 8: // The Back key or button.
-                            _keyVisual._keyPresenter.Content = "\uE750"; break;
-
-                        case 16: // The right Shift key or button.
-                        case 160: // The left Shift key or button.
-                        case 161: // The Shift key or button.
-                            _keyVisual._keyPresenter.Content = "\uE752"; break; */
-
-                        case 38: _keyVisual._keyPresenter.Content = "\uE0E4"; break; // The Up Arrow key or button.
-                        case 40: _keyVisual._keyPresenter.Content = "\uE0E5"; break; // The Down Arrow key or button.
-                        case 37: _keyVisual._keyPresenter.Content = "\uE0E2"; break; // The Left Arrow key or button.
-                        case 39: _keyVisual._keyPresenter.Content = "\uE0E3"; break; // The Right Arrow key or button.
-
-                        case 91: // The left Windows key
-                        case 92: // The right Windows key
-                            PathIcon winIcon = XamlReader.Load(@"<PathIcon xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" Data=""M683 1229H0V546h683v683zm819 0H819V546h683v683zm-819 819H0v-683h683v683zm819 0H819v-683h683v683z"" />") as PathIcon;
-                            Viewbox winIconContainer = new Viewbox();
-                            winIconContainer.Child = winIcon;
-                            winIconContainer.HorizontalAlignment = HorizontalAlignment.Center;
-                            winIconContainer.VerticalAlignment = VerticalAlignment.Center;
-
-                            double iconDimensions = GetIconSize();
-                            winIconContainer.Height = iconDimensions;
-                            winIconContainer.Width = iconDimensions;
-                            _keyVisual._keyPresenter.Content = winIconContainer;
-                            break;
-                        default: _keyVisual._keyPresenter.Content = ((VirtualKey)_keyVisual.Content).ToString(); break;
-                    }
-                }
-            }
-        }
-
-        public Style GetStyleSize(string styleName)
-        {
-            if (VisualType == VisualType.Small)
-            {
-                return (Style)App.Current.Resources["Small" + styleName];
-            }
-            else if (VisualType == VisualType.SmallOutline)
-            {
-                return (Style)App.Current.Resources["SmallOutline" + styleName];
-            }
-            else if (VisualType == VisualType.TextOnly)
-            {
-                return (Style)App.Current.Resources["Only" + styleName];
-            }
-            else
-            {
-                return (Style)App.Current.Resources["Default" + styleName];
-            }
-        }
-
-        public double GetIconSize()
-        {
-            if (VisualType == VisualType.Small || VisualType == VisualType.SmallOutline)
-            {
-                return (double)App.Current.Resources["SmallIconSize"];
-            }
-            else
-            {
-                return (double)App.Current.Resources["DefaultIconSize"];
-            }
-        }
-
-        private void KeyVisual_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
-        {
-            SetEnabledState();
-        }
-
-        private void SetErrorState()
-        {
-            VisualStateManager.GoToState(this, IsError ? "Error" : "Default", true);
-        }
-
-        private void SetEnabledState()
-        {
-            VisualStateManager.GoToState(this, IsEnabled ? "Normal" : "Disabled", true);
-        }
-    }
-
-    public enum VisualType
-    {
-        Small,
-        SmallOutline,
-        TextOnly,
-        Large,
-    }
-}

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml

@@ -1,66 +1,70 @@
 <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:local="using:Microsoft.PowerToys.Settings.UI.Controls">
 
-    <x:Double x:Key="DefaultIconSize">16</x:Double>
+    <Style BasedOn="{StaticResource DefaultKeyVisualStyle}" TargetType="local:KeyVisual" />
-    <x:Double x:Key="SmallIconSize">12</x:Double>
+
-    <Style x:Key="DefaultTextKeyVisualStyle" TargetType="controls:KeyVisual">
+    <Style x:Key="DefaultKeyVisualStyle" TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="56" />
+        <Setter Property="MinWidth" Value="16" />
-        <Setter Property="MinHeight" Value="48" />
+        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
-        <Setter Property="Background" Value="{ThemeResource AccentButtonBackground}" />
+        <Setter Property="IsTabStop" Value="False" />
-        <Setter Property="Foreground" Value="{ThemeResource AccentButtonForeground}" />
+        <Setter Property="MinHeight" Value="16" />
-        <Setter Property="BorderBrush" Value="{ThemeResource AccentButtonBorderBrush}" />
+        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
-        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
+        <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
-        <Setter Property="Padding" Value="16,8,16,8" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
-        <Setter Property="FontWeight" Value="SemiBold" />
+        <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Padding" Value="4,4,4,4" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="CornerRadius" Value="2" />
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="FontSize" Value="18" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
             <Setter.Value>
-                <ControlTemplate TargetType="controls:KeyVisual">
+                <ControlTemplate TargetType="local:KeyVisual">
-                    <Grid>
+                    <Grid
-                        <Grid>
+                        x:Name="KeyHolder"
-                            <Rectangle
-                                x:Name="ContentHolder"
-                                Height="{TemplateBinding Height}"
                         MinWidth="{TemplateBinding MinWidth}"
-                                Fill="{TemplateBinding Background}"
+                        MinHeight="{TemplateBinding MinHeight}"
-                                RadiusX="4"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                                RadiusY="4"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                                Stroke="{TemplateBinding BorderBrush}"
+                        Background="{TemplateBinding Background}"
-                                StrokeThickness="{TemplateBinding BorderThickness}" />
+                        BorderBrush="{TemplateBinding BorderBrush}"
-                            <ContentPresenter
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid.BackgroundTransition>
+                            <BrushTransition Duration="0:0:0.083" />
+                        </Grid.BackgroundTransition>
+                        <local:KeyCharPresenter
                             x:Name="KeyPresenter"
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalAlignment="Center"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AutomationProperties.AccessibilityView="Raw"
                             Content="{TemplateBinding Content}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
                             Foreground="{TemplateBinding Foreground}" />
-                        </Grid>
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />
                                 <VisualState x:Name="Disabled">
                                     <VisualState.Setters>
-                                        <Setter Target="ContentHolder.Fill" Value="{ThemeResource AccentButtonBackgroundDisabled}" />
+                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
-                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource AccentButtonForegroundDisabled}" />
+                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolidBrush}" />
-                                        <Setter Target="ContentHolder.Stroke" Value="{ThemeResource AccentButtonBorderBrushDisabled}" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
-                                        <!--<Setter Target="ContentHolder.StrokeThickness" Value="{TemplateBinding BorderThickness}" />-->
                                     </VisualState.Setters>
                                 </VisualState>
-                            </VisualStateGroup>
+                                <VisualState x:Name="Invalid">
-                            <VisualStateGroup x:Name="StateStates">
-                                <VisualState x:Name="Default" />
-                                <VisualState x:Name="Error">
                                     <VisualState.Setters>
-                                        <Setter Target="ContentHolder.Fill" Value="{ThemeResource InfoBarErrorSeverityBackgroundBrush}" />
+                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
-                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource InfoBarErrorSeverityIconBackground}" />
+                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource SystemFillColorCriticalBrush}" />
-                                        <Setter Target="ContentHolder.Stroke" Value="{ThemeResource InfoBarErrorSeverityIconBackground}" />
+                                        <Setter Target="KeyHolder.BorderThickness" Value="2" />
-                                        <Setter Target="ContentHolder.StrokeThickness" Value="2" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
@@ -72,103 +76,116 @@
     </Style>
 
     <Style
-        x:Key="SmallTextKeyVisualStyle"
+        x:Key="SubtleKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
+        BasedOn="{StaticResource DefaultKeyVisualStyle}"
-        TargetType="controls:KeyVisual">
+        TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="40" />
+        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
-        <Setter Property="Height" Value="36" />
+        <Setter Property="BorderBrush" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
-        <Setter Property="FontWeight" Value="SemiBold" />
+        <Setter Property="Template">
-        <Setter Property="Padding" Value="12,0,12,2" />
+            <Setter.Value>
-        <Setter Property="FontSize" Value="14" />
+                <ControlTemplate TargetType="local:KeyVisual">
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
+                    <Grid
+                        x:Name="KeyHolder"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid.BackgroundTransition>
+                            <BrushTransition Duration="0:0:0.083" />
+                        </Grid.BackgroundTransition>
+                        <local:KeyCharPresenter
+                            x:Name="KeyPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AutomationProperties.AccessibilityView="Raw"
+                            Content="{TemplateBinding Content}"
+                            FontSize="{TemplateBinding FontSize}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{TemplateBinding Foreground}" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Invalid">
+                                    <VisualState.Setters>
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
     </Style>
 
     <Style
-        x:Key="SmallOutlineTextKeyVisualStyle"
+        x:Key="AccentKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
+        BasedOn="{StaticResource DefaultKeyVisualStyle}"
-        TargetType="controls:KeyVisual">
+        TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="40" />
-        <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
-        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
-        <Setter Property="Height" Value="36" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="Padding" Value="8,0,8,2" />
-        <Setter Property="FontSize" Value="13" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
 
-
+        <Setter Property="Background" Value="{ThemeResource AccentFillColorDefaultBrush}" />
-
+        <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
-    <Style
+        <Setter Property="BorderBrush" Value="{ThemeResource AccentControlElevationBorderBrush}" />
-        x:Key="DefaultIconKeyVisualStyle"
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
+        <Setter Property="Template">
-        TargetType="controls:KeyVisual">
+            <Setter.Value>
-        <Setter Property="MinWidth" Value="56" />
+                <ControlTemplate TargetType="local:KeyVisual">
-        <Setter Property="MinHeight" Value="48" />
+                    <Grid
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
+                        x:Name="KeyHolder"
-        <Setter Property="Padding" Value="16,8,16,8" />
+                        MinWidth="{TemplateBinding MinWidth}"
-        <Setter Property="FontSize" Value="14" />
+                        MinHeight="{TemplateBinding MinHeight}"
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-    </Style>
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
-
+                        AutomationProperties.AccessibilityView="Raw"
-    <Style
+                        Background="{TemplateBinding Background}"
-        x:Key="SmallIconKeyVisualStyle"
+                        BorderBrush="{TemplateBinding BorderBrush}"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
-        TargetType="controls:KeyVisual">
+                        CornerRadius="{TemplateBinding CornerRadius}">
-        <Setter Property="MinWidth" Value="40" />
+                        <Grid.BackgroundTransition>
-        <Setter Property="Height" Value="36" />
+                            <BrushTransition Duration="0:0:0.083" />
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
+                        </Grid.BackgroundTransition>
-        <Setter Property="FontWeight" Value="Normal" />
+                        <local:KeyCharPresenter
-        <Setter Property="Padding" Value="0" />
+                            x:Name="KeyPresenter"
-        <Setter Property="FontSize" Value="10" />
+                            Margin="{TemplateBinding Padding}"
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-    </Style>
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-
+                            Content="{TemplateBinding Content}"
-    <Style
+                            FontSize="{TemplateBinding FontSize}"
-        x:Key="SmallOutlineIconKeyVisualStyle"
+                            FontWeight="{TemplateBinding FontWeight}"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
+                            Foreground="{TemplateBinding Foreground}" />
-        TargetType="controls:KeyVisual">
+                        <VisualStateManager.VisualStateGroups>
-        <Setter Property="MinWidth" Value="40" />
+                            <VisualStateGroup x:Name="CommonStates">
-        <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
+                                <VisualState x:Name="Normal" />
-        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
+                                <VisualState x:Name="Disabled">
-        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
+                                    <VisualState.Setters>
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
+                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource AccentButtonBackgroundDisabled}" />
-        <Setter Property="Height" Value="36" />
+                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource AccentButtonBorderBrushDisabled}" />
-        <Setter Property="FontWeight" Value="SemiBold" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource AccentButtonForegroundDisabled}" />
-        <Setter Property="Padding" Value="0" />
+                                    </VisualState.Setters>
-        <Setter Property="FontSize" Value="9" />
+                                </VisualState>
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
+                                <VisualState x:Name="Invalid">
-    </Style>
+                                    <VisualState.Setters>
-
+                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
-    <Style
+                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource SystemFillColorCriticalBrush}" />
-        x:Key="OnlyTextKeyVisualStyle"
+                                        <Setter Target="KeyHolder.BorderThickness" Value="2" />
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
-        TargetType="controls:KeyVisual">
+                                    </VisualState.Setters>
-        <Setter Property="MinHeight" Value="12" />
+                                </VisualState>
-        <Setter Property="MinWidth" Value="12" />
+                            </VisualStateGroup>
-        <Setter Property="Background" Value="Transparent" />
+                        </VisualStateManager.VisualStateGroups>
-        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
+                    </Grid>
-        <Setter Property="BorderBrush" Value="Transparent" />
+                </ControlTemplate>
-        <Setter Property="FontWeight" Value="Normal" />
+            </Setter.Value>
-        <Setter Property="Padding" Value="0" />
+        </Setter>
-        <Setter Property="FontSize" Value="12" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="OnlyIconKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="controls:KeyVisual">
-        <Setter Property="MinHeight" Value="10" />
-        <Setter Property="MinWidth" Value="10" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
-        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
-        <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="Padding" Value="0,0,0,3" />
-        <!--<Setter Property="FontSize" Value="9" />-->
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
     </Style>
 </ResourceDictionary>

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml.cs

@@ -0,0 +1,166 @@
+// 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 Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Windows.System;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    [TemplatePart(Name = KeyPresenter, Type = typeof(KeyCharPresenter))]
+    [TemplateVisualState(Name = NormalState, GroupName = "CommonStates")]
+    [TemplateVisualState(Name = DisabledState, GroupName = "CommonStates")]
+    [TemplateVisualState(Name = InvalidState, GroupName = "CommonStates")]
+    public sealed partial class KeyVisual : Control
+    {
+        private const string KeyPresenter = "KeyPresenter";
+        private const string NormalState = "Normal";
+        private const string DisabledState = "Disabled";
+        private const string InvalidState = "Invalid";
+        private KeyCharPresenter _keyPresenter;
+
+        public object Content
+        {
+            get => (object)GetValue(ContentProperty);
+            set => SetValue(ContentProperty, value);
+        }
+
+        public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(nameof(Content), typeof(object), typeof(KeyVisual), new PropertyMetadata(default(string), OnContentChanged));
+
+        public bool IsInvalid
+        {
+            get => (bool)GetValue(IsInvalidProperty);
+            set => SetValue(IsInvalidProperty, value);
+        }
+
+        public static readonly DependencyProperty IsInvalidProperty = DependencyProperty.Register(nameof(IsInvalid), typeof(bool), typeof(KeyVisual), new PropertyMetadata(false, OnIsInvalidChanged));
+
+        public bool RenderKeyAsGlyph
+        {
+            get => (bool)GetValue(RenderKeyAsGlyphProperty);
+            set => SetValue(RenderKeyAsGlyphProperty, value);
+        }
+
+        public static readonly DependencyProperty RenderKeyAsGlyphProperty = DependencyProperty.Register(nameof(RenderKeyAsGlyph), typeof(bool), typeof(KeyVisual), new PropertyMetadata(false, OnContentChanged));
+
+        public KeyVisual()
+        {
+            this.DefaultStyleKey = typeof(KeyVisual);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            IsEnabledChanged -= KeyVisual_IsEnabledChanged;
+            _keyPresenter = (KeyCharPresenter)this.GetTemplateChild(KeyPresenter);
+            Update();
+            SetVisualStates();
+            IsEnabledChanged += KeyVisual_IsEnabledChanged;
+            base.OnApplyTemplate();
+        }
+
+        private static void OnContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((KeyVisual)d).SetVisualStates();
+        }
+
+        private static void OnIsInvalidChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((KeyVisual)d).SetVisualStates();
+        }
+
+        private void SetVisualStates()
+        {
+            if (this != null)
+            {
+                if (IsInvalid)
+                {
+                    VisualStateManager.GoToState(this, InvalidState, true);
+                }
+                else if (!IsEnabled)
+                {
+                    VisualStateManager.GoToState(this, DisabledState, true);
+                }
+                else
+                {
+                    VisualStateManager.GoToState(this, NormalState, true);
+                }
+            }
+        }
+
+        private void Update()
+        {
+            if (Content == null)
+            {
+                return;
+            }
+
+            if (Content is string)
+            {
+                _keyPresenter.Style = (Style)Application.Current.Resources["DefaultKeyCharPresenterStyle"];
+                return;
+            }
+
+            if (Content is int keyCode)
+            {
+                VirtualKey virtualKey = (VirtualKey)keyCode;
+                switch (virtualKey)
+                {
+                    case VirtualKey.Enter:
+                        SetGlyphOrText("\uE751", virtualKey);
+                        break;
+
+                    case VirtualKey.Back:
+                        SetGlyphOrText("\uE750", virtualKey);
+                        break;
+
+                    case VirtualKey.Shift:
+                    case (VirtualKey)160: // Left Shift
+                    case (VirtualKey)161: // Right Shift
+                        SetGlyphOrText("\uE752", virtualKey);
+                        break;
+
+                    case VirtualKey.Up:
+                        _keyPresenter.Content = "\uE0E4";
+                        break;
+
+                    case VirtualKey.Down:
+                        _keyPresenter.Content = "\uE0E5";
+                        break;
+
+                    case VirtualKey.Left:
+                        _keyPresenter.Content = "\uE0E2";
+                        break;
+
+                    case VirtualKey.Right:
+                        _keyPresenter.Content = "\uE0E3";
+                        break;
+
+                    case VirtualKey.LeftWindows:
+                    case VirtualKey.RightWindows:
+                        _keyPresenter.Style = (Style)Application.Current.Resources["WindowsKeyCharPresenterStyle"];
+                        break;
+                }
+            }
+        }
+
+        private void SetGlyphOrText(string glyph, VirtualKey key)
+        {
+            if (RenderKeyAsGlyph)
+            {
+                _keyPresenter.Content = glyph;
+                _keyPresenter.Style = (Style)Application.Current.Resources["GlyphKeyCharPresenterStyle"];
+            }
+            else
+            {
+                _keyPresenter.Content = key.ToString();
+                _keyPresenter.Style = (Style)Application.Current.Resources["DefaultKeyCharPresenterStyle"];
+            }
+        }
+
+        private void KeyVisual_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
+        {
+            SetVisualStates();
+        }
+    }
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/PowerAccentShortcutControl.xaml

@@ -31,8 +31,7 @@
                         VerticalAlignment="Center"
                         AutomationProperties.AccessibilityView="Raw"
                         Content="{Binding}"
-                        IsTabStop="False"
+                        IsTabStop="False" />
-                        VisualType="SmallOutline" />
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>

src/settings-ui/Settings.UI/SettingsXAML/Controls/SettingsPageControl/SettingsPageControl.xaml

@@ -6,20 +6,12 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:tk7controls="using:CommunityToolkit.WinUI.UI.Controls"
-    xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
     Loaded="UserControl_Loaded"
     mc:Ignorable="d">
-
     <UserControl.Resources>
         <x:Double x:Key="PageMaxWidth">1000</x:Double>
         <x:Double x:Key="PageHeaderMaxWidth">1020</x:Double>
-        <tkconverters:DoubleToVisibilityConverter
-            x:Name="doubleToVisibilityConverter"
-            FalseValue="Collapsed"
-            GreaterThan="0"
-            TrueValue="Visible" />
     </UserControl.Resources>
-
     <Grid Padding="20,0,0,0" RowSpacing="24">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
@@ -62,7 +54,7 @@
                         MaxWidth="160"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
-                        CornerRadius="4">
+                        CornerRadius="{StaticResource OverlayCornerRadius}">
                         <Image AutomationProperties.AccessibilityView="Raw">
                             <Image.Source>
                                 <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
@@ -113,7 +105,7 @@
                     MaxWidth="{StaticResource PageMaxWidth}"
                     AutomationProperties.Name="{x:Bind SecondaryLinksHeader}"
                     Orientation="Vertical"
-                    Visibility="{x:Bind SecondaryLinks.Count, Converter={StaticResource doubleToVisibilityConverter}}">
+                    Visibility="{x:Bind SecondaryLinks.Count, Converter={StaticResource DoubleToVisibilityConverter}}">
                     <TextBlock
                         Margin="2,8,0,0"
                         AutomationProperties.HeadingLevel="Level2"

src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml

@@ -11,21 +11,20 @@
     mc:Ignorable="d">
 
     <Grid HorizontalAlignment="Right">
-        <StackPanel Orientation="Horizontal">
         <Button
             x:Name="EditButton"
             Padding="0"
+            HorizontalAlignment="Right"
             Click="OpenDialogButton_Click"
-                CornerRadius="8">
+            Style="{StaticResource SubtleButtonStyle}">
-                <StackPanel
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                    Margin="12,6,12,6"
-                    Orientation="Horizontal"
-                    Spacing="16">
                 <ItemsControl
                     x:Name="PreviewKeysControl"
+                    Margin="2"
                     VerticalAlignment="Center"
                     IsEnabled="{Binding ElementName=EditButton, Path=IsEnabled}"
-                        IsTabStop="False">
+                    IsTabStop="False"
+                    Visibility="Collapsed">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
                             <StackPanel Orientation="Horizontal" Spacing="4" />
@@ -34,20 +33,52 @@
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
                             <controls:KeyVisual
+                                Padding="12,8,12,8"
                                 VerticalAlignment="Center"
                                 AutomationProperties.AccessibilityView="Raw"
                                 Content="{Binding}"
+                                CornerRadius="{StaticResource ControlCornerRadius}"
+                                FontWeight="SemiBold"
                                 IsTabStop="False"
-                                    VisualType="Small" />
+                                Style="{StaticResource AccentKeyVisualStyle}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
+                <StackPanel
+                    x:Name="PlaceholderPanel"
+                    Padding="8,4"
+                    BorderThickness="1"
+                    CornerRadius="{StaticResource ControlCornerRadius}"
+                    Orientation="Horizontal"
+                    Spacing="8">
+                    <!--<FontIcon
+                        AutomationProperties.AccessibilityView="Raw"
+                        FontSize="12"
+                        Glyph="&#xEDA7;" />-->
+                    <TextBlock
+                        x:Uid="ConfigureShortcutText"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                </StackPanel>
                 <FontIcon
+                    Margin="0,0,4,0"
+                    AutomationProperties.Name=""
                     FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                        FontSize="16"
+                    FontSize="14"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                     Glyph="&#xE70F;" />
             </StackPanel>
         </Button>
-        </StackPanel>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="CommonStates">
+                <VisualState x:Name="Normal" />
+                <VisualState x:Name="Configured">
+                    <VisualState.Setters>
+                        <Setter Target="PlaceholderPanel.Visibility" Value="Collapsed" />
+                        <Setter Target="PreviewKeysControl.Visibility" Value="Visible" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 </UserControl>

src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml.cs

@@ -3,7 +3,6 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
-
 using CommunityToolkit.WinUI;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
@@ -11,6 +10,7 @@ using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Automation;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Input;
+using Microsoft.Windows.ApplicationModel.Resources;
 using Windows.System;
 
 namespace Microsoft.PowerToys.Settings.UI.Controls
@@ -36,6 +36,8 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
 
         public static readonly DependencyProperty AllowDisableProperty = DependencyProperty.Register("AllowDisable", typeof(bool), typeof(ShortcutControl), new PropertyMetadata(false, OnAllowDisableChanged));
 
+        private static ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
+
         private static void OnAllowDisableChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var me = d as ShortcutControl;
@@ -50,8 +52,6 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                 return;
             }
 
-            var resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
-
             var newValue = (bool)(e?.NewValue ?? false);
 
             var text = newValue ? resourceLoader.GetString("Activation_Shortcut_With_Disable_Description") : resourceLoader.GetString("Activation_Shortcut_Description");
@@ -103,8 +103,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                 {
                     hotkeySettings = value;
                     SetValue(HotkeySettingsProperty, value);
-                    PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
+                    SetKeys();
-                    AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
                     c.Keys = HotkeySettings.GetKeysList();
                 }
             }
@@ -118,8 +117,6 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             this.Unloaded += ShortcutControl_Unloaded;
             this.Loaded += ShortcutControl_Loaded;
 
-            var resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
-
             // We create the Dialog in C# because doing it in XAML is giving WinUI/XAML Island bugs when using dark theme.
             shortcutDialog = new ContentDialog
             {
@@ -433,11 +430,9 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             hotkeySettings = null;
 
             SetValue(HotkeySettingsProperty, hotkeySettings);
-            PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
+            SetKeys();
 
             lastValidSettings = hotkeySettings;
-
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
             shortcutDialog.Hide();
         }
 
@@ -448,8 +443,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                 HotkeySettings = lastValidSettings with { };
             }
 
-            PreviewKeysControl.ItemsSource = hotkeySettings.GetKeysList();
+            SetKeys();
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
             shortcutDialog.Hide();
         }
 
@@ -462,9 +456,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
 
             var empty = new HotkeySettings();
             HotkeySettings = empty;
-
+            SetKeys();
-            PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
             shortcutDialog.Hide();
         }
 
@@ -525,5 +517,22 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             Dispose(disposing: true);
             GC.SuppressFinalize(this);
         }
+
+        private void SetKeys()
+        {
+            var keys = HotkeySettings.GetKeysList();
+
+            if (keys != null && keys.Count > 0)
+            {
+                VisualStateManager.GoToState(this, "Configured", true);
+                PreviewKeysControl.ItemsSource = keys;
+                AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            }
+            else
+            {
+                VisualStateManager.GoToState(this, "Normal", true);
+                AutomationProperties.SetHelpText(EditButton, resourceLoader.GetString("ConfigureShortcut"));
+            }
+        }
     }
 }

src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutDialogContentControl.xaml

@@ -14,9 +14,6 @@
             <RowDefinition MinHeight="110" />
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-
-        <TextBlock Grid.Row="0" />
-
         <ItemsControl
             x:Name="KeysControl"
             Grid.Row="1"
@@ -34,12 +31,15 @@
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
                     <controls:KeyVisual
-                        Height="56"
+                        Padding="20,16"
                         AutomationProperties.AccessibilityView="Raw"
                         Content="{Binding}"
-                        IsError="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
+                        CornerRadius="{StaticResource ControlCornerRadius}"
+                        FontSize="16"
+                        FontWeight="SemiBold"
+                        IsInvalid="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
                         IsTabStop="False"
-                        VisualType="Large" />
+                        Style="{StaticResource AccentKeyVisualStyle}" />
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>
@@ -51,14 +51,12 @@
             Orientation="Vertical"
             Spacing="8">
             <Grid Height="62">
-
                 <InfoBar
                     x:Uid="InvalidShortcut"
                     IsClosable="False"
                     IsOpen="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
                     IsTabStop="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
                     Severity="Error" />
-
                 <InfoBar
                     x:Uid="WarningShortcutAltGr"
                     IsClosable="False"

src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml

@@ -28,11 +28,11 @@
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
                     <controls:KeyVisual
-                        VerticalAlignment="Center"
+                        Padding="12,8,12,8"
                         AutomationProperties.AccessibilityView="Raw"
                         Content="{Binding}"
-                        IsTabStop="False"
+                        FontSize="12"
-                        VisualType="SmallOutline" />
+                        IsTabStop="False" />
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>

src/settings-ui/Settings.UI/SettingsXAML/Flyout/AppsListPage.xaml

@@ -7,17 +7,8 @@
     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:tkconverters="using:CommunityToolkit.WinUI.Converters"
     xmlns:viewModels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
     mc:Ignorable="d">
-
-    <Page.Resources>
-        <tkconverters:BoolNegationConverter x:Key="BoolNegationConverter" />
-        <tkconverters:BoolToVisibilityConverter
-            x:Key="BoolToInvertedVisibilityConverter"
-            FalseValue="Visible"
-            TrueValue="Collapsed" />
-    </Page.Resources>
     <Grid Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
@@ -89,7 +80,7 @@
                             VerticalAlignment="Center"
                             FontSize="16"
                             Glyph="&#xE72E;"
-                            Visibility="{x:Bind IsLocked, Converter={StaticResource BoolToInvertedVisibilityConverter}, ConverterParameter=True, Mode=OneWay}">
+                            Visibility="{x:Bind IsLocked, Converter={StaticResource ReverseBoolToVisibilityConverter}, ConverterParameter=True, Mode=OneWay}">
                             <ToolTipService.ToolTip>
                                 <TextBlock x:Uid="GPO_SettingIsManaged_ToolTip" TextWrapping="WrapWholeWords" />
                             </ToolTipService.ToolTip>

src/settings-ui/Settings.UI/SettingsXAML/Flyout/LaunchPage.xaml

@@ -21,7 +21,6 @@
             <Setter Property="Height" Value="32" />
             <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
         </Style>
-
         <tkconverters:StringVisibilityConverter x:Key="StringVisibilityConverter" />
     </Page.Resources>
     <Grid>
@@ -110,7 +109,7 @@
         </Grid>
         <Grid Grid.Row="2">
             <InfoBar
-                x:Uid="UpdateAvailable"
+                x:Uid="UpdateAvailableInfoBar"
                 IsClosable="False"
                 IsOpen="{x:Bind ViewModel.IsUpdateAvailable, Mode=OneWay}"
                 Severity="Success" />

src/settings-ui/Settings.UI/SettingsXAML/Themes/Generic.xaml

@@ -2,7 +2,7 @@
 
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/SettingsGroup/SettingsGroup.xaml" />
-        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/IsEnabledTextBlock/IsEnabledTextBlock.xaml" />
+        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/IsEnabledTextBlock.xaml" />
-        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/FlyoutMenuButton/FlyoutMenuButton.xaml" />
+        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/FlyoutMenuButton.xaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/settings-ui/Settings.UI/SettingsXAML/Views/CmdNotFoundPage.xaml

@@ -10,13 +10,6 @@
     xmlns:ui="using:CommunityToolkit.WinUI"
     AutomationProperties.LandmarkType="Main"
     mc:Ignorable="d">
-    <Page.Resources>
-        <tkconverters:BoolToVisibilityConverter
-            x:Key="BoolToInvertedVisibilityConverter"
-            FalseValue="Visible"
-            TrueValue="Collapsed" />
-        <tkconverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
-    </Page.Resources>
     <controls:SettingsPageControl x:Uid="CmdNotFound" ModuleImageSource="ms-appx:///Assets/Settings/Modules/CmdNotFound.png">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}" Orientation="Vertical">

src/settings-ui/Settings.UI/SettingsXAML/Views/ColorPickerPage.xaml

@@ -14,14 +14,8 @@
     d:DataContext="{d:DesignInstance Type=viewModels:ColorPickerViewModel}"
     AutomationProperties.LandmarkType="Main"
     mc:Ignorable="d">
-
-    <Page.Resources>
-        <tkconverters:BoolToVisibilityConverter x:Key="BoolToVis" />
-    </Page.Resources>
-
     <controls:SettingsPageControl x:Uid="ColorPicker" ModuleImageSource="ms-appx:///Assets/Settings/Modules/ColorPicker.png">
         <controls:SettingsPageControl.ModuleContent>
-
             <StackPanel
                 x:Name="ColorPickerView"
                 ChildrenTransitions="{StaticResource SettingsCardsAnimations}"

src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml

@@ -9,177 +9,30 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
     xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
-    xmlns:viewModels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
+    xmlns:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
     AutomationProperties.LandmarkType="Main"
     DataContext="DashboardViewModel"
     mc:Ignorable="d">
-
     <Page.Resources>
-        <DataTemplate x:Key="KeyVisualTemplate">
-            <controls:KeyVisual
-                VerticalAlignment="Center"
-                AutomationProperties.AccessibilityView="Raw"
-                Content="{Binding}"
-                IsTabStop="False"
-                VisualType="TextOnly" />
-        </DataTemplate>
-        <DataTemplate x:Key="CommaTemplate">
-            <StackPanel Background="{ThemeResource SystemFillColorSolidAttentionBackground}">
-                <TextBlock
-                    Margin="4,0"
-                    VerticalAlignment="Bottom"
-                    Text="," />
-            </StackPanel>
-        </DataTemplate>
-        <converters:KeyVisualTemplateSelector
-            x:Key="KeyVisualTemplateSelector"
-            CommaTemplate="{StaticResource CommaTemplate}"
-            KeyVisualTemplate="{StaticResource KeyVisualTemplate}" />
         <converters:ModuleItemTemplateSelector
             x:Key="ModuleItemTemplateSelector"
-            ButtonTemplate="{StaticResource ModuleItemButtonTemplate}"
+            ActivationTemplate="{StaticResource ModuleItemActivationTemplate}"
-            KBMTemplate="{StaticResource ModuleItemKBMTemplate}"
+            ShortcutTemplate="{StaticResource ModuleItemShortcutTemplate}" />
-            ShortcutTemplate="{StaticResource ModuleItemShortcutTemplate}"
+        <DataTemplate x:Key="ModuleItemShortcutTemplate" x:DataType="viewmodels:DashboardModuleShortcutItem">
-            TextTemplate="{StaticResource ModuleItemTextTemplate}" />
+            <Grid MinHeight="36" ColumnSpacing="12">
-        <tkconverters:CollectionVisibilityConverter x:Key="CollectionVisibilityConverter" />
-        <Style x:Name="KeysListViewContainerStyle" TargetType="ListViewItem">
-            <Setter Property="IsTabStop" Value="False" />
-        </Style>
-        <converters:UpdateStateToBoolConverter x:Key="UpdateStateToBoolConverter" />
-        <tkconverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
-        <tkconverters:BoolNegationConverter x:Key="BoolNegationConverter" />
-        <tkconverters:BoolToVisibilityConverter
-            x:Key="BoolToInvertedVisibilityConverter"
-            FalseValue="Visible"
-            TrueValue="Collapsed" />
-        <DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
-            <controls:KeyVisual Content="{Binding}" VisualType="SmallOutline" />
-        </DataTemplate>
-
-        <DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
-            <controls:KeyVisual Content="{Binding}" VisualType="Small" />
-        </DataTemplate>
-
-        <DataTemplate x:Key="ModuleItemTextTemplate" x:DataType="viewModels:DashboardModuleTextItem">
-            <TextBlock
-                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                Style="{StaticResource CaptionTextBlockStyle}"
-                Text="{x:Bind Label, Mode=OneWay}"
-                TextWrapping="WrapWholeWords" />
-        </DataTemplate>
-
-        <DataTemplate x:Key="ModuleItemButtonTemplate" x:DataType="viewModels:DashboardModuleButtonItem">
-            <Button
-                HorizontalAlignment="Stretch"
-                Click="{x:Bind ButtonClickHandler, Mode=OneWay}"
-                Content="{x:Bind ButtonTitle}" />
-        </DataTemplate>
-
-        <DataTemplate x:Key="ModuleItemShortcutTemplate" x:DataType="viewModels:DashboardModuleShortcutItem">
-            <Grid ColumnSpacing="12">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto" />
                     <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="Auto" MinWidth="140" />
                 </Grid.ColumnDefinitions>
-                <Border
-                    Padding="8,4"
-                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                    BorderThickness="1"
-                    CornerRadius="{StaticResource ControlCornerRadius}">
                 <ItemsControl
-                        AutomationProperties.AccessibilityView="Raw"
-                        IsTabStop="False"
-                        ItemsSource="{x:Bind Shortcut, Mode=TwoWay}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <StackPanel Orientation="Horizontal" Spacing="12" />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <controls:KeyVisual
-                                    VerticalAlignment="Center"
-                                    AutomationProperties.AccessibilityView="Raw"
-                                    Content="{Binding}"
-                                    IsTabStop="False"
-                                    VisualType="TextOnly" />
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </Border>
-
-                <TextBlock
                     Grid.Column="1"
-                    VerticalAlignment="Center"
+                    HorizontalAlignment="Left"
-                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                    Style="{StaticResource CaptionTextBlockStyle}"
-                    Text="{x:Bind Label, Mode=OneWay}"
-                    TextWrapping="WrapWholeWords" />
-            </Grid>
-        </DataTemplate>
-        <DataTemplate x:Key="ModuleItemKBMTemplate" x:DataType="viewModels:DashboardModuleKBMItem">
-            <Button x:Uid="DashboardKBMShowMappingsButton" HorizontalAlignment="Stretch">
-                <Button.Flyout>
-                    <Flyout
-                        x:Name="DetailsFlyout"
-                        Placement="Bottom"
-                        ShouldConstrainToRootBounds="False">
-                        <StackPanel Orientation="Vertical" Spacing="4">
-                            <ItemsControl ItemsSource="{x:Bind RemapKeys, Mode=OneWay}">
-                                <ItemsControl.ItemsPanel>
-                                    <ItemsPanelTemplate>
-                                        <StackPanel Spacing="4" />
-                                    </ItemsPanelTemplate>
-                                </ItemsControl.ItemsPanel>
-                                <ItemsControl.ItemTemplate>
-                                    <DataTemplate x:DataType="Lib:KeysDataModel">
-                                        <StackPanel Orientation="Horizontal">
-                                            <Border
-                                                Padding="8,4"
-                                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                                                BorderThickness="1"
-                                                CornerRadius="{StaticResource ControlCornerRadius}">
-                                                <ItemsControl
                     AutomationProperties.AccessibilityView="Raw"
                     IsTabStop="False"
-                                                    ItemsSource="{x:Bind GetMappedOriginalKeys()}">
+                    ItemsSource="{x:Bind Shortcut, Mode=OneWay}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                                                            <StackPanel Orientation="Horizontal" Spacing="12" />
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
-                                                        </ItemsPanelTemplate>
-                                                    </ItemsControl.ItemsPanel>
-                                                    <ItemsControl.ItemTemplate>
-                                                        <DataTemplate>
-                                                            <controls:KeyVisual
-                                                                VerticalAlignment="Center"
-                                                                AutomationProperties.AccessibilityView="Raw"
-                                                                Content="{Binding}"
-                                                                IsTabStop="False"
-                                                                VisualType="TextOnly" />
-                                                        </DataTemplate>
-                                                    </ItemsControl.ItemTemplate>
-                                                </ItemsControl>
-                                            </Border>
-                                            <controls:IsEnabledTextBlock
-                                                x:Uid="To"
-                                                Margin="8,0,8,0"
-                                                VerticalAlignment="Center"
-                                                Style="{StaticResource SecondaryIsEnabledTextBlockStyle}" />
-                                            <Border
-                                                Padding="8,4"
-                                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                                                BorderBrush="{ThemeResource AccentFillColorDefaultBrush}"
-                                                BorderThickness="1"
-                                                CornerRadius="{StaticResource ControlCornerRadius}">
-                                                <ItemsControl
-                                                    AutomationProperties.AccessibilityView="Raw"
-                                                    IsTabStop="False"
-                                                    ItemsSource="{x:Bind GetMappedNewRemapKeys(15)}">
-                                                    <ItemsControl.ItemsPanel>
-                                                        <ItemsPanelTemplate>
-                                                            <StackPanel Orientation="Horizontal" Spacing="12" />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
@@ -189,317 +42,324 @@
                                 AutomationProperties.AccessibilityView="Raw"
                                 Content="{Binding}"
                                 FontSize="12"
-                                                                Foreground="{ThemeResource AccentFillColorDefaultBrush}"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                 IsTabStop="False"
-                                                                VisualType="TextOnly" />
+                                RenderKeyAsGlyph="True" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
-                                            </Border>
-                                        </StackPanel>
-                                    </DataTemplate>
-                                </ItemsControl.ItemTemplate>
-                            </ItemsControl>
-                            <ItemsControl ItemsSource="{x:Bind RemapShortcuts, Mode=OneWay}">
-                                <ItemsControl.ItemsPanel>
-                                    <ItemsPanelTemplate>
-                                        <StackPanel Spacing="4" />
-                                    </ItemsPanelTemplate>
-                                </ItemsControl.ItemsPanel>
-                                <ItemsControl.ItemTemplate>
-                                    <DataTemplate x:DataType="Lib:AppSpecificKeysDataModel">
-                                        <StackPanel Orientation="Horizontal">
-                                            <Border
-                                                Padding="8,0"
-                                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                                                BorderThickness="1"
-                                                CornerRadius="{StaticResource ControlCornerRadius}">
-                                                <ItemsControl
-                                                    AutomationProperties.AccessibilityView="Raw"
-                                                    IsTabStop="False"
-                                                    ItemTemplateSelector="{StaticResource KeyVisualTemplateSelector}"
-                                                    ItemsSource="{x:Bind GetMappedOriginalKeysWithSplitChord()}">
-                                                    <ItemsControl.ItemsPanel>
-                                                        <ItemsPanelTemplate>
-                                                            <StackPanel Orientation="Horizontal" Spacing="12" />
-                                                        </ItemsPanelTemplate>
-                                                    </ItemsControl.ItemsPanel>
-                                                </ItemsControl>
-                                            </Border>
-                                            <controls:IsEnabledTextBlock
-                                                x:Uid="To"
-                                                Margin="8,0,8,0"
-                                                VerticalAlignment="Center"
-                                                Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
-                                                Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}" />
-                                            <controls:IsEnabledTextBlock
-                                                x:Uid="Starts"
-                                                Margin="8,0,8,0"
-                                                VerticalAlignment="Center"
-                                                Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
-                                                Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay}" />
-                                            <Border
-                                                Padding="8,4"
-                                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                                                BorderBrush="{ThemeResource AccentFillColorDefaultBrush}"
-                                                BorderThickness="1"
-                                                CornerRadius="{StaticResource ControlCornerRadius}">
-                                                <ItemsControl
-                                                    AutomationProperties.AccessibilityView="Raw"
-                                                    IsTabStop="False"
-                                                    ItemsSource="{x:Bind GetMappedNewRemapKeys(15)}">
-                                                    <ItemsControl.ItemsPanel>
-                                                        <ItemsPanelTemplate>
-                                                            <StackPanel Orientation="Horizontal" Spacing="12" />
-                                                        </ItemsPanelTemplate>
-                                                    </ItemsControl.ItemsPanel>
-                                                    <ItemsControl.ItemTemplate>
-                                                        <DataTemplate>
-                                                            <controls:KeyVisual
-                                                                VerticalAlignment="Center"
-                                                                AutomationProperties.AccessibilityView="Raw"
-                                                                Content="{Binding}"
-                                                                Foreground="{ThemeResource AccentFillColorDefaultBrush}"
-                                                                IsTabStop="False"
-                                                                VisualType="TextOnly" />
-                                                        </DataTemplate>
-                                                    </ItemsControl.ItemTemplate>
-                                                </ItemsControl>
-                                            </Border>
                 <TextBlock
-                                                Margin="4,0,0,0"
                     VerticalAlignment="Center"
-                                                Foreground="{ThemeResource AccentFillColorDefaultBrush}"
+                    Text="{x:Bind Label, Mode=OneWay}"
-                                                Text="{x:Bind TargetApp}" />
+                    TextWrapping="WrapWholeWords" />
-                                        </StackPanel>
+            </Grid>
         </DataTemplate>
-                                </ItemsControl.ItemTemplate>
+        <DataTemplate x:Key="ModuleItemActivationTemplate" x:DataType="viewmodels:DashboardModuleActivationItem">
-                            </ItemsControl>
+            <Grid MinHeight="36" ColumnSpacing="12">
-                        </StackPanel>
+                <Grid.ColumnDefinitions>
-                    </Flyout>
+                    <ColumnDefinition Width="*" />
-                </Button.Flyout>
+                    <ColumnDefinition Width="Auto" MinWidth="140" />
-            </Button>
+                </Grid.ColumnDefinitions>
+                <TextBlock
+                    VerticalAlignment="Center"
+                    Text="{x:Bind Label, Mode=OneWay}"
+                    TextWrapping="WrapWholeWords" />
+                <TextBlock
+                    Grid.Column="1"
+                    VerticalAlignment="Center"
+                    FontSize="12"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Text="{x:Bind Activation, Mode=OneWay}"
+                    TextWrapping="WrapWholeWords" />
+            </Grid>
         </DataTemplate>
     </Page.Resources>
-    <Grid Margin="16,0,0,0" RowSpacing="24">
+    <Grid Margin="16,0,0,0" RowSpacing="12">
         <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <TextBlock
             x:Uid="DashboardTitle"
+            MaxWidth="{StaticResource PageMaxWidth}"
+            Margin="1,0,0,0"
             VerticalAlignment="Center"
             Style="{StaticResource TitleTextBlockStyle}" />
-
-        <InfoBar
-            x:Uid="UpdateAvailable"
-            Margin="0,0,16,0"
-            HorizontalAlignment="Right"
-            VerticalAlignment="Center"
-            CornerRadius="8"
-            IsClosable="False"
-            IsOpen="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}"
-            Severity="Informational">
-            <InfoBar.ActionButton>
-                <Button x:Uid="LearnMore" Click="SWVersionButtonClicked" />
-            </InfoBar.ActionButton>
-        </InfoBar>
-
-        <ScrollViewer x:Name="MainScrollViewer" Grid.Row="1">
-            <StackPanel Padding="0,0,16,16" Orientation="Vertical">
-                <TextBlock
-                    x:Uid="EnabledModules"
-                    Margin="0,0,0,12"
-                    Style="{StaticResource SubtitleTextBlockStyle}" />
-                <ItemsRepeater x:Name="DashboardView" ItemsSource="{x:Bind ViewModel.ActiveModules, Mode=OneWay}">
-                    <ItemsRepeater.Layout>
-                        <tkcontrols:StaggeredLayout
-                            ColumnSpacing="8"
-                            DesiredColumnWidth="378"
-                            RowSpacing="8" />
-                    </ItemsRepeater.Layout>
-                    <ItemsRepeater.ItemTemplate>
-                        <DataTemplate x:DataType="viewModels:DashboardListItem">
-                            <Button
-                                Padding="0"
-                                HorizontalAlignment="Stretch"
-                                HorizontalContentAlignment="Stretch"
-                                AutomationProperties.Name="{x:Bind Label}"
-                                Background="Transparent"
-                                BorderThickness="0"
-                                Click="DashboardListItemClick"
-                                CornerRadius="{StaticResource OverlayCornerRadius}"
-                                Tag="{x:Bind Tag, Mode=OneWay}">
         <Grid
-                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+            Grid.Row="1"
-                                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+            MaxWidth="{StaticResource PageMaxWidth}"
-                                    BorderThickness="1"
+            Padding="0,0,20,0"
-                                    CornerRadius="{StaticResource OverlayCornerRadius}"
+            ColumnSpacing="16">
-                                    RowSpacing="0">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
-                                        <RowDefinition />
+                <RowDefinition Height="Auto" />
-                                        <RowDefinition />
+                <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
-                                    <Grid Margin="16,8,16,0" ColumnSpacing="12">
+            <Button
+                Padding="0,0,8,0"
+                AutomationProperties.Name="WhatsNewButton"
+                Click="WhatsNewButton_Click"
+                Style="{StaticResource SubtleButtonStyle}">
+                <Grid ColumnSpacing="16">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto" />
                         <ColumnDefinition Width="*" />
-                                            <ColumnDefinition Width="Auto" />
-                                            <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
+                    <Grid CornerRadius="{StaticResource OverlayCornerRadius}">
                         <Image
-                                            Grid.Column="0"
+                            Width="120"
-                                            Width="20"
+                            AutomationProperties.AccessibilityView="Raw"
-                                            Margin="0,0,0,0">
+                            Source="ms-appx:///Assets/Settings/Modules/PT.png" />
-                                            <Image.Source>
+                        <Grid Background="{ThemeResource SmokeFillColorDefaultBrush}" />
-                                                <BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
+                    </Grid>
-                                            </Image.Source>
-                                        </Image>
                     <StackPanel
                         Grid.Column="1"
                         VerticalAlignment="Center"
-                                            Orientation="Horizontal">
+                        Orientation="Vertical">
+                        <TextBlock x:Uid="LearnWhatsNew" FontWeight="SemiBold" />
                         <TextBlock
-                                                VerticalAlignment="Center"
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                                FontWeight="SemiBold"
+                            Style="{StaticResource CaptionTextBlockStyle}"
-                                                Text="{x:Bind Label, Mode=OneWay}"
+                            Text="{x:Bind ViewModel.PowerToysVersion, Mode=OneWay}" />
-                                                TextTrimming="CharacterEllipsis" />
-                                            <InfoBadge
-                                                Margin="4,0,0,0"
-                                                Style="{StaticResource NewInfoBadge}"
-                                                Visibility="{x:Bind IsNew, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
                     </StackPanel>
-                                        <FontIcon
-                                            Grid.Column="2"
-                                            Width="20"
-                                            Margin="0,0,-12,0"
-                                            FontSize="16"
-                                            Glyph="&#xE72E;"
-                                            Visibility="{x:Bind IsLocked, Converter={StaticResource BoolToInvertedVisibilityConverter}, ConverterParameter=True, Mode=OneWay}">
-                                            <ToolTipService.ToolTip>
-                                                <TextBlock x:Uid="GPO_SettingIsManaged_ToolTip" TextWrapping="WrapWholeWords" />
-                                            </ToolTipService.ToolTip>
-                                        </FontIcon>
-                                        <ToggleSwitch
-                                            x:Uid="Enable_Module"
-                                            Grid.Column="3"
-                                            Margin="0,-2,0,0"
-                                            HorizontalAlignment="Right"
-                                            AutomationProperties.HelpText="{x:Bind Label}"
-                                            IsEnabled="{x:Bind IsLocked, Converter={StaticResource BoolNegationConverter}, ConverterParameter=True, Mode=OneWay}"
-                                            IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
-                                            OffContent=""
-                                            OnContent=""
-                                            Style="{StaticResource RightAlignedCompactToggleSwitchStyle}" />
                 </Grid>
-
+            </Button>
+            <StackPanel
+                x:Name="TopButtonPanel"
+                Grid.Column="1"
+                Orientation="Horizontal"
+                Spacing="16">
+                <!--<controls:ShortcutConflictControl/>-->
+                <controls:CheckUpdateControl />
+            </StackPanel>
+        </Grid>
+        <ScrollViewer x:Name="MainScrollViewer" Grid.Row="2">
+            <Grid>
+                <!--  This grid is required to ensure that the content is horizontally aligned  -->
+                <Grid
+                    MaxWidth="{StaticResource PageMaxWidth}"
+                    Padding="0,0,20,48"
+                    ColumnSpacing="16"
+                    RowSpacing="16">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+                    <controls:Card x:Uid="QuickAccessTitle" VerticalAlignment="Top">
+                        <Grid>
                             <ItemsControl
-                                        Grid.Row="1"
+                                x:Name="QuickAccessItemsControl"
-                                        Margin="16,8,16,16"
+                                Margin="8,0,12,12"
-                                        IsTabStop="False"
+                                ItemsSource="{x:Bind ViewModel.ActionModules, Mode=OneWay}"
-                                        ItemTemplateSelector="{StaticResource ModuleItemTemplateSelector}"
+                                Visibility="{x:Bind ViewModel.ActionModules.Count, Mode=OneWay, Converter={StaticResource DoubleToVisibilityConverter}}">
-                                        ItemsSource="{x:Bind DashboardModuleItems, Mode=OneWay}"
+
-                                        Visibility="{x:Bind IsEnabled, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
                                 <ItemsControl.ItemsPanel>
                                     <ItemsPanelTemplate>
-                                                <StackPanel Spacing="4" />
+                                        <tkcontrols:WrapPanel
+                                            Padding="12"
+                                            HorizontalSpacing="16"
+                                            VerticalSpacing="24" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="viewmodels:DashboardListItem">
+                                        <ItemsControl IsTabStop="False" ItemsSource="{x:Bind DashboardModuleItems, Mode=OneWay}">
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate x:DataType="viewmodels:DashboardModuleButtonItem">
+                                                    <controls:FlyoutMenuButton AutomationProperties.Name="{x:Bind ButtonTitle}" Click="{x:Bind ButtonClickHandler}">
+                                                        <controls:FlyoutMenuButton.Content>
+                                                            <TextBlock
+                                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                                Text="{x:Bind ButtonTitle}"
+                                                                TextAlignment="Center"
+                                                                TextWrapping="Wrap" />
+                                                        </controls:FlyoutMenuButton.Content>
+                                                        <controls:FlyoutMenuButton.Icon>
+                                                            <Image Width="24">
+                                                                <Image.Source>
+                                                                    <BitmapImage UriSource="{x:Bind ButtonGlyph}" />
+                                                                </Image.Source>
+                                                            </Image>
+                                                        </controls:FlyoutMenuButton.Icon>
+                                                        <ToolTipService.ToolTip>
+                                                            <ToolTip Content="{x:Bind ButtonDescription}" />
+                                                        </ToolTipService.ToolTip>
+                                                    </controls:FlyoutMenuButton>
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+
+                                            <ItemsControl.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <StackPanel Spacing="0" />
+                                                </ItemsPanelTemplate>
+                                            </ItemsControl.ItemsPanel>
+                                        </ItemsControl>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+
+                            <TextBlock
+                                x:Uid="NoActionsToShow"
+                                Margin="12"
+                                HorizontalAlignment="Left"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                Visibility="{x:Bind ViewModel.ActionModules.Count, Mode=OneWay, Converter={StaticResource DoubleToInvertedVisibilityConverter}}" />
+                        </Grid>
+                    </controls:Card>
+                    <controls:Card
+                        x:Uid="ShortcutsOverview"
+                        Grid.Row="1"
+                        VerticalAlignment="Top">
+                        <Grid>
+                            <ItemsRepeater
+                                Grid.Row="2"
+                                Margin="8,0,0,0"
+                                ItemsSource="{x:Bind ViewModel.ShortcutModules, Mode=OneWay}">
+                                <ItemsRepeater.Layout>
+                                    <StackLayout Orientation="Vertical" Spacing="0" />
+                                </ItemsRepeater.Layout>
+                                <ItemsRepeater.ItemTemplate>
+                                    <DataTemplate x:DataType="viewmodels:DashboardListItem">
+                                        <Grid>
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="32" />
+                                                <ColumnDefinition Width="*" />
+                                            </Grid.ColumnDefinitions>
+                                            <Image
+                                                Width="16"
+                                                Margin="0,10,0,0"
+                                                HorizontalAlignment="Left"
+                                                VerticalAlignment="Top"
+                                                AutomationProperties.AccessibilityView="Raw"
+                                                Source="{x:Bind Icon, Mode=OneWay}"
+                                                ToolTipService.ToolTip="{x:Bind Label}" />
+                                            <ItemsControl
+                                                Grid.Column="1"
+                                                IsTabStop="False"
+                                                ItemTemplateSelector="{StaticResource ModuleItemTemplateSelector}"
+                                                ItemsSource="{x:Bind DashboardModuleItems, Mode=OneWay}">
+                                                <ItemsControl.ItemsPanel>
+                                                    <ItemsPanelTemplate>
+                                                        <StackPanel Spacing="0" />
                                                     </ItemsPanelTemplate>
                                                 </ItemsControl.ItemsPanel>
                                             </ItemsControl>
                                         </Grid>
-                            </Button>
                                     </DataTemplate>
                                 </ItemsRepeater.ItemTemplate>
                             </ItemsRepeater>
-
                             <TextBlock
-                    x:Uid="DisabledModules"
+                                x:Uid="NoShortcutsToShow"
-                    Margin="0,24,0,12"
+                                Margin="12"
-                    Style="{StaticResource SubtitleTextBlockStyle}" />
+                                HorizontalAlignment="Left"
-
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                <ItemsRepeater ItemsSource="{x:Bind ViewModel.DisabledModules, Mode=OneWay}">
+                                Visibility="{x:Bind ViewModel.ShortcutModules.Count, Mode=OneWay, Converter={StaticResource DoubleToInvertedVisibilityConverter}}" />
+                        </Grid>
+                    </controls:Card>
+                    <controls:Card
+                        x:Name="ModulesCard"
+                        Title="Modules"
+                        Grid.RowSpan="2"
+                        Grid.Column="1"
+                        MinWidth="400"
+                        Padding="0"
+                        VerticalAlignment="Top"
+                        DividerVisibility="Collapsed">
+                        <ItemsRepeater
+                            x:Name="DashboardView"
+                            Grid.Row="2"
+                            ItemsSource="{x:Bind ViewModel.AllModules, Mode=OneWay}">
                             <ItemsRepeater.Layout>
-                        <tkcontrols:StaggeredLayout
+                                <StackLayout Orientation="Vertical" Spacing="0" />
-                            ColumnSpacing="8"
-                            DesiredColumnWidth="378"
-                            RowSpacing="8" />
                             </ItemsRepeater.Layout>
                             <ItemsRepeater.ItemTemplate>
-                        <DataTemplate x:DataType="viewModels:DashboardListItem">
+                                <DataTemplate x:DataType="viewmodels:DashboardListItem">
-                            <Button
+                                    <tkcontrols:SettingsCard
-                                Padding="0"
+                                        MinHeight="0"
-                                HorizontalAlignment="Stretch"
+                                        Padding="12,4,12,4"
-                                HorizontalContentAlignment="Stretch"
                                         AutomationProperties.Name="{x:Bind Label}"
                                         Background="Transparent"
-                                BorderThickness="0"
+                                        BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
+                                        BorderThickness="0,1,0,0"
                                         Click="DashboardListItemClick"
-                                CornerRadius="{StaticResource OverlayCornerRadius}"
+                                        CornerRadius="0"
-                                Tag="{x:Bind Tag, Mode=OneWay}">
+                                        IsClickEnabled="True"
-                                <Grid
+                                        Tag="{x:Bind Tag}">
-                                    Padding="16,12"
+                                        <tkcontrols:SettingsCard.Resources>
-                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                                            <x:Double x:Key="SettingsCardWrapThreshold">0</x:Double>
-                                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                                            <x:Double x:Key="SettingsCardHeaderIconMaxSize">16</x:Double>
-                                    BorderThickness="1"
+                                        </tkcontrols:SettingsCard.Resources>
-                                    CornerRadius="{StaticResource OverlayCornerRadius}"
+                                        <tkcontrols:SettingsCard.Header>
-                                    RowSpacing="12">
+                                            <StackPanel Orientation="Horizontal">
-                                    <Grid ColumnSpacing="12">
+                                                <TextBlock Text="{x:Bind Label}" />
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="Auto" />
-                                            <ColumnDefinition Width="*" />
-                                            <ColumnDefinition Width="Auto" />
-                                            <ColumnDefinition Width="Auto" />
-                                        </Grid.ColumnDefinitions>
-                                        <Image Grid.Column="0" Width="20">
-                                            <Image.Source>
-                                                <BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
-                                            </Image.Source>
-                                        </Image>
-                                        <StackPanel
-                                            Grid.Column="1"
-                                            VerticalAlignment="Center"
-                                            Orientation="Horizontal">
-                                            <TextBlock
-                                                VerticalAlignment="Center"
-                                                FontWeight="SemiBold"
-                                                Text="{x:Bind Label, Mode=OneWay}"
-                                                TextTrimming="CharacterEllipsis" />
                                                 <InfoBadge
                                                     Margin="4,0,0,0"
                                                     Style="{StaticResource NewInfoBadge}"
-                                                Visibility="{x:Bind IsNew, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                                                    Visibility="{x:Bind IsNew, Converter={StaticResource BoolToVisibilityConverter}}" />
-                                        </StackPanel>
                                                 <FontIcon
                                                     Grid.Column="2"
                                                     Width="20"
                                                     Margin="0,0,-12,0"
                                                     FontSize="16"
                                                     Glyph="&#xE72E;"
-                                            Visibility="{x:Bind IsLocked, Converter={StaticResource BoolToInvertedVisibilityConverter}, ConverterParameter=True, Mode=OneWay}">
+                                                    Visibility="{x:Bind IsLocked, Converter={StaticResource ReverseBoolToVisibilityConverter}, ConverterParameter=True}">
                                                     <ToolTipService.ToolTip>
                                                         <TextBlock x:Uid="GPO_SettingIsManaged_ToolTip" TextWrapping="WrapWholeWords" />
                                                     </ToolTipService.ToolTip>
                                                 </FontIcon>
+                                            </StackPanel>
+                                        </tkcontrols:SettingsCard.Header>
+                                        <tkcontrols:SettingsCard.HeaderIcon>
+                                            <ImageIcon>
+                                                <ImageIcon.Source>
+                                                    <BitmapImage UriSource="{x:Bind Icon}" />
+                                                </ImageIcon.Source>
+                                            </ImageIcon>
+                                        </tkcontrols:SettingsCard.HeaderIcon>
                                         <ToggleSwitch
-                                            x:Uid="Enable_Module"
+                                            AutomationProperties.Name="{x:Bind Label}"
-                                            Grid.Column="3"
-                                            Margin="0,-2,0,0"
-                                            HorizontalAlignment="Right"
-                                            AutomationProperties.HelpText="{x:Bind Label}"
                                             IsEnabled="{x:Bind IsLocked, Converter={StaticResource BoolNegationConverter}, ConverterParameter=True, Mode=OneWay}"
                                             IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
                                             OffContent=""
-                                            OnContent=""
+                                            OnContent="" />
-                                            Style="{StaticResource RightAlignedCompactToggleSwitchStyle}" />
+                                    </tkcontrols:SettingsCard>
-                                    </Grid>
-                                </Grid>
-                            </Button>
                                 </DataTemplate>
                             </ItemsRepeater.ItemTemplate>
                         </ItemsRepeater>
-            </StackPanel>
+                    </controls:Card>
-
+                </Grid>
+            </Grid>
         </ScrollViewer>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="840" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="TopButtonPanel.(Grid.Row)" Value="1" />
+                        <Setter Target="TopButtonPanel.Margin" Value="0,16,0,0" />
+                        <Setter Target="TopButtonPanel.(Grid.Column)" Value="0" />
+                        <Setter Target="ModulesCard.(Grid.Column)" Value="0" />
+                        <Setter Target="ModulesCard.(Grid.Row)" Value="2" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 </Page>

src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml.cs

@@ -5,10 +5,10 @@
 using System;
 using System.Threading;
 using System.Threading.Tasks;
-
 using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
 using Microsoft.PowerToys.Settings.UI.OOBE.Views;
 using Microsoft.PowerToys.Settings.UI.ViewModels;
 using Microsoft.UI.Xaml;
@@ -46,14 +46,23 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             ViewModel.ModuleEnabledChangedOnSettingsPage();
         }
 
-        private void SWVersionButtonClicked(object sender, RoutedEventArgs e)
-        {
-            ViewModel.SWVersionButtonClicked();
-        }
-
         private void DashboardListItemClick(object sender, RoutedEventArgs e)
         {
             ViewModel.DashboardListItemClick(sender);
         }
+
+        private void WhatsNewButton_Click(object sender, RoutedEventArgs e)
+        {
+            if (App.GetOobeWindow() == null)
+            {
+                App.SetOobeWindow(new OobeWindow(PowerToysModules.WhatsNew));
+            }
+            else
+            {
+                App.GetOobeWindow().SetAppWindow(PowerToysModules.WhatsNew);
+            }
+
+            App.GetOobeWindow().Activate();
+        }
     }
 }

src/settings-ui/Settings.UI/SettingsXAML/Views/GeneralPage.xaml

@@ -12,7 +12,6 @@
     mc:Ignorable="d">
 
     <Page.Resources>
-        <converters:UpdateStateToBoolConverter x:Key="UpdateStateToBoolConverter" />
         <converters:StringToInfoBarSeverityConverter x:Key="StringToInfoBarSeverityConverter" />
     </Page.Resources>
 

src/settings-ui/Settings.UI/SettingsXAML/Views/KeyboardManagerPage.xaml

@@ -14,22 +14,23 @@
 
     <Page.Resources>
         <tkconverters:CollectionVisibilityConverter x:Key="CollectionVisibilityConverter" />
-        <tkconverters:BoolToVisibilityConverter
-            x:Key="BoolToInvertedVisibilityConverter"
-            FalseValue="Visible"
-            TrueValue="Collapsed" />
-        <tkconverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
-
         <Style x:Name="KeysListViewContainerStyle" TargetType="ListViewItem">
             <Setter Property="IsTabStop" Value="False" />
         </Style>
 
         <DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
-            <controls:KeyVisual Content="{Binding}" VisualType="SmallOutline" />
+            <controls:KeyVisual
+                Padding="8"
+                Content="{Binding}"
+                CornerRadius="{StaticResource ControlCornerRadius}" />
         </DataTemplate>
 
         <DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
-            <controls:KeyVisual Content="{Binding}" VisualType="Small" />
+            <controls:KeyVisual
+                Padding="8"
+                Content="{Binding}"
+                CornerRadius="{StaticResource ControlCornerRadius}"
+                Style="{StaticResource AccentKeyVisualStyle}" />
         </DataTemplate>
 
         <!--<DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
@@ -184,7 +185,7 @@
                                                 Margin="8,0,8,0"
                                                 VerticalAlignment="Center"
                                                 Style="{StaticResource SecondaryIsEnabledTextBlockStyle}"
-                                                Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}" />
+                                                Visibility="{x:Bind Path=IsOpenUriOrIsRunProgram, Mode=OneWay, Converter={StaticResource ReverseBoolToVisibilityConverter}}" />
 
                                             <controls:IsEnabledTextBlock
                                                 x:Uid="Starts"

src/settings-ui/Settings.UI/SettingsXAML/Views/MouseUtilsPage.xaml

@@ -14,10 +14,6 @@
     mc:Ignorable="d">
     <Page.Resources>
         <converters:IndexBitFieldToVisibilityConverter x:Key="IndexBitFieldToVisibilityConverter" />
-        <tkconverters:BoolToVisibilityConverter
-            x:Key="BoolToInvertedVisibilityConverter"
-            FalseValue="Visible"
-            TrueValue="Collapsed" />
     </Page.Resources>
     <controls:SettingsPageControl x:Uid="MouseUtils" ModuleImageSource="ms-appx:///Assets/Settings/Modules/MouseUtils.png">
         <controls:SettingsPageControl.ModuleContent>
@@ -153,7 +149,7 @@
                         IsClosable="False"
                         IsOpen="True"
                         Severity="Informational"
-                        Visibility="{x:Bind ViewModel.IsAnimationEnabledBySystem, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
+                        Visibility="{x:Bind ViewModel.IsAnimationEnabledBySystem, Mode=OneWay, Converter={StaticResource BoolToReverseVisibilityConverter}}">
                         <InfoBar.ActionButton>
                             <HyperlinkButton x:Uid="OpenSettings" Click="OpenAnimationsSettings_Click" />
                         </InfoBar.ActionButton>

src/settings-ui/Settings.UI/SettingsXAML/Views/MouseWithoutBordersPage.xaml

@@ -11,7 +11,6 @@
     AutomationProperties.LandmarkType="Main"
     mc:Ignorable="d">
     <Page.Resources>
-        <converters:BoolToVisibilityConverter x:Key="negativeBoolToVisibilityConverter" />
         <converters:BoolToObjectConverter
             x:Key="OneRowMatrixBoolToNumberOfRowsConverter"
             FalseValue="2"
@@ -75,7 +74,7 @@
                                 x:Uid="MouseWithoutBorders_Connect"
                                 Command="{x:Bind ShowConnectFieldsCommand, Mode=OneTime}"
                                 Style="{StaticResource AccentButtonStyle}"
-                                Visibility="{x:Bind Path=ViewModel.ConnectFieldsVisible, Mode=OneWay, Converter={StaticResource negativeBoolToVisibilityConverter}, ConverterParameter=True}" />
+                                Visibility="{x:Bind Path=ViewModel.ConnectFieldsVisible, Mode=OneWay, Converter={StaticResource ReverseBoolToVisibilityConverter}, ConverterParameter=True}" />
                         </StackPanel>
                     </tkcontrols:SettingsExpander>
 

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

@@ -796,7 +796,7 @@
     <value>Information Symbol</value>
   </data>
   <data name="FancyZones_LaunchEditorButtonControl.Header" xml:space="preserve">
-    <value>Launch layout editor</value>
+    <value>Open layout editor</value>
     <comment>launches the FancyZones layout editor application</comment>
   </data>
   <data name="FancyZones_LaunchEditorButtonControl.Description" xml:space="preserve">
@@ -824,8 +824,11 @@
   <data name="FancyZones_ShiftDragCheckBoxControl_Header.Content" xml:space="preserve">
     <value>Hold Shift key to activate zones while dragging a window</value>
   </data>
+  <data name="FancyZones_ActivationShiftDrag" xml:space="preserve">
+    <value>Hold Shift key</value>
+  </data>
   <data name="FancyZones_ActivationNoShiftDrag" xml:space="preserve">
-    <value>Drag windows to activate zones</value>
+    <value>Drag a window</value>
   </data>
   <data name="FancyZones_ShowZonesOnAllMonitorsCheckBoxControl.Content" xml:space="preserve">
     <value>Show zones on all monitors while dragging a window</value>
@@ -1986,7 +1989,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
     <value>Launch</value>
   </data>
   <data name="Launch_ColorPicker.Content" xml:space="preserve">
-    <value>Launch Color Picker</value>
+    <value>Open Color Picker</value>
   </data>
   <data name="Oobe_LearnMore.Text" xml:space="preserve">
     <value>Learn more about</value>
@@ -2133,7 +2136,7 @@ From there, simply click on one of the supported files in the File Explorer and
     <value>Want a custom size? You can add them in the PowerToys Settings!</value>
   </data>
   <data name="Oobe_KBM_HowToCreateMappings.Text" xml:space="preserve">
-    <value>Launch **PowerToys Settings**, navigate to the Keyboard Manager menu, and select either **Remap a key** or **Remap a shortcut**.</value>
+    <value>Open **PowerToys Settings**, navigate to the Keyboard Manager menu, and select either **Remap a key** or **Remap a shortcut**.</value>
   </data>
   <data name="Oobe_KBM_TipsAndTricks.Text" xml:space="preserve">
     <value>Want to only have a shortcut work for a single application? Use the Target App field when creating the shortcut remapping.</value>
@@ -2550,10 +2553,10 @@ From there, simply click on one of the supported files in the File Explorer and
     <comment>Mouse as in the hardware peripheral.</comment>
   </data>
   <data name="Launch_Run.Content" xml:space="preserve">
-    <value>Launch PowerToys Run</value>
+    <value>Open PowerToys Run</value>
   </data>
   <data name="Launch_ShortcutGuide.Content" xml:space="preserve">
-    <value>Launch Shortcut Guide</value>
+    <value>Open Shortcut Guide</value>
   </data>
   <data name="ColorPicker_ColorFormat_ToggleSwitch.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
     <value>Show format in editor</value>
@@ -2848,6 +2851,9 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
   <data name="FancyZones_Zone_Appearance.Header" xml:space="preserve">
     <value>Zone appearance</value>
   </data>
+  <data name="LearnMore.Text" xml:space="preserve">
+    <value>Learn more</value>
+  </data>
   <data name="FileExplorerPreview_ToggleSwitch_Thumbnail_GCODE.Header" xml:space="preserve">
     <value>Geometric Code</value>
     <comment>File type, do not translate</comment>
@@ -3134,7 +3140,7 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
     <value>Create and manage Workspaces</value>
   </data>
   <data name="Workspaces_LaunchEditorButtonControl.Header" xml:space="preserve">
-    <value>Launch editor</value>
+    <value>Open editor</value>
   </data>
   <data name="LearnMore_Workspaces.Text" xml:space="preserve">
     <value>Learn more about the Workspaces utility</value>
@@ -3159,10 +3165,10 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Pick a color</value>
   </data>
   <data name="CropAndLock_Thumbnail" xml:space="preserve">
-    <value>Thumbnail</value>
+    <value>Crop and create a thumbnail</value>
   </data>
   <data name="CropAndLock_Reparent" xml:space="preserve">
-    <value>Reparent</value>
+    <value>Crop an app's window into a cropped window</value>
   </data>
   <data name="FancyZones_OpenEditor" xml:space="preserve">
     <value>Open editor</value>
@@ -3174,7 +3180,7 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Find the mouse</value>
   </data>
   <data name="MouseHighlighter_ShortDescription" xml:space="preserve">
-    <value>Highlight clicks</value>
+    <value>Turn on clicks highlighter</value>
   </data>
   <data name="MouseJump_ShortDescription" xml:space="preserve">
     <value>Quickly move the mouse pointer</value>
@@ -3192,10 +3198,10 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Learn more</value>
   </data>
   <data name="Peek_ShortDescription" xml:space="preserve">
-    <value>Quick and easy previewer</value>
+    <value>Preview file</value>
   </data>
   <data name="Run_ShortDescription" xml:space="preserve">
-    <value>A quick launcher</value>
+    <value>Open Run</value>
   </data>
   <data name="PowerAccent_ShortDescription" xml:space="preserve">
     <value>An alternative way to type accented characters</value>
@@ -3205,18 +3211,21 @@ Activate by holding the key for the character you want to add an accent to, then
     <comment>{Locked="Windows"}</comment>
   </data>
   <data name="ScreenRuler_ShortDescription" xml:space="preserve">
-    <value>Measure pixels on your screen</value>
+    <value>Start measurement</value>
   </data>
   <data name="ShortcutGuide_ShortDescription" xml:space="preserve">
-    <value>Show a help overlay with Windows shortcuts</value>
+    <value>Open Shortcut Guide</value>
     <comment>{Locked="Windows"}</comment>
   </data>
   <data name="PowerOcr_ShortDescription" xml:space="preserve">
-    <value>A convenient way to copy text from anywhere on screen</value>
+    <value>Start text extraction</value>
   </data>
   <data name="Dashboard_Activation" xml:space="preserve">
     <value>Activation</value>
   </data>
+  <data name="Activate_Zones" xml:space="preserve">
+    <value>Activate zones</value>
+  </data>
   <data name="DashboardKBMShowMappingsButton.Content" xml:space="preserve">
     <value>Show remappings</value>
   </data>
@@ -3395,7 +3404,7 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Text Extractor</value>
   </data>
   <data name="Launch_TextExtractor.Content" xml:space="preserve">
-    <value>Launch Text Extractor</value>
+    <value>Open Text Extractor</value>
   </data>
   <data name="Oobe_TextExtractor.Title" xml:space="preserve">
     <value>Text Extractor</value>
@@ -3620,11 +3629,11 @@ Activate by holding the key for the character you want to add an accent to, then
     <comment>"Hosts" refers to the system hosts file, do not loc</comment>
   </data>
   <data name="Hosts_LaunchButtonControl.Header" xml:space="preserve">
-    <value>Launch Hosts File Editor</value>
+    <value>Open Hosts File Editor</value>
     <comment>"Hosts File Editor" is a product name</comment>
   </data>
   <data name="Hosts_LaunchButton_Accessible.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
-    <value>Launch Hosts File Editor</value>
+    <value>Open Hosts File Editor</value>
     <comment>"Hosts File Editor" is a product name</comment>
   </data>
   <data name="Hosts_AdditionalLinesPosition.Header" xml:space="preserve">
@@ -3640,7 +3649,7 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Behavior</value>
   </data>
   <data name="Launch_Hosts.Content" xml:space="preserve">
-    <value>Launch Hosts File Editor</value>
+    <value>Open Hosts File Editor</value>
     <comment>"Hosts File Editor" is the name of the utility</comment>
   </data>
   <data name="LearnMore_Hosts.Text" xml:space="preserve">
@@ -3659,7 +3668,7 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Required in order to make changes to the hosts file</value>
   </data>
   <data name="Hosts_Toggle_LaunchAdministrator.Header" xml:space="preserve">
-    <value>Launch as administrator</value>
+    <value>Open as administrator</value>
   </data>
   <data name="EnvironmentVariables.ModuleDescription" xml:space="preserve">
     <value>A quick utility for managing environment variables.</value>
@@ -3680,13 +3689,13 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Manage your environment variables</value>
   </data>
   <data name="EnvironmentVariables_LaunchButtonControl.Header" xml:space="preserve">
-    <value>Launch Environment Variables</value>
+    <value>Open Environment Variables</value>
   </data>
   <data name="EnvironmentVariables_LaunchButton_Accessible.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
-    <value>Launch Environment Variables</value>
+    <value>Open Environment Variables</value>
   </data>
   <data name="Launch_EnvironmentVariables.Content" xml:space="preserve">
-    <value>Launch Environment Variables</value>
+    <value>Open Environment Variables</value>
   </data>
   <data name="LearnMore_EnvironmentVariables.Text" xml:space="preserve">
     <value>Learn more about Environment Variables</value>
@@ -3701,7 +3710,7 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Required in order to make changes to the system environment variables</value>
   </data>
   <data name="EnvironmentVariables_Toggle_LaunchAdministrator.Header" xml:space="preserve">
-    <value>Launch as administrator</value>
+    <value>Open as administrator</value>
   </data>
   <data name="ShortcutGuide_PressTimeForTaskbarIconShortcuts.Header" xml:space="preserve">
     <value>Press duration before showing taskbar icon shortcuts (ms)</value>
@@ -3955,6 +3964,9 @@ Activate by holding the key for the character you want to add an accent to, then
   <data name="QuickAccessTxt.Text" xml:space="preserve">
     <value>Quick access</value>
   </data>
+  <data name="UpdateAvailable.Text" xml:space="preserve">
+    <value>Update available</value>
+  </data>
   <data name="FileExplorerPreview_Toggle_Monaco_Max_File_Size.Header" xml:space="preserve">
     <value>Maximum file size to preview</value>
     <comment>Size refers to the disk space used by a file</comment>
@@ -3997,7 +4009,7 @@ Activate by holding the key for the character you want to add an accent to, then
     <comment>Registry Preview is a product name, do not loc</comment>
   </data>
   <data name="Launch_RegistryPreview.Content" xml:space="preserve">
-    <value>Launch Registry Preview</value>
+    <value>Open Registry Preview</value>
     <comment>"Registry Preview" is the name of the utility</comment>
   </data>
   <data name="MouseUtils_MouseJump.Header" xml:space="preserve">
@@ -4145,13 +4157,13 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Consider loopback addresses as duplicates</value>
   </data>
   <data name="RegistryPreview_Launch_GroupSettings.Header" xml:space="preserve">
-    <value>Launch</value>
+    <value>Open</value>
   </data>
   <data name="RegistryPreview_LaunchButton_Accessible.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
-    <value>Launch Registry Preview</value>
+    <value>Open Registry Preview</value>
   </data>
   <data name="RegistryPreview_LaunchButtonControl.Header" xml:space="preserve">
-    <value>Launch Registry Preview</value>
+    <value>Open Registry Preview</value>
   </data>
   <data name="RegistryPreview_DefaultRegApp.Header" xml:space="preserve">
     <value>Make Registry Preview the default app for .reg files</value>
@@ -4227,10 +4239,10 @@ Activate by holding the key for the character you want to add an accent to, then
     <comment>Title of the settings window when running as administrator</comment>
   </data>
   <data name="DashboardTitle.Text" xml:space="preserve">
-    <value>Dashboard</value>
+    <value>Home</value>
   </data>
   <data name="Shell_Dashboard.Content" xml:space="preserve">
-    <value>Dashboard</value>
+    <value>Home</value>
   </data>
   <data name="Peek_Preview_GroupSettings.Header" xml:space="preserve">
     <value>Preview</value>
@@ -4486,7 +4498,7 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Workspaces</value>
   </data>
   <data name="Workspaces_ShortDescription" xml:space="preserve">
-    <value>Create and launch Workspaces</value>
+    <value>Open editor</value>
   </data>
   <data name="Shell_ZoomIt.Content" xml:space="preserve">
     <value>ZoomIt</value>
@@ -4913,6 +4925,9 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="CmdPal_ShortDescription" xml:space="preserve">
     <value>A better quick launcher</value>
   </data>
+  <data name="CmdPal_ActivationDescription" xml:space="preserve">
+    <value>Open Command Palette</value>
+  </data>
   <data name="CmdPal_Enable_CmdPal.Header" xml:space="preserve">
     <value>Enable Command Palette</value>
     <comment>"Command Palette" is the name of the utility.</comment>
@@ -5030,6 +5045,36 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="FileExplorerPreview_ToggleSwitch_Thumbnail_BGCODE.Header" xml:space="preserve">
     <value>Binary Geometric Code</value>
   </data>
+  <data name="YoureUpToDate.Text" xml:space="preserve">
+    <value>You're up to date</value>
+  </data>
+  <data name="UpdateAvailableTextBlock.Text" xml:space="preserve">
+    <value>Update Available</value>
+  </data>
+  <data name="GeneralVersion.Text" xml:space="preserve">
+    <value>Version</value>
+  </data>
+  <data name="LearnWhatsNew.Text" xml:space="preserve">
+    <value>Learn what's new</value>
+  </data>
+  <data name="ConfigureShortcut" xml:space="preserve">
+    <value>Configure shortcut</value>
+  </data>
+  <data name="ConfigureShortcutText.Text" xml:space="preserve">
+    <value>Configure shortcut</value>
+  </data>
+  <data name="QuickAccessTitle.Title" xml:space="preserve">
+    <value>Quick access</value>
+  </data>
+  <data name="ShortcutsOverview.Title" xml:space="preserve">
+    <value>Shortcuts overview</value>
+  </data>
+  <data name="NoActionsToShow.Text" xml:space="preserve">
+    <value>No actions to show..</value>
+  </data>
+  <data name="NoShortcutsToShow.Text" xml:space="preserve">
+    <value>No shortcuts to show..</value>
+  </data>
   <data name="HighlightMode.Description" xml:space="preserve">
     <value>Highlight the cursor or dim the screen to spotlight it</value>
   </data>
@@ -5079,4 +5124,7 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="GeneralPage_EnableViewDiagnosticDataText.Text" xml:space="preserve">
     <value>Stores diagnostic data locally in .xml format; folder may include .etl files as well. May use up 1 GB or more of disk space.</value>
   </data>
+  <data name="KeyBack" xml:space="preserve">
+    <value>Back key</value>
+  </data>
 </root>

src/settings-ui/Settings.UI/ViewModels/DashboardModuleItem.cs

@@ -36,23 +36,9 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         public List<object> Shortcut { get; set; }
     }
 
-    public partial class DashboardModuleKBMItem : DashboardModuleItem
+    public partial class DashboardModuleActivationItem : DashboardModuleItem
     {
-        private List<KeysDataModel> _remapKeys = new List<KeysDataModel>();
+        public string Activation { get; set; }
-
-        public List<KeysDataModel> RemapKeys
-        {
-            get => _remapKeys;
-            set => _remapKeys = value;
-        }
-
-        private List<AppSpecificKeysDataModel> _remapShortcuts = new List<AppSpecificKeysDataModel>();
-
-        public List<AppSpecificKeysDataModel> RemapShortcuts
-        {
-            get => _remapShortcuts;
-            set => _remapShortcuts = value;
-        }
     }
 
     public partial class DashboardModuleItem : INotifyPropertyChanged

src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs

@@ -8,13 +8,14 @@ using System.Collections.ObjectModel;
 using System.IO.Abstractions;
 using System.Linq;
 using System.Windows.Threading;
-
+using CommunityToolkit.WinUI.Controls;
 using global::PowerToys.GPOWrapper;
 using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.Library.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
+using Microsoft.PowerToys.Settings.UI.Library.Utilities;
 using Microsoft.PowerToys.Settings.UI.Services;
 using Microsoft.PowerToys.Settings.UI.Views;
 using Microsoft.UI.Xaml;
@@ -25,19 +26,23 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
     public partial class DashboardViewModel : Observable
     {
         private const string JsonFileType = ".json";
-        private IFileSystemWatcher _watcher;
-        private DashboardModuleKBMItem _kbmItem;
         private Dispatcher dispatcher;
 
         public Func<string, int> SendConfigMSG { get; }
 
-        public ObservableCollection<DashboardListItem> ActiveModules { get; set; } = new ObservableCollection<DashboardListItem>();
+        public ObservableCollection<DashboardListItem> AllModules { get; set; } = new ObservableCollection<DashboardListItem>();
 
-        public ObservableCollection<DashboardListItem> DisabledModules { get; set; } = new ObservableCollection<DashboardListItem>();
+        public ObservableCollection<DashboardListItem> ShortcutModules { get; set; } = new ObservableCollection<DashboardListItem>();
 
-        public bool UpdateAvailable { get; set; }
+        public ObservableCollection<DashboardListItem> ActionModules { get; set; } = new ObservableCollection<DashboardListItem>();
 
-        private List<DashboardListItem> _allModules;
+        public string PowerToysVersion
+        {
+            get
+            {
+                return Helper.GetProductVersion();
+            }
+        }
 
         private ISettingsRepository<GeneralSettings> _settingsRepository;
         private GeneralSettings generalSettingsConfig;
@@ -53,24 +58,18 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             // set the callback functions value to handle outgoing IPC message.
             SendConfigMSG = ipcMSGCallBackFunc;
 
-            _allModules = new List<DashboardListItem>();
-
             foreach (ModuleType moduleType in Enum.GetValues<ModuleType>())
             {
                 AddDashboardListItem(moduleType);
             }
 
-            ActiveModules = new ObservableCollection<DashboardListItem>(_allModules.Where(x => x.IsEnabled));
+            GetShortcutModules();
-            DisabledModules = new ObservableCollection<DashboardListItem>(_allModules.Where(x => !x.IsEnabled));
-
-            UpdatingSettings updatingSettingsConfig = UpdatingSettings.LoadSettings();
-            UpdateAvailable = updatingSettingsConfig != null && (updatingSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToInstall || updatingSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToDownload);
         }
 
         private void AddDashboardListItem(ModuleType moduleType)
         {
             GpoRuleConfigured gpo = ModuleHelper.GetModuleGpoConfiguration(moduleType);
-            _allModules.Add(new DashboardListItem()
+            AllModules.Add(new DashboardListItem()
             {
                 Tag = moduleType,
                 Label = resourceLoader.GetString(ModuleHelper.GetModuleLabelResourceName(moduleType)),
@@ -80,47 +79,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 EnabledChangedCallback = EnabledChangedOnUI,
                 DashboardModuleItems = GetModuleItems(moduleType),
             });
-            if (moduleType == ModuleType.KeyboardManager && gpo != GpoRuleConfigured.Disabled)
-            {
-                KeyboardManagerSettings kbmSettings = GetKBMSettings();
-                _watcher = Library.Utilities.Helper.GetFileWatcher(KeyboardManagerSettings.ModuleName, kbmSettings.Properties.ActiveConfiguration.Value + JsonFileType, () => LoadKBMSettingsFromJson());
-            }
-        }
-
-        private void LoadKBMSettingsFromJson()
-        {
-            try
-            {
-                KeyboardManagerProfile kbmProfile = GetKBMProfile();
-                _kbmItem.RemapKeys = kbmProfile?.RemapKeys.InProcessRemapKeys;
-                _kbmItem.RemapShortcuts = KeyboardManagerViewModel.CombineShortcutLists(kbmProfile?.RemapShortcuts.GlobalRemapShortcuts, kbmProfile?.RemapShortcuts.AppSpecificRemapShortcuts);
-                dispatcher.Invoke(new Action(() => UpdateKBMItems()));
-            }
-            catch (Exception ex)
-            {
-                Logger.LogError($"Failed to load KBM settings: {ex.Message}");
-            }
-        }
-
-        private void UpdateKBMItems()
-        {
-            _kbmItem.NotifyPropertyChanged(nameof(_kbmItem.RemapKeys));
-            _kbmItem.NotifyPropertyChanged(nameof(_kbmItem.RemapShortcuts));
-        }
-
-        private KeyboardManagerProfile GetKBMProfile()
-        {
-            KeyboardManagerSettings kbmSettings = GetKBMSettings();
-            const string PowerToyName = KeyboardManagerSettings.ModuleName;
-            string fileName = kbmSettings.Properties.ActiveConfiguration.Value + JsonFileType;
-            return new SettingsUtils().GetSettingsOrDefault<KeyboardManagerProfile>(PowerToyName, fileName);
-        }
-
-        private KeyboardManagerSettings GetKBMSettings()
-        {
-            var settingsUtils = new SettingsUtils();
-            ISettingsRepository<KeyboardManagerSettings> moduleSettingsRepository = SettingsRepository<KeyboardManagerSettings>.GetInstance(settingsUtils);
-            return moduleSettingsRepository.SettingsConfig;
         }
 
         private void EnabledChangedOnUI(DashboardListItem dashboardListItem)
@@ -139,25 +97,9 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         {
             try
             {
-                ActiveModules.Clear();
+                GetShortcutModules();
-                DisabledModules.Clear();
 
-                generalSettingsConfig = _settingsRepository.SettingsConfig;
+                OnPropertyChanged(nameof(ShortcutModules));
-                foreach (DashboardListItem item in _allModules)
-                {
-                    item.IsEnabled = ModuleHelper.GetIsModuleEnabled(generalSettingsConfig, item.Tag);
-                    if (item.IsEnabled)
-                    {
-                        ActiveModules.Add(item);
-                    }
-                    else
-                    {
-                        DisabledModules.Add(item);
-                    }
-                }
-
-                OnPropertyChanged(nameof(ActiveModules));
-                OnPropertyChanged(nameof(DisabledModules));
             }
             catch (Exception ex)
             {
@@ -165,29 +107,71 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
         }
 
+        private void GetShortcutModules()
+        {
+            ShortcutModules.Clear();
+            ActionModules.Clear();
+
+            foreach (var x in AllModules.Where(x => x.IsEnabled))
+            {
+                var filteredItems = x.DashboardModuleItems
+                    .Where(m => m is DashboardModuleShortcutItem || m is DashboardModuleActivationItem)
+                    .ToList();
+
+                if (filteredItems.Count != 0)
+                {
+                    ShortcutModules.Add(new DashboardListItem
+                    {
+                        EnabledChangedCallback = x.EnabledChangedCallback,
+                        Icon = x.Icon,
+                        IsLocked = x.IsLocked,
+                        Label = x.Label,
+                        Tag = x.Tag,
+                        IsEnabled = x.IsEnabled,
+                        DashboardModuleItems = new ObservableCollection<DashboardModuleItem>(filteredItems),
+                    });
+                }
+            }
+
+            foreach (var x in AllModules.Where(x => x.IsEnabled))
+            {
+                var filteredItems = x.DashboardModuleItems
+                    .Where(m => m is DashboardModuleButtonItem)
+                    .ToList();
+
+                if (filteredItems.Count != 0)
+                {
+                    ActionModules.Add(new DashboardListItem
+                    {
+                        EnabledChangedCallback = x.EnabledChangedCallback,
+                        Icon = x.Icon,
+                        IsLocked = x.IsLocked,
+                        Label = x.Label,
+                        Tag = x.Tag,
+                        IsEnabled = x.IsEnabled,
+                        DashboardModuleItems = new ObservableCollection<DashboardModuleItem>(filteredItems),
+                    });
+                }
+            }
+        }
+
         private ObservableCollection<DashboardModuleItem> GetModuleItems(ModuleType moduleType)
         {
             return moduleType switch
             {
                 ModuleType.AdvancedPaste => GetModuleItemsAdvancedPaste(),
                 ModuleType.AlwaysOnTop => GetModuleItemsAlwaysOnTop(),
-                ModuleType.Awake => GetModuleItemsAwake(),
                 ModuleType.CmdPal => GetModuleItemsCmdPal(),
                 ModuleType.ColorPicker => GetModuleItemsColorPicker(),
                 ModuleType.CropAndLock => GetModuleItemsCropAndLock(),
                 ModuleType.EnvironmentVariables => GetModuleItemsEnvironmentVariables(),
                 ModuleType.FancyZones => GetModuleItemsFancyZones(),
-                ModuleType.FileLocksmith => GetModuleItemsFileLocksmith(),
                 ModuleType.FindMyMouse => GetModuleItemsFindMyMouse(),
                 ModuleType.Hosts => GetModuleItemsHosts(),
-                ModuleType.ImageResizer => GetModuleItemsImageResizer(),
-                ModuleType.KeyboardManager => GetModuleItemsKeyboardManager(),
                 ModuleType.MouseHighlighter => GetModuleItemsMouseHighlighter(),
                 ModuleType.MouseJump => GetModuleItemsMouseJump(),
                 ModuleType.MousePointerCrosshairs => GetModuleItemsMousePointerCrosshairs(),
-                ModuleType.MouseWithoutBorders => GetModuleItemsMouseWithoutBorders(),
                 ModuleType.Peek => GetModuleItemsPeek(),
-                ModuleType.PowerRename => GetModuleItemsPowerRename(),
                 ModuleType.PowerLauncher => GetModuleItemsPowerLauncher(),
                 ModuleType.PowerAccent => GetModuleItemsPowerAccent(),
                 ModuleType.Workspaces => GetModuleItemsWorkspaces(),
@@ -195,8 +179,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 ModuleType.MeasureTool => GetModuleItemsMeasureTool(),
                 ModuleType.ShortcutGuide => GetModuleItemsShortcutGuide(),
                 ModuleType.PowerOCR => GetModuleItemsPowerOCR(),
-                ModuleType.NewPlus => GetModuleItemsNewPlus(),
-                ModuleType.ZoomIt => GetModuleItemsZoomIt(),
                 _ => new ObservableCollection<DashboardModuleItem>(), // never called, all values listed above
             };
         }
@@ -211,22 +193,13 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             return new ObservableCollection<DashboardModuleItem>(list);
         }
 
-        private ObservableCollection<DashboardModuleItem> GetModuleItemsAwake()
-        {
-            var list = new List<DashboardModuleItem>
-            {
-                new DashboardModuleTextItem() { Label = resourceLoader.GetString("Awake_ShortDescription") },
-            };
-            return new ObservableCollection<DashboardModuleItem>(list);
-        }
-
         private ObservableCollection<DashboardModuleItem> GetModuleItemsCmdPal()
         {
             var hotkey = new CmdPalProperties().Hotkey;
 
             var list = new List<DashboardModuleItem>
             {
-                new DashboardModuleShortcutItem() { Label = resourceLoader.GetString("CmdPal_ShortDescription"), Shortcut = hotkey.GetKeysList() },
+                new DashboardModuleShortcutItem() { Label = resourceLoader.GetString("CmdPal_ActivationDescription"), Shortcut = hotkey.GetKeysList() },
             };
             return new ObservableCollection<DashboardModuleItem>(list);
         }
@@ -259,7 +232,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         {
             var list = new List<DashboardModuleItem>
             {
-                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Description"), ButtonGlyph = "\uEA37", ButtonClickHandler = EnvironmentVariablesLaunchClicked },
+                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Description"), ButtonGlyph = "ms-appx:///Assets/Settings/Icons/EnvironmentVariables.png", ButtonClickHandler = EnvironmentVariablesLaunchClicked },
             };
             return new ObservableCollection<DashboardModuleItem>(list);
         }
@@ -268,26 +241,13 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         {
             ISettingsRepository<FancyZonesSettings> moduleSettingsRepository = SettingsRepository<FancyZonesSettings>.GetInstance(new SettingsUtils());
             var settings = moduleSettingsRepository.SettingsConfig;
-            string activationMode = $"{resourceLoader.GetString(settings.Properties.FancyzonesShiftDrag.Value ? "FancyZones_ShiftDragCheckBoxControl_Header/Content" : "FancyZones_ActivationNoShiftDrag")}.";
+            string activationMode = $"{resourceLoader.GetString(settings.Properties.FancyzonesShiftDrag.Value ? "FancyZones_ActivationShiftDrag" : "FancyZones_ActivationNoShiftDrag")}.";
-            if (settings.Properties.FancyzonesMouseSwitch.Value)
-            {
-                activationMode += $" {resourceLoader.GetString("FancyZones_MouseDragCheckBoxControl_Header/Content")}.";
-            }
 
             var list = new List<DashboardModuleItem>
             {
-                new DashboardModuleTextItem() { Label = activationMode },
+                new DashboardModuleActivationItem() { Label = resourceLoader.GetString("Activate_Zones"), Activation = activationMode },
                 new DashboardModuleShortcutItem() { Label = resourceLoader.GetString("FancyZones_OpenEditor"), Shortcut = settings.Properties.FancyzonesEditorHotkey.Value.GetKeysList() },
-                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("FancyZones_LaunchEditorButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("FancyZones_LaunchEditorButtonControl/Description"), ButtonGlyph = "\uEB3C", ButtonClickHandler = FancyZoneLaunchClicked },
+                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("FancyZones_LaunchEditorButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("FancyZones_LaunchEditorButtonControl/Description"), ButtonGlyph = "ms-appx:///Assets/Settings/Icons/FancyZones.png", ButtonClickHandler = FancyZoneLaunchClicked },
-            };
-            return new ObservableCollection<DashboardModuleItem>(list);
-        }
-
-        private ObservableCollection<DashboardModuleItem> GetModuleItemsFileLocksmith()
-        {
-            var list = new List<DashboardModuleItem>
-            {
-                new DashboardModuleTextItem() { Label = resourceLoader.GetString("FileLocksmith_ShortDescription") },
             };
             return new ObservableCollection<DashboardModuleItem>(list);
         }
@@ -306,15 +266,16 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
             else
             {
+                string activation = string.Empty;
                 switch (activationMethod)
                 {
-                    case 2: shortDescription += $". {resourceLoader.GetString("Dashboard_Activation")}: {resourceLoader.GetString("MouseUtils_FindMyMouse_ActivationShakeMouse/Content")}"; break;
+                    case 2: activation = resourceLoader.GetString("MouseUtils_FindMyMouse_ActivationShakeMouse/Content"); break;
-                    case 1: shortDescription += $". {resourceLoader.GetString("Dashboard_Activation")}: {resourceLoader.GetString("MouseUtils_FindMyMouse_ActivationDoubleRightControlPress/Content")}"; break;
+                    case 1: activation = resourceLoader.GetString("MouseUtils_FindMyMouse_ActivationDoubleRightControlPress/Content"); break;
                     case 0:
-                    default: shortDescription += $". {resourceLoader.GetString("Dashboard_Activation")}: {resourceLoader.GetString("MouseUtils_FindMyMouse_ActivationDoubleControlPress/Content")}"; break;
+                    default: activation = resourceLoader.GetString("MouseUtils_FindMyMouse_ActivationDoubleControlPress/Content"); break;
                 }
 
-                list.Add(new DashboardModuleTextItem() { Label = shortDescription });
+                list.Add(new DashboardModuleActivationItem() { Label = resourceLoader.GetString("Dashboard_Activation"), Activation = activation });
             }
 
             return new ObservableCollection<DashboardModuleItem>(list);
@@ -324,36 +285,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         {
             var list = new List<DashboardModuleItem>
             {
-                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("Hosts_LaunchButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("Hosts_LaunchButtonControl/Description"), ButtonGlyph = "\uEA37", ButtonClickHandler = HostLaunchClicked },
+                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("Hosts_LaunchButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("Hosts_LaunchButtonControl/Description"), ButtonGlyph = "ms-appx:///Assets/Settings/Icons/Hosts.png", ButtonClickHandler = HostLaunchClicked },
-            };
-            return new ObservableCollection<DashboardModuleItem>(list);
-        }
-
-        private ObservableCollection<DashboardModuleItem> GetModuleItemsImageResizer()
-        {
-            var list = new List<DashboardModuleItem>
-            {
-                new DashboardModuleTextItem() { Label = resourceLoader.GetString("ImageResizer_ShortDescription") },
-            };
-            return new ObservableCollection<DashboardModuleItem>(list);
-        }
-
-        private ObservableCollection<DashboardModuleItem> GetModuleItemsKeyboardManager()
-        {
-            KeyboardManagerProfile kbmProfile = GetKBMProfile();
-            _kbmItem = new DashboardModuleKBMItem() { RemapKeys = kbmProfile?.RemapKeys.InProcessRemapKeys, RemapShortcuts = KeyboardManagerViewModel.CombineShortcutLists(kbmProfile?.RemapShortcuts.GlobalRemapShortcuts, kbmProfile?.RemapShortcuts.AppSpecificRemapShortcuts) };
-
-            _kbmItem.RemapKeys = _kbmItem.RemapKeys.Concat(kbmProfile?.RemapKeysToText.InProcessRemapKeys).ToList();
-
-            var shortcutsToTextRemappings = KeyboardManagerViewModel.CombineShortcutLists(kbmProfile?.RemapShortcutsToText.GlobalRemapShortcuts, kbmProfile?.RemapShortcutsToText.AppSpecificRemapShortcuts);
-
-            _kbmItem.RemapShortcuts = _kbmItem.RemapShortcuts.Concat(shortcutsToTextRemappings).ToList();
-
-            var list = new List<DashboardModuleItem>
-            {
-                _kbmItem,
-                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("KeyboardManager_RemapKeyboardButton/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("KeyboardManager_RemapKeyboardButton/Description"), ButtonGlyph = "\uE92E", ButtonClickHandler = KbmKeyLaunchClicked },
-                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("KeyboardManager_RemapShortcutsButton/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("KeyboardManager_RemapShortcutsButton/Description"), ButtonGlyph = "\uE92E", ButtonClickHandler = KbmShortcutLaunchClicked },
             };
             return new ObservableCollection<DashboardModuleItem>(list);
         }
@@ -388,15 +320,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             return new ObservableCollection<DashboardModuleItem>(list);
         }
 
-        private ObservableCollection<DashboardModuleItem> GetModuleItemsMouseWithoutBorders()
-        {
-            var list = new List<DashboardModuleItem>
-            {
-                new DashboardModuleTextItem() { Label = resourceLoader.GetString("MouseWithoutBorders_ShortDescription") },
-            };
-            return new ObservableCollection<DashboardModuleItem>(list);
-        }
-
         private ObservableCollection<DashboardModuleItem> GetModuleItemsAdvancedPaste()
         {
             ISettingsRepository<AdvancedPasteSettings> moduleSettingsRepository = SettingsRepository<AdvancedPasteSettings>.GetInstance(new SettingsUtils());
@@ -429,15 +352,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             return new ObservableCollection<DashboardModuleItem>(list);
         }
 
-        private ObservableCollection<DashboardModuleItem> GetModuleItemsPowerRename()
-        {
-            var list = new List<DashboardModuleItem>
-            {
-                new DashboardModuleTextItem() { Label = resourceLoader.GetString("PowerRename_ShortDescription") },
-            };
-            return new ObservableCollection<DashboardModuleItem>(list);
-        }
-
         private ObservableCollection<DashboardModuleItem> GetModuleItemsPowerLauncher()
         {
             ISettingsRepository<PowerLauncherSettings> moduleSettingsRepository = SettingsRepository<PowerLauncherSettings>.GetInstance(new SettingsUtils());
@@ -450,20 +364,20 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 
         private ObservableCollection<DashboardModuleItem> GetModuleItemsPowerAccent()
         {
-            string shortDescription = resourceLoader.GetString("PowerAccent_ShortDescription");
             var settingsUtils = new SettingsUtils();
             PowerAccentSettings moduleSettings = settingsUtils.GetSettingsOrDefault<PowerAccentSettings>(PowerAccentSettings.ModuleName);
             var activationMethod = moduleSettings.Properties.ActivationKey;
+            string activation = string.Empty;
             switch (activationMethod)
             {
-                case Library.Enumerations.PowerAccentActivationKey.LeftRightArrow: shortDescription += $". {resourceLoader.GetString("Dashboard_Activation")}: {resourceLoader.GetString("QuickAccent_Activation_Key_Arrows/Content")}"; break;
+                case Library.Enumerations.PowerAccentActivationKey.LeftRightArrow: activation = resourceLoader.GetString("QuickAccent_Activation_Key_Arrows/Content"); break;
-                case Library.Enumerations.PowerAccentActivationKey.Space: shortDescription += $". {resourceLoader.GetString("Dashboard_Activation")}: {resourceLoader.GetString("QuickAccent_Activation_Key_Space/Content")}"; break;
+                case Library.Enumerations.PowerAccentActivationKey.Space: activation = resourceLoader.GetString("QuickAccent_Activation_Key_Space/Content"); break;
-                case Library.Enumerations.PowerAccentActivationKey.Both: shortDescription += $". {resourceLoader.GetString("Dashboard_Activation")}: {resourceLoader.GetString("QuickAccent_Activation_Key_Either/Content")}"; break;
+                case Library.Enumerations.PowerAccentActivationKey.Both: activation = resourceLoader.GetString("QuickAccent_Activation_Key_Either/Content"); break;
             }
 
             var list = new List<DashboardModuleItem>
             {
-                new DashboardModuleTextItem() { Label = shortDescription },
+                new DashboardModuleActivationItem() { Label = resourceLoader.GetString("Dashboard_Activation"), Activation = activation },
             };
             return new ObservableCollection<DashboardModuleItem>(list);
         }
@@ -476,7 +390,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             var list = new List<DashboardModuleItem>
             {
                 new DashboardModuleShortcutItem() { Label = resourceLoader.GetString("Workspaces_ShortDescription"), Shortcut = settings.Properties.Hotkey.Value.GetKeysList() },
-                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("Workspaces_LaunchEditorButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("FancyZones_LaunchEditorButtonControl/Description"), ButtonGlyph = "\uEB3C", ButtonClickHandler = WorkspacesLaunchClicked },
+                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("Workspaces_LaunchEditorButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("FancyZones_LaunchEditorButtonControl/Description"), ButtonGlyph = "ms-appx:///Assets/Settings/Icons/Workspaces.png", ButtonClickHandler = WorkspacesLaunchClicked },
             };
             return new ObservableCollection<DashboardModuleItem>(list);
         }
@@ -485,7 +399,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         {
             var list = new List<DashboardModuleItem>
             {
-                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("RegistryPreview_LaunchButtonControl/Header"), ButtonGlyph = "\uEA37",  ButtonClickHandler = RegistryPreviewLaunchClicked },
+                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("RegistryPreview_LaunchButtonControl/Header"), ButtonGlyph = "ms-appx:///Assets/Settings/Icons/RegistryPreview.png",  ButtonClickHandler = RegistryPreviewLaunchClicked },
             };
             return new ObservableCollection<DashboardModuleItem>(list);
         }
@@ -525,24 +439,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             return new ObservableCollection<DashboardModuleItem>(list);
         }
 
-        private ObservableCollection<DashboardModuleItem> GetModuleItemsNewPlus()
-        {
-            var list = new List<DashboardModuleItem>
-            {
-                new DashboardModuleTextItem() { Label = resourceLoader.GetString("NewPlus_Product_Description/Description") },
-            };
-            return new ObservableCollection<DashboardModuleItem>(list);
-        }
-
-        private ObservableCollection<DashboardModuleItem> GetModuleItemsZoomIt()
-        {
-            var list = new List<DashboardModuleItem>
-            {
-                new DashboardModuleTextItem() { Label = resourceLoader.GetString("ZoomIt_ShortDescription") },
-            };
-            return new ObservableCollection<DashboardModuleItem>(list);
-        }
-
         internal void SWVersionButtonClicked()
         {
             NavigationService.Navigate(typeof(GeneralPage));
@@ -574,20 +470,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             SendConfigMSG("{\"action\":{\"Workspaces\":{\"action_name\":\"LaunchEditor\", \"value\":\"\"}}}");
         }
 
-        private void KbmKeyLaunchClicked(object sender, RoutedEventArgs e)
-        {
-            var settingsUtils = new SettingsUtils();
-            var kbmViewModel = new KeyboardManagerViewModel(settingsUtils, SettingsRepository<GeneralSettings>.GetInstance(settingsUtils), ShellPage.SendDefaultIPCMessage, KeyboardManagerPage.FilterRemapKeysList);
-            kbmViewModel.OnRemapKeyboard();
-        }
-
-        private void KbmShortcutLaunchClicked(object sender, RoutedEventArgs e)
-        {
-            var settingsUtils = new SettingsUtils();
-            var kbmViewModel = new KeyboardManagerViewModel(settingsUtils, SettingsRepository<GeneralSettings>.GetInstance(settingsUtils), ShellPage.SendDefaultIPCMessage, KeyboardManagerPage.FilterRemapKeysList);
-            kbmViewModel.OnEditShortcut();
-        }
-
         private void RegistryPreviewLaunchClicked(object sender, RoutedEventArgs e)
         {
             var actionName = "Launch";
@@ -596,20 +478,10 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 
         internal void DashboardListItemClick(object sender)
         {
-            Button button = sender as Button;
+            if (sender is SettingsCard card && card.Tag is ModuleType moduleType)
-            if (button == null)
             {
-                return;
-            }
-
-            if (!(button.Tag is ModuleType))
-            {
-                return;
-            }
-
-            ModuleType moduleType = (ModuleType)button.Tag;
-
                 NavigationService.Navigate(ModuleHelper.GetModulePageType(moduleType));
             }
         }
     }
+}