[ZoomIt] Settings UX improvements

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

@@ -175,6 +175,9 @@
 		<None Update="Assets\Settings\Scripts\DisableModule.ps1">
 			<CopyToOutputDirectory>Always</CopyToOutputDirectory>
 		</None>
+		<Page Update="SettingsXAML\Controls\ShortcutControl\ShortcutWithTextLabelControl.xaml">
+		  <Generator>MSBuild:Compile</Generator>
+		</Page>
 		<Page Update="SettingsXAML\Controls\TitleBar\TitleBar.xaml">
 			<Generator>MSBuild:Compile</Generator>
 		</Page>

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

@@ -4,6 +4,7 @@
     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:tkcontrols="using:CommunityToolkit.WinUI.Controls"
     xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters">
     <Application.Resources>
         <ResourceDictionary>
@@ -18,7 +19,7 @@
                 <ResourceDictionary Source="/SettingsXAML/Themes/Colors.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Themes/Generic.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Controls/Timeline/TimelineStyles.xaml" />
-
+                <ResourceDictionary Source="/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml" />
                 <!--  Other merged dictionaries here  -->
             </ResourceDictionary.MergedDictionaries>
 
@@ -81,9 +82,6 @@
                 <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/ShortcutControl/ShortcutWithTextLabelControl.xaml

@@ -1,58 +1,67 @@
-<UserControl
-    x:Class="Microsoft.PowerToys.Settings.UI.Controls.ShortcutWithTextLabelControl"
+<?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:controls="using:Microsoft.PowerToys.Settings.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">
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:tk="using:CommunityToolkit.WinUI"
+    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls">
 
-    <Grid ColumnSpacing="8">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="*" />
-        </Grid.ColumnDefinitions>
-        <ItemsControl
-            x:Name="ShortcutsControl"
-            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
-                        Padding="12,8,12,8"
-                        AutomationProperties.AccessibilityView="Raw"
-                        Content="{Binding}"
-                        FontSize="12"
-                        IsTabStop="False"
-                        Style="{StaticResource DefaultKeyVisualStyle}" />
-                </DataTemplate>
-            </ItemsControl.ItemTemplate>
-        </ItemsControl>
-        <tkcontrols:MarkdownTextBlock
-            x:Name="LabelControl"
-            Grid.Column="1"
-            VerticalAlignment="Center"
-            Text="{x:Bind Text}" />
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="LabelPlacementStates">
-                <VisualState x:Name="LabelAfter" />
-                <VisualState x:Name="LabelBefore">
-                    <VisualState.Setters>
-                        <Setter Target="LabelControl.(Grid.Column)" Value="0" />
-                        <Setter Target="ShortcutsControl.(Grid.Column)" Value="1" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-    </Grid>
-</UserControl>
+    <Style BasedOn="{StaticResource DefaultShortcutWithTextLabelControlStyle}" TargetType="local:ShortcutWithTextLabelControl" />
+
+    <Style x:Key="DefaultShortcutWithTextLabelControlStyle" TargetType="local:ShortcutWithTextLabelControl">
+        <Setter Property="KeyVisualStyle" Value="{StaticResource DefaultKeyVisualStyle}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:ShortcutWithTextLabelControl">
+                    <Grid ColumnSpacing="8">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+                        <ItemsControl
+                            x:Name="ShortcutsControl"
+                            VerticalAlignment="Bottom"
+                            AutomationProperties.AccessibilityView="Raw"
+                            IsTabStop="False"
+                            ItemsSource="{TemplateBinding Keys}">
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <StackPanel Orientation="Horizontal" Spacing="4" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                            <ItemsControl.ItemTemplate>
+                                <DataTemplate>
+                                    <StackPanel Orientation="Vertical">
+                                        <local:KeyVisual
+                                            tk:FrameworkElementExtensions.AncestorType="local:ShortcutWithTextLabelControl"
+                                            AutomationProperties.AccessibilityView="Raw"
+                                            Content="{Binding}"
+                                            IsTabStop="False"
+                                            Style="{Binding (tk:FrameworkElementExtensions.Ancestor).KeyVisualStyle, RelativeSource={RelativeSource Self}}" />
+                                    </StackPanel>
+                                </DataTemplate>
+                            </ItemsControl.ItemTemplate>
+                        </ItemsControl>
+                        <tkcontrols:MarkdownTextBlock
+                            x:Name="LabelControl"
+                            Grid.Column="1"
+                            VerticalAlignment="Center"
+                            Config="{TemplateBinding MarkdownConfig}"
+                            Text="{TemplateBinding Text}" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="LabelPlacementStates">
+                                <VisualState x:Name="LabelAfter" />
+                                <VisualState x:Name="LabelBefore">
+                                    <VisualState.Setters>
+                                        <Setter Target="LabelControl.(Grid.Column)" Value="0" />
+                                        <Setter Target="ShortcutsControl.(Grid.Column)" Value="1" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

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

