[ZoomIt] Settings UX improvements

.github/actions/spell-check/expect.txt

@@ -224,7 +224,6 @@ clientside
 CLIPBOARDUPDATE
 CLIPCHILDREN
 CLIPSIBLINGS
-CLITo
 closesocket
 clp
 CLSCTX
@@ -325,7 +324,6 @@ CUSTOMFORMATPLACEHOLDER
 CVal
 cvd
 CVirtual
-CVS
 CWMO
 CXSCREEN
 CXSMICON
@@ -733,9 +731,9 @@ HWNDPARENT
 HWNDPREV
 hyjiacan
 IAI
+icf
 ICONERROR
 ICONLOCATION
-icf
 IDCANCEL
 IDD
 idk
@@ -1062,9 +1060,9 @@ MSLLHOOKSTRUCT
 Mso
 msrc
 msstore
+mstsc
 msvcp
 MT
-mstsc
 MTND
 MULTIPLEUSE
 multizone
@@ -1078,7 +1076,6 @@ MVVMTK
 MWBEx
 MYICON
 NAMECHANGE
-Notavailable
 namespaceanddescendants
 nao
 NCACTIVATE
@@ -1219,8 +1216,6 @@ OPENFILENAME
 openrdp
 opensource
 openxmlformats
-ollama
-onnx
 OPTIMIZEFORINVOKE
 ORPHANEDDIALOGTITLE
 ORSCANS
@@ -1433,7 +1428,6 @@ RAWPATH
 rbhid
 rclsid
 RCZOOMIT
-remotedesktop
 rdp
 RDW
 READMODE
@@ -1462,6 +1456,7 @@ remappings
 REMAPSUCCESSFUL
 REMAPUNSUCCESSFUL
 Remotable
+remotedesktop
 remoteip
 Removelnk
 renamable
@@ -1805,7 +1800,6 @@ tlbimp
 tlc
 tmain
 TNP
-toolgood
 Toolhelp
 toolwindow
 TOPDOWNDIB
@@ -1853,9 +1847,9 @@ uild
 uitests
 UITo
 ULONGLONG
-ums
 UMax
 UMin
+ums
 uncompilable
 UNCPRIORITY
 UNDNAME
@@ -1867,7 +1861,6 @@ Uniquifies
 unitconverter
 unittests
 UNLEN
-Uninitializes
 UNORM
 unremapped
 Unsubscribes
@@ -1955,7 +1948,7 @@ vswhere
 Vtbl
 WANTNUKEWARNING
 WANTPALM
-wasdk
+WASDK
 wbem
 WBounds
 Wca

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

@@ -0,0 +1,31 @@
+// 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.Windows;
+using Microsoft.PowerToys.Settings.UI.Helpers;
+using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.Windows.ApplicationModel.Resources;
+
+namespace Microsoft.PowerToys.Settings.UI.Converters
+{
+    public partial class HotkeySettingsToLocalizedStringConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            if (value is HotkeySettings keySettings && parameter is string resourceKey)
+            {
+                return string.Format(System.Globalization.CultureInfo.CurrentCulture, ResourceLoaderInstance.ResourceLoader.GetString(resourceKey), keySettings.ToString());
+            }
+
+            return string.Empty;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

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,
+        }
     }
 }