Merge branch 'dev/vanzue/zoomit-hotkey' of https://github.com/microsoft/PowerToys into dev/vanzue/zoomit-hotkey

check-spelling run (pull_request_target) for dev/vanzue/zoomit-hotkey

Signed-off-by: check-spelling-bot <check-spelling-bot@users.noreply.github.com>
on-behalf-of: @check-spelling <check-spelling-bot@check-spelling.dev>

.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,26 +27,47 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
 
         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
                 {
@@ -54,11 +75,11 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                 }
             }
         }
-    }
 
-    public enum LabelPlacement
-    {
-        Before,
-        After,
+        public enum Placement
+        {
+            Before,
+            After,
+        }
     }
 }

src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml

@@ -11,12 +11,20 @@
     xmlns:ui="using:CommunityToolkit.WinUI"
     AutomationProperties.LandmarkType="Main"
     mc:Ignorable="d">
-
     <local:NavigablePage.Resources>
         <converters:ZoomItInitialZoomConverter x:Key="ZoomItInitialZoomConverter" />
         <converters:ZoomItTypeSpeedSliderConverter x:Key="ZoomItTypeSpeedSliderConverter" />
+        <converters:HotkeySettingsToLocalizedStringConverter x:Key="HotkeySettingsToLocalizedStringConverter" />
+        <tkcontrols:MarkdownThemes
+            x:Key="ZoomItMarkdownThemeConfig"
+            InlineCodeBackground="{StaticResource ControlFillColorDefaultBrush}"
+            InlineCodeBorderBrush="{StaticResource ControlElevationBorderBrush}"
+            InlineCodeCornerRadius="2"
+            InlineCodeFontSize="12"
+            InlineCodeForeground="{StaticResource TextFillColorSecondaryBrush}"
+            InlineCodePadding="2,0,2,1" />
+        <tkcontrols:MarkdownConfig x:Key="ZoomItMarkdownConfig" Themes="{StaticResource ZoomItMarkdownThemeConfig}" />
     </local:NavigablePage.Resources>
-
     <controls:SettingsPageControl
         x:Uid="ZoomIt"
         IsTabStop="False"
@@ -38,55 +46,82 @@
                         <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
                     </tkcontrols:SettingsCard>
                 </controls:GPOInfoControl>
-
                 <controls:SettingsGroup x:Uid="ZoomIt_BehaviorGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                     <tkcontrols:SettingsCard Name="ZoomItToggleShowTrayIcon" x:Uid="ZoomIt_Toggle_ShowTrayIcon">
                         <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.ShowTrayIcon, Mode=TwoWay}" />
                     </tkcontrols:SettingsCard>
                 </controls:SettingsGroup>
                 <controls:SettingsGroup x:Uid="ZoomIt_ZoomGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard
+                    <tkcontrols:SettingsExpander
                         Name="ZoomItZoomShortcut"
                         x:Uid="ZoomIt_Zoom_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE71E;}"
+                        IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.ZoomToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItToggleAnimateZoom" x:Uid="ZoomIt_Toggle_AnimateZoom">
-                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.AnimateZoom, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItSmoothZoomedImage" x:Uid="ZoomIt_Toggle_SmoothZoomedImage">
-                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.SmoothImage, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItSliderInitialMagnification" x:Uid="ZoomIt_Slider_InitialMagnification">
-                        <Slider
-                            MinWidth="{StaticResource SettingActionControlMinWidth}"
-                            Maximum="5"
-                            Minimum="0"
-                            ThumbToolTipValueConverter="{StaticResource ZoomItInitialZoomConverter}"
-                            TickFrequency="1"
-                            TickPlacement="Outside"
-                            Value="{x:Bind ViewModel.ZoominSliderLevel, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard Name="ZoomItToggleAnimateZoom" ContentAlignment="Left">
+                                <CheckBox x:Uid="ZoomIt_Toggle_AnimateZoom" IsChecked="{x:Bind ViewModel.AnimateZoom, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItSmoothZoomedImage" ContentAlignment="Left">
+                                <CheckBox x:Uid="ZoomIt_Toggle_SmoothZoomedImage" IsChecked="{x:Bind ViewModel.SmoothImage, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItSliderInitialMagnification" x:Uid="ZoomIt_Slider_InitialMagnification">
+                                <Slider
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    Maximum="5"
+                                    Minimum="0"
+                                    ThumbToolTipValueConverter="{StaticResource ZoomItInitialZoomConverter}"
+                                    TickFrequency="1"
+                                    TickPlacement="Outside"
+                                    Value="{x:Bind ViewModel.ZoominSliderLevel, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard>
+                                <tkcontrols:SettingsCard.Description>
+                                    <tkcontrols:MarkdownTextBlock x:Uid="ZoomIt_ZoomFAQ" Config="{StaticResource ZoomItMarkdownConfig}" />
+                                </tkcontrols:SettingsCard.Description>
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
                 <controls:SettingsGroup x:Uid="ZoomIt_LiveZoomGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard
+                    <tkcontrols:SettingsExpander
                         Name="ZoomItLiveZoomShortcut"
                         x:Uid="ZoomIt_LiveZoom_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE773;}"
+                        IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.LiveZoomToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard>
+                                <tkcontrols:SettingsCard.Description>
+                                    <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind Path=ViewModel.LiveZoomToggleKeyDraw, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_LiveZoom_Shortcut_Draw}" />
+                                </tkcontrols:SettingsCard.Description>
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
                 <controls:SettingsGroup x:Uid="ZoomIt_DrawGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard
+                    <tkcontrols:SettingsExpander
                         Name="ZoomItDrawShortcut"
                         x:Uid="ZoomIt_Draw_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
+                        HeaderIcon="{ui:FontIcon Glyph=&#xEE56;}"
+                        IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.DrawToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard>
+                                <tkcontrols:SettingsCard.Description>
+                                    <tkcontrols:MarkdownTextBlock x:Uid="ZoomIt_DrawFAQ" Config="{StaticResource ZoomItMarkdownConfig}" />
+                                </tkcontrols:SettingsCard.Description>
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
                 <controls:SettingsGroup x:Uid="ZoomIt_TypeGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard Name="ZoomItTypeTextFont" x:Uid="ZoomIt_Type_TextFont">
