From 5938231ff2891d3ab90718a16f66aebf320ca305 Mon Sep 17 00:00:00 2001
From: vanzue <vanzue@outlook.com>
Date: Wed, 29 Oct 2025 14:17:31 +0800
Subject: [PATCH 01/11] zoomit hotkey

---
 .../SettingsXAML/Views/ZoomItPage.xaml        | 33 +++++++++++++--
 .../Settings.UI/Strings/en-us/Resources.resw  | 27 +++++++++---
 .../Settings.UI/ViewModels/ZoomItViewModel.cs | 42 +++++++++++++++++++
 3 files changed, 94 insertions(+), 8 deletions(-)

diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
index 9b938d14a2b6..b74f48733f86 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
@@ -221,12 +221,39 @@
                     </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
                 <controls:SettingsGroup x:Uid="ZoomIt_RecordGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard
+                    <tkcontrols:SettingsExpander
                         Name="ZoomItRecordShortcut"
                         x:Uid="ZoomIt_Record_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
+                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}"
+                        IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItRecordShortcutFullScreen"
+                                x:Uid="ZoomIt_Record_Shortcut_FullScreen">
+                                <controls:ShortcutControl
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKey, Mode=OneWay}"
+                                    IsEnabled="False" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItRecordShortcutCrop"
+                                x:Uid="ZoomIt_Record_Shortcut_Crop">
+                                <controls:ShortcutControl
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKeyCrop, Mode=OneWay}"
+                                    IsEnabled="False" />
+                            </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItRecordShortcutWindow"
+                                x:Uid="ZoomIt_Record_Shortcut_Window">
+                                <controls:ShortcutControl
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKeyWindow, Mode=OneWay}"
+                                    IsEnabled="False" />
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                     <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>
diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index 8384be49a16e..98a55029863d 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -4881,15 +4881,32 @@ Change the break timer color using the same keys that the drawing color. The bre
     <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 unzoomed live screen or a static zoomed session by entering the recording hotkey and finish the recording by entering it again.</value>
   </data>
   <data name="ZoomIt_Record_Shortcut.Header" xml:space="preserve">
     <value>Record hotkey</value>
   </data>
+  <data name="ZoomIt_Record_Shortcut.Description" xml:space="preserve">
+    <value>Configure the base hotkey for recording. Use modifier keys (Shift or Alt) to access different recording modes.</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_FullScreen.Header" xml:space="preserve">
+    <value>Full screen recording</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_FullScreen.Description" xml:space="preserve">
+    <value>Press the recording hotkey to start/stop recording the full screen or current zoom session.</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_Crop.Header" xml:space="preserve">
+    <value>Portion recording (crop)</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_Crop.Description" xml:space="preserve">
+    <value>Press this hotkey combination to select and record a specific portion of the screen. Note: XOR logic applies - if base hotkey includes Shift, it will be removed; if not, it will be added.</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_Window.Header" xml:space="preserve">
+    <value>Window recording</value>
+  </data>
+  <data name="ZoomIt_Record_Shortcut_Window.Description" xml:space="preserve">
+    <value>Press this hotkey combination to record a specific window. Note: XOR logic applies - if base hotkey includes Alt, it will be removed; if not, it will be added.</value>
+  </data>
   <data name="ZoomIt_Record_Scaling.Header" xml:space="preserve">
     <value>Scaling</value>
   </data>
diff --git a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
index 9e99c0e22fd4..c7a5c449edae 100644
--- a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
@@ -262,11 +262,53 @@ public HotkeySettings RecordToggleKey
                 {
                     _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;

From 380e4c62b79fb10f106112e7055e654a81fed699 Mon Sep 17 00:00:00 2001
From: vanzue <vanzue@outlook.com>
Date: Wed, 29 Oct 2025 19:37:15 +0800
Subject: [PATCH 02/11] other functionality has hotkey binding magic too

---
 .../SettingsXAML/Views/ZoomItPage.xaml        | 51 ++++++++++++---
 .../Settings.UI/Strings/en-us/Resources.resw  | 18 ++++++
 .../Settings.UI/ViewModels/ZoomItViewModel.cs | 63 +++++++++++++++++++
 3 files changed, 123 insertions(+), 9 deletions(-)

diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
index b74f48733f86..251c3a1990e5 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
@@ -69,12 +69,23 @@
                     </tkcontrols:SettingsCard>
                 </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=&#xEDA7;}"
+                        IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.LiveZoomToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItLiveZoomShortcutDraw"
+                                x:Uid="ZoomIt_LiveZoom_Shortcut_Draw">
+                                <controls:ShortcutControl
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    HotkeySettings="{x:Bind Path=ViewModel.LiveZoomToggleKeyDraw, Mode=OneWay}"
+                                    IsEnabled="False" />
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
                 <controls:SettingsGroup x:Uid="ZoomIt_DrawGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                     <tkcontrols:SettingsCard
@@ -105,12 +116,23 @@
                         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
+                    <tkcontrols:SettingsExpander
                         Name="ZoomItDemoTypeShortcut"
                         x:Uid="ZoomIt_DemoType_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
+                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}"
+                        IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItDemoTypeShortcutReset"
+                                x:Uid="ZoomIt_DemoType_Shortcut_Reset">
+                                <controls:ShortcutControl
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKeyReset, Mode=OneWay}"
+                                    IsEnabled="False" />
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                     <tkcontrols:SettingsCard Name="ZoomItDemoTypeToggleUserDrivenMode" x:Uid="ZoomIt_DemoType_Toggle_UserDrivenMode">
                         <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.DemoTypeUserDrivenMode, Mode=TwoWay}" />
                     </tkcontrols:SettingsCard>
@@ -281,12 +303,23 @@
                     </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=&#xEDA7;}"
+                        IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.SnipToggleKey, Mode=TwoWay}" />
-                    </tkcontrols:SettingsCard>
+                        <tkcontrols:SettingsExpander.Items>
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItSnipShortcutSave"
+                                x:Uid="ZoomIt_Snip_Shortcut_Save">
+                                <controls:ShortcutControl
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    HotkeySettings="{x:Bind Path=ViewModel.SnipToggleKeySave, Mode=OneWay}"
+                                    IsEnabled="False" />
+                            </tkcontrols:SettingsCard>
+                        </tkcontrols:SettingsExpander.Items>
+                    </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index 98a55029863d..cf4a88954691 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -4683,6 +4683,12 @@ To enter and exit LiveZoom, enter the hotkey specified below.</value>
   <data name="ZoomIt_LiveZoom_Shortcut.Header" xml:space="preserve">
     <value>Live Zoom hotkey</value>
   </data>
+  <data name="ZoomIt_LiveZoom_Shortcut_Draw.Header" xml:space="preserve">
+    <value>Live Zoom drawing</value>
+  </data>
+  <data name="ZoomIt_LiveZoom_Shortcut_Draw.Description" xml:space="preserve">
+    <value>Press this hotkey combination to enter Live Zoom with drawing mode. Note: XOR logic applies - if base hotkey includes Shift, it will be removed; if not, it will be added.</value>
+  </data>
   <data name="ZoomIt_DrawGroup.Header" xml:space="preserve">
     <value>Draw</value>
   </data>
@@ -4734,6 +4740,12 @@ When you reach the end of the file, ZoomIt will reload the file and start at the
   <data name="ZoomIt_DemoType_Shortcut.Header" xml:space="preserve">
     <value>DemoType toggle hotkey</value>
   </data>
