Creating a Common.UI.Controls lib (#45542)

## Summary of the Pull Request

@jiripolasek FYI

This PR creates a new `Common.UI.Controls` library that contains shared
WinUI controls. We have been copying code manually between CmdPal and
Settings, and now with the new KBM we will run into the same issue.

This lib has shared controls projects can add to their proj so we have a
single source of truth.

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [x] Closes: #45388

<!-- - [ ] Closes: #yyy (add separate lines for additional resolved
issues) -->
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed

---------

Co-authored-by: Jiří Polášek <me@jiripolasek.com>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CheckBoxWithDescriptionControl.cs

@@ -1,76 +0,0 @@
-// Copyright (c) Microsoft Corporation
-// The Microsoft Corporation licenses this file to you under the MIT license.
-// See the LICENSE file in the project root for more information.
-
-using System.ComponentModel;
-
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Automation;
-using Microsoft.UI.Xaml.Controls;
-
-namespace Microsoft.CmdPal.UI.Controls;
-
-public partial class CheckBoxWithDescriptionControl : CheckBox
-{
-    private CheckBoxWithDescriptionControl _checkBoxSubTextControl;
-
-    public CheckBoxWithDescriptionControl()
-    {
-        _checkBoxSubTextControl = (CheckBoxWithDescriptionControl)this;
-        this.Loaded += CheckBoxSubTextControl_Loaded;
-    }
-
-    protected override void OnApplyTemplate()
-    {
-        Update();
-        base.OnApplyTemplate();
-    }
-
-    private void Update()
-    {
-        if (!string.IsNullOrEmpty(Header))
-        {
-            AutomationProperties.SetName(this, Header);
-        }
-    }
-
-    private void CheckBoxSubTextControl_Loaded(object sender, RoutedEventArgs e)
-    {
-        StackPanel panel = new StackPanel() { Orientation = Orientation.Vertical };
-        panel.Children.Add(new TextBlock() { Text = Header, TextWrapping = TextWrapping.WrapWholeWords });
-
-        // Add text box only if the description is not empty. Required for additional plugin options.
-        if (!string.IsNullOrWhiteSpace(Description))
-        {
-            panel.Children.Add(new IsEnabledTextBlock() { Style = (Style)App.Current.Resources["SecondaryIsEnabledTextBlockStyle"], Text = Description });
-        }
-
-        _checkBoxSubTextControl.Content = panel;
-    }
-
-    public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
-        "Header",
-        typeof(string),
-        typeof(CheckBoxWithDescriptionControl),
-        new PropertyMetadata(default(string)));
-
-    public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(
-        "Description",
-        typeof(string),
-        typeof(CheckBoxWithDescriptionControl),
-        new PropertyMetadata(default(string)));
-
-    [Localizable(true)]
-    public string Header
-    {
-        get => (string)GetValue(HeaderProperty);
-        set => SetValue(HeaderProperty, value);
-    }
-
-    [Localizable(true)]
-    public string Description
-    {
-        get => (string)GetValue(DescriptionProperty);
-        set => SetValue(DescriptionProperty, value);
-    }
-}

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/IsEnabledTextBlock.xaml

@@ -1,43 +0,0 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Microsoft.CmdPal.UI.Controls">
-
-    <Style x:Key="DefaultIsEnabledTextBlockStyle" TargetType="controls:IsEnabledTextBlock">
-        <Setter Property="Foreground" Value="{ThemeResource DefaultTextForegroundThemeBrush}" />
-        <Setter Property="IsTabStop" Value="False" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="controls:IsEnabledTextBlock">
-                    <Grid>
-                        <TextBlock
-                            x:Name="Label"
-                            FontFamily="{TemplateBinding FontFamily}"
-                            FontSize="{TemplateBinding FontSize}"
-                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}"
-                            Text="{TemplateBinding Text}"
-                            TextWrapping="WrapWholeWords" />
-                        <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup x:Name="CommonStates">
-                                <VisualState x:Name="Normal" />
-                                <VisualState x:Name="Disabled">
-                                    <VisualState.Setters>
-                                        <Setter Target="Label.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
-                                    </VisualState.Setters>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
-                    </Grid>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-    <Style
-        x:Key="SecondaryIsEnabledTextBlockStyle"
-        BasedOn="{StaticResource DefaultIsEnabledTextBlockStyle}"
-        TargetType="controls:IsEnabledTextBlock">
-        <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
-        <Setter Property="FontSize" Value="12" />
-    </Style>
-</ResourceDictionary>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/IsEnabledTextBlock.xaml.cs