-                        <tkcontrols:SettingsCard.Description>
+                    <tkcontrols:SettingsExpander
+                        Name="ZoomItTypeTextFont"
+                        x:Uid="ZoomIt_Type_TextFont"
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE8D2;}"
+                        IsExpanded="True">
+                        <tkcontrols:SettingsExpander.Description>
                             <TextBlock
                                 FontFamily="{x:Bind ViewModel.DemoSampleFontFamily, Mode=OneWay}"
                                 FontSize="{x:Bind ViewModel.DemoSampleFontSize, Mode=OneWay}"
@@ -94,178 +129,212 @@
                                 FontWeight="{x:Bind ViewModel.DemoSampleFontWeight, Mode=OneWay}"
                                 Text="Sample"
                                 TextDecorations="{x:Bind ViewModel.DemoSampleTextDecoration, Mode=OneWay}" />
-                        </tkcontrols:SettingsCard.Description>
+                        </tkcontrols:SettingsExpander.Description>
                         <Button x:Uid="ZoomIt_Type_Font_Button" Command="{x:Bind ViewModel.SelectTypeFontCommand, Mode=OneWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard>
+                                <tkcontrols:SettingsCard.Description>
+                                    <tkcontrols:MarkdownTextBlock x:Uid="ZoomIt_TypeFAQ" Config="{StaticResource ZoomItMarkdownConfig}" />
+                                </tkcontrols:SettingsCard.Description>
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
                 <controls:SettingsGroup x:Uid="ZoomIt_DemoTypeGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard
-                        Name="ZoomItDemoTypeFile"
-                        x:Uid="ZoomIt_DemoType_File"
-                        Description="{x:Bind ViewModel.DemoTypeFile, Mode=OneWay}">
-                        <Button x:Uid="ZoomIt_DemoType_File_BrowseButton" Command="{x:Bind ViewModel.SelectDemoTypeFileCommand, Mode=OneWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard
-                        Name="ZoomItDemoTypeShortcut"
-                        x:Uid="ZoomIt_DemoType_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
-                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItDemoTypeToggleUserDrivenMode" x:Uid="ZoomIt_DemoType_Toggle_UserDrivenMode">
-                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.DemoTypeUserDrivenMode, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard
-                        Name="ZoomItDemoTypeSpeedSlider"
-                        x:Uid="ZoomIt_DemoType_SpeedSlider"
-                        Description="{x:Bind ViewModel.DemoTypeSpeedSlider, Mode=OneWay}">
-                        <Slider
-                            MinWidth="{StaticResource SettingActionControlMinWidth}"
-                            Maximum="{x:Bind ViewModel.DemoTypeMinTypingSpeed, Mode=OneWay}"
-                            Minimum="{x:Bind ViewModel.DemoTypeMaxTypingSpeed, Mode=OneWay}"
-                            ThumbToolTipValueConverter="{StaticResource ZoomItTypeSpeedSliderConverter}"
-                            Value="{x:Bind ViewModel.DemoTypeSpeedSlider, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                </controls:SettingsGroup>
-                <controls:SettingsGroup x:Uid="ZoomIt_BreakGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard
-                        Name="ZoomItBreakShortcut"
-                        x:Uid="ZoomIt_Break_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
-                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.BreakTimerKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItBreakTimeout" x:Uid="ZoomIt_Break_Timeout">
-                        <NumberBox
-                            MinWidth="{StaticResource SettingActionControlMinWidth}"
-                            LargeChange="10"
-                            Maximum="99"
-                            Minimum="1"
-                            SmallChange="1"
-                            SpinButtonPlacementMode="Compact"
-                            Value="{x:Bind ViewModel.BreakTimeout, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItBreakShowExpiredTime" x:Uid="ZoomIt_Break_ShowExpiredTime">
-                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.BreakShowExpiredTime, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
 
                     <tkcontrols:SettingsExpander
-                        Name="ZoomItBreakPlaySoundsFile"
-                        x:Uid="ZoomIt_Break_PlaySoundsFile"
+                        Name="ZoomItDemoTypeShortcut"
+                        x:Uid="ZoomIt_DemoType_Shortcut"
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE8AC;}"
                         IsExpanded="True">
-                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.BreakPlaySoundFile, Mode=TwoWay}" />
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItDemoTypeFile"
+                                x:Uid="ZoomIt_DemoType_File"
+                                Description="{x:Bind ViewModel.DemoTypeFile, Mode=OneWay}">
+                                <Button x:Uid="ZoomIt_DemoType_File_BrowseButton" Command="{x:Bind ViewModel.SelectDemoTypeFileCommand, Mode=OneWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItDemoTypeToggleUserDrivenMode" ContentAlignment="Left">
+                                <CheckBox x:Uid="ZoomIt_DemoType_Toggle_UserDrivenMode" IsChecked="{x:Bind ViewModel.DemoTypeUserDrivenMode, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItDemoTypeSpeedSlider" x:Uid="ZoomIt_DemoType_SpeedSlider">
+                                <Slider
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    Maximum="{x:Bind ViewModel.DemoTypeMinTypingSpeed, Mode=OneWay}"
+                                    Minimum="{x:Bind ViewModel.DemoTypeMaxTypingSpeed, Mode=OneWay}"
+                                    ThumbToolTipValueConverter="{StaticResource ZoomItTypeSpeedSliderConverter}"
+                                    Value="{x:Bind ViewModel.DemoTypeSpeedSlider, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItDemoTypeShortcutReset">
+                                <tkcontrols:SettingsCard.Description>
+                                    <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind Path=ViewModel.DemoTypeToggleKeyReset, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_DemoTypeFAQ}" />
+                                </tkcontrols:SettingsCard.Description>
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
+
+                </controls:SettingsGroup>
+                <controls:SettingsGroup x:Uid="ZoomIt_BreakGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
+                    <tkcontrols:SettingsExpander
+                        Name="ZoomItBreakShortcut"
+                        x:Uid="ZoomIt_Break_Shortcut"
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE916;}"
+                        IsExpanded="True">
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.BreakTimerKey, Mode=TwoWay}" />
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard Name="ZoomItBreakTimeout" x:Uid="ZoomIt_Break_Timeout">
+                                <NumberBox
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    LargeChange="10"
+                                    Maximum="99"
+                                    Minimum="1"
+                                    SmallChange="1"
+                                    SpinButtonPlacementMode="Compact"
+                                    Value="{x:Bind ViewModel.BreakTimeout, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItBreakShowExpiredTime" ContentAlignment="Left">
+                                <CheckBox x:Uid="ZoomIt_Break_ShowExpiredTime" IsChecked="{x:Bind ViewModel.BreakShowExpiredTime, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItBreakPlaySoundsFile" ContentAlignment="Left">
+                                <CheckBox x:Uid="ZoomIt_Break_PlaySoundsFile" IsChecked="{x:Bind ViewModel.BreakPlaySoundFile, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
                             <tkcontrols:SettingsCard
                                 Name="ZoomItBreakSoundFile"
                                 x:Uid="ZoomIt_Break_SoundFile"
                                 Description="{x:Bind ViewModel.BreakSoundFile, Mode=OneWay}"
