[FZEditor]Highlight distance range: slider and fix narrator (#19840)

* announce corrected value

* tooltip

* slider

* announce value

* custom slider announce

* slider slyle

* announce range

* show current value

src/modules/fancyzones/editor/FancyZonesEditor/Controls/CustomSlider.xaml

@@ -0,0 +1,5 @@
+<Slider x:Class="FancyZonesEditor.Controls.CustomSlider"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:FancyZonesEditor.Controls">
+</Slider>

src/modules/fancyzones/editor/FancyZonesEditor/Controls/CustomSlider.xaml.cs

@@ -0,0 +1,26 @@
+// 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.
+
+namespace FancyZonesEditor.Controls
+{
+    using System.Windows;
+    using System.Windows.Automation.Peers;
+    using System.Windows.Controls;
+
+    /// <summary>
+    /// Interaction logic for CustomSlider.xaml
+    /// </summary>
+    public partial class CustomSlider : Slider
+    {
+        public CustomSlider()
+        {
+            InitializeComponent();
+        }
+
+        protected override AutomationPeer OnCreateAutomationPeer()
+        {
+            return new CustomSliderAutomationPeer(this);
+        }
+    }
+}

src/modules/fancyzones/editor/FancyZonesEditor/Controls/CustomSliderAutomationPeer.cs

@@ -0,0 +1,41 @@
+// 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.
+
+namespace FancyZonesEditor.Controls
+{
+    using System.Globalization;
+    using System.Windows.Automation.Peers;
+    using System.Windows.Controls;
+
+    internal class CustomSliderAutomationPeer : SliderAutomationPeer
+    {
+        public CustomSliderAutomationPeer(Slider owner)
+            : base(owner)
+        {
+        }
+
+        protected override string GetNameCore()
+        {
+            var element = this.Owner as Slider;
+            if (element == null)
+            {
+                return string.Empty;
+            }
+
+            string announce = string.Format(
+                CultureInfo.CurrentCulture,
+                Properties.Resources.Distance_adjacent_zones_slider_announce,
+                element.Minimum,
+                element.Maximum,
+                element.Value);
+
+            return announce;
+        }
+
+        protected override AutomationControlType GetAutomationControlTypeCore()
+        {
+            return AutomationControlType.Custom;
+        }
+    }
+}

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

@@ -11,7 +11,8 @@
         xmlns:props="clr-namespace:FancyZonesEditor.Properties"
         xmlns:local1="clr-namespace:FancyZonesEditor.ViewModels"
         xmlns:controls="clr-namespace:ModernWpf.Controls;assembly=ModernWpf"
-        xmlns:sys="clr-namespace:System;assembly=mscorlib"
+        xmlns:sys="clr-namespace:System;assembly=mscorlib" 
+        xmlns:fancyZonesControls="clr-namespace:FancyZonesEditor.Controls"
         mc:Ignorable="d"
         Title="{x:Static props:Resources.Fancy_Zones_Editor_App_Title}"
         ui:WindowHelper.UseModernWindowStyle="True"
@@ -174,6 +175,8 @@
                 </Button>
             </Grid>
         </DataTemplate>
+
+        <Style TargetType="{x:Type fancyZonesControls:CustomSlider}" BasedOn="{StaticResource {x:Type Slider}}"></Style>
     </Window.Resources>
 
     <Grid>
@@ -599,21 +602,32 @@
                                        VerticalAlignment="Center"
                                        FontSize="16"
                                        ToolTip="{x:Static props:Resources.Distance_adjacent_zones}"
-                                        AutomationProperties.Name="{x:Static props:Resources.Distance_adjacent_zones}"
                                        Text="&#xE78A;" />
 
-                            <ui:NumberBox Text="{Binding SensitivityRadius}"
-                                          Width="216"
-                                          Minimum="0"
-                                          Maximum="1000"
-                                          KeyDown="EditDialogNumberBox_KeyDown"
-                                          Margin="12,0,0,0"
-                                          Loaded="NumberBox_Loaded"
-                                          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}"
+                            <fancyZonesControls:CustomSlider x:Name="SensitivityInput"
+                                Value="{Binding SensitivityRadius}"
+                                Minimum="{Binding SensitivityRadiusMinimum}"
+                                Maximum="{Binding SensitivityRadiusMaximum}"
+                                IsMoveToPointEnabled="True"
+                                AutomationProperties.Name="{x:Static props:Resources.Distance_adjacent_zones}"
+                                AutomationProperties.HelpText="{Binding SensitivityRadius}"
+                                ToolTip="{Binding SensitivityRadius}"
+                                ValueChanged="SensitivityInput_ValueChanged"
+                                MinWidth="216"
+                                Margin="12,0,0,0"
+                                HorizontalAlignment="Left"
+                                SmallChange="1" 
+                                LargeChange="10"
+                                DockPanel.Dock="Top"/>
+
+                                <TextBlock
+                                    Text="{Binding SensitivityRadius}"
+                                    Margin="6,8,0,0"
+                                    FontSize="12"
+                                    Foreground="{DynamicResource SecondaryForegroundBrush}"
+                                    TextWrapping="Wrap" />
+
+                                <TextBlock Text="{x:Static props:Resources.Pixels}"
                                        Margin="6,-4,0,0"
                                        FontSize="12"
                                        Foreground="{DynamicResource SecondaryForegroundBrush}"

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