@@ -1,51 +0,0 @@
-// Copyright (c) Microsoft Corporation
-// The Microsoft Corporation licenses this file to you under the MIT license.
-// See the LICENSE file in the project root for more information.
-
-using System.ComponentModel;
-
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-
-namespace Microsoft.CmdPal.UI.Controls;
-
-[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
-[TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
-public partial class IsEnabledTextBlock : Control
-{
-    public IsEnabledTextBlock()
-    {
-        this.Style = (Style)App.Current.Resources["DefaultIsEnabledTextBlockStyle"];
-    }
-
-    protected override void OnApplyTemplate()
-    {
-        IsEnabledChanged -= IsEnabledTextBlock_IsEnabledChanged;
-        SetEnabledState();
-        IsEnabledChanged += IsEnabledTextBlock_IsEnabledChanged;
-        base.OnApplyTemplate();
-    }
-
-    public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
-       "Text",
-       typeof(string),
-       typeof(IsEnabledTextBlock),
-       null);
-
-    [Localizable(true)]
-    public string Text
-    {
-        get => (string)GetValue(TextProperty);
-        set => SetValue(TextProperty, value);
-    }
-
-    private void IsEnabledTextBlock_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
-    {
-        SetEnabledState();
-    }
-
-    private void SetEnabledState()
-    {
-        VisualStateManager.GoToState(this, IsEnabled ? "Normal" : "Disabled", true);
-    }
-}

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/KeyVisual/KeyVisual.cs

@@ -1,178 +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.CmdPal.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 = new();
-
-    public object Content
-    {
-        get => 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 = 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 is null)
-        {
-            return;
-        }
-
-        if (_keyVisual.Content is not 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
-                        var winIcon = XamlReader.Load(@"<PathIcon xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" Data=""M683 1229H0V546h683v683zm819 0H819V546h683v683zm-819 819H0v-683h683v683zm819 0H819v-683h683v683z"" />") as PathIcon;
-                        var winIconContainer = new Viewbox
-                        {
-                            Child = winIcon,
-                            HorizontalAlignment = HorizontalAlignment.Center,
-                            VerticalAlignment = VerticalAlignment.Center,
-                        };
-
-                        var 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)
-    {
-        return VisualType == VisualType.Small
-            ? (Style)App.Current.Resources["Small" + styleName]
-            : VisualType == VisualType.SmallOutline
-                ? (Style)App.Current.Resources["SmallOutline" + styleName]
-                : VisualType == VisualType.TextOnly
-                            ? (Style)App.Current.Resources["Only" + styleName]
-                            : (Style)App.Current.Resources["Default" + styleName];
-    }
-
-    public double GetIconSize()
-    {
-        return VisualType == VisualType.Small || VisualType == VisualType.SmallOutline
-            ? (double)App.Current.Resources["SmallIconSize"]
-            : (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/modules/cmdpal/Microsoft.CmdPal.UI/Controls/KeyVisual/KeyVisual.xaml

@@ -1,174 +0,0 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Microsoft.CmdPal.UI.Controls">
-
-    <x:Double x:Key="DefaultIconSize">16</x:Double>
-    <x:Double x:Key="SmallIconSize">12</x:Double>
-    <Style x:Key="DefaultTextKeyVisualStyle" TargetType="controls:KeyVisual">
-        <Setter Property="MinWidth" Value="56" />
-        <Setter Property="MinHeight" Value="48" />
-        <Setter Property="Background" Value="{ThemeResource AccentButtonBackground}" />
-        <Setter Property="Foreground" Value="{ThemeResource AccentButtonForeground}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource AccentButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
-        <Setter Property="Padding" Value="16,8,16,8" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="FontSize" Value="18" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="controls:KeyVisual">
-                    <Grid>
-                        <Grid>
-                            <Rectangle
-                                x:Name="ContentHolder"
-                                Height="{TemplateBinding Height}"
-                                MinWidth="{TemplateBinding MinWidth}"
-                                Fill="{TemplateBinding Background}"
-                                RadiusX="4"
-                                RadiusY="4"
-                                Stroke="{TemplateBinding BorderBrush}"
-                                StrokeThickness="{TemplateBinding BorderThickness}" />
-                            <ContentPresenter
-                                x:Name="KeyPresenter"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalAlignment="Center"
-                                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="KeyPresenter.Foreground" Value="{ThemeResource AccentButtonForegroundDisabled}" />
-                                        <Setter Target="ContentHolder.Stroke" Value="{ThemeResource AccentButtonBorderBrushDisabled}" />
-                                        <!--<Setter Target="ContentHolder.StrokeThickness" Value="{TemplateBinding BorderThickness}" />-->
-                                    </VisualState.Setters>
-                                </VisualState>
-                            </VisualStateGroup>
-                            <VisualStateGroup x:Name="StateStates">
-                                <VisualState x:Name="Default" />
-                                <VisualState x:Name="Error">
-                                    <VisualState.Setters>
-                                        <Setter Target="ContentHolder.Fill" Value="{ThemeResource InfoBarErrorSeverityBackgroundBrush}" />
-                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource InfoBarErrorSeverityIconBackground}" />
-                                        <Setter Target="ContentHolder.Stroke" Value="{ThemeResource InfoBarErrorSeverityIconBackground}" />
-                                        <Setter Target="ContentHolder.StrokeThickness" Value="2" />
-                                    </VisualState.Setters>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
-                    </Grid>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
-    <Style
-        x:Key="SmallTextKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="controls:KeyVisual">
-        <Setter Property="MinWidth" Value="40" />
-        <Setter Property="Height" Value="36" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="Padding" Value="12,0,12,2" />
-        <Setter Property="FontSize" Value="14" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="SmallOutlineTextKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="controls: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>
-
-
-
-    <Style
-        x:Key="DefaultIconKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="controls:KeyVisual">
-        <Setter Property="MinWidth" Value="56" />
-        <Setter Property="MinHeight" Value="48" />
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
-        <Setter Property="Padding" Value="16,8,16,8" />
-        <Setter Property="FontSize" Value="14" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="SmallIconKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="controls:KeyVisual">
-        <Setter Property="MinWidth" Value="40" />
-        <Setter Property="Height" Value="36" />
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
-        <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="FontSize" Value="10" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="SmallOutlineIconKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="controls: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="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
-        <Setter Property="Height" Value="36" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="FontSize" Value="9" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="OnlyTextKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="controls:KeyVisual">
-        <Setter Property="MinHeight" Value="12" />
-        <Setter Property="MinWidth" Value="12" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
-        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="Padding" Value="0" />
-        <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/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ShortcutControl/ShortcutControl.xaml

@@ -5,49 +5,90 @@
     xmlns:controls="using:Microsoft.CmdPal.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ptcontrols="using:Microsoft.PowerToys.Common.UI.Controls"
     x:Name="LayoutRoot"
     d:DesignHeight="300"
     d:DesignWidth="400"
     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="4">
+                <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>
+                            <ptcontrols:KeyVisual
+                                MinWidth="36"
+                                Padding="8,8,8,8"
+                                VerticalAlignment="Center"
+                                AutomationProperties.AccessibilityView="Raw"
+                                Content="{Binding}"
+                                CornerRadius="{StaticResource ControlCornerRadius}"
+                                IsTabStop="False"
+                                Style="{StaticResource AccentKeyVisualStyle}" />
+
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
                 <StackPanel
-                    Margin="12,6,12,6"
+                    x:Name="PlaceholderPanel"
+                    Padding="8,4"
+                    BorderBrush="{ThemeResource ControlStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="{StaticResource ControlCornerRadius}"
                     Orientation="Horizontal"
-                    Spacing="16">
-                    <ItemsControl
-                        x:Name="PreviewKeysControl"
+                    Spacing="8">
+                    <ptcontrols:IsEnabledTextBlock
                         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;" />
+                        FontFamily="Segoe Fluent Icons"
+                        FontSize="12"
+                        Text="&#xE710;" />
+                    <ptcontrols:IsEnabledTextBlock
+                        x:Uid="ConfigureShortcutText"
+                        Margin="0,-1,0,0"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                 </StackPanel>
-            </Button>
-        </StackPanel>
+                <ptcontrols:IsEnabledTextBlock
+                    x:Name="EditIcon"
+                    Margin="0,0,4,0"
+                    VerticalAlignment="Center"
+                    AutomationProperties.AccessibilityView="Raw"
+                    AutomationProperties.Name=""
+                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                    FontSize="12"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Text="&#xE70F;"
+                    Visibility="Collapsed" />
+            </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" />
+                        <Setter Target="EditIcon.Visibility" Value="Visible" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 </UserControl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ShortcutControl/ShortcutControl.xaml.cs

@@ -11,6 +11,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.CmdPal.UI.Controls;
@@ -36,6 +37,8 @@ public sealed partial class ShortcutControl : UserControl, IDisposable, IRecipie
 
     public static readonly DependencyProperty AllowDisableProperty = DependencyProperty.Register("AllowDisable", typeof(bool), typeof(ShortcutControl), new PropertyMetadata(false, OnAllowDisableChanged));
 
+    private static ResourceLoader resourceLoader = Microsoft.CmdPal.UI.Helpers.ResourceLoaderInstance.ResourceLoader;
+
     private static void OnAllowDisableChanged(DependencyObject d, DependencyPropertyChangedEventArgs? e)
     {
         var me = d as ShortcutControl;
@@ -96,8 +99,7 @@ public sealed partial class ShortcutControl : UserControl, IDisposable, IRecipie
             {
                 hotkeySettings = value;
                 SetValue(HotkeySettingsProperty, value);
-                PreviewKeysControl.ItemsSource = HotkeySettings?.GetKeysList() ?? new List<object>();
-                AutomationProperties.SetHelpText(EditButton, HotkeySettings?.ToString() ?? string.Empty);
+                SetKeys();
                 c.Keys = HotkeySettings?.GetKeysList() ?? new List<object>();
             }
         }
@@ -108,8 +110,6 @@ public sealed partial class ShortcutControl : UserControl, IDisposable, IRecipie
         InitializeComponent();
         internalSettings = new HotkeySettings();
 
-        var resourceLoader = Microsoft.CmdPal.UI.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
         {
@@ -421,11 +421,9 @@ public sealed partial class ShortcutControl : UserControl, IDisposable, IRecipie
         hotkeySettings = null;
 
         SetValue(HotkeySettingsProperty, hotkeySettings);
-        PreviewKeysControl.ItemsSource = HotkeySettings?.GetKeysList() ?? new List<object>();
+        SetKeys();
 
         lastValidSettings = hotkeySettings;
-
-        AutomationProperties.SetHelpText(EditButton, HotkeySettings?.ToString() ?? string.Empty);
         shortcutDialog.Hide();
     }
 
@@ -436,8 +434,7 @@ public sealed partial class ShortcutControl : UserControl, IDisposable, IRecipie
             HotkeySettings = lastValidSettings with { };
         }
 
-        PreviewKeysControl.ItemsSource = hotkeySettings?.GetKeysList() ?? new List<object>();
-        AutomationProperties.SetHelpText(EditButton, HotkeySettings?.ToString() ?? string.Empty);
+        SetKeys();
         shortcutDialog.Hide();
     }
 
@@ -450,9 +447,7 @@ public sealed partial class ShortcutControl : UserControl, IDisposable, IRecipie
 
         var empty = new HotkeySettings();
         HotkeySettings = empty;
-
-        PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
-        AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+        SetKeys();
         shortcutDialog.Hide();
     }
 