-                                IsEnabled="{x:Bind ViewModel.BreakPlaySoundFile, Mode=OneWay}">
+                                Visibility="{x:Bind ViewModel.BreakPlaySoundFile, Mode=OneWay}">
                                 <Button x:Uid="ZoomIt_Break_SoundFile_BrowseButton" Command="{x:Bind ViewModel.SelectBreakSoundFileCommand, Mode=OneWay}" />
                             </tkcontrols:SettingsCard>
-                        </tkcontrols:SettingsExpander.Items>
-                    </tkcontrols:SettingsExpander>
-                    <tkcontrols:SettingsCard Name="ZoomItBreakTimerOpacity" x:Uid="ZoomIt_Break_TimerOpacity">
-                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.BreakTimerOpacityIndex, Mode=TwoWay}">
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_10Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_20Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_30Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_40Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_50Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_60Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_70Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_80Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_90Percent" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_100Percent" />
-                        </ComboBox>
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItBreakTimerPosition" x:Uid="ZoomIt_Break_TimerPosition">
-                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.BreakTimerPosition, Mode=TwoWay}">
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_TopLeftCorner" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_TopCenter" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_TopRightCorner" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_Left" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_Center" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_Right" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_BottomLeftCorner" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_BottomCenter" />
-                            <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_BottomRightCorner" />
-                        </ComboBox>
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsExpander
-                        Name="ZoomItBreakShowBackgroundBitmap"
-                        x:Uid="ZoomIt_Break_ShowBackgroundBitmap"
-                        IsExpanded="True">
-                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.BreakShowBackgroundFile, Mode=TwoWay}" />
-                        <tkcontrols:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard
-                                Name="ZoomItBreakShowDesktopOrImageFile"
-                                x:Uid="ZoomIt_Break_ShowDesktopOrImageFile"
-                                IsEnabled="{x:Bind ViewModel.BreakShowBackgroundFile, Mode=OneWay}">
-                                <RadioButtons SelectedIndex="{x:Bind ViewModel.BreakShowDesktopOrImageFileIndex, Mode=TwoWay}">
-                                    <RadioButton x:Uid="ZoomIt_Break_ShowFadedDesktop" />
-                                    <RadioButton x:Uid="ZoomIt_Break_ShowImageFile" />
-                                </RadioButtons>
+                            <tkcontrols:SettingsCard Name="ZoomItBreakTimerOpacity" x:Uid="ZoomIt_Break_TimerOpacity">
+                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.BreakTimerOpacityIndex, Mode=TwoWay}">
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_10Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_20Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_30Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_40Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_50Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_60Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_70Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_80Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_90Percent" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerOpacity_100Percent" />
+                                </ComboBox>
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItBreakTimerPosition" x:Uid="ZoomIt_Break_TimerPosition">
+                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.BreakTimerPosition, Mode=TwoWay}">
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_TopLeftCorner" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_TopCenter" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_TopRightCorner" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_Left" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_Center" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_Right" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_BottomLeftCorner" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_BottomCenter" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_TimerPosition_BottomRightCorner" />
+                                </ComboBox>
+                            </tkcontrols:SettingsCard>
+
+
+                            <tkcontrols:SettingsCard Name="ZoomItBreakShowBackgroundBitmap" x:Uid="ZoomIt_Break_ShowBackgroundBitmap">
+                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.BreakBackgroundSelectionIndex, Mode=TwoWay}">
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_BackgroundImage_None" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_ShowFadedDesktop" />
+                                    <ComboBoxItem x:Uid="ZoomIt_Break_ShowImageFile" />
+                                </ComboBox>
                             </tkcontrols:SettingsCard>
                             <tkcontrols:SettingsCard
                                 Name="ZoomItBreakBackgroundFile"
                                 x:Uid="ZoomIt_Break_BackgroundFile"
                                 Description="{x:Bind ViewModel.BreakBackgroundFile, Mode=OneWay}"
-                                IsEnabled="{x:Bind ViewModel.BreakShowBackgroundFile, Mode=OneWay}">
+                                Visibility="{x:Bind ViewModel.BreakShowBackgroundFile, Mode=OneWay}">
                                 <Button x:Uid="ZoomIt_Break_BackgroundFile_BrowseButton" Command="{x:Bind ViewModel.SelectBreakBackgroundFileCommand, Mode=OneWay}" />
                             </tkcontrols:SettingsCard>
                             <tkcontrols:SettingsCard
                                 Name="ZoomItBreakBackgroundStretch"