+  <data name="ZoomIt_DemoType_Shortcut_Reset.Header" xml:space="preserve">
+    <value>DemoType reset</value>
+  </data>
+  <data name="ZoomIt_DemoType_Shortcut_Reset.Description" xml:space="preserve">
+    <value>Press this hotkey combination to reset DemoType and start from the beginning. Note: XOR logic applies - if base hotkey includes Shift, it will be removed; if not, it will be added.</value>
+  </data>
   <data name="ZoomIt_DemoType_File.Header" xml:space="preserve">
     <value>Input file</value>
   </data>
@@ -4928,6 +4940,12 @@ Change the break timer color using the same keys that the drawing color. The bre
   <data name="ZoomIt_Snip_Shortcut.Header" xml:space="preserve">
     <value>Snip hotkey</value>
   </data>
+  <data name="ZoomIt_Snip_Shortcut_Save.Header" xml:space="preserve">
+    <value>Snip to file</value>
+  </data>
+  <data name="ZoomIt_Snip_Shortcut_Save.Description" xml:space="preserve">
+    <value>Press this hotkey combination to save the snip directly to a file instead of the clipboard. Note: XOR logic applies - if base hotkey includes Shift, it will be removed; if not, it will be added.</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>
     <comment>{Locked="ZoomIt"}</comment>
diff --git a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
index c7a5c449edae..de6c941ed2bf 100644
--- a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
@@ -234,11 +234,32 @@ public HotkeySettings LiveZoomToggleKey
                 {
                     _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;
@@ -318,11 +339,32 @@ public HotkeySettings SnipToggleKey
                 {
                     _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;
+                }
+
+                // 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 BreakTimerKey
         {
             get => _zoomItSettings.Properties.BreakTimerKey.Value;
@@ -346,11 +388,32 @@ public HotkeySettings DemoTypeToggleKey
                 {
                     _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

From 1006e73455780e5d178d081c5944c2c44c923185 Mon Sep 17 00:00:00 2001
From: vanzue <vanzue@outlook.com>
Date: Thu, 30 Oct 2025 14:44:25 +0800
Subject: [PATCH 03/11] format xaml

---
 .../SettingsXAML/Views/ZoomItPage.xaml        | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
index 251c3a1990e5..89eba17494e5 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
@@ -76,9 +76,7 @@
                         IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.LiveZoomToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard
-                                Name="ZoomItLiveZoomShortcutDraw"
-                                x:Uid="ZoomIt_LiveZoom_Shortcut_Draw">
+                            <tkcontrols:SettingsCard Name="ZoomItLiveZoomShortcutDraw" x:Uid="ZoomIt_LiveZoom_Shortcut_Draw">
                                 <controls:ShortcutControl
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
                                     HotkeySettings="{x:Bind Path=ViewModel.LiveZoomToggleKeyDraw, Mode=OneWay}"
@@ -123,9 +121,7 @@
                         IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard
-                                Name="ZoomItDemoTypeShortcutReset"
-                                x:Uid="ZoomIt_DemoType_Shortcut_Reset">
+                            <tkcontrols:SettingsCard Name="ZoomItDemoTypeShortcutReset" x:Uid="ZoomIt_DemoType_Shortcut_Reset">
                                 <controls:ShortcutControl
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
                                     HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKeyReset, Mode=OneWay}"
@@ -250,25 +246,19 @@
                         IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard
-                                Name="ZoomItRecordShortcutFullScreen"
-                                x:Uid="ZoomIt_Record_Shortcut_FullScreen">
+                            <tkcontrols:SettingsCard Name="ZoomItRecordShortcutFullScreen" x:Uid="ZoomIt_Record_Shortcut_FullScreen">
                                 <controls:ShortcutControl
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
                                     HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKey, Mode=OneWay}"
                                     IsEnabled="False" />
                             </tkcontrols:SettingsCard>
-                            <tkcontrols:SettingsCard
-                                Name="ZoomItRecordShortcutCrop"
-                                x:Uid="ZoomIt_Record_Shortcut_Crop">
+                            <tkcontrols:SettingsCard Name="ZoomItRecordShortcutCrop" x:Uid="ZoomIt_Record_Shortcut_Crop">
                                 <controls:ShortcutControl
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
                                     HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKeyCrop, Mode=OneWay}"
                                     IsEnabled="False" />
                             </tkcontrols:SettingsCard>
-                            <tkcontrols:SettingsCard
-                                Name="ZoomItRecordShortcutWindow"
-                                x:Uid="ZoomIt_Record_Shortcut_Window">
+                            <tkcontrols:SettingsCard Name="ZoomItRecordShortcutWindow" x:Uid="ZoomIt_Record_Shortcut_Window">
                                 <controls:ShortcutControl
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
                                     HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKeyWindow, Mode=OneWay}"
@@ -310,9 +300,7 @@
                         IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.SnipToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard
-                                Name="ZoomItSnipShortcutSave"
-                                x:Uid="ZoomIt_Snip_Shortcut_Save">
+                            <tkcontrols:SettingsCard Name="ZoomItSnipShortcutSave" x:Uid="ZoomIt_Snip_Shortcut_Save">
                                 <controls:ShortcutControl
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
                                     HotkeySettings="{x:Bind Path=ViewModel.SnipToggleKeySave, Mode=OneWay}"

From c0d9f531e33c51bc8e56e885554d0a8246d3b4df Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Tue, 2 Dec 2025 17:15:13 +0100
Subject: [PATCH 04/11] ZoomIt UX refactor

---
 .../Settings.UI/PowerToys.Settings.csproj     |   3 +
 .../Settings.UI/SettingsXAML/App.xaml         |   6 +-
 .../ShortcutWithTextLabelControl.xaml         | 119 ++---
 .../ShortcutWithTextLabelControl.xaml.cs      |  49 +-
 .../SettingsXAML/Views/ZoomItPage.xaml        | 440 +++++++++++-------
 .../Settings.UI/Strings/en-us/Resources.resw  | 224 ++++-----
 6 files changed, 478 insertions(+), 363 deletions(-)

diff --git a/src/settings-ui/Settings.UI/PowerToys.Settings.csproj b/src/settings-ui/Settings.UI/PowerToys.Settings.csproj
index a6751adb989d..dade6a194cbf 100644
--- a/src/settings-ui/Settings.UI/PowerToys.Settings.csproj
+++ b/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>
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/App.xaml b/src/settings-ui/Settings.UI/SettingsXAML/App.xaml
index f63ccdf3a64a..54b1e1a02f39 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/App.xaml
+++ b/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>
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml
index bc46c9d17ef7..719091a78782 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml
+++ b/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>
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml.cs b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml.cs
index c3829e3984e4..7e4d31c28b9c 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml.cs
+++ b/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 @@ 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
                 {
@@ -54,11 +75,11 @@ private static void OnIsLabelPlacementChanged(DependencyObject d, DependencyProp
                 }
             }
         }
-    }
 
-    public enum LabelPlacement
-    {
-        Before,
-        After,
+        public enum Placement
+        {
+            Before,
+            After,
+        }
     }
 }
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
index 93adc2daf91f..2ff188e76dc3 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
@@ -15,6 +15,25 @@
     <local:NavigablePage.Resources>
         <converters:ZoomItInitialZoomConverter x:Key="ZoomItInitialZoomConverter" />
         <converters:ZoomItTypeSpeedSliderConverter x:Key="ZoomItTypeSpeedSliderConverter" />
