[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/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml

@@ -11,43 +11,74 @@
     mc:Ignorable="d">
 
     <Grid HorizontalAlignment="Right">
-        <StackPanel Orientation="Horizontal">
-            <Button
-                x:Name="EditButton"
-                Padding="0"
-                Click="OpenDialogButton_Click"
-                CornerRadius="8">
+        <Button
+            x:Name="EditButton"
+            Padding="0"
+            HorizontalAlignment="Right"
+            Click="OpenDialogButton_Click"
+            Style="{StaticResource SubtleButtonStyle}">
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ItemsControl
+                    x:Name="PreviewKeysControl"
+                    Margin="2"
+                    VerticalAlignment="Center"
+                    IsEnabled="{Binding ElementName=EditButton, Path=IsEnabled}"
+                    IsTabStop="False"
+                    Visibility="Collapsed">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <controls:KeyVisual
+                                Padding="12,8,12,8"
+                                VerticalAlignment="Center"
+                                AutomationProperties.AccessibilityView="Raw"
+                                Content="{Binding}"
+                                CornerRadius="{StaticResource ControlCornerRadius}"
+                                FontWeight="SemiBold"
+                                IsTabStop="False"
+                                Style="{StaticResource AccentKeyVisualStyle}" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
                 <StackPanel
-                    Margin="12,6,12,6"
+                    x:Name="PlaceholderPanel"
+                    Padding="8,4"
+                    BorderThickness="1"
+                    CornerRadius="{StaticResource ControlCornerRadius}"
                     Orientation="Horizontal"
-                    Spacing="16">
-                    <ItemsControl
-                        x:Name="PreviewKeysControl"
+                    Spacing="8">
+                    <!--<FontIcon
+                        AutomationProperties.AccessibilityView="Raw"
+                        FontSize="12"
+                        Glyph="&#xEDA7;" />-->
+                    <TextBlock
+                        x:Uid="ConfigureShortcutText"
                         VerticalAlignment="Center"
-                        IsEnabled="{Binding ElementName=EditButton, Path=IsEnabled}"
-                        IsTabStop="False">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <StackPanel Orientation="Horizontal" Spacing="4" />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <controls:KeyVisual
-                                    VerticalAlignment="Center"
-                                    AutomationProperties.AccessibilityView="Raw"
-                                    Content="{Binding}"
-                                    IsTabStop="False"
-                                    VisualType="Small" />
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                    <FontIcon
-                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                        FontSize="16"
-                        Glyph="&#xE70F;" />
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                 </StackPanel>
-            </Button>
-        </StackPanel>
+                <FontIcon
+                    Margin="0,0,4,0"
+                    AutomationProperties.Name=""
+                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                    FontSize="14"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Glyph="&#xE70F;" />
+            </StackPanel>
+        </Button>
+        <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();
-                    AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+                    SetKeys();
                     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();
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            SetKeys();
             shortcutDialog.Hide();
         }
 
@@ -462,9 +456,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
 
             var empty = new HotkeySettings();
             HotkeySettings = empty;
-
-            PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            SetKeys();
             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"
-                        VisualType="SmallOutline" />
+                        FontSize="12"
+                        IsTabStop="False" />
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>