-                                x:Uid="ZoomIt_Break_BackgroundStretch"
-                                IsEnabled="{x:Bind ViewModel.BreakShowBackgroundFile, Mode=OneWay}">
-                                <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.BreakBackgroundStretch, Mode=TwoWay}" />
+                                ContentAlignment="Left"
+                                Visibility="{x:Bind ViewModel.BreakShowBackgroundFile, Mode=OneWay}">
+                                <CheckBox x:Uid="ZoomIt_Break_BackgroundStretch" IsChecked="{x:Bind ViewModel.BreakBackgroundStretch, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard>
+                                <tkcontrols:SettingsCard.Description>
+                                    <tkcontrols:MarkdownTextBlock x:Uid="ZoomIt_BreakFAQ" Config="{StaticResource ZoomItMarkdownConfig}" />
+                                </tkcontrols:SettingsCard.Description>
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
+
+                </controls:SettingsGroup>
+
+
+                <controls:SettingsGroup x:Uid="ZoomIt_RecordGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
+                    <tkcontrols:SettingsExpander
+                        Name="ZoomItRecordShortcut"
+                        x:Uid="ZoomIt_Record_Shortcut"
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE7C8;}"
+                        IsExpanded="True">
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKey, Mode=TwoWay}" />
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard Name="ZoomItRecordScaling" x:Uid="ZoomIt_Record_Scaling">
+                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.RecordScalingIndex, Mode=TwoWay}">
+                                    <ComboBoxItem>0.1</ComboBoxItem>
+                                    <ComboBoxItem>0.2</ComboBoxItem>
+                                    <ComboBoxItem>0.3</ComboBoxItem>
+                                    <ComboBoxItem>0.4</ComboBoxItem>
+                                    <ComboBoxItem>0.5</ComboBoxItem>
+                                    <ComboBoxItem>0.6</ComboBoxItem>
+                                    <ComboBoxItem>0.7</ComboBoxItem>
+                                    <ComboBoxItem>0.8</ComboBoxItem>
+                                    <ComboBoxItem>0.9</ComboBoxItem>
+                                    <ComboBoxItem>1.0</ComboBoxItem>
+                                </ComboBox>
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItRecordFormat" x:Uid="ZoomIt_Record_Format">
+                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.RecordFormatIndex, Mode=TwoWay}">
+                                    <ComboBoxItem>GIF</ComboBoxItem>
+                                    <ComboBoxItem>MP4</ComboBoxItem>
+                                </ComboBox>
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard Name="ZoomItRecordCaptureAudio" ContentAlignment="Left">
+                                <CheckBox x:Uid="ZoomIt_Record_CaptureAudio" IsChecked="{x:Bind ViewModel.RecordCaptureAudio, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItRecordMicrophone"
+                                x:Uid="ZoomIt_Record_Microphone"
+                                Visibility="{x:Bind ViewModel.RecordCaptureAudio, Mode=OneWay}">
+                                <ComboBox
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    DisplayMemberPath="Item2"
+                                    ItemsSource="{x:Bind ViewModel.MicrophoneList}"
+                                    SelectedValue="{x:Bind Path=ViewModel.RecordMicrophoneDeviceId, Mode=TwoWay}"
+                                    SelectedValuePath="Item1" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard>
+                                <tkcontrols:SettingsCard.Description>
+                                    <StackPanel Orientation="Vertical" Spacing="4">
+                                        <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind Path=ViewModel.RecordToggleKey, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_Record_Shortcut_FullScreen}" />
+                                        <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind Path=ViewModel.RecordToggleKeyCrop, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_Record_Shortcut_Crop}" />
+                                        <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind Path=ViewModel.RecordToggleKeyWindow, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_Record_Shortcut_Window}" />
+                                    </StackPanel>
+                                </tkcontrols:SettingsCard.Description>
                             </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
                     </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
-                <controls:SettingsGroup x:Uid="ZoomIt_RecordGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard
-                        Name="ZoomItRecordShortcut"
-                        x:Uid="ZoomIt_Record_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
-                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItRecordScaling" x:Uid="ZoomIt_Record_Scaling">
-                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.RecordScalingIndex, Mode=TwoWay}">
-                            <ComboBoxItem>0.1</ComboBoxItem>
-                            <ComboBoxItem>0.2</ComboBoxItem>
-                            <ComboBoxItem>0.3</ComboBoxItem>
-                            <ComboBoxItem>0.4</ComboBoxItem>
-                            <ComboBoxItem>0.5</ComboBoxItem>
-                            <ComboBoxItem>0.6</ComboBoxItem>
-                            <ComboBoxItem>0.7</ComboBoxItem>
-                            <ComboBoxItem>0.8</ComboBoxItem>
-                            <ComboBoxItem>0.9</ComboBoxItem>
-                            <ComboBoxItem>1.0</ComboBoxItem>
-                        </ComboBox>
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItRecordFormat" x:Uid="ZoomIt_Record_Format">
-                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.RecordFormatIndex, Mode=TwoWay}">
-                            <ComboBoxItem>GIF</ComboBoxItem>
-                            <ComboBoxItem>MP4</ComboBoxItem>
-                        </ComboBox>
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItRecordCaptureAudio" x:Uid="ZoomIt_Record_CaptureAudio">
-                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.RecordCaptureAudio, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard Name="ZoomItRecordMicrophone" x:Uid="ZoomIt_Record_Microphone">
-                        <ComboBox
-                            MinWidth="{StaticResource SettingActionControlMinWidth}"
-                            DisplayMemberPath="Item2"
-                            ItemsSource="{x:Bind ViewModel.MicrophoneList}"
-                            SelectedValue="{x:Bind Path=ViewModel.RecordMicrophoneDeviceId, Mode=TwoWay}"
-                            SelectedValuePath="Item1" />
-                    </tkcontrols:SettingsCard>
-                </controls:SettingsGroup>
                 <controls:SettingsGroup x:Uid="ZoomIt_SnipGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard
+                    <tkcontrols:SettingsExpander
                         Name="ZoomItSnipShortcut"
                         x:Uid="ZoomIt_Snip_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
+                        HeaderIcon="{ui:FontIcon Glyph=&#xF7ED;}"
+                        IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.SnipToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard Name="ZoomItSnipShortcutSave">
+                                <tkcontrols:SettingsCard.Description>
+                                    <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind Path=ViewModel.SnipToggleKeySave, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_Snip_Shortcut_Save}" />
+                                </tkcontrols:SettingsCard.Description>
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
@@ -273,7 +342,7 @@
             <controls:PageLink x:Uid="LearnMore_ZoomIt" Link="https://aka.ms/PowerToysOverview_ZoomIt" />
         </controls:SettingsPageControl.PrimaryLinks>
         <controls:SettingsPageControl.SecondaryLinks>
