[FZ Editor] Keyboard support for canvas editor (#11211)

* Canvas zone keyboard accesible

* Keyboard interaction

* Update

* Updated styles

* Update src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml

* Update src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml

Co-authored-by: Niels Laute <niels9001@hotmail.com>
Co-authored-by: Enrico Giordani <enricogior@users.noreply.github.com>

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

@@ -5,10 +5,10 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:props="clr-namespace:FancyZonesEditor.Properties"
              xmlns:local="clr-namespace:FancyZonesEditor"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
+             KeyDown="Border_KeyDown"
              Background="Transparent"
              d:DesignHeight="450" d:DesignWidth="800">
-
     <UserControl.Resources>
         <Style x:Key="CanvasZoneThumbStyle" TargetType="{x:Type Thumb}">
             <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
@@ -45,12 +45,18 @@
             </Setter>
         </Style>
 
-        <Style x:Key="CloseButtonStyle" TargetType="{x:Type Button}">
+        <Style x:Key="CloseButtonStyle"
-            <Setter Property="BorderThickness" Value="1"/>
+               TargetType="{x:Type Button}">
-            <Setter Property="HorizontalContentAlignment" Value="Center"/>
+            <Setter Property="BorderThickness"
-            <Setter Property="VerticalContentAlignment" Value="Center"/>
+                    Value="1" />
-            <Setter Property="Foreground" Value="{DynamicResource PrimaryForegroundBrush}" />
+            <Setter Property="HorizontalContentAlignment"
-            <Setter Property="Padding" Value="1"/>
+                    Value="Center" />
+            <Setter Property="VerticalContentAlignment"
+                    Value="Center" />
+            <Setter Property="Foreground"
+                    Value="{DynamicResource PrimaryForegroundBrush}" />
+            <Setter Property="Padding"
+                    Value="1" />
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type Button}">
@@ -65,19 +71,26 @@
                                               Margin="{TemplateBinding Padding}"
                                               RecognizesAccessKey="True"
                                               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
-                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                         </Border>
                         <ControlTemplate.Triggers>
-                            <Trigger Property="IsDefaulted" Value="true">
+                            <Trigger Property="IsDefaulted"
+                                     Value="true">
                                 <Setter Property="BorderBrush"
                                         TargetName="border"
-                                        Value="{DynamicResource SystemControlBackgroundAccentBrush}"/>
+                                        Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
                             </Trigger>
-                            <Trigger Property="IsMouseOver" Value="true">
+                            <Trigger Property="IsMouseOver"
-                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.6"/>
+                                     Value="true">
+                                <Setter Property="Opacity"
+                                        TargetName="contentPresenter"
+                                        Value="0.6" />
                             </Trigger>
-                            <Trigger Property="IsPressed" Value="true">
+                            <Trigger Property="IsPressed"
-                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.4"/>
+                                     Value="true">
+                                <Setter Property="Opacity"
+                                        TargetName="contentPresenter"
+                                        Value="0.4" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
@@ -86,10 +99,29 @@
         </Style>
     </UserControl.Resources>
 
-    <Border BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}"
+    <Border CornerRadius="0"
-            Background="{DynamicResource CanvasZoneBackgroundBrush}"
+            Focusable="True"
-            CornerRadius="0"
+            x:Name="RootBorder"
-            BorderThickness="1">
+            PreviewMouseDown="Border_PreviewMouseDown">
+        <Border.Style>
+            <Style>
+                <Setter Property="Border.Background"
+                        Value="{DynamicResource CanvasZoneBackgroundBrush}" />
+                <Setter Property="Border.BorderBrush"
+                        Value="{DynamicResource CanvasZoneBorderBrush}" />
+                <Setter Property="Border.BorderThickness"
+                        Value="1"/>
+                <Style.Triggers>
+                    <Trigger Property="Border.IsKeyboardFocused"
+                             Value="true">
+                        <Setter Property="Border.BorderThickness"
+                                Value="4" />
+                        <Setter Property="Border.BorderBrush"
+                                Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
+                    </Trigger>
+                </Style.Triggers>
+            </Style>
+        </Border.Style>
         <Grid x:Name="Frame">
             <Grid.RowDefinitions>
                 <RowDefinition Height="8"/>
