[FZ Editor] Edit dialog UX fixes (#10734)

* Updates to UI

* Handle enter key

* Focus visual fix

* Fix

Co-authored-by: Niels Laute <niels9001@hotmail.com>

src/modules/fancyzones/editor/FancyZonesEditor/FancyZonesEditor.csproj

@@ -65,7 +65,7 @@
     </AdditionalFiles>
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="ModernWpfUI" Version="0.9.3" />
+    <PackageReference Include="ModernWpfUI" Version="0.9.4" />
     <PackageReference Include="StyleCop.Analyzers" Version="1.1.118">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

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

@@ -2,16 +2,16 @@
         x:Name="MainWindow1"
         AutomationProperties.Name="{x:Static props:Resources.Fancy_Zones_Main_Editor}"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:ui="http://schemas.modernwpf.com/2019"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:FancyZonesEditor"
         xmlns:Converters="clr-namespace:FancyZonesEditor.Converters"
         xmlns:props="clr-namespace:FancyZonesEditor.Properties"
         xmlns:local1="clr-namespace:FancyZonesEditor.ViewModels"
-        xmlns:ui="http://schemas.modernwpf.com/2019"
-        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
         xmlns:controls="clr-namespace:ModernWpf.Controls;assembly=ModernWpf"
+        xmlns:sys="clr-namespace:System;assembly=mscorlib"
         mc:Ignorable="d"
         Title="FancyZones Editor"
         ui:WindowHelper.UseModernWindowStyle="True"
@@ -84,18 +84,17 @@
                         </StackPanel>
                     </ToolTip>
                 </Border.ToolTip>
-                <StackPanel Orientation="Vertical" VerticalAlignment="Center">
+                <StackPanel Orientation="Vertical"
-                    
+                            VerticalAlignment="Center">
-              
+                    <TextBlock Name="IndexText"
-                <TextBlock Name="IndexText"
+                               TextTrimming="CharacterEllipsis"
-                           TextTrimming="CharacterEllipsis"
+                               Text="{Binding Index}"
-                           Text="{Binding Index}"
+                               FontSize="26"
-                           FontSize="26"
+                               Grid.Row="0"
-                           Grid.Row="0"
+                               FontWeight="SemiBold"
-                           FontWeight="SemiBold"
+                               HorizontalAlignment="Center"
-                           HorizontalAlignment="Center"
+                               VerticalAlignment="Center"
-                           VerticalAlignment="Center"
+                               Foreground="{DynamicResource PrimaryForegroundBrush}" />
-                           Foreground="{DynamicResource PrimaryForegroundBrush}" />
                     <TextBlock Name="ResolutionText"
                                TextTrimming="CharacterEllipsis"
                                Text="{Binding Dimensions}"
@@ -125,6 +124,9 @@
             </DataTemplate.Triggers>
         </DataTemplate>
 
+
+       
+
         <DataTemplate x:Key="LayoutItemTemplate">
             <Grid Background="Transparent"
                   Width="216"
@@ -204,7 +206,7 @@
                     <Setter TargetName="LayoutItem"
                             Property="BorderBrush"
                             Value="{DynamicResource LayoutItemBorderPointerOverBrush}" />
-                   
+
                     <Setter TargetName="EditLayoutButton"
                             Property="Foreground"
                             Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
@@ -232,6 +234,7 @@
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
+                    
                     <TextBlock Text="{x:Static props:Resources.Templates}"
                                x:Name="TemplatesHeaderBlock"
                                FontWeight="SemiBold"
@@ -302,7 +305,7 @@
                    
                 </Grid>
             </ScrollViewer>
-            
+
             <Button x:Name="NewLayoutButton"
                     Click="NewLayoutButton_Click"
                     HorizontalAlignment="Right"
@@ -376,7 +379,7 @@
                           Opened="Dialog_Opened"
                           Closed="Dialog_Closed">
             <Grid DataContext="{Binding SelectedModel}"
-                  MinWidth="320" Margin="0,0,0,32">
+                  MinWidth="320" Margin="4,4,4,32">
 
                 <StackPanel Margin="0,-37,0,0"
                             HorizontalAlignment="Right"
@@ -412,120 +415,192 @@
                 </StackPanel>
 
                 <StackPanel>
-                    <local:LayoutPreview Width="216"
-                                         Height="132"
-                                         Margin="0,16,0,16" />
-                    <Button Click="EditZones_Click"
-                                        x:Name="editZoneLayoutButton"
-                                        HorizontalAlignment="Stretch"
-                                        AutomationProperties.Name="{x:Static props:Resources.Edit_zones}"
-                                        HorizontalContentAlignment="Center"
-                                        Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
-                                        Style="{StaticResource IconOnlyButtonStyle}"
-                                        Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
-                        <Button.Content>
-                            <StackPanel Orientation="Horizontal">
-                                <TextBlock Text="&#xE104;"
-                                           Margin="0,2,8,0"
-                                           FontFamily="Segoe MDL2 Assets" />
-                                <TextBlock Text="{x:Static props:Resources.Edit_zones}" />
-                            </StackPanel>
-                        </Button.Content>
-                    </Button>
-
                     <StackPanel Orientation="Horizontal"
+                                Margin="0,24,0,0"
+                                HorizontalAlignment="Stretch"
+                                Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}">
+
+                        <TextBlock FontFamily="Segoe MDL2 Assets"
+                                   ToolTip="{x:Static props:Resources.Name}"
+                                   FontSize="16"
+                                   VerticalAlignment="Bottom" Margin="0,0,0,8"
+                                   Text="&#xE932;" />
+                        <TextBox Text="{Binding Name}"
+                                 ui:ControlHelper.PlaceholderText="{x:Static props:Resources.Name}"
+                                 AutomationProperties.Name="{x:Static props:Resources.Name}"
+                                 Margin="12,0,0,0"
+                                 ui:ControlHelper.Header="{x:Static props:Resources.Name}"
+                                 MinWidth="286"
+                                 HorizontalAlignment="Stretch" />
+                    </StackPanel>
+
+                    <!-- Shortcut panel -->
+                    <StackPanel Orientation="Vertical"
+                                Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}"
+                                Margin="0,12,0,36">
+
+                        <StackPanel Margin="28,0,0,4"
+                                    Orientation="Horizontal">
+                            <TextBlock x:Name="QuickKeyTitle"
+                                       Text="{x:Static props:Resources.QuickKey_Title}" />
+                            <TextBlock FontFamily="Segoe MDL2 Assets"
+                                       Margin="8,4,0,0"
+                                       Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
+                                       Text="&#xE946;"
+                                       ToolTip="{x:Static props:Resources.QuickKey_Description}" />
+                        </StackPanel>
+
+
+                        <StackPanel Orientation="Horizontal">
+
+                            <TextBlock FontFamily="Segoe MDL2 Assets"
+                                       VerticalAlignment="Center"
+                                       FontSize="16"
+                                       ToolTip="{x:Static props:Resources.QuickKey_Title}"
+                                       Text="&#xEDA7;" />
+
+                            <ComboBox x:Name="quickKeySelectionComboBox"
+                                      Margin="12,0,0,0"
+                                      Width="286"
+                                      AutomationProperties.LabeledBy="{Binding ElementName=QuickKeyTitle}"
+                                      AutomationProperties.HelpText="{x:Static props:Resources.QuickKey_Description}"
+                                      AutomationProperties.Name="{x:Static props:Resources.QuickKey_Title}"
+                                      ItemsSource="{Binding QuickKeysAvailable}"
+                                      SelectedItem="{Binding QuickKey}" />
+                        </StackPanel>
+
+                    </StackPanel>
+
+                    <Grid  Width="218"
+                           Height="124"
+                           HorizontalAlignment="Left"
+                           Margin="24,12,0,24">
+                        <local:LayoutPreview />
+
+                        <Button Content="&#xE104;"
+                                x:Name="editZoneLayoutButton"
+                                FontFamily="Segoe MDL2 Assets"
+                                FontSize="14"
                                 HorizontalAlignment="Center"