@@ -14,6 +14,7 @@
 using FancyZonesEditor.Logs;
 using FancyZonesEditor.Models;
 using FancyZonesEditor.Utils;
+using ModernWpf.Automation.Peers;
 using ModernWpf.Controls;
 
 namespace FancyZonesEditor
@@ -562,5 +563,26 @@ private void EditLayoutDialogTitle_Loaded(object sender, EventArgs e)
             EditLayoutDialogTitle.TextTrimming = TextTrimming.CharacterEllipsis;
             EditLayoutDialogTitle.TextWrapping = TextWrapping.NoWrap;
         }
+
+        private void SensitivityInput_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+            if (AutomationPeer.ListenerExists(AutomationEvents.PropertyChanged))
+            {
+                SliderAutomationPeer peer =
+                    FrameworkElementAutomationPeer.FromElement(SensitivityInput) as SliderAutomationPeer;
+                string activityId = "sliderValueChanged";
+
+                string value = string.Format(CultureInfo.CurrentCulture, Properties.Resources.Slider_Value, SensitivityInput.Value);
+
+                if (peer != null && value != null)
+                {
+                    peer.RaiseNotificationEvent(
+                        AutomationNotificationKind.ActionCompleted,
+                        AutomationNotificationProcessing.ImportantMostRecent,
+                        value,
+                        activityId);
+                }
+            }
+        }
     }
 }

src/modules/fancyzones/editor/FancyZonesEditor/Models/LayoutModel.cs

@@ -163,6 +163,22 @@ public int SensitivityRadius
 
         private int _sensitivityRadius = LayoutSettings.DefaultSensitivityRadius;
 
+        public int SensitivityRadiusMinimum
+        {
+            get
+            {
+                return 0;
+            }
+        }
+
+        public int SensitivityRadiusMaximum
+        {
+            get
+            {
+                return 1000;
+            }
+        }
+
         public List<string> QuickKeysAvailable
         {
             get

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

@@ -408,4 +408,10 @@
   <data name="Error_Parsing_Custom_Layouts_Message" xml:space="preserve">
     <value>An error occurred while parsing custom layouts.</value>
   </data>
+  <data name="Distance_adjacent_zones_slider_announce" xml:space="preserve">
+    <value>Highlight distance slider. Possible range is from {0} to {1}. Value is {2}.</value>
+  </data>
+  <data name="Slider_Value" xml:space="preserve">
+    <value>{0} pixels</value>
+  </data>
 </root>