+        <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}" />
+        <Style
+            x:Key="ZoomItKeyVisualStyle"
+            BasedOn="{StaticResource DefaultKeyVisualStyle}"
+            TargetType="controls:KeyVisual">
+            <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
+            <Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
+            <Setter Property="BorderBrush" Value="{ThemeResource ControlElevationBorderBrush}" />
+            <Setter Property="Padding" Value="2,1,2,1" />
+            <Setter Property="FontSize" Value="12" />
+        </Style>
     </local:NavigablePage.Resources>
 
     <controls:SettingsPageControl
@@ -45,57 +64,84 @@
                     </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: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:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard Name="ZoomItLiveZoomShortcutDraw" x:Uid="ZoomIt_LiveZoom_Shortcut_Draw">
-                                <controls:ShortcutControl
-                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
-                                    HotkeySettings="{x:Bind Path=ViewModel.LiveZoomToggleKeyDraw, Mode=OneWay}"
-                                    IsEnabled="False" />
+                            <tkcontrols:SettingsCard>
+                                <tkcontrols:SettingsCard.Description>
+                                    <StackPanel Orientation="Vertical" Spacing="4">
+                                        <controls:ShortcutWithTextLabelControl
+                                            x:Uid="ZoomIt_LiveZoom_Shortcut_Draw"
+                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
+                                            Keys="{x:Bind Path=ViewModel.LiveZoomToggleKeyDraw.GetKeysList(), Mode=OneWay}"
+                                            LabelPlacement="After"
+                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
+                                        <tkcontrols:MarkdownTextBlock x:Uid="ZoomIt_LiveZoomFAQ" Config="{StaticResource ZoomItMarkdownConfig}" />
+                                    </StackPanel>
+                                </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}"
@@ -103,214 +149,248 @@
                                 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:SettingsExpander
                         Name="ZoomItDemoTypeShortcut"
                         x:Uid="ZoomIt_DemoType_Shortcut"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}"
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE8AC;}"
                         IsExpanded="True">
                         <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard Name="ZoomItDemoTypeShortcutReset" x:Uid="ZoomIt_DemoType_Shortcut_Reset">
-                                <controls:ShortcutControl
+                            <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}"
-                                    HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKeyReset, Mode=OneWay}"
-                                    IsEnabled="False" />
+                                    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>
+                                    <StackPanel Orientation="Vertical" Spacing="4">
+                                        <tkcontrols:MarkdownTextBlock x:Uid="ZoomIt_DemoTypeFAQ" Config="{StaticResource ZoomItMarkdownConfig}" />
+                                        <controls:ShortcutWithTextLabelControl
+                                            x:Uid="ZoomIt_DemoType_Shortcut_Reset"
+                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
+                                            Keys="{x:Bind Path=ViewModel.DemoTypeToggleKeyReset.GetKeysList(), Mode=OneWay}"
+                                            LabelPlacement="After"
+                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
+                                    </StackPanel>
+                                </tkcontrols:SettingsCard.Description>
                             </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
                     </tkcontrols:SettingsExpander>
-                    <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
+                    <tkcontrols:SettingsExpander
                         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"
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE916;}"
                         IsExpanded="True">
-                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.BreakPlaySoundFile, Mode=TwoWay}" />
+                        <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>
+                                    <!--  TO DO: Set the SelectedIndex  -->
+                                    <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>
+
+                    <!--  - DELETE  -->
+                    <tkcontrols:SettingsExpander 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">
+                                <RadioButtons SelectedIndex="{x:Bind ViewModel.BreakShowDesktopOrImageFileIndex, Mode=TwoWay}">
+                                    <RadioButton x:Uid="ZoomIt_Break_ShowFadedDesktop" />
+                                    <RadioButton x:Uid="ZoomIt_Break_ShowImageFile" />
+                                </RadioButtons>
                             </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
                     </tkcontrols:SettingsExpander>
+                    <!--  - DELETE END  -->
+
                 </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=&#xEDA7;}"
+                        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="ZoomItRecordShortcutFullScreen" x:Uid="ZoomIt_Record_Shortcut_FullScreen">
-                                <controls:ShortcutControl
-                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
-                                    HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKey, Mode=OneWay}"
-                                    IsEnabled="False" />
+                            <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="ZoomItRecordShortcutCrop" x:Uid="ZoomIt_Record_Shortcut_Crop">
-                                <controls:ShortcutControl
-                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
-                                    HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKeyCrop, Mode=OneWay}"
-                                    IsEnabled="False" />
+                            <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="ZoomItRecordShortcutWindow" x:Uid="ZoomIt_Record_Shortcut_Window">
-                                <controls:ShortcutControl
+                            <tkcontrols:SettingsCard
+                                Name="ZoomItRecordMicrophone"
+                                x:Uid="ZoomIt_Record_Microphone"
+                                Visibility="{x:Bind ViewModel.RecordCaptureAudio, Mode=OneWay}">
+                                <ComboBox
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
-                                    HotkeySettings="{x:Bind Path=ViewModel.RecordToggleKeyWindow, Mode=OneWay}"
-                                    IsEnabled="False" />
+                                    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">
+                                        <controls:ShortcutWithTextLabelControl
+                                            x:Uid="ZoomIt_Record_Shortcut_FullScreen"
+                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
+                                            Keys="{x:Bind Path=ViewModel.RecordToggleKey.GetKeysList(), Mode=OneWay}"
+                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
+                                        <controls:ShortcutWithTextLabelControl
+                                            x:Uid="ZoomIt_Record_Shortcut_Crop"
+                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
+                                            Keys="{x:Bind Path=ViewModel.RecordToggleKeyCrop.GetKeysList(), Mode=OneWay}"
+                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
+                                        <controls:ShortcutWithTextLabelControl
+                                            x:Uid="ZoomIt_Record_Shortcut_Window"
+                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
+                                            Keys="{x:Bind Path=ViewModel.RecordToggleKeyWindow.GetKeysList(), Mode=OneWay}"
+                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
+                                    </StackPanel>
+                                </tkcontrols:SettingsCard.Description>
                             </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
                     </tkcontrols:SettingsExpander>
-                    <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: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:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard Name="ZoomItSnipShortcutSave" x:Uid="ZoomIt_Snip_Shortcut_Save">
-                                <controls:ShortcutControl
-                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
-                                    HotkeySettings="{x:Bind Path=ViewModel.SnipToggleKeySave, Mode=OneWay}"
-                                    IsEnabled="False" />
+                            <tkcontrols:SettingsCard Name="ZoomItSnipShortcutSave">
+                                <tkcontrols:SettingsCard.Description>
+                                    <controls:ShortcutWithTextLabelControl
+                                        x:Uid="ZoomIt_Snip_Shortcut_Save"
+                                        KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
+                                        Keys="{x:Bind Path=ViewModel.SnipToggleKeySave.GetKeysList(), Mode=OneWay}"
+                                        MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
+                                </tkcontrols:SettingsCard.Description>
                             </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
                     </tkcontrols:SettingsExpander>
@@ -321,7 +401,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>
diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index acdbf3919b05..edfd7ab1465f 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <root>
-  <!--
-    Microsoft ResX Schema
-
+  <!-- 
+    Microsoft ResX Schema 
+    
     Version 2.0
-
-    The primary goals of this format is to allow a simple XML format
-    that is mostly human readable. The generation and parsing of the
-    various data types are done through the TypeConverter classes
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
     associated with the data types.
-
+    
     Example:
-
+    
     ... ado.net/XML headers & schema ...
     <resheader name="resmimetype">text/microsoft-resx</resheader>
     <resheader name="version">2.0</resheader>
@@ -26,36 +26,36 @@
         <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
         <comment>This is a comment</comment>
     </data>
