[FZ Editor][Accessibility]List keyboard shortcuts in CanvasEditorWindow (#32578)

* [FZ Editor][Accessibility] List keyboard shortcuts in CanvasEditorWindow

* spellcheck

* XAML format

* Updated fontsizes and colors

* Remove brackets

---------

Co-authored-by: Niels Laute <niels.laute@live.nl>

src/modules/fancyzones/editor/FancyZonesEditor/CanvasEditorWindow.xaml

@@ -8,7 +8,6 @@
     xmlns:props="clr-namespace:FancyZonesEditor.Properties"
     xmlns:ui="http://schemas.modernwpf.com/2019"
     Title=""
-    Height="196"
     MinWidth="360"
     ui:TitleBar.IsIconVisible="False"
     ui:WindowHelper.UseModernWindowStyle="True"
@@ -18,10 +17,10 @@
     Closed="OnClosed"
     ContentRendered="EditorWindow_ContentRendered"
     ResizeMode="NoResize"
-    SizeToContent="Width"
+    SizeToContent="WidthAndHeight"
     WindowStartupLocation="CenterOwner"
     mc:Ignorable="d">
-    <Grid Height="160">
+    <Grid>
         <Grid
             Height="36"
             Margin="0,-36,0,0"
@@ -36,10 +35,7 @@
                 Background="{DynamicResource TitleBarSecondaryForegroundBrush}"
                 CornerRadius="1.5" />
         </Grid>
-        <StackPanel
+        <StackPanel Margin="16" FocusManager.FocusedElement="{Binding ElementName=newZoneButton}">
-            Margin="16"
-            VerticalAlignment="Bottom"
-            FocusManager.FocusedElement="{Binding ElementName=newZoneButton}">
 
             <local:ClickAutomationEventButton
                 x:Name="newZoneButton"
@@ -59,7 +55,18 @@
                 TabIndex="0"
                 ToolTip="{x:Static props:Resources.Add_zone}" />
 
-            <Grid Margin="0,24,0,-4">
+            <TextBlock
+                Margin="0,16,0,0"
+                Focusable="True"
+                FontSize="12"
+                TextWrapping="Wrap">
+                <Run FontWeight="SemiBold" Text="{x:Static props:Resources.KeyboardControlsName}" />
+                <Run Foreground="{DynamicResource SecondaryForegroundBrush}" Text="{x:Static props:Resources.KeyboardControlsDescriptionCanvas}" />
+            </TextBlock>
+
+
+
+            <Grid Margin="0,24,0,-36">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*" />
                     <ColumnDefinition Width="8" />

src/modules/fancyzones/editor/FancyZonesEditor/GridEditorWindow.xaml

@@ -38,23 +38,28 @@
         </Grid>
         <StackPanel Margin="16">
             <StackPanel Margin="0,8,0,0">
-                <TextBlock Focusable="True" TextWrapping="Wrap">
+                <TextBlock
-                    <Run FontWeight="Bold" Text="{x:Static props:Resources.SplitterName}" />
+                    Focusable="True"
-                    <Run Text="{x:Static props:Resources.SplitterDescription}" />
+                    FontSize="12"
+                    TextWrapping="Wrap">
+                    <Run FontWeight="SemiBold" Text="{x:Static props:Resources.SplitterName}" />
+                    <Run Foreground="{DynamicResource SecondaryForegroundBrush}" Text="{x:Static props:Resources.SplitterDescription}" />
                 </TextBlock>
                 <TextBlock
                     Margin="0,8,0,0"
                     Focusable="True"
+                    FontSize="12"
                     TextWrapping="Wrap">
-                    <Run FontWeight="Bold" Text="{x:Static props:Resources.MergeName}" />
+                    <Run FontWeight="SemiBold" Text="{x:Static props:Resources.MergeName}" />
-                    <Run Text="{x:Static props:Resources.MergeDescription}" />
+                    <Run Foreground="{DynamicResource SecondaryForegroundBrush}" Text="{x:Static props:Resources.MergeDescription}" />
                 </TextBlock>
                 <TextBlock
                     Margin="0,8,0,0"
                     Focusable="True"
+                    FontSize="12"
                     TextWrapping="Wrap">
-                    <Run FontWeight="Bold" Text="{x:Static props:Resources.KeyboardControlsName}" />
+                    <Run FontWeight="SemiBold" Text="{x:Static props:Resources.KeyboardControlsName}" />
-                    <Run Text="{x:Static props:Resources.KeyboardControlsDescription}" />
+                    <Run Foreground="{DynamicResource SecondaryForegroundBrush}" Text="{x:Static props:Resources.KeyboardControlsDescription}" />
                 </TextBlock>
             </StackPanel>
             <Grid Margin="0,24,0,-36">

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.Designer.cs

@@ -1,4 +1,4 @@
-//------------------------------------------------------------------------------
+//------------------------------------------------------------------------------
 // <auto-generated>
 //     This code was generated by a tool.
 //     Runtime Version:4.0.30319.42000
@@ -19,7 +19,7 @@ namespace FancyZonesEditor.Properties {
     // class via a tool like ResGen or Visual Studio.
     // To add or remove a member, edit your .ResX file then rerun ResGen
     // with the /str option, or rebuild your VS project.
-    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "16.0.0.0")]
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "17.0.0.0")]
     [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
     [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
     public class Resources {
@@ -266,47 +266,7 @@ namespace FancyZonesEditor.Properties {
                 return ResourceManager.GetString("Delete_Layout_Dialog_Announce", resourceCulture);
             }
         }
-
+        
-        /// <summary>
-        ///   Looks up a localized string for representing the names of a single zone.
-        /// </summary>
-        public static string Zone_Name {
-            get
-            {
-                return ResourceManager.GetString("Zone_Name", resourceCulture);
-            }
-        }
-
-        /// <summary>
-        ///   Looks up a localized string for representing the name of the width dimension.
-        /// </summary>
-        public static string Width_Name {
-            get
-            {
-                return ResourceManager.GetString("Width_Name", resourceCulture);
-            }
-        }
-
-        /// <summary>
-        ///   Looks up a localized string for representing the name of the height dimension.
-        /// </summary>
-        public static string Height_Name {
-            get
-            {
-                return ResourceManager.GetString("Height_Name", resourceCulture);
-            }
-        }
-
-        /// <summary>
-        ///   Looks up a localized string for explaining how to use the thumbs to resize zone.
-        /// </summary>
-        public static string Resizer_Thumb_Announce {
-            get
-            {
-                return ResourceManager.GetString("Resizer_Thumb_Announce", resourceCulture);
-            }
-        }
-
         /// <summary>
         ///   Looks up a localized string similar to Delete zone.
         /// </summary>
@@ -568,13 +528,22 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Height.
+        /// </summary>
+        public static string Height_Name {
+            get {
+                return ResourceManager.GetString("Height_Name", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to 
-        ///     - [Shift]+S to split currently focused zone.
+        ///• [Shift]+S to split currently focused zone.
-        ///     - Ctrl+Tab to focus zones/resizers.
+        ///• Ctrl+Tab to focus zones/resizers.
-        ///     - Tab to cycle zones and resizers.
+        ///• Tab to cycle zones and resizers.
-        ///     - Delete to remove the focused resizer.
+        ///• Delete to remove the focused resizer.
-        ///     - Arrows to move the focused resizer..
+        ///• Arrows to move the focused resizer..
         /// </summary>
         public static string KeyboardControlsDescription {
             get {
@@ -583,7 +552,21 @@ namespace FancyZonesEditor.Properties {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Keyboard Navigation:.
+        ///   Looks up a localized string similar to 
+        ///• Ctrl+Tab to switch focus between dialog and zones.
+        ///• [Shift]+Arrows to resize the focused zone by 10px (5px per edge).
+        ///• Ctrl+[Shift]+Arrows to resize the focused zone by 2px (1px per edge).
+        ///• Arrows to move the focused zone by 10px.
+        ///• Ctrl+Arrows to move the focused zone by 1px..
+        /// </summary>
+        public static string KeyboardControlsDescriptionCanvas {
+            get {
+                return ResourceManager.GetString("KeyboardControlsDescriptionCanvas", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Keyboard navigation:.
         /// </summary>
         public static string KeyboardControlsName {
             get {
@@ -771,15 +754,6 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
-        /// <summary>
-        ///   Looks up a localized string similar to Range is from {0} to {1}.
-        /// </summary>
-        public static string Ranged_Input_Tooltip {
-            get {
-                return ResourceManager.GetString("Ranged_Input_Tooltip", resourceCulture);
-            }
-        }
-        
         /// <summary>
         ///   Looks up a localized string similar to Reset layout.
         /// </summary>
@@ -789,6 +763,15 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Use the arrow keys to resize, delete key to remove..
+        /// </summary>
+        public static string Resizer_Thumb_Announce {
+            get {
+                return ResourceManager.GetString("Resizer_Thumb_Announce", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Save.
         /// </summary>
@@ -942,6 +925,15 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Width.
+        /// </summary>
+        public static string Width_Name {
+            get {
+                return ResourceManager.GetString("Width_Name", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Decrement number of zones.
         /// </summary>
@@ -960,6 +952,15 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Zone.
+        /// </summary>
+        public static string Zone_Name {
+            get {
+                return ResourceManager.GetString("Zone_Name", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to zones.
         /// </summary>

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.resx

@@ -353,15 +353,23 @@
     <comment>Title for concept behind Merging two zones together or removing an zone</comment>
   </data>
   <data name="KeyboardControlsName" xml:space="preserve">
-    <value>Keyboard Navigation:</value>
+    <value>Keyboard navigation:</value>
   </data>
   <data name="KeyboardControlsDescription" xml:space="preserve">
     <value>
-     - [Shift]+S to split currently focused zone.
+• Shift+S to split currently focused zone.
-     - Ctrl+Tab to focus zones/resizers.
+• Ctrl+Tab to focus zones/resizers.
-     - Tab to cycle zones and resizers.
+• Tab to cycle zones and resizers.
-     - Delete to remove the focused resizer.
+• Delete to remove the focused resizer.
-     - Arrows to move the focused resizer.</value>
+• Arrows to move the focused resizer.</value>
+  </data>
+  <data name="KeyboardControlsDescriptionCanvas" xml:space="preserve">
+    <value>
+• Ctrl+Tab to switch focus between dialog and zones.
+• Shift+Arrows to resize the focused zone by 10px (5px per edge).
+• Ctrl+Shift+Arrows to resize the focused zone by 2px (1px per edge).
+• Arrows to move the focused zone by 10px.
+• Ctrl+Arrows to move the focused zone by 1px.</value>
   </data>
   <data name="SplitterDescription" xml:space="preserve">
     <value>Hold Shift key for vertical split.</value>