Fixed narrator not announcing RangeSelector values / changes

Microsoft.Toolkit.Uwp.UI.Controls.Input/RangeSelector/RangeSelector.Input.Drag.cs

@@ -70,7 +70,7 @@ private double DragWidth()
             return _containerCanvas.ActualWidth - _maxThumb.Width;
         }
 
-        private double DragThumb(Thumb thumb, double min, double max, double nextPos)
+        private double DragThumb(RangeThumb thumb, double min, double max, double nextPos)
         {
             nextPos = Math.Max(min, nextPos);
             nextPos = Math.Min(max, nextPos);
@@ -89,7 +89,7 @@ private double DragThumb(Thumb thumb, double min, double max, double nextPos)
             return Minimum + ((nextPos / DragWidth()) * (Maximum - Minimum));
         }
 
-        private void Thumb_DragStarted(Thumb thumb)
+        private void Thumb_DragStarted(RangeThumb thumb)
         {
             var useMin = thumb == _minThumb;
             var otherThumb = useMin ? _maxThumb : _minThumb;

Microsoft.Toolkit.Uwp.UI.Controls.Input/RangeSelector/RangeSelector.cs

@@ -37,8 +37,8 @@ public partial class RangeSelector : Control
 
         private Border _outOfRangeContentContainer;
         private Rectangle _activeRectangle;
-        private Thumb _minThumb;
-        private Thumb _maxThumb;
+        private RangeThumb _minThumb;
+        private RangeThumb _maxThumb;
         private Canvas _containerCanvas;
         private Grid _controlGrid;
         private double _oldValue;
@@ -98,8 +98,8 @@ protected override void OnApplyTemplate()
 
             _outOfRangeContentContainer = GetTemplateChild("OutOfRangeContentContainer") as Border;
             _activeRectangle = GetTemplateChild("ActiveRectangle") as Rectangle;
-            _minThumb = GetTemplateChild("MinThumb") as Thumb;
-            _maxThumb = GetTemplateChild("MaxThumb") as Thumb;
+            _minThumb = GetTemplateChild("MinThumb") as RangeThumb;
+            _maxThumb = GetTemplateChild("MaxThumb") as RangeThumb;
             _containerCanvas = GetTemplateChild("ContainerCanvas") as Canvas;
             _controlGrid = GetTemplateChild("ControlGrid") as Grid;
             _toolTip = GetTemplateChild("ToolTip") as Grid;

Microsoft.Toolkit.Uwp.UI.Controls.Input/RangeSelector/RangeSelector.xaml

@@ -2,6 +2,21 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
 
+    <Style x:Key="RangeThumbStyle"
+           TargetType="controls:RangeThumb">
+        <Setter Property="UseSystemFocusVisuals" Value="True" />
+        <Setter Property="Height" Value="24" />
+        <Setter Property="Width" Value="8" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:RangeThumb">
+                    <Thumb x:Name="InternalThumb"
+                           Style="{StaticResource SliderThumbStyle}" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style x:Key="SliderThumbStyle"
            TargetType="Thumb">
         <Setter Property="UseSystemFocusVisuals" Value="True" />
@@ -34,45 +49,6 @@
                 <ControlTemplate TargetType="controls:RangeSelector">
                     <Grid x:Name="ControlGrid"
                           Height="24">
-                        <Border x:Name="OutOfRangeContentContainer"
-                                Grid.Column="1"
-                                Background="Transparent">
-                            <Rectangle x:Name="BackgroundElement"
-                                       Height="2"
-                                       Fill="{TemplateBinding Background}" />
-                        </Border>
-
-                        <Canvas x:Name="ContainerCanvas"
-                                Grid.Column="1"
-                                Background="Transparent">
-                            <Rectangle x:Name="ActiveRectangle"
-                                       Height="2"
-                                       HorizontalAlignment="Stretch"
-                                       VerticalAlignment="Center"
-                                       Fill="{TemplateBinding Foreground}" />
-
-                            <Grid x:Name="ToolTip"
-                                  Margin="0,-44,0,8"
-                                  Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
-                                  BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
-                                  BorderThickness="1"
-                                  Visibility="Collapsed">
-                                <TextBlock x:Name="ToolTipText"
-                                           Margin="8"
-                                           Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" />
-                            </Grid>
-
-                            <Thumb x:Name="MinThumb"
-                                   AutomationProperties.Name="Min thumb"
-                                   IsTabStop="True"
-                                   Style="{StaticResource SliderThumbStyle}"
-                                   TabIndex="0" />
-                            <Thumb x:Name="MaxThumb"
-                                   AutomationProperties.Name="Max thumb"
-                                   IsTabStop="True"
-                                   Style="{StaticResource SliderThumbStyle}"
-                                   TabIndex="1" />
-                        </Canvas>
 
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
@@ -142,6 +118,53 @@
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
+
+                        <Border x:Name="OutOfRangeContentContainer"
+                                Grid.Column="1"
+                                Background="Transparent">
+                            <Rectangle x:Name="BackgroundElement"
+                                       Height="2"
+                                       Fill="{TemplateBinding Background}" />
+                        </Border>
+
+                        <Canvas x:Name="ContainerCanvas"
+                                Grid.Column="1"
+                                Background="Transparent">
+                            <Rectangle x:Name="ActiveRectangle"
+                                       Height="2"
+                                       HorizontalAlignment="Stretch"
+                                       VerticalAlignment="Center"
+                                       Fill="{TemplateBinding Foreground}" />
+
+                            <Grid x:Name="ToolTip"
+                                  Margin="0,-44,0,8"
+                                  Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
+                                  BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
+                                  BorderThickness="1"
+                                  Visibility="Collapsed">
+                                <TextBlock x:Name="ToolTipText"
+                                           Margin="8"
+                                           Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" />
+                            </Grid>
+
+                            <controls:RangeThumb x:Name="MinThumb"
+                                                 AutomationProperties.Name="Min thumb"
+                                                 IsTabStop="True"
+                                                 Maximum="{Binding Maximum, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                                 Minimum="{Binding Minimum, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                                 Style="{StaticResource RangeThumbStyle}"
+                                                 TabIndex="0"
+                                                 Value="{Binding RangeStart, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+
+                            <controls:RangeThumb x:Name="MaxThumb"
+                                                 AutomationProperties.Name="Max thumb"
+                                                 IsTabStop="True"
+                                                 Maximum="{Binding Maximum, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                                 Minimum="{Binding Minimum, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                                 Style="{StaticResource RangeThumbStyle}"
+                                                 TabIndex="1"
+                                                 Value="{Binding RangeEnd, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                        </Canvas>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>

Microsoft.Toolkit.Uwp.UI.Controls.Input/RangeSelector/RangeThumb.cs

@@ -0,0 +1,78 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Automation.Peers;
+using Windows.UI.Xaml.Controls.Primitives;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// A thumb that represents a value within a range.
+    /// </summary>
+    [TemplatePart(Name = "InternalThumb", Type = typeof(Thumb))]
+    public class RangeThumb : RangeBase
+    {
+        private Thumb _thumb;
+
+        /// <inheritdoc cref="Thumb.DragStarted"/>
+        public event EventHandler<DragStartedEventArgs> DragStarted;
+
+        /// <inheritdoc cref="Thumb.DragCompleted"/>
+        public event EventHandler<DragCompletedEventArgs> DragCompleted;
+
+        /// <inheritdoc cref="Thumb.DragDelta"/>
+        public event EventHandler<DragDeltaEventArgs> DragDelta;
+
+        /// <inheritdoc/>
+        protected override void OnApplyTemplate()
+        {
+            _thumb = GetTemplateChild("InternalThumb") as Thumb;
+
+            if (_thumb is not null)
+            {
+                AttachEvents(_thumb);
+            }
+
+            Unloaded += RangeThumb_Unloaded;
+
+            base.OnApplyTemplate();
+        }
+
+        private void AttachEvents(Thumb thumb)
+        {
+            thumb.DragCompleted += Thumb_DragCompleted;
+            thumb.DragStarted += Thumb_DragStarted;
+            thumb.DragDelta += Thumb_DragDelta;
+        }
+
+        private void DetachEvents(Thumb thumb)
+        {
+            thumb.DragCompleted -= Thumb_DragCompleted;
+            thumb.DragStarted -= Thumb_DragStarted;
+            thumb.DragDelta -= Thumb_DragDelta;
+        }
+
+        private void Thumb_DragStarted(object sender, DragStartedEventArgs e) => DragStarted?.Invoke(this, e);
+
+        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e) => DragDelta?.Invoke(this, e);
+
+        private void Thumb_DragCompleted(object sender, DragCompletedEventArgs e) => DragCompleted?.Invoke(this, e);
+
+        private void RangeThumb_Unloaded(object sender, RoutedEventArgs e)
+        {
+            if (_thumb is not null)
+            {
+                DetachEvents(_thumb);
+            }
+        }
+
+        /// <inheritdoc/>
+        protected override AutomationPeer OnCreateAutomationPeer()
+        {
+            return new RangeThumbAutomationPeer(this);
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Input/RangeSelector/RangeThumbAutomationPeer.cs

@@ -0,0 +1,35 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Automation.Peers;
+using Windows.UI.Xaml.Controls.Primitives;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// A class that provides a Microsoft UI Automation peer implementation for <see cref="RangeThumb"/>.
+    /// </summary>
+    public class RangeThumbAutomationPeer : RangeBaseAutomationPeer
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="RangeThumbAutomationPeer"/> class.
+        /// </summary>
+        /// <param name="owner">The owner element to create for.</param>
+        public RangeThumbAutomationPeer(RangeThumb owner)
+            : base(owner)
+        {
+        }
+
+        /// <inheritdoc/>
+        protected override AutomationControlType GetAutomationControlTypeCore() => AutomationControlType.Slider;
+
+        /// <inheritdoc/>
+        protected override string GetClassNameCore()
+        {
+            return nameof(RangeThumb);
+        }
+    }
+}