-            <controls:PageLink Link="https://learn.microsoft.com/en-us/sysinternals/downloads/zoomit" Text="Sysinternals Zoomit by Mark Russinovich, Alex Mihaiuc, John Stephens" />
+            <controls:PageLink Link="https://learn.microsoft.com/sysinternals/downloads/zoomit" Text="Sysinternals ZoomIt by Mark Russinovich, Alex Mihaiuc, John Stephens" />
         </controls:SettingsPageControl.SecondaryLinks>
     </controls:SettingsPageControl>
 </local:NavigablePage>

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -4756,52 +4756,58 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Zoom</value>
   </data>
   <data name="ZoomIt_ZoomGroup.Description" xml:space="preserve">
-    <value>After toggling ZoomIt you can zoom in with the mouse wheel or up and down arrow keys. Exit zoom mode with Escape or by pressing the right mouse button.
-
-Copy a zoomed screen with Ctrl+C or save it by typing Ctrl+S. Crop the copy or save region by entering Ctrl+Shift instead of Ctrl.</value>
+    <value>Zoom in or out to enlarge content and make details clearer.</value>
+  </data>
+  <data name="ZoomIt_ZoomFAQ.Text" xml:space="preserve">
+    <value>Press **the mouse wheel** or **the Up / Down arrow keys** to zoom in or out.  
+Press **Esc** or **the right mouse button** to exit zoom mode.  
+Press **Ctrl + C** to capture the zoomed view, or **Ctrl + S** to save it.  
+Press **Ctrl + Shift** to crop before copying or saving.</value>
   </data>
   <data name="ZoomIt_Zoom_Shortcut.Header" xml:space="preserve">
-    <value>Zoom hotkey</value>
+    <value>Zoom activation</value>
   </data>
-  <data name="ZoomIt_Toggle_AnimateZoom.Header" xml:space="preserve">
-    <value>Animate zoom in and zoom out</value>
+  <data name="ZoomIt_Toggle_AnimateZoom.Content" xml:space="preserve">
+    <value>Animate zoom in and out</value>
   </data>
-  <data name="ZoomIt_Toggle_SmoothZoomedImage.Header" xml:space="preserve">
-    <value>Smooth zoomed image</value>
+  <data name="ZoomIt_Toggle_SmoothZoomedImage.Content" xml:space="preserve">
+    <value>Smooth the zoomed image</value>
   </data>
   <data name="ZoomIt_Slider_InitialMagnification.Header" xml:space="preserve">
-    <value>Specify the initial level of magnification when zooming in</value>
+    <value>Initial zoom level</value>
   </data>
   <data name="ZoomIt_LiveZoomGroup.Header" xml:space="preserve">
     <value>Live Zoom</value>
   </data>
   <data name="ZoomIt_LiveZoomGroup.Description" xml:space="preserve">
-    <value>LiveZoom mode supports window updates to show while zoomed.
-
-Note that in LiveZoom you must use Ctrl+Up and Ctrl+Down to control the zoom level. To enter drawing mode, use the standard zoom-without-draw hotkey and then escape to go back to LiveZoom.
-
-Use LiveDraw to draw and annotate the live desktop. To activate LiveDraw, enter the hotkey with the Shift key in the opposite mode. You can remove LiveDraw annotations by activating LiveDraw and enter the escape key.
-
-To enter and exit LiveZoom, enter the hotkey specified below.</value>
+    <value>Live Zoom keeps windows updating while zoomed.</value>
   </data>
   <data name="ZoomIt_LiveZoom_Shortcut.Header" xml:space="preserve">
-    <value>Live Zoom hotkey</value>
+    <value>Live Zoom activation</value>
   </data>
   <data name="ZoomIt_DrawGroup.Header" xml:space="preserve">
     <value>Draw</value>
   </data>
-  <data name="ZoomIt_DrawGroup.Description" xml:space="preserve">
-    <value>Once zoomed, toggle drawing mode by pressing the left mouse button. Undo with Ctrl+Z and all drawing by pressing E. Center the cursor with the space bar. Exit drawing mode by pressing the right mouse button.
+  <data name="ZoomIt_DrawFAQ.Text" xml:space="preserve">
+    <value>Press **the left mouse button** to toggle drawing mode when zoomed in, and **the right mouse button** to exit.  
+Press **Ctrl + Z** to undo, **E** to clear drawings, and **Space** to center the cursor.
 
-Pen Control - Change the pen width by pressing left Ctrl and using the mouse wheel or the up and down arrow keys.
+**Pen control**  
+Press **Ctrl + the mouse wheel** or **Ctrl + Up / Down** to adjust the pen width.
 
-Colors - Change the pen color by pressing R (red), G (green), B (blue), O (orange), Y (yellow) or P (pink).
+**Colors**  
+Press **R** (Red), **G** (Green), **B** (Blue), **O** (Orange), **Y** (Yellow), or **P** (Pink) to switch colors.
 
-Highlight and Blur - Hold Shift while pressing a color key for a translucent highlighter color. Press X for blur or Shift+X for a stronger blur.
+**Highlight and blur**  
+Press **Shift + a color key** for a translucent highlighter, **X** for blur, or **Shift + X** for a stronger blur.
 
-Shapes - Draw a line by holding down the Shift key, a rectangle with the Ctrl key, an ellipse with the Tab key and an arrow with Shift+Ctrl.
+**Shapes**  
+Press **Shift** for a line, **Ctrl** for a rectangle, **Tab** for an ellipse, or **Shift + Ctrl** for an arrow.
 
-Screen - Clear the screen for a sketch pad by pressing W (white) or K (black). Copy a zoomed screen with Ctrl+C or save it by typing Ctrl+S. Crop the copy or save region by entering Ctrl+Shift instead of Ctrl.</value>
+**Screen**  
+Press **W** or **K** for a white or black sketch pad.  
+Press **Ctrl + C** to copy or **Ctrl + S** to save, and **Ctrl + Shift** to crop.
+    </value>
   </data>
   <data name="ZoomIt_Draw_Shortcut.Header" xml:space="preserve">
     <value>Draw without zoom hotkey</value>