@@ -508,4 +503,23 @@ public sealed partial class ShortcutControl : UserControl, IDisposable, IRecipie
         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;
+#pragma warning disable CS8602 // Dereference of a possibly null reference.
+            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+#pragma warning restore CS8602 // Dereference of a possibly null reference.
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, "Normal", true);
+            AutomationProperties.SetHelpText(EditButton, resourceLoader.GetString("ConfigureShortcut"));
+        }
+    }
 }

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ShortcutControl/ShortcutDialogContentControl.xaml

@@ -2,12 +2,16 @@
     x:Class="Microsoft.CmdPal.UI.Controls.ShortcutDialogContentControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Microsoft.CmdPal.UI.Controls"
+    xmlns:converters="using:Microsoft.PowerToys.Common.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ptcontrols="using:Microsoft.PowerToys.Common.UI.Controls"
     xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
     x:Name="ShortcutContentControl"
     mc:Ignorable="d">
+    <UserControl.Resources>
+        <converters:BoolToKeyVisualStateConverter x:Key="BoolToKeyVisualStateConverter" />
+    </UserControl.Resources>
     <Grid MinWidth="498" MinHeight="220">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
@@ -33,13 +37,16 @@
             </ItemsControl.ItemsPanel>
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
-                    <controls:KeyVisual
-                        Height="56"
+                    <ptcontrols:KeyVisual
+                        Padding="20,16"
                         AutomationProperties.AccessibilityView="Raw"
                         Content="{Binding}"