-                                Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
+                                VerticalAlignment="Center"
-
+                                Height="36"
-                                    <Button x:Name="decrementZones"
+                                Width="36"
-                                            Width="40"
+                                Padding="0"
-                                            Height="40"
+                                BorderBrush="Transparent"
-                                            AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Decrement}"
+                                Click="EditZones_Click"
-                                            ToolTip="{x:Static props:Resources.Zone_Count_Decrement}"
+                                Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"
-                                            Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
+                                ToolTip="{x:Static props:Resources.Edit_zones}"
-                                            Style="{StaticResource IconOnlyButtonStyle}"
+                                AutomationProperties.Name="{x:Static props:Resources.Edit_zones}"
-                                            Click="DecrementZones_Click">
+                                Style="{StaticResource AccentButtonStyle}"
-                                        <Button.Content>
+                                ui:ControlHelper.CornerRadius="36">
-                                            <TextBlock Text="&#xE108;"
+                        </Button>
-                                                       FontFamily="Segoe MDL2 Assets" />
-                                        </Button.Content>
-                                    </Button>
-
-                                    <TextBlock x:Name="zoneCount"
-                                               Text="{Binding TemplateZoneCount}"
-                                               FontWeight="SemiBold"
-                                               FontSize="18"
-                                               Width="32"
-                                               HorizontalAlignment="Center"
-                                               TextAlignment="Center"
-                                               Margin="0,-4,0,0"
-                                               ToolTip="Number of zones"
-                                               VerticalAlignment="Center" />
-
-                                    <Button x:Name="incrementZones"
-                                            Width="40"
-                                            Height="40"
-                                            AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Increment}"
-                                            ToolTip="{x:Static props:Resources.Zone_Count_Increment}"
-                                            Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
-                                            Style="{StaticResource IconOnlyButtonStyle}"
-                                            Click="IncrementZones_Click">
-                                        <Button.Content>
-                                            <TextBlock Text="&#xE109;"
-                                                       FontFamily="Segoe MDL2 Assets" />
-                                        </Button.Content>
-                                    </Button>
-                                </StackPanel>
-                    <TextBox Text="{Binding Name}"
-                             ui:ControlHelper.Header="{x:Static props:Resources.Name}"
-                             Margin="0,16,2,0"
-                             Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}"
-                             HorizontalAlignment="Stretch" />
-                    
-                    <CheckBox x:Name="spaceAroundSetting"
-                              Content="{x:Static props:Resources.Show_Space_Zones}"
-                              IsChecked="{Binding ShowSpacing}"
-                              Margin="0,16,12,0"
-                              Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" />
 