@@ -4810,9 +4816,7 @@ Screen - Clear the screen for a sketch pad by pressing W (white) or K (black). C
     <value>Type</value>
   </data>
   <data name="ZoomIt_TypeGroup.Description" xml:space="preserve">
-    <value>Once in drawing mode, type 't' to enter typing mode or shift+'t' to enter typing mode with right-aligned input. Exit typing mode by pressing escape or the left mouse button. Use the mouse wheel or up and down arrow keys to change the font size.
-
-The text color is the current drawing color.</value>
+    <value>Type text while drawing</value>
   </data>
   <data name="ZoomIt_Type_TextFont.Header" xml:space="preserve">
     <value>Text font</value>
@@ -4825,18 +4829,25 @@ The text color is the current drawing color.</value>
     <value>DemoType</value>
   </data>
   <data name="ZoomIt_DemoTypeGroup.Description" xml:space="preserve">
-    <value>Use DemoType to have ZoomIt type text specified in the input file when you enter the DemoType toggle. You can also pull input from the clipboard if it is prefixed with the [start] keyword.
+    <value>Insert predefined text snippets with a shortcut using a text file.</value>
+  </data>
+  <data name="ZoomIt_DemoTypeFAQ" xml:space="preserve">
+    <value>Text can be pulled from the clipboard when it starts with **[start]**.  
+Use **[end]** to separate snippets, **[pause:n]** to insert pauses (in seconds), and **[paste]** / **[/paste]** to send clipboard text.  
+Use **[enter]**, **[up]**, **[down]**, **[left]**, and **[right]** to issue keystrokes.
 
-Separate snippets with the [end] keyword and insert pauses into the text output with the [pause:n] keyword where 'n' is seconds. Send text via the clipboard with [paste] and [/paste]. Send keystrokes with [enter], [up], [down], [left] and [right].
+ZoomIt can send text automatically or run in manual mode. Keyboard input is blocked while text is being sent.
 
-You can have ZoomIt send text automatically, or select the option to drive input with typing. ZoomIt will block keyboard input while sending output.
+In manual mode, press **Space** to unblock keyboard input at the end of a snippet.  
+In auto mode, control returns automatically after completion.
 
-When driving input, hit the space bar to unblock keyboard input at the end of a snippet. In auto mode, control will be returned upon completion.
+At the end of the file, ZoomIt reloads the file and restarts from the beginning.  
+Press the hotkey with **Shift** in the opposite mode to step back to the previous **[end]** marker.
 
-When you reach the end of the file, ZoomIt will reload the file and start at the beginning. Enter the hotkey with the Shift key in the opposite mode to step back to the last [end].</value>
+Press **{0}** to reset DemoType and start from the beginning.</value>
   </data>
   <data name="ZoomIt_DemoType_Shortcut.Header" xml:space="preserve">
-    <value>DemoType toggle hotkey</value>
+    <value>DemoType activation</value>
   </data>
   <data name="ZoomIt_DemoType_File.Header" xml:space="preserve">
     <value>Input file</value>
@@ -4850,11 +4861,11 @@ When you reach the end of the file, ZoomIt will reload the file and start at the
   <data name="FilePicker_AllFilesFilter" xml:space="preserve">
     <value>All Files</value>
   </data>
-  <data name="ZoomIt_DemoType_Toggle_UserDrivenMode.Header" xml:space="preserve">
+  <data name="ZoomIt_DemoType_Toggle_UserDrivenMode.Content" xml:space="preserve">
     <value>Drive input with typing</value>
   </data>
   <data name="ZoomIt_DemoType_SpeedSlider.Header" xml:space="preserve">
-    <value>DemoType typing speed</value>
+    <value>Typing speed</value>
   </data>
   <data name="ZoomIt_DemoType_SpeedSlider_Thumbnail_Explanation" xml:space="preserve">
     <value>bigger is faster</value>
@@ -4863,20 +4874,27 @@ When you reach the end of the file, ZoomIt will reload the file and start at the
     <value>Break</value>
   </data>
   <data name="ZoomIt_BreakGroup.Description" xml:space="preserve">
-    <value>Enter timer mode by using the ZoomIt tray icon's Break menu item. Increase and decrease time with the arrow keys. If you Alt-Tab away from the timer window, reactivate it by left-clicking on the ZoomIt tray icon. Exit timer mode with Escape.
+    <value>Displays a countdown overlay for timed breaks or presentations.</value>
+  </data>
+  <data name="ZoomIt_BreakFAQ.Text" xml:space="preserve">
+    <value>Enter timer mode from the ZoomIt tray icon’s Break menu.  
+Press **the arrow keys** to adjust the time. If the timer window loses focus through **Alt + Tab**, press **the left mouse button** on the ZoomIt tray icon to reactivate it.
 
-Change the break timer color using the same keys that the drawing color. The break timer font is the same as text font.</value>
+Press **Esc** to exit timer mode.
+
+Change the break timer color using the same keys as the drawing colors.  
+The break timer font matches the text font.</value>
   </data>
   <data name="ZoomIt_Break_Shortcut.Header" xml:space="preserve">
-    <value>Start break timer hotkey</value>
+    <value>Break timer activation</value>
   </data>
   <data name="ZoomIt_Break_Timeout.Header" xml:space="preserve">
     <value>Timer (minutes)</value>
   </data>
-  <data name="ZoomIt_Break_ShowExpiredTime.Header" xml:space="preserve">
+  <data name="ZoomIt_Break_ShowExpiredTime.Content" xml:space="preserve">
     <value>Show time elapsed after expiration</value>
   </data>
-  <data name="ZoomIt_Break_PlaySoundsFile.Header" xml:space="preserve">
+  <data name="ZoomIt_Break_PlaySoundsFile.Content" xml:space="preserve">
     <value>Play sound on expiration</value>
   </data>
   <data name="ZoomIt_Break_SoundFile.Header" xml:space="preserve">