-                        IsError="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
+                        CornerRadius="{StaticResource OverlayCornerRadius}"
+                        FontSize="16"
+                        FontWeight="SemiBold"
                         IsTabStop="False"
-                        VisualType="Large" />
+                        State="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay, Converter={StaticResource BoolToKeyVisualStateConverter}, ConverterParameter=Error}"
+                        Style="{StaticResource AccentKeyVisualStyle}" />
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml

@@ -1,45 +0,0 @@
-<UserControl
-    x:Class="Microsoft.CmdPal.UI.Controls.ShortcutWithTextLabelControl"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Microsoft.CmdPal.UI.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
-    d:DesignHeight="300"
-    d:DesignWidth="400"
-    mc:Ignorable="d">
-
-    <Grid ColumnSpacing="8">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="*" />
-        </Grid.ColumnDefinitions>
-        <ItemsControl
-            VerticalAlignment="Center"
-            AutomationProperties.AccessibilityView="Raw"
-            IsTabStop="False"
-            ItemsSource="{x:Bind Keys}">
-            <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="SmallOutline" />
-                </DataTemplate>
-            </ItemsControl.ItemTemplate>
-        </ItemsControl>
-        <tkcontrols:MarkdownTextBlock
-            Grid.Column="1"
-            VerticalAlignment="Center"
-            Background="Transparent"
-            Text="{x:Bind Text}" />
-    </Grid>
-</UserControl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml.cs

@@ -1,35 +0,0 @@
-// Copyright (c) Microsoft Corporation
-// The Microsoft Corporation licenses this file to you under the MIT license.
-// See the LICENSE file in the project root for more information.
-
-using System.Collections.Generic;
-
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-
-namespace Microsoft.CmdPal.UI.Controls
-{
-    public sealed partial class ShortcutWithTextLabelControl : UserControl
-    {
-        public string Text
-        {
-            get { return (string)GetValue(TextProperty); }
-            set { SetValue(TextProperty, value); }
-        }
-
-        public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ShortcutWithTextLabelControl), new PropertyMetadata(default(string)));
-
-        public List<object> Keys
-        {
-            get { return (List<object>)GetValue(KeysProperty); }
-            set { SetValue(KeysProperty, value); }
-        }
-
-        public static readonly DependencyProperty KeysProperty = DependencyProperty.Register("Keys", typeof(List<object>), typeof(ShortcutWithTextLabelControl), new PropertyMetadata(default(string)));
-
-        public ShortcutWithTextLabelControl()
-        {
-            this.InitializeComponent();
-        }
-    }
-}