-
-    There are any number of "resheader" rows that contain simple
+                
+    There are any number of "resheader" rows that contain simple 
     name/value pairs.
-
-    Each data row contains a name, and value. The row also contains a
-    type or mimetype. Type corresponds to a .NET class that support
-    text/value conversion through the TypeConverter architecture.
-    Classes that don't support this are serialized and stored with the
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
     mimetype set.
-
-    The mimetype is used for serialized objects, and tells the
-    ResXResourceReader how to depersist the object. This is currently not
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
     extensible. For a given mimetype the value must be set accordingly:
-
-    Note - application/x-microsoft.net.object.binary.base64 is the format
-    that the ResXResourceWriter will generate, however the reader can
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
     read any of the formats listed below.
-
+    
     mimetype: application/x-microsoft.net.object.binary.base64
-    value   : The object must be serialized with
+    value   : The object must be serialized with 
             : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
             : and then encoded with base64 encoding.
-
+    
     mimetype: application/x-microsoft.net.object.soap.base64
-    value   : The object must be serialized with
+    value   : The object must be serialized with 
             : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
             : and then encoded with base64 encoding.
 
     mimetype: application/x-microsoft.net.object.bytearray.base64
-    value   : The object must be serialized into a byte array
+    value   : The object must be serialized into a byte array 
             : using a System.ComponentModel.TypeConverter
             : and then encoded with base64 encoding.
     -->
@@ -4774,58 +4774,56 @@ 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.
+    <value>Zoom in or out to enlarge content and make details clearer.</value>
+  </data>
+  <data name="ZoomIt_ZoomFAQ.Text" xml:space="preserve">
+    <value>Zoom in or out with the `mouse wheel` or the `Up` / `Down` arrow keys.
+
+Exit zoom mode with `Esc` or the `right mouse button`.
+
+Capture the zoomed view with `Ctrl` `C`, or save it with `Ctrl` `S`.
 
-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>
+To crop before copying or saving, use `Ctrl` `Shift` instead.</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>
-  </data>
-  <data name="ZoomIt_LiveZoom_Shortcut.Header" xml:space="preserve">
-    <value>Live Zoom hotkey</value>
+    <value>Live Zoom keeps windows updating while zoomed.</value>
   </data>
-  <data name="ZoomIt_LiveZoom_Shortcut_Draw.Header" xml:space="preserve">
-    <value>Live Zoom drawing</value>
+  <data name="ZoomIt_LiveZoomFAQ.Text" xml:space="preserve">
+    <value>`Ctrl` `Up` and `Ctrl` `Down` to adjust the zoom level. </value>
   </data>
-  <data name="ZoomIt_LiveZoom_Shortcut_Draw.Description" xml:space="preserve">
-    <value>Press this hotkey combination to enter Live Zoom with drawing mode. Note: XOR logic applies - if base hotkey includes Shift, it will be removed; if not, it will be added.</value>
+  <data name="ZoomIt_LiveZoom_Shortcut.Header" xml:space="preserve">
+    <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>Once zoomed in, toggle drawing mode with the `left mouse button`. Undo with `Ctrl``Z` or clear all drawings with `E`. Press `Space` to center the cursor. Exit drawing mode with the `right mouse button`.
 
-Pen Control - Change the pen width by pressing left Ctrl and using the mouse wheel or the up and down arrow keys.
+**Pen control** - Adjust pen width by holding `Ctrl` and using the `mouse wheel` or the `Up`/`Down` arrow keys.
 
-Colors - Change the pen color by pressing R (red), G (green), B (blue), O (orange), Y (yellow) or P (pink).
+**Colors** - Change color with `R` (red), `G` (green), `B` (blue), `O` (orange), `Y` (yellow), or `P` (pink).
 
-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** - Hold `Shift` and press a color key for a translucent highlighter. Press `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** - Draw a line with `Shift`, a rectangle with `Ctrl`, an ellipse with `Tab`, or an arrow with `Shift``Ctrl`.
 
-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` (white) or `K` (black) for a blank sketch pad. Copy the zoomed screen with `Ctrl``C` or save it with `Ctrl+S`. Use `Ctrl+Shift` to crop when copying or saving.</value>
   </data>
   <data name="ZoomIt_Draw_Shortcut.Header" xml:space="preserve">
     <value>Draw without zoom hotkey</value>
@@ -4834,9 +4832,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>
@@ -4849,24 +4845,24 @@ 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.Text" xml:space="preserve">
+    <value>Text can also be pulled from the clipboard when it begins with the `[start]` keyword.
 
-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].
+Separate snippets with `[end]` and insert pauses with `[pause:n]`, where n represents seconds. Text can be sent via the clipboard using [paste] and `[/paste]`. Keystrokes can be issued with `[enter]`, `[up]`, `[down]`, `[left]`, and `[right]`.
 
-You can have ZoomIt send text automatically, or select the option to drive input with typing. ZoomIt will block keyboard input while sending output.
+ZoomIt can send text automatically, or input can be driven manually. Keyboard input is blocked while output is being sent.
 
-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.
+In manual mode, pressing `Space` unblocks keyboard input at the end of a snippet. In auto mode, control returns after completion.
 
-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>
+At the end of the file, ZoomIt reloads the file and restarts from the beginning. Entering the hotkey with `Shift` in the opposite mode steps back to the previous `[end]` marker.</value>
   </data>
   <data name="ZoomIt_DemoType_Shortcut.Header" xml:space="preserve">
-    <value>DemoType toggle hotkey</value>
-  </data>
-  <data name="ZoomIt_DemoType_Shortcut_Reset.Header" xml:space="preserve">
-    <value>DemoType reset</value>
+    <value>DemoType activation</value>
   </data>
-  <data name="ZoomIt_DemoType_Shortcut_Reset.Description" xml:space="preserve">
-    <value>Press this hotkey combination to reset DemoType and start from the beginning. Note: XOR logic applies - if base hotkey includes Shift, it will be removed; if not, it will be added.</value>
+  <data name="ZoomIt_DemoType_Shortcut_Reset.Text" xml:space="preserve">
+    <value>to reset DemoType and start from the beginning.</value>
   </data>
   <data name="ZoomIt_DemoType_File.Header" xml:space="preserve">
     <value>Input file</value>
@@ -4880,11 +4876,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>
@@ -4893,20 +4889,25 @@ 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. Adjust the time with the arrow keys. If the timer window loses focus through `Alt+Tab`, reactivate it by left-clicking the ZoomIt tray icon.
+
+Exit timer mode with `Esc`.
 
-Change the break timer color using the same keys that the drawing color. The break timer font is the same as text font.</value>
+Change the break timer color using the same keys used for 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">
@@ -4988,7 +4989,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>
@@ -5003,43 +5004,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.</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.Description" xml:space="preserve">
-    <value>Configure the base hotkey for recording. Use modifier keys (Shift or Alt) to access different recording modes.</value>
+  <data name="ZoomIt_Record_Shortcut_FullScreen.Text" xml:space="preserve">
+    <value>to start or stop recording the full screen or current zoom session</value>
   </data>
-  <data name="ZoomIt_Record_Shortcut_FullScreen.Header" xml:space="preserve">
-    <value>Full screen recording</value>
+  <data name="ZoomIt_Record_Shortcut_Crop.Text" xml:space="preserve">
+    <value>to record a portion of the screen</value>
   </data>