@@ -118,9 +150,10 @@
                     Content="ID"
                     FontWeight="SemiBold"
                     FontSize="64"
-                    Foreground="{DynamicResource PrimaryForegroundBrush}" />
+                    Foreground="{Binding ElementName=RootBorder, Path=BorderBrush}" />
                 <TextBlock FontSize="16"
-                           Foreground="{DynamicResource SecondaryForegroundBrush}"
+                           Foreground="{Binding ElementName=RootBorder, Path=BorderBrush}"
+                           Opacity="0.6"
                            DockPanel.Dock="Bottom"
                            FontWeight="SemiBold"
                            HorizontalAlignment="Center"
@@ -152,6 +185,8 @@
                     FontSize="16"
                     Padding="4"
                     Click="OnClose"
+                    IsTabStop="False"
+                    Focusable="False"
                     Grid.Row="2"
                     Grid.Column="2"
                     FontFamily="Segoe MDL2 Assets"

src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml.cs

@@ -18,6 +18,8 @@ namespace FancyZonesEditor
     /// </summary>
     public partial class CanvasZone : UserControl
     {
+        private readonly int moveAmount = 10;
+
         public CanvasZone()
         {
             InitializeComponent();
@@ -303,12 +305,6 @@ namespace FancyZonesEditor
             UpdateFromSnappyHelpers();
         }
 
-        private void OnClose(object sender, RoutedEventArgs e)
-        {
-            ((Panel)Parent).Children.Remove(this);
-            Model.RemoveZoneAt(ZoneIndex);
-        }
-
         // Corner dragging
         private void Caption_DragStarted(object sender, System.Windows.Controls.Primitives.DragStartedEventArgs e)
         {
@@ -368,5 +364,120 @@ namespace FancyZonesEditor
             snappyX = NewDefaultSnappyHelper(true, ResizeMode.TopEdge);
             snappyY = null;
         }
+
+        private void OnClose(object sender, RoutedEventArgs e)
+        {
+            RemoveZone();
+        }
+
+        private void RemoveZone()
+        {
+            ((Panel)Parent).Children.Remove(this);
+            Model.RemoveZoneAt(ZoneIndex);
+        }
+
+        private void Border_KeyDown(object sender, KeyEventArgs e)
+        {
+            if (e.Key != Key.Tab)
+            {
+                e.Handled = true;
+                if (e.Key == Key.Delete)
+                {
+                    RemoveZone();
+                }
+                else if (e.Key == Key.Right)
+                {
+                    if (IsShiftKeyDown())
+                    {
+                        // Make the zone larger (height)
+                        MoveZoneX(moveAmount / 2, ResizeMode.TopEdge, ResizeMode.BottomEdge);
+                        MoveZoneX(-moveAmount / 2, ResizeMode.BottomEdge, ResizeMode.BottomEdge);
+                    }
+                    else
+                    {
+                        // Move zone right
+                        MoveZoneX(moveAmount, ResizeMode.BothEdges, ResizeMode.BothEdges);
+                    }
+                }
+                else if (e.Key == Key.Left)
+                {
+                    if (IsShiftKeyDown())
+                    {
+                        // Make the zone smaller (height)
+                        MoveZoneX(-moveAmount / 2, ResizeMode.TopEdge, ResizeMode.BottomEdge);
+                        MoveZoneX(moveAmount / 2, ResizeMode.BottomEdge, ResizeMode.BottomEdge);
+                    }
+                    else
+                    {
+                        // Move zone left
+                        MoveZoneX(-moveAmount, ResizeMode.BothEdges, ResizeMode.BothEdges);
+                    }
+                }
+                else if (e.Key == Key.Up)
+                {
+                    if (IsShiftKeyDown())
+                    {
+                        // Make the zone larger (height)
+                        MoveZoneY(moveAmount / 2, ResizeMode.TopEdge, ResizeMode.BottomEdge);
+                        MoveZoneY(-moveAmount / 2, ResizeMode.BottomEdge, ResizeMode.BottomEdge);
+                    }
+                    else
+                    {
+                        // Move zone up
+                        MoveZoneY(-moveAmount, ResizeMode.BothEdges, ResizeMode.BothEdges);
+                    }
+                }
+                else if (e.Key == Key.Down)
+                {
+                    if (IsShiftKeyDown())
+                    {
+                        // Make the zone smaller (height)
+                        MoveZoneY(-moveAmount / 2, ResizeMode.TopEdge, ResizeMode.BottomEdge);
+                        MoveZoneY(moveAmount / 2, ResizeMode.BottomEdge, ResizeMode.BottomEdge);
+                    }
+                    else
+                    {
+                        // Move zone down
+                        MoveZoneY(moveAmount, ResizeMode.BothEdges, ResizeMode.BothEdges);
+                    }
+                }
+            }
+        }
+
+        private void MoveZoneX(int value, ResizeMode top, ResizeMode bottom)
+        {
+            snappyX = NewDefaultSnappyHelper(true, top);
+            snappyY = NewDefaultSnappyHelper(false, bottom);
+            snappyX.Move(value);
+            UpdateFromSnappyHelpers();
+        }
+
+        private void MoveZoneY(int value, ResizeMode top, ResizeMode bottom)
+        {
+            snappyX = NewDefaultSnappyHelper(true, bottom);
+            snappyY = NewDefaultSnappyHelper(false, top);
+            snappyY.Move(value);
+            UpdateFromSnappyHelpers();
+        }
+
+        private bool IsShiftKeyDown()
+        {
+            if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift))
+            {
+                return true;
+            }
+            else
+            {
+                return false;
+            }
+        }
+
+        private void Border_PreviewMouseDown(object sender, MouseButtonEventArgs e)
+        {
+            // Set (keyboard)focus on this zone when click
+            Border selectedBorder = sender as Border;
+            selectedBorder.Focus();
+            Keyboard.Focus(selectedBorder);
+        }
     }
 }