-                    <ui:NumberBox Margin="0,6,0,0"
+                    </Grid>
-                                  IsEnabled="{Binding ShowSpacing}"
-                                  Text="{Binding Spacing}"
-                                  Width="106"
-                                  Minimum="-20"
-                                  Maximum="1000"
-                                  SpinButtonPlacementMode="Compact"
-                                  HorizontalAlignment="Left"
-                                  AutomationProperties.LabeledBy="{Binding ElementName=spaceAroundSetting}"
-                                  Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" />
 
-                    <TextBlock Text="{x:Static props:Resources.Distance_adjacent_zones}"
+
-                               IsEnabled="{Binding ShowSpacing}"
+                    <StackPanel Orientation="Horizontal"
-                               Margin="0,16,12,0"
+                                HorizontalAlignment="Left"
-                               TextWrapping="Wrap"
+                                Margin="0,16,0,0"
-                               Foreground="{DynamicResource PrimaryForegroundBrush}"
+                                Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
-                               x:Name="sensitivityRadiusValue" />
+
-
+                        <TextBlock FontFamily="Segoe MDL2 Assets"
-                    <ui:NumberBox Margin="0,6,0,0"
+                                   VerticalAlignment="Center"
-                                  Text="{Binding SensitivityRadius}"
+                                   FontSize="16"
-                                  Width="106"
+                                   Margin="0,16,0,0"
-                                  Minimum="0"
+                                   ToolTip="{x:Static props:Resources.Number_of_zones}"
-                                  Maximum="1000"
+                                   Text="&#xECA5;" />
-                                  SpinButtonPlacementMode="Compact"
+
-                                  HorizontalAlignment="Left"
+                        <ui:NumberBox Minimum="1"
-                                  AutomationProperties.LabeledBy="{Binding ElementName=sensitivityRadiusValue}" />
+                                      Maximum="40"
-
+                                      Width="216"
-                    <TextBlock Text="{x:Static props:Resources.QuickKey_Select}"
+                                      KeyDown="EditDialogNumberBox_KeyDown"
-                               Margin="0,16,12,0"
+                                      Margin="12,0,0,0"
-                               Foreground="{DynamicResource PrimaryForegroundBrush}"
+                                      Header="{x:Static props:Resources.Number_of_zones}"
-                               TextWrapping="Wrap"
+                                      SpinButtonPlacementMode="Compact"
-                               Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"/>
+                                      Text="{Binding TemplateZoneCount}" />
-                    <ComboBox x:Name="quickKeySelectionComboBox" 
+                    </StackPanel>
-                              Margin="0,6,0,0"
+
-                              ItemsSource="{Binding QuickKeysAvailable}"
+                    <StackPanel Margin="0, 12, 0, 0"
-                              SelectedItem="{Binding QuickKey}"
+                                Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}">
-                              Width="106"
+                        <TextBlock Text="{x:Static props:Resources.Space_Around_Zones}"
-                              Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"/>
+                                   x:Name="spacingTitle"
+                                   Margin="28,0,0,4"
+                                   TextWrapping="Wrap" />
+                        <StackPanel Orientation="Horizontal">
+                            <TextBlock FontFamily="Segoe MDL2 Assets"
+                                       VerticalAlignment="Center"
+                                       FontSize="16"
+                                       ToolTip="{x:Static props:Resources.Space_Around_Zones}"
+                                       Text="&#xE91B;" />
+
+                            <ui:NumberBox Margin="12,0,0,0"
+                                          IsEnabled="{Binding ShowSpacing}"
+                                          Text="{Binding Spacing}"
+                                          Width="216"
+                                          Minimum="-20"
+                                          Maximum="1000"
+                                          KeyDown="EditDialogNumberBox_KeyDown"
+                                          SpinButtonPlacementMode="Compact"
+                                          HorizontalAlignment="Left"
+                                          VerticalAlignment="Center"
+                                          AutomationProperties.Name="{x:Static props:Resources.Space_Around_Zones}"
+                                          AutomationProperties.LabeledBy="{Binding ElementName=spacingTitle}" />
+                            <TextBlock Text="{x:Static props:Resources.Pixels}"
+                                       Margin="6,-4,0,0"
+                                       FontSize="12"
+                                       Foreground="{DynamicResource SecondaryForegroundBrush}"
+                                       TextWrapping="Wrap"
+                                       VerticalAlignment="Center" />
+
+                            <ui:ToggleSwitch x:Name="spaceAroundSetting"
+                                             IsOn="{Binding ShowSpacing}"
+                                             Margin="12,0,0,0"
+                                             OffContent=""
+                                             OnContent=""
+                                             ui:FocusVisualHelper.FocusVisualMargin="-3,-3,8,-3"
+                                             VerticalAlignment="Center"
+                                             AutomationProperties.Name="{x:Static props:Resources.Show_Space_Zones}">
+                                <ui:ToggleSwitch.Resources>
+                                    <sys:Double x:Key="ToggleSwitchThemeMinWidth">0</sys:Double>
+                                </ui:ToggleSwitch.Resources>
+                            </ui:ToggleSwitch>
+                               
+                        </StackPanel>
+                    </StackPanel>
+
+
+
+
+                    <StackPanel Margin="0, 12, 0, 0">
+                        <TextBlock Text="{x:Static props:Resources.Distance_adjacent_zones}"
+                                   x:Name="distanceTitle"
+                                   Margin="28,0,0,4"
+                                   TextWrapping="Wrap" />
+                        <StackPanel Orientation="Horizontal">
+                            <TextBlock FontFamily="Segoe MDL2 Assets"
+                                       VerticalAlignment="Center"
+                                       FontSize="16"
+                                       ToolTip="{x:Static props:Resources.Distance_adjacent_zones}"
+                                       Text="&#xF617;" />
+
+                            <ui:NumberBox Text="{Binding SensitivityRadius}"
+                                          Width="216"
+                                          Minimum="0"
+                                          Maximum="1000"
+                                          KeyDown="EditDialogNumberBox_KeyDown"
+                                          Margin="12,0,0,0"
+                                          AutomationProperties.Name="{x:Static props:Resources.Distance_adjacent_zones}"
+                                          AutomationProperties.LabeledBy="{Binding ElementName=distanceTitle}"
+                                          SpinButtonPlacementMode="Compact"
+                                          HorizontalAlignment="Left" />
+                            <TextBlock Text="{x:Static props:Resources.Pixels}"
+                                       Margin="6,-4,0,0"
+                                       FontSize="12"
+                                       Foreground="{DynamicResource SecondaryForegroundBrush}"
+                                       TextWrapping="Wrap"
+                                       VerticalAlignment="Center" />
+                        </StackPanel>
+                    </StackPanel>
                 </StackPanel>
             </Grid>
         </ui:ContentDialog>

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