-  <data name="ZoomIt_Record_Shortcut_FullScreen.Description" xml:space="preserve">
-    <value>Press the recording hotkey to start/stop recording the full screen or current zoom session.</value>
-  </data>
-  <data name="ZoomIt_Record_Shortcut_Crop.Header" xml:space="preserve">
-    <value>Portion recording (crop)</value>
-  </data>
-  <data name="ZoomIt_Record_Shortcut_Crop.Description" xml:space="preserve">
-    <value>Press this hotkey combination to select and record a specific portion of the screen. Note: XOR logic applies - if base hotkey includes Shift, it will be removed; if not, it will be added.</value>
-  </data>
-  <data name="ZoomIt_Record_Shortcut_Window.Header" xml:space="preserve">
-    <value>Window recording</value>
-  </data>
-  <data name="ZoomIt_Record_Shortcut_Window.Description" xml:space="preserve">
-    <value>Press this hotkey combination to record a specific window. Note: XOR logic applies - if base hotkey includes Alt, it will be removed; if not, it will be added.</value>
+  <data name="ZoomIt_Record_Shortcut_Window.Text" xml:space="preserve">
+    <value>to record a specific window</value>
   </data>
   <data name="ZoomIt_Record_Scaling.Header" xml:space="preserve">
     <value>Scaling</value>
@@ -5047,7 +5036,7 @@ Change the break timer color using the same keys that the drawing color. The bre
   <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">
@@ -5060,16 +5049,13 @@ Change the break timer color using the same keys that the drawing color. The bre
     <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>
-  </data>
-  <data name="ZoomIt_Snip_Shortcut_Save.Header" xml:space="preserve">
-    <value>Snip to file</value>
+    <value>Snip activation</value>
   </data>
-  <data name="ZoomIt_Snip_Shortcut_Save.Description" xml:space="preserve">
-    <value>Press this hotkey combination to save the snip directly to a file instead of the clipboard. Note: XOR logic applies - if base hotkey includes Shift, it will be removed; if not, it will be added.</value>
+  <data name="ZoomIt_Snip_Shortcut_Save.Text" xml:space="preserve">
+    <value>to save the snip directly 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>
@@ -5816,4 +5802,22 @@ Change the break timer color using the same keys that the drawing color. The bre
     <value>A modern UI built with Fluent Design</value>
     <comment>Fluent Design is a product name, do not loc</comment>
   </data>
-</root>
+  <data name="ZoomIt_LiveZoom_Shortcut_Draw.Text" xml:space="preserve">
+    <value>to activate live drawing. Press `Esc` to clear annotations or to exit draw mode.</value>
+  </data>
+  <data name="ZoomIt_TypeFAQ.Text" xml:space="preserve">
+    <value>Once drawing mode is active, switch to typing with `T` or use `Shift` for right-aligned text.
+
+Leave typing mode with `Esc` or a `left-click`.
+
+Adjust font size with the `mouse wheel` or the `Up` and `Down` arrow keys.
+
+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>
+</root>
\ No newline at end of file

From a4da3f1da0467feaf57c9750fe5506ce4d8937ca Mon Sep 17 00:00:00 2001
From: vanzue <vanzue@outlook.com>
Date: Wed, 3 Dec 2025 19:42:28 +0800
Subject: [PATCH 05/11] use combo box instead of radio button group for break
 mode background

---
 .../SettingsXAML/Views/ZoomItPage.xaml        | 17 +-----
 .../Settings.UI/ViewModels/ZoomItViewModel.cs | 55 +++++++++++++++++--
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
index 2ff188e76dc3..673bdf92cd19 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
@@ -264,8 +264,7 @@
 
 
                             <tkcontrols:SettingsCard Name="ZoomItBreakShowBackgroundBitmap" x:Uid="ZoomIt_Break_ShowBackgroundBitmap">
-                                <ComboBox>
-                                    <!--  TO DO: Set the SelectedIndex  -->
+                                <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" />
@@ -292,20 +291,6 @@
                         </tkcontrols:SettingsExpander.Items>
                     </tkcontrols:SettingsExpander>
 
-                    <!--  - DELETE  -->
-                    <tkcontrols:SettingsExpander 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">
-                                <RadioButtons SelectedIndex="{x:Bind ViewModel.BreakShowDesktopOrImageFileIndex, Mode=TwoWay}">
-                                    <RadioButton x:Uid="ZoomIt_Break_ShowFadedDesktop" />
-                                    <RadioButton x:Uid="ZoomIt_Break_ShowImageFile" />
-                                </RadioButtons>
-                            </tkcontrols:SettingsCard>
-                        </tkcontrols:SettingsExpander.Items>
-                    </tkcontrols:SettingsExpander>
-                    <!--  - DELETE END  -->
-
                 </controls:SettingsGroup>
 
 
diff --git a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
index 3fb53b403aea..0fd3a27f6742 100644
--- a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
@@ -693,26 +693,69 @@ public bool BreakShowBackgroundFile
                 {
                     _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;

From 75d0ad685f23e8b0b402022b91b0390bd696d24b Mon Sep 17 00:00:00 2001
From: Kai Tao <vanzue@users.noreply.github.com>
Date: Thu, 18 Dec 2025 05:42:00 +0000
Subject: [PATCH 06/11] Update metadata

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 | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/.github/actions/spell-check/expect.txt b/.github/actions/spell-check/expect.txt
index f649476f603f..ca2d7f159b01 100644
--- a/.github/actions/spell-check/expect.txt
+++ b/.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

From 2dfa6b919fa45bf4e6d1d419e702271037d4d02d Mon Sep 17 00:00:00 2001
From: vanzue <vanzue@outlook.com>
Date: Thu, 18 Dec 2025 14:41:06 +0800
Subject: [PATCH 07/11] fix build failure

---
 src/settings-ui/Settings.UI/Strings/en-us/Resources.resw | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index 199ac0c11ecd..3d7474b64ecf 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -5798,6 +5798,7 @@ Text uses the current drawing color.</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>

From 25e756a3635e5ebf71b3363d5622ce6c3494d73a Mon Sep 17 00:00:00 2001
From: vanzue <vanzue@outlook.com>
Date: Thu, 18 Dec 2025 17:41:32 +0800
Subject: [PATCH 08/11] fix a comment

---
 src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
index 0fd3a27f6742..e49a4dda9ddb 100644
--- a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
@@ -358,12 +358,11 @@ public HotkeySettings SnipToggleKeySave
                     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.Shift, // Toggle Shift: if Shift is present, remove it; if absent, add it
                     baseKey.Code);
             }
         }

From 8ceea3b38d092f0ebbd4ff91702d0224cafd8b12 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Thu, 18 Dec 2025 14:10:53 +0100
Subject: [PATCH 09/11] Updates

---
 ...otkeySettingsToLocalizedStringConverter.cs | 31 +++++++
 .../SettingsXAML/Views/ZoomItPage.xaml        | 58 ++----------
 .../Settings.UI/Strings/en-us/Resources.resw  | 93 ++++++++++---------
 3 files changed, 87 insertions(+), 95 deletions(-)
 create mode 100644 src/settings-ui/Settings.UI/Converters/HotkeySettingsToLocalizedStringConverter.cs

diff --git a/src/settings-ui/Settings.UI/Converters/HotkeySettingsToLocalizedStringConverter.cs b/src/settings-ui/Settings.UI/Converters/HotkeySettingsToLocalizedStringConverter.cs
new file mode 100644
index 000000000000..c092525c7553
--- /dev/null
+++ b/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();
+        }
+    }
+}
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
index 673bdf92cd19..3f672daaa48f 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
@@ -11,10 +11,10 @@
     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}"
@@ -24,18 +24,7 @@
             InlineCodeForeground="{StaticResource TextFillColorSecondaryBrush}"
             InlineCodePadding="2,0,2,1" />
         <tkcontrols:MarkdownConfig x:Key="ZoomItMarkdownConfig" Themes="{StaticResource ZoomItMarkdownThemeConfig}" />
