feat: implement vertical tooltip placement for RangeSelector control

Author: Illustar0

components/RangeSelector/src/RangeSelector.Input.Drag.cs

@@ -111,6 +111,7 @@ private double DragThumbVertical(Thumb? thumb, double min, double max, double ne
             var ttHeight = _toolTip.ActualHeight / 2;
 
             Canvas.SetTop(_toolTip, thumbCenter - ttHeight);
+            UpdateToolTipPositionForVertical();
         }
 
         // Invert: top position (0) = Maximum, bottom position (DragWidth) = Minimum
@@ -130,23 +131,33 @@ private void Thumb_DragStarted(Thumb thumb)
 
         if (_toolTip != null)
         {
-            _toolTip.Visibility = Visibility.Visible;
-            _toolTip.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
-
-            if (isHorizontal)
+            if (!isHorizontal && VerticalToolTipPlacement == VerticalToolTipPlacement.None)
             {
-                var thumbCenter = _absolutePosition + (thumb.Width / 2);
-                Canvas.SetLeft(_toolTip, thumbCenter - (_toolTip.ActualWidth / 2));
+                _toolTip.Visibility = Visibility.Collapsed;
             }
             else
             {
-                var thumbCenter = _absolutePosition + (thumb.Height / 2);
-                Canvas.SetTop(_toolTip, thumbCenter - (_toolTip.ActualHeight / 2));
-            }
-
-            if (_toolTipText != null)
-            {
-                UpdateToolTipText(this, _toolTipText, useMin ? RangeStart : RangeEnd);
+                _toolTip.Visibility = Visibility.Visible;
+
+                // Update tooltip text first so Measure gets accurate size
+                if (_toolTipText != null)
+                {
+                    UpdateToolTipText(this, _toolTipText, useMin ? RangeStart : RangeEnd);
+                }
+
+                _toolTip.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
+
+                if (isHorizontal)
+                {
+                    var thumbCenter = _absolutePosition + (thumb.Width / 2);
+                    Canvas.SetLeft(_toolTip, thumbCenter - (_toolTip.DesiredSize.Width / 2));
+                }
+                else
+                {
+                    var thumbCenter = _absolutePosition + (thumb.Height / 2);
+                    Canvas.SetTop(_toolTip, thumbCenter - (_toolTip.DesiredSize.Height / 2));
+                    UpdateToolTipPositionForVertical();
+                }
             }
         }
 

components/RangeSelector/src/RangeSelector.Properties.cs

@@ -69,6 +69,16 @@ public partial class RangeSelector : Control
             typeof(RangeSelector),
             new PropertyMetadata(DefaultStepFrequency));
 
+    /// <summary>
+    /// Identifies the <see cref="VerticalToolTipPlacement"/> property.
+    /// </summary>
+    public static readonly DependencyProperty VerticalToolTipPlacementProperty =
+        DependencyProperty.Register(
+            nameof(VerticalToolTipPlacement),
+            typeof(VerticalToolTipPlacement),
+            typeof(RangeSelector),
+            new PropertyMetadata(VerticalToolTipPlacement.Right));
+
     /// <summary>
     /// Gets or sets the absolute minimum value of the range.
     /// </summary>
@@ -141,6 +151,19 @@ public Orientation Orientation
         set => SetValue(OrientationProperty, value);
     }
 
+    /// <summary>
+    /// Gets or sets the placement of the tooltip for the vertical range selector.
+    /// This property only takes effect when <see cref="Orientation"/> is set to <see cref="Orientation.Vertical"/>.
+    /// </summary>
+    /// <value>
+    /// The placement of the tooltip. Default is <see cref="VerticalToolTipPlacement.Right"/>.
+    /// </value>
+    public VerticalToolTipPlacement VerticalToolTipPlacement
+    {
+        get => (VerticalToolTipPlacement)GetValue(VerticalToolTipPlacementProperty);
+        set => SetValue(VerticalToolTipPlacementProperty, value);
+    }
+
     private static void OrientationChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         var rangeSelector = d as RangeSelector;

components/RangeSelector/src/RangeSelector.ToolTip.Placement.cs

@@ -0,0 +1,27 @@
+// 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.
+
+namespace CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// Enumeration used to determine the placement of the tooltip
+/// for the vertical RangeSelector.
+/// </summary>
+public enum VerticalToolTipPlacement
+{
+    /// <summary>
+    /// Tooltip is placed to the right of the thumb.
+    /// </summary>
+    Right,
+
+    /// <summary>
+    /// Tooltip is placed to the left of the thumb.
+    /// </summary>
+    Left,
+
+    /// <summary>
+    /// Tooltip is not displayed.
+    /// </summary>
+    None
+}

components/RangeSelector/src/RangeSelector.cs

@@ -329,4 +329,30 @@ private void RangeSelector_IsEnabledChanged(object sender, DependencyPropertyCha
     {
         VisualStateManager.GoToState(this, IsEnabled ? NormalState : DisabledState, true);
     }
+
+    private void UpdateToolTipPositionForVertical()
+    {
+        if (_toolTip == null || _containerCanvas == null)
+        {
+            return;
+        }
+
+        // Offset to position tooltip beside the thumb
+        const double toolTipOffset = 52;
+
+        switch (VerticalToolTipPlacement)
+        {
+            case VerticalToolTipPlacement.Right:
+                Canvas.SetLeft(_toolTip, toolTipOffset);
+                break;
+            case VerticalToolTipPlacement.Left:
+                _toolTip.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
+                var toolTipWidth = _toolTip.DesiredSize.Width;
+                Canvas.SetLeft(_toolTip, -toolTipWidth - (toolTipOffset - _containerCanvas.ActualWidth));
+                break;
+            case VerticalToolTipPlacement.None:
+                _toolTip.Visibility = Visibility.Collapsed;
+                break;
+        }
+    }
 }

components/RangeSelector/src/RangeSelector.xaml

@@ -262,7 +262,7 @@
                                         <Setter Target="MaxThumb.Margin" Value="7,0,0,0" />
                                         <Setter Target="MaxThumb.HorizontalAlignment" Value="Center" />
                                         <Setter Target="MaxThumb.VerticalAlignment" Value="Top" />
-                                        <Setter Target="ToolTip.Margin" Value="52,0,0,0" />
+                                        <Setter Target="ToolTip.Margin" Value="0" />
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>