@@ -421,5 +421,14 @@ namespace FancyZonesEditor
         {
             _openedDialog = null;
         }
+
+        private void EditDialogNumberBox_KeyDown(object sender, KeyEventArgs e)
+        {
+            // Making sure that pressing Enter when changing values in a NumberBox will not close the edit dialog.
+            if (e.Key == Key.Enter)
+            {
+                e.Handled = true;
+            }
+        }
     }
 }

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

@@ -250,7 +250,7 @@ namespace FancyZonesEditor.Properties {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Distance to highlight adjacent zones.
+        ///   Looks up a localized string similar to Highlight distance.
         /// </summary>
         public static string Distance_adjacent_zones {
             get {
@@ -537,6 +537,15 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Number of zones.
+        /// </summary>
+        public static string Number_of_zones {
+            get {
+                return ResourceManager.GetString("Number_of_zones", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Number of zones.
         /// </summary>
@@ -546,6 +555,15 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to px.
+        /// </summary>
+        public static string Pixels {
+            get {
+                return ResourceManager.GetString("Pixels", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to None.
         /// </summary>
@@ -556,11 +574,20 @@ namespace FancyZonesEditor.Properties {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Select a key to quickly apply the layout (Win + Ctrl + Alt + key).
+        ///   Looks up a localized string similar to Press Win + Ctrl + Alt + selected key to apply this layout.
         /// </summary>
-        public static string QuickKey_Select {
+        public static string QuickKey_Description {
             get {
-                return ResourceManager.GetString("QuickKey_Select", resourceCulture);
+                return ResourceManager.GetString("QuickKey_Description", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Layout shortcut.
+        /// </summary>
+        public static string QuickKey_Title {
+            get {
+                return ResourceManager.GetString("QuickKey_Title", resourceCulture);
             }
         }
         

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

@@ -145,7 +145,8 @@
     <value>Custom layout creator</value>
   </data>
   <data name="Distance_adjacent_zones" xml:space="preserve">
-    <value>Distance to highlight adjacent zones</value>
+    <value>Highlight distance</value>
+    <comment>Distance of when an adjacent zone should light up when the window is close to it</comment>
   </data>
   <data name="Edit_Layout" xml:space="preserve">
     <value>Edit layout</value>
@@ -343,10 +344,20 @@
     <value>Splitter:</value>
     <comment>Title for concept: A segmenter visual for splitting one item into two.  This would be the vertical line</comment>
   </data>
-  <data name="QuickKey_Select" xml:space="preserve">
+  <data name="QuickKey_Description" xml:space="preserve">
-    <value>Select a key to quickly apply the layout (Win + Ctrl + Alt + key)</value>
+    <value>Press Win + Ctrl + Alt + selected key to apply this layout</value>
   </data>
   <data name="Quick_Key_None" xml:space="preserve">
     <value>None</value>
   </data>
+  <data name="Number_of_zones" xml:space="preserve">
+    <value>Number of zones</value>
+  </data>
+  <data name="Pixels" xml:space="preserve">
+    <value>px</value>
+    <comment>Abbreviation of pixels</comment>
+  </data>
+  <data name="QuickKey_Title" xml:space="preserve">
+    <value>Layout shortcut</value>
+  </data>
 </root>

src/modules/fancyzones/editor/FancyZonesEditor/Styles/ButtonStyles.xaml

@@ -16,7 +16,7 @@
         <Setter Property="VerticalContentAlignment" Value="Top" />
         <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
         <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-        <Setter Property="MinWidth" Value="120" />
+        <Setter Property="MinWidth" Value="0" />
         <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
         <Setter Property="ui:FocusVisualHelper.UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" />
         <Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="0" />