-        <Style
-            x:Key="ZoomItKeyVisualStyle"
-            BasedOn="{StaticResource DefaultKeyVisualStyle}"
-            TargetType="controls:KeyVisual">
-            <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
-            <Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
-            <Setter Property="BorderBrush" Value="{ThemeResource ControlElevationBorderBrush}" />
-            <Setter Property="Padding" Value="2,1,2,1" />
-            <Setter Property="FontSize" Value="12" />
-        </Style>
     </local:NavigablePage.Resources>
-
     <controls:SettingsPageControl
         x:Uid="ZoomIt"
         IsTabStop="False"
@@ -57,7 +46,6 @@
                         <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}" />
@@ -105,15 +93,7 @@
                         <tkcontrols:SettingsExpander.Items>
                             <tkcontrols:SettingsCard>
                                 <tkcontrols:SettingsCard.Description>
-                                    <StackPanel Orientation="Vertical" Spacing="4">
-                                        <controls:ShortcutWithTextLabelControl
-                                            x:Uid="ZoomIt_LiveZoom_Shortcut_Draw"
-                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
-                                            Keys="{x:Bind Path=ViewModel.LiveZoomToggleKeyDraw.GetKeysList(), Mode=OneWay}"
-                                            LabelPlacement="After"
-                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
-                                        <tkcontrols:MarkdownTextBlock x:Uid="ZoomIt_LiveZoomFAQ" Config="{StaticResource ZoomItMarkdownConfig}" />
-                                    </StackPanel>
+                                    <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>
@@ -188,15 +168,7 @@
                             </tkcontrols:SettingsCard>
                             <tkcontrols:SettingsCard Name="ZoomItDemoTypeShortcutReset">
                                 <tkcontrols:SettingsCard.Description>
-                                    <StackPanel Orientation="Vertical" Spacing="4">
-                                        <tkcontrols:MarkdownTextBlock x:Uid="ZoomIt_DemoTypeFAQ" Config="{StaticResource ZoomItMarkdownConfig}" />
-                                        <controls:ShortcutWithTextLabelControl
-                                            x:Uid="ZoomIt_DemoType_Shortcut_Reset"
-                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
-                                            Keys="{x:Bind Path=ViewModel.DemoTypeToggleKeyReset.GetKeysList(), Mode=OneWay}"
-                                            LabelPlacement="After"
-                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
-                                    </StackPanel>
+                                    <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>
@@ -339,21 +311,9 @@
                             <tkcontrols:SettingsCard>
                                 <tkcontrols:SettingsCard.Description>
                                     <StackPanel Orientation="Vertical" Spacing="4">
-                                        <controls:ShortcutWithTextLabelControl
-                                            x:Uid="ZoomIt_Record_Shortcut_FullScreen"
-                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
-                                            Keys="{x:Bind Path=ViewModel.RecordToggleKey.GetKeysList(), Mode=OneWay}"
-                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
-                                        <controls:ShortcutWithTextLabelControl
-                                            x:Uid="ZoomIt_Record_Shortcut_Crop"
-                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
-                                            Keys="{x:Bind Path=ViewModel.RecordToggleKeyCrop.GetKeysList(), Mode=OneWay}"
-                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
-                                        <controls:ShortcutWithTextLabelControl
-                                            x:Uid="ZoomIt_Record_Shortcut_Window"
-                                            KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
-                                            Keys="{x:Bind Path=ViewModel.RecordToggleKeyWindow.GetKeysList(), Mode=OneWay}"
-                                            MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
+                                        <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>
@@ -370,11 +330,7 @@
                         <tkcontrols:SettingsExpander.Items>
                             <tkcontrols:SettingsCard Name="ZoomItSnipShortcutSave">
                                 <tkcontrols:SettingsCard.Description>
-                                    <controls:ShortcutWithTextLabelControl
-                                        x:Uid="ZoomIt_Snip_Shortcut_Save"
-                                        KeyVisualStyle="{StaticResource ZoomItKeyVisualStyle}"
-                                        Keys="{x:Bind Path=ViewModel.SnipToggleKeySave.GetKeysList(), Mode=OneWay}"
-                                        MarkdownConfig="{StaticResource ZoomItMarkdownConfig}" />
+                                    <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>
diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index 3d7474b64ecf..1fd22d7f537f 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -4759,13 +4759,10 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Zoom in or out to enlarge content and make details clearer.</value>
   </data>
   <data name="ZoomIt_ZoomFAQ.Text" xml:space="preserve">
-    <value>Zoom in or out with the `mouse wheel` or the `Up` / `Down` arrow keys.
-
-Exit zoom mode with `Esc` or the `right mouse button`.
-
-Capture the zoomed view with `Ctrl` `C`, or save it with `Ctrl` `S`.
-
-To crop before copying or saving, use `Ctrl` `Shift` instead.</value>
+    <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 activation</value>
@@ -4785,9 +4782,6 @@ To crop before copying or saving, use `Ctrl` `Shift` instead.</value>
   <data name="ZoomIt_LiveZoomGroup.Description" xml:space="preserve">
     <value>Live Zoom keeps windows updating while zoomed.</value>
   </data>
-  <data name="ZoomIt_LiveZoomFAQ.Text" xml:space="preserve">
-    <value>`Ctrl` `Up` and `Ctrl` `Down` to adjust the zoom level. </value>
-  </data>
   <data name="ZoomIt_LiveZoom_Shortcut.Header" xml:space="preserve">
     <value>Live Zoom activation</value>
   </data>
@@ -4795,17 +4789,25 @@ To crop before copying or saving, use `Ctrl` `Shift` instead.</value>
     <value>Draw</value>
   </data>
   <data name="ZoomIt_DrawFAQ.Text" xml:space="preserve">
-    <value>Once zoomed in, toggle drawing mode with the `left mouse button`. Undo with `Ctrl``Z` or clear all drawings with `E`. Press `Space` to center the cursor. Exit drawing mode with the `right mouse button`.
+    <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** - Adjust pen width by holding `Ctrl` and using the `mouse wheel` or the `Up`/`Down` arrow keys.
+**Pen control**  
+Press **Ctrl + the mouse wheel** or **Ctrl + Up / Down** to adjust the pen width.
 
-**Colors** - Change color with `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` and press a color key for a translucent highlighter. 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 with `Shift`, a rectangle with `Ctrl`, an ellipse with `Tab`, or 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** - Press `W` (white) or `K` (black) for a blank sketch pad. Copy the zoomed screen with `Ctrl``C` or save it with `Ctrl+S`. Use `Ctrl+Shift` to crop when copying or saving.</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>
@@ -4829,23 +4831,24 @@ To crop before copying or saving, use `Ctrl` `Shift` instead.</value>
   <data name="ZoomIt_DemoTypeGroup.Description" xml:space="preserve">
     <value>Insert predefined text snippets with a shortcut using a text file.</value>
   </data>
-  <data name="ZoomIt_DemoTypeFAQ.Text" xml:space="preserve">
-    <value>Text can also be pulled from the clipboard when it begins with the `[start]` keyword.
+  <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 `[end]` and insert pauses with `[pause:n]`, where n represents seconds. Text can be sent via the clipboard using [paste] and `[/paste]`. Keystrokes can be issued 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.
 
-ZoomIt can send text automatically, or input can be driven manually. Keyboard input is blocked while output is being sent.
+In manual mode, press **Space** to unblock keyboard input at the end of a snippet.  
+In auto mode, control returns automatically after completion.
 
