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/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();
-        }
-    }
-}