@@ -4958,7 +4976,7 @@ Change the break timer color using the same keys that the drawing color. The bre
     <value>Show background bitmap</value>
   </data>
   <data name="ZoomIt_Break_ShowFadedDesktop.Content" xml:space="preserve">
-    <value>Use faded desktop as background</value>
+    <value>Faded desktop</value>
   </data>
   <data name="ZoomIt_Break_ShowImageFile.Content" xml:space="preserve">
     <value>Use image file as background</value>
@@ -4973,26 +4991,31 @@ Change the break timer color using the same keys that the drawing color. The bre
     <value>Specify background file...</value>
   </data>
   <data name="FilePicker_ZoomIt_BitmapFilesFilter" xml:space="preserve">
-    <value>Bitmap Files</value>
+    <value>Bitmap files</value>
   </data>
   <data name="FilePicker_ZoomIt_AllPicturesFilter" xml:space="preserve">
-    <value>All Picture Files</value>
+    <value>All picture files</value>
   </data>
-  <data name="ZoomIt_Break_BackgroundStretch.Header" xml:space="preserve">
+  <data name="ZoomIt_Break_BackgroundStretch.Content" xml:space="preserve">
     <value>Scale to screen</value>
   </data>
   <data name="ZoomIt_RecordGroup.Header" xml:space="preserve">
     <value>Record</value>
   </data>
   <data name="ZoomIt_RecordGroup.Description" xml:space="preserve">
-    <value>Record video of the unzoomed live screen or a static zoomed session by entering the recording hotkey and finish the recording by entering it again.
-
-To crop the portion of the screen that will be recorded, enter the hotkey with the Shift key in the opposite mode.
-
-To record a specific window, enter the hotkey with the Alt key in the opposite mode.</value>
+    <value>Record video of the screen.</value>
   </data>
   <data name="ZoomIt_Record_Shortcut.Header" xml:space="preserve">
-    <value>Record hotkey</value>
+    <value>Record activation</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_FullScreen" xml:space="preserve">
+    <value>Press **{0}** to start or stop screen or zoom recording</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_Crop" xml:space="preserve">
+    <value>Press **{0}** to record a portion of the screen</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_Window" xml:space="preserve">
+    <value>Press **{0}** to record a specific window</value>
   </data>
   <data name="ZoomIt_Record_Scaling.Header" xml:space="preserve">
     <value>Scaling</value>
@@ -5000,7 +5023,7 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="ZoomIt_Record_Format.Header" xml:space="preserve">
     <value>Format</value>
   </data>
-  <data name="ZoomIt_Record_CaptureAudio.Header" xml:space="preserve">
+  <data name="ZoomIt_Record_CaptureAudio.Content" xml:space="preserve">
     <value>Capture audio input</value>
   </data>
   <data name="ZoomIt_Record_Microphone.Header" xml:space="preserve">
@@ -5013,10 +5036,13 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
     <value>Snip</value>
   </data>
   <data name="ZoomIt_SnipGroup.Description" xml:space="preserve">
-    <value>Copy a region of the screen to the clipboard or enter the hotkey with the Shift key in the opposite mode to save it to a file.</value>
+    <value>Copy a selected area of the screen to the clipboard or to a file.</value>
   </data>
   <data name="ZoomIt_Snip_Shortcut.Header" xml:space="preserve">
-    <value>Snip hotkey</value>
+    <value>Snip activation</value>
+  </data>
+  <data name="ZoomIt_Snip_Shortcut_Save" xml:space="preserve">
+    <value>Press **{0}** to save the snip to a file instead of the clipboard.</value>
   </data>
   <data name="Oobe_ZoomIt.Description" xml:space="preserve">
     <value>ZoomIt is a screen zoom, annotation, and recording tool for technical presentations and demos. You can also use ZoomIt to snip screenshots to the clipboard or to a file.</value>
@@ -5760,6 +5786,24 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
     <value>A modern UI built with Fluent Design</value>
     <comment>Fluent Design is a product name, do not loc</comment>
   </data>
+  <data name="ZoomIt_LiveZoom_Shortcut_Draw" xml:space="preserve">
+    <value>Press **{0}** to activate live drawing and **Esc** to clear annotations or to exit.
+	
+Press **Ctrl + Up / Down** to adjust the zoom level.
+	</value>
+  </data>
+  <data name="ZoomIt_TypeFAQ.Text" xml:space="preserve">
+    <value>Press **T** to switch to typing when drawing mode is active, and **Shift** for right-aligned text.  
+Press **Esc** or **the left mouse button** to exit typing mode.  
+Press **the mouse wheel** or **Up / Down** to adjust the font size.  
+Text uses the current drawing color.</value>
+  </data>
+  <data name="ZoomIt_DrawGroup.Description" xml:space="preserve">
+    <value>Annotate the screen.</value>
+  </data>
+  <data name="ZoomIt_Break_BackgroundImage_None.Content" xml:space="preserve">
+    <value>None</value>
+  </data>
   <data name="LightSwitch_ModeFollowNightLight.Content" xml:space="preserve">
     <value>Follow Night Light</value>
   </data>

src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs

@@ -237,11 +237,32 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 {
                     _zoomItSettings.Properties.LiveZoomToggleKey.Value = value ?? ZoomItProperties.DefaultLiveZoomToggleKey;
                     OnPropertyChanged(nameof(LiveZoomToggleKey));
+                    OnPropertyChanged(nameof(LiveZoomToggleKeyDraw));
                     NotifySettingsChanged();
                 }
             }
         }
 
+        public HotkeySettings LiveZoomToggleKeyDraw
+        {
+            get
+            {
+                var baseKey = _zoomItSettings.Properties.LiveZoomToggleKey.Value;
+                if (baseKey == null)
+                {
+                    return null;
+                }
+
+                // XOR with Shift: if Shift is present, remove it; if absent, add it
+                return new HotkeySettings(
+                    baseKey.Win,
+                    baseKey.Ctrl,
+                    baseKey.Alt,
+                    !baseKey.Shift,  // XOR with Shift
+                    baseKey.Code);
+            }
+        }
+
         public HotkeySettings DrawToggleKey
         {
             get => _zoomItSettings.Properties.DrawToggleKey.Value;
@@ -265,11 +286,53 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 {
                     _zoomItSettings.Properties.RecordToggleKey.Value = value ?? ZoomItProperties.DefaultRecordToggleKey;
                     OnPropertyChanged(nameof(RecordToggleKey));
+                    OnPropertyChanged(nameof(RecordToggleKeyCrop));
+                    OnPropertyChanged(nameof(RecordToggleKeyWindow));
                     NotifySettingsChanged();
                 }
             }
         }
 