-In manual mode, pressing `Space` unblocks keyboard input at the end of a snippet. In auto mode, control returns after 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.
 
-At the end of the file, ZoomIt reloads the file and restarts from the beginning. Entering the hotkey with `Shift` in the opposite mode steps back to the previous `[end]` marker.</value>
+Press **{0}** to reset DemoType and start from the beginning.</value>
   </data>
   <data name="ZoomIt_DemoType_Shortcut.Header" xml:space="preserve">
     <value>DemoType activation</value>
   </data>
-  <data name="ZoomIt_DemoType_Shortcut_Reset.Text" xml:space="preserve">
-    <value>to reset DemoType and start from the beginning.</value>
-  </data>
   <data name="ZoomIt_DemoType_File.Header" xml:space="preserve">
     <value>Input file</value>
   </data>
@@ -4874,11 +4877,13 @@ At the end of the file, ZoomIt reloads the file and restarts from the beginning.
     <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. Adjust the time with the arrow keys. If the timer window loses focus through `Alt+Tab`, reactivate it by left-clicking the ZoomIt tray icon.
+    <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.
 
-Exit timer mode with `Esc`.
+Press **Esc** to exit timer mode.
 
-Change the break timer color using the same keys used for drawing colors. The break timer font matches the text font.</value>
+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>Break timer activation</value>
@@ -5003,14 +5008,14 @@ Change the break timer color using the same keys used for drawing colors. The br
   <data name="ZoomIt_Record_Shortcut.Header" xml:space="preserve">
     <value>Record activation</value>
   </data>
-  <data name="ZoomIt_Record_Shortcut_FullScreen.Text" xml:space="preserve">
-    <value>to start or stop recording the full screen or current zoom session</value>
+  <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.Text" xml:space="preserve">
-    <value>to record a portion of the screen</value>
+  <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.Text" xml:space="preserve">
-    <value>to record a specific window</value>
+  <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>
@@ -5036,8 +5041,8 @@ Change the break timer color using the same keys used for drawing colors. The br
   <data name="ZoomIt_Snip_Shortcut.Header" xml:space="preserve">
     <value>Snip activation</value>
   </data>
-  <data name="ZoomIt_Snip_Shortcut_Save.Text" xml:space="preserve">
-    <value>to save the snip directly to a file instead of the clipboard.</value>
+  <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>
@@ -5781,16 +5786,16 @@ Change the break timer color using the same keys used for drawing colors. The br
     <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.Text" xml:space="preserve">
-    <value>to activate live drawing. Press `Esc` to clear annotations or to exit draw mode.</value>
+  <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>Once drawing mode is active, switch to typing with `T` or use `Shift` for right-aligned text.
-
-Leave typing mode with `Esc` or a `left-click`.
-
-Adjust font size with the `mouse wheel` or the `Up` and `Down` arrow keys.
-
+    <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">

From 4cc3b1325d723b5a6766831915416a95259fbdea Mon Sep 17 00:00:00 2001
From: vanzue <vanzue@outlook.com>
Date: Tue, 27 Jan 2026 13:53:53 +0800
Subject: [PATCH 10/11] fix a xml break

---
 src/settings-ui/Settings.UI/Strings/en-us/Resources.resw | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index 76c3f4ff208d..cd6794715b11 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -5853,6 +5853,7 @@ Text uses the current drawing color.</value>
   </data>
   <data name="ZoomIt_Break_BackgroundImage_None.Content" xml:space="preserve">
     <value>None</value>
+  </data>
   <data name="ShowThemeAdaptiveTrayIcon.Content" xml:space="preserve">
     <value>Show a monochrome icon that matches the Windows theme</value>
   </data>

From 0cf3803b2aa20912023f20dbfb600e366d3afe5c Mon Sep 17 00:00:00 2001
From: vanzue <vanzue@outlook.com>
Date: Tue, 27 Jan 2026 15:34:26 +0800
Subject: [PATCH 11/11] fix comments

---
 .../ZoomItOpacitySliderConverter.cs           | 24 ++++++
 .../SettingsXAML/Views/ZoomItPage.xaml        | 75 ++++++++-----------
 .../Settings.UI/ViewModels/ZoomItViewModel.cs | 22 +++---
 3 files changed, 68 insertions(+), 53 deletions(-)
 create mode 100644 src/settings-ui/Settings.UI/Converters/ZoomItOpacitySliderConverter.cs

diff --git a/src/settings-ui/Settings.UI/Converters/ZoomItOpacitySliderConverter.cs b/src/settings-ui/Settings.UI/Converters/ZoomItOpacitySliderConverter.cs
new file mode 100644
index 000000000000..e82211c886a5
--- /dev/null
+++ b/src/settings-ui/Settings.UI/Converters/ZoomItOpacitySliderConverter.cs
@@ -0,0 +1,24 @@
+// 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 Microsoft.UI.Xaml.Data;
+
+namespace Microsoft.PowerToys.Settings.UI.Converters
+{
+    public sealed partial class ZoomItOpacitySliderConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            // Slider value is 1-100, display as percentage
+            int percentage = System.Convert.ToInt32((double)value);
+            return $"{percentage}%";
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
index 3f672daaa48f..68ff588566df 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ZoomItPage.xaml
@@ -1,4 +1,4 @@
-<local:NavigablePage
+<local:NavigablePage
     x:Class="Microsoft.PowerToys.Settings.UI.Views.ZoomItPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -14,6 +14,7 @@
     <local:NavigablePage.Resources>
         <converters:ZoomItInitialZoomConverter x:Key="ZoomItInitialZoomConverter" />
         <converters:ZoomItTypeSpeedSliderConverter x:Key="ZoomItTypeSpeedSliderConverter" />
+        <converters:ZoomItOpacitySliderConverter x:Key="ZoomItOpacitySliderConverter" />
         <converters:HotkeySettingsToLocalizedStringConverter x:Key="HotkeySettingsToLocalizedStringConverter" />
         <tkcontrols:MarkdownThemes
             x:Key="ZoomItMarkdownThemeConfig"
@@ -57,7 +58,7 @@
                         x:Uid="ZoomIt_Zoom_Shortcut"
                         HeaderIcon="{ui:FontIcon Glyph=&#xE71E;}"
                         IsExpanded="True">
-                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.ZoomToggleKey, Mode=TwoWay}" />
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind ViewModel.ZoomToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
                             <tkcontrols:SettingsCard Name="ZoomItToggleAnimateZoom" ContentAlignment="Left">
                                 <CheckBox x:Uid="ZoomIt_Toggle_AnimateZoom" IsChecked="{x:Bind ViewModel.AnimateZoom, Mode=TwoWay}" />
@@ -89,11 +90,11 @@
                         x:Uid="ZoomIt_LiveZoom_Shortcut"
                         HeaderIcon="{ui:FontIcon Glyph=&#xE773;}"
                         IsExpanded="True">
-                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.LiveZoomToggleKey, Mode=TwoWay}" />
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind ViewModel.LiveZoomToggleKey, Mode=TwoWay}" />
                         <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:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind ViewModel.LiveZoomToggleKeyDraw, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_LiveZoom_Shortcut_Draw}" />
                                 </tkcontrols:SettingsCard.Description>
                             </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
@@ -105,7 +106,7 @@
                         x:Uid="ZoomIt_Draw_Shortcut"
                         HeaderIcon="{ui:FontIcon Glyph=&#xEE56;}"
                         IsExpanded="True">
-                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.DrawToggleKey, Mode=TwoWay}" />
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind ViewModel.DrawToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
                             <tkcontrols:SettingsCard>
                                 <tkcontrols:SettingsCard.Description>