@@ -1,15 +1,15 @@
-// Copyright (c) Microsoft Corporation
+// 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 CommunityToolkit.WinUI.Controls;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 
 namespace Microsoft.PowerToys.Settings.UI.Controls
 {
-    public sealed partial class ShortcutWithTextLabelControl : UserControl
+    public sealed partial class ShortcutWithTextLabelControl : Control
     {
         public string Text
         {
@@ -27,38 +27,59 @@ public List<object> Keys
 
         public static readonly DependencyProperty KeysProperty = DependencyProperty.Register(nameof(Keys), typeof(List<object>), typeof(ShortcutWithTextLabelControl), new PropertyMetadata(default(string)));
 
-        public LabelPlacement LabelPlacement
+        public Placement LabelPlacement
         {
-            get { return (LabelPlacement)GetValue(LabelPlacementProperty); }
+            get { return (Placement)GetValue(LabelPlacementProperty); }
             set { SetValue(LabelPlacementProperty, value); }
         }
 
-        public static readonly DependencyProperty LabelPlacementProperty = DependencyProperty.Register(nameof(LabelPlacement), typeof(LabelPlacement), typeof(ShortcutWithTextLabelControl), new PropertyMetadata(defaultValue: LabelPlacement.After, OnIsLabelPlacementChanged));
+        public static readonly DependencyProperty LabelPlacementProperty = DependencyProperty.Register(nameof(LabelPlacement), typeof(Placement), typeof(ShortcutWithTextLabelControl), new PropertyMetadata(defaultValue: Placement.After, OnIsLabelPlacementChanged));
+
+        public MarkdownConfig MarkdownConfig
+        {
+            get { return (MarkdownConfig)GetValue(MarkdownConfigProperty); }
+            set { SetValue(MarkdownConfigProperty, value); }
+        }
+
+        public static readonly DependencyProperty MarkdownConfigProperty = DependencyProperty.Register(nameof(MarkdownConfig), typeof(MarkdownConfig), typeof(ShortcutWithTextLabelControl), new PropertyMetadata(new MarkdownConfig()));
+
+        public Style KeyVisualStyle
+        {
+            get { return (Style)GetValue(KeyVisualStyleProperty); }
+            set { SetValue(KeyVisualStyleProperty, value); }
+        }
+
+        public static readonly DependencyProperty KeyVisualStyleProperty = DependencyProperty.Register(nameof(KeyVisualStyle), typeof(Style), typeof(ShortcutWithTextLabelControl), new PropertyMetadata(default(Style)));
 
         public ShortcutWithTextLabelControl()
         {
-            this.InitializeComponent();
+            DefaultStyleKey = typeof(ShortcutWithTextLabelControl);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
         }
 
         private static void OnIsLabelPlacementChanged(DependencyObject d, DependencyPropertyChangedEventArgs newValue)
         {
             if (d is ShortcutWithTextLabelControl labelControl)
             {
-                if (labelControl.LabelPlacement == LabelPlacement.Before)
+                if (labelControl.LabelPlacement == Placement.Before)
                 {
-                  VisualStateManager.GoToState(labelControl, "LabelBefore", true);
+                    VisualStateManager.GoToState(labelControl, "LabelBefore", true);
                 }
                 else
                 {
                     VisualStateManager.GoToState(labelControl, "LabelAfter", true);
                 }
             }
         }
-    }
 
-    public enum LabelPlacement
-    {
-        Before,
-        After,
+        public enum Placement
+        {
+            Before,
+            After,
+        }
     }
 }