+        public HotkeySettings RecordToggleKeyCrop
+        {
+            get
+            {
+                var baseKey = _zoomItSettings.Properties.RecordToggleKey.Value;
+                if (baseKey == null)
+                {
+                    return null;
+                }
+
+                // XOR with Shift: if Shift is present, remove it; if absent, add it
+                return new HotkeySettings(
+                    baseKey.Win,
+                    baseKey.Ctrl,
+                    baseKey.Alt,
+                    !baseKey.Shift,  // XOR with Shift
+                    baseKey.Code);
+            }
+        }
+
+        public HotkeySettings RecordToggleKeyWindow
+        {
+            get
+            {
+                var baseKey = _zoomItSettings.Properties.RecordToggleKey.Value;
+                if (baseKey == null)
+                {
+                    return null;
+                }
+
+                // XOR with Alt: if Alt is present, remove it; if absent, add it
+                return new HotkeySettings(
+                    baseKey.Win,
+                    baseKey.Ctrl,
+                    !baseKey.Alt,    // XOR with Alt
+                    baseKey.Shift,
+                    baseKey.Code);
+            }
+        }
+
         public HotkeySettings SnipToggleKey
         {
             get => _zoomItSettings.Properties.SnipToggleKey.Value;
@@ -279,11 +342,31 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 {
                     _zoomItSettings.Properties.SnipToggleKey.Value = value ?? ZoomItProperties.DefaultSnipToggleKey;
                     OnPropertyChanged(nameof(SnipToggleKey));
+                    OnPropertyChanged(nameof(SnipToggleKeySave));
                     NotifySettingsChanged();
                 }
             }
         }
 
+        public HotkeySettings SnipToggleKeySave
+        {
+            get
+            {
+                var baseKey = _zoomItSettings.Properties.SnipToggleKey.Value;
+                if (baseKey == null)
+                {
+                    return null;
+                }
+
+                return new HotkeySettings(
+                    baseKey.Win,
+                    baseKey.Ctrl,
+                    baseKey.Alt,
+                    !baseKey.Shift, // Toggle Shift: if Shift is present, remove it; if absent, add it
+                    baseKey.Code);
+            }
+        }
+
         public HotkeySettings BreakTimerKey
         {
             get => _zoomItSettings.Properties.BreakTimerKey.Value;
@@ -307,11 +390,32 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 {
                     _zoomItSettings.Properties.DemoTypeToggleKey.Value = value ?? ZoomItProperties.DefaultDemoTypeToggleKey;
                     OnPropertyChanged(nameof(DemoTypeToggleKey));
+                    OnPropertyChanged(nameof(DemoTypeToggleKeyReset));
                     NotifySettingsChanged();
                 }
             }
         }
 
+        public HotkeySettings DemoTypeToggleKeyReset
+        {
+            get
+            {
+                var baseKey = _zoomItSettings.Properties.DemoTypeToggleKey.Value;
+                if (baseKey == null)
+                {
+                    return null;
+                }
+
+                // XOR with Shift: if Shift is present, remove it; if absent, add it
+                return new HotkeySettings(
+                    baseKey.Win,
+                    baseKey.Ctrl,
+                    baseKey.Alt,
+                    !baseKey.Shift,  // XOR with Shift
+                    baseKey.Code);
+            }
+        }
+
         private LOGFONT _typeFont;
 
         public LOGFONT TypeFont
@@ -588,26 +692,69 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 {
                     _zoomItSettings.Properties.BreakShowBackgroundFile.Value = value;
                     OnPropertyChanged(nameof(BreakShowBackgroundFile));
+                    OnPropertyChanged(nameof(BreakBackgroundSelectionIndex));
                     NotifySettingsChanged();
                 }
             }
         }
 
-        public int BreakShowDesktopOrImageFileIndex
+        public bool BreakShowDesktop
         {
-            get => _zoomItSettings.Properties.BreakShowDesktop.Value ? 0 : 1;
+            get => _zoomItSettings.Properties.BreakShowDesktop.Value;
             set
             {
-                bool newValue = value == 0;
-                if (_zoomItSettings.Properties.BreakShowDesktop.Value != newValue)
+                if (_zoomItSettings.Properties.BreakShowDesktop.Value != value)
                 {
-                    _zoomItSettings.Properties.BreakShowDesktop.Value = newValue;
-                    OnPropertyChanged(nameof(BreakShowDesktopOrImageFileIndex));
+                    _zoomItSettings.Properties.BreakShowDesktop.Value = value;
+                    OnPropertyChanged(nameof(BreakShowDesktop));
+                    OnPropertyChanged(nameof(BreakBackgroundSelectionIndex));
                     NotifySettingsChanged();
                 }
             }
         }
 
+        public int BreakBackgroundSelectionIndex
+        {
+            get
+            {
+                if (!BreakShowBackgroundFile)
+                {
+                    return 0;
+                }
+
+                return BreakShowDesktop ? 1 : 2;
+            }
+
+            set
+            {
+                int clampedValue = Math.Clamp(value, 0, 2);
+                switch (clampedValue)
+                {
+                    case 0:
+                        BreakShowBackgroundFile = false;
+                        break;
+                    case 1:
+                        if (!BreakShowBackgroundFile)
+                        {
+                            BreakShowBackgroundFile = true;
+                        }
+
+                        BreakShowDesktop = true;
+                        break;
+                    case 2:
+                        if (!BreakShowBackgroundFile)
+                        {
+                            BreakShowBackgroundFile = true;
+                        }
+
+                        BreakShowDesktop = false;
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+
         public string BreakBackgroundFile
         {
             get => _zoomItSettings.Properties.BreakBackgroundFile.Value;