@@ -147,7 +148,7 @@
                         x:Uid="ZoomIt_DemoType_Shortcut"
                         HeaderIcon="{ui:FontIcon Glyph=&#xE8AC;}"
                         IsExpanded="True">
-                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.DemoTypeToggleKey, Mode=TwoWay}" />
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind ViewModel.DemoTypeToggleKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
                             <tkcontrols:SettingsCard
                                 Name="ZoomItDemoTypeFile"
@@ -168,7 +169,7 @@
                             </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:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind ViewModel.DemoTypeToggleKeyReset, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_DemoTypeFAQ}" />
                                 </tkcontrols:SettingsCard.Description>
                             </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
@@ -181,7 +182,7 @@
                         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}" />
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind ViewModel.BreakTimerKey, Mode=TwoWay}" />
                         <tkcontrols:SettingsExpander.Items>
                             <tkcontrols:SettingsCard Name="ZoomItBreakTimeout" x:Uid="ZoomIt_Break_Timeout">
                                 <NumberBox
@@ -207,21 +208,15 @@
                                 <Button x:Uid="ZoomIt_Break_SoundFile_BrowseButton" Command="{x:Bind ViewModel.SelectBreakSoundFileCommand, Mode=OneWay}" />
                             </tkcontrols:SettingsCard>
                             <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>
+                                <Slider
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    Maximum="100"
+                                    Minimum="1"
+                                    ThumbToolTipValueConverter="{StaticResource ZoomItOpacitySliderConverter}"
+                                    Value="{x:Bind ViewModel.BreakTimerOpacity, Mode=TwoWay}" />
                             </tkcontrols:SettingsCard>
                             <tkcontrols:SettingsCard Name="ZoomItBreakTimerPosition" x:Uid="ZoomIt_Break_TimerPosition">
-                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.BreakTimerPosition, Mode=TwoWay}">
+                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind 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" />
@@ -236,7 +231,7 @@
 
 
                             <tkcontrols:SettingsCard Name="ZoomItBreakShowBackgroundBitmap" x:Uid="ZoomIt_Break_ShowBackgroundBitmap">
-                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.BreakBackgroundSelectionIndex, Mode=TwoWay}">
+                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.BreakBackgroundSelectionIndex, Mode=TwoWay}">
                                     <ComboBoxItem x:Uid="ZoomIt_Break_BackgroundImage_None" />
                                     <ComboBoxItem x:Uid="ZoomIt_Break_ShowFadedDesktop" />
                                     <ComboBoxItem x:Uid="ZoomIt_Break_ShowImageFile" />
@@ -272,24 +267,20 @@
                         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}" />
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind 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>
+                                <Slider
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    Maximum="1"
+                                    Minimum="0.1"
+                                    StepFrequency="0.1"
+                                    TickFrequency="0.1"
+                                    TickPlacement="Outside"
+                                    Value="{x:Bind ViewModel.RecordScaling, Mode=TwoWay}" />
                             </tkcontrols:SettingsCard>
                             <tkcontrols:SettingsCard Name="ZoomItRecordFormat" x:Uid="ZoomIt_Record_Format">
-                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.RecordFormatIndex, Mode=TwoWay}">
+                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.RecordFormatIndex, Mode=TwoWay}">
                                     <ComboBoxItem>GIF</ComboBoxItem>
                                     <ComboBoxItem>MP4</ComboBoxItem>
                                 </ComboBox>
@@ -305,15 +296,15 @@
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
                                     DisplayMemberPath="Item2"
                                     ItemsSource="{x:Bind ViewModel.MicrophoneList}"
-                                    SelectedValue="{x:Bind Path=ViewModel.RecordMicrophoneDeviceId, Mode=TwoWay}"
+                                    SelectedValue="{x:Bind 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}" />
+                                        <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind ViewModel.RecordToggleKey, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_Record_Shortcut_FullScreen}" />
+                                        <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind ViewModel.RecordToggleKeyCrop, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_Record_Shortcut_Crop}" />
+                                        <tkcontrols:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind ViewModel.RecordToggleKeyWindow, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_Record_Shortcut_Window}" />
                                     </StackPanel>
                                 </tkcontrols:SettingsCard.Description>
                             </tkcontrols:SettingsCard>
@@ -326,11 +317,11 @@
                         x:Uid="ZoomIt_Snip_Shortcut"
                         HeaderIcon="{ui:FontIcon Glyph=&#xF7ED;}"
                         IsExpanded="True">
-                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.SnipToggleKey, Mode=TwoWay}" />
+                        <controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind ViewModel.SnipToggleKey, Mode=TwoWay}" />
                         <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:MarkdownTextBlock Config="{StaticResource ZoomItMarkdownConfig}" Text="{x:Bind ViewModel.SnipToggleKeySave, Mode=OneWay, Converter={StaticResource HotkeySettingsToLocalizedStringConverter}, ConverterParameter=ZoomIt_Snip_Shortcut_Save}" />
                                 </tkcontrols:SettingsCard.Description>
                             </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
diff --git a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
index 377c72c16500..1b6d3b88fbe6 100644
--- a/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/ZoomItViewModel.cs
@@ -650,20 +650,20 @@ public string BreakSoundFile
             }
         }
 
-        public int BreakTimerOpacityIndex
+        public double BreakTimerOpacity
         {
             get
             {
-                return Math.Clamp((_zoomItSettings.Properties.BreakOpacity.Value / 10) - 1, 0, 9);
+                return Math.Clamp(_zoomItSettings.Properties.BreakOpacity.Value, 1, 100);
             }
 
             set
             {
-                int newValue = (value + 1) * 10;
-                if (_zoomItSettings.Properties.BreakOpacity.Value != newValue)
+                int intValue = (int)value;
+                if (_zoomItSettings.Properties.BreakOpacity.Value != intValue)
                 {
-                    _zoomItSettings.Properties.BreakOpacity.Value = newValue;
-                    OnPropertyChanged(nameof(BreakTimerOpacityIndex));
+                    _zoomItSettings.Properties.BreakOpacity.Value = intValue;
+                    OnPropertyChanged(nameof(BreakTimerOpacity));
                     NotifySettingsChanged();
                 }
             }
@@ -783,20 +783,20 @@ public bool BreakBackgroundStretch
             }
         }
 
-        public int RecordScalingIndex
+        public double RecordScaling
         {
             get
             {
-                return Math.Clamp((_zoomItSettings.Properties.RecordScaling.Value / 10) - 1, 0, 9);
+                return Math.Clamp(_zoomItSettings.Properties.RecordScaling.Value / 100.0, 0.1, 1.0);
             }
 
             set
             {
-                int newValue = (value + 1) * 10;
+                int newValue = (int)(value * 100);
                 if (_zoomItSettings.Properties.RecordScaling.Value != newValue)
                 {
                     _zoomItSettings.Properties.RecordScaling.Value = newValue;
-                    OnPropertyChanged(nameof(RecordScalingIndex));
+                    OnPropertyChanged(nameof(RecordScaling));
                     NotifySettingsChanged();
                 }
             }
@@ -844,7 +844,7 @@ public int RecordFormatIndex
                     if (reloaded != null && reloaded.Properties != null)
                     {
                         _zoomItSettings.Properties.RecordScaling.Value = reloaded.Properties.RecordScaling.Value;
-                        OnPropertyChanged(nameof(RecordScalingIndex));
+                        OnPropertyChanged(nameof(RecordScaling));
                     }
                 }
             }