src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml

@@ -31,5 +31,6 @@
     <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FF202020" />
 
     <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#B0202020" />
+    <SolidColorBrush x:Key="CanvasZoneBorderBrush" Color="#CCFFFFFF" />
     <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#B0202020" />
 </ResourceDictionary>

src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast1.xaml

@@ -25,5 +25,6 @@
     <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#E5202020" />
     <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FF202020" />
     <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#E5202020" />
+    <SolidColorBrush x:Key="CanvasZoneBorderBrush" Color="#CCFFFFFF" />
     <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#E5202020" />
 </ResourceDictionary>

src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast2.xaml

@@ -25,5 +25,6 @@
     <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#E5202020" />
     <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FF202020" />
     <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#E5202020" />
+    <SolidColorBrush x:Key="CanvasZoneBorderBrush" Color="#CCFFFFFF" />
     <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#E5202020" />
 </ResourceDictionary>

src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastBlack.xaml

@@ -25,5 +25,6 @@
     <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#E5202020" />
     <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FF202020" />
     <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#E5202020" />
+    <SolidColorBrush x:Key="CanvasZoneBorderBrush" Color="#CCFFFFFF" />
     <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#E5202020" />
 </ResourceDictionary>

src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastWhite.xaml

@@ -25,5 +25,6 @@
     <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#EFF3F3F3" />
     <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FFDCDCDC" />
     <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#E5F3F3F3" />
+    <SolidColorBrush x:Key="CanvasZoneBorderBrush" Color="#CC000000" />
     <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#E5F3F3F3" />
 </ResourceDictionary>

src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml

@@ -31,5 +31,6 @@
     <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FFDCDCDC" />
     
     <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#C5F8F8F8" />
+    <SolidColorBrush x:Key="CanvasZoneBorderBrush" Color="#CC000000" />
     <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#C5F8F8F8" />
 </ResourceDictionary>