WPF学习：Slider — 冒泡显示值

想做一个下图所示的Slider，以冒泡的方式显示其Value值，该怎么做呢？

功能要求，当鼠标放在滑块上的时候，冒“泡”显示值；当滑块移动的时候，“泡”跟随移动。

看似简单的功能，但要完美实现，确实要花费不少心思的。

方法一：使用Canvas面板。

1. 改造Slider
   Slider的样式改造，比较简单，重写其模板即可。

  <Slider.Template><ControlTemplate TargetType="Slider"><Border Name="border" SnapsToDevicePixels="True"Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" ><Grid><Border Background="Gray" Height="4" CornerRadius="2"/><Track Name="PART_Track" Grid.Row="1"><Track.DecreaseRepeatButton><RepeatButton><RepeatButton.Template><ControlTemplate TargetType="RepeatButton"><Border Height="4" CornerRadius="2" Background="#FF006CBE"/></ControlTemplate></RepeatButton.Template></RepeatButton></Track.DecreaseRepeatButton><Track.Thumb><Thumb Name="thumb" VerticalAlignment="Center" Focusable="False"><Thumb.Template><ControlTemplate TargetType="Thumb"><Grid><Ellipse Name="thumbEllipse" Width="10" Height="10" Fill="White" StrokeThickness="1" Stroke="#FF006CBE" /></Grid></ControlTemplate></Thumb.Template></Thumb></Track.Thumb></Track></Grid></Border></ControlTemplate></Slider.Template></Slider>

2. 添加“泡”
   很明显，这个“泡”的形状、文字都是一个元素，因此需要使用面板来将两个元素组合起来。这里最好使用Canvas，因为它的子元素是绝对定位的，可以通过Canvas.Left、Canvas.Top等属性安排子元素的位置，且Canvas也不会影响父元素的布局。因此将Slider的模板继续改造一下，如下所示：

 <Slider Name="slider" Width="255"><Slider.Template><ControlTemplate TargetType="Slider"><Border Name="border" SnapsToDevicePixels="True"Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" ><Grid><Border Background="Gray" Height="4" CornerRadius="2"/><Track Name="PART_Track" Grid.Row="1"><Track.DecreaseRepeatButton><RepeatButton><RepeatButton.Template><ControlTemplate TargetType="RepeatButton"><Border Height="4" CornerRadius="2" Background="#FF006CBE"/></ControlTemplate></RepeatButton.Template></RepeatButton></Track.DecreaseRepeatButton><Track.Thumb><Thumb Name="thumb" VerticalAlignment="Center" Focusable="False"><Thumb.Template><ControlTemplate TargetType="Thumb"><Grid><Ellipse Name="thumbEllipse" Width="10" Height="10" Fill="White" StrokeThickness="1" Stroke="#FF006CBE" /><Canvas Name="canvas" Opacity="0"><Grid Canvas.Bottom="10" Canvas.Left="-8"><Path Width="25" Stretch="Uniform" Fill="White" Stroke="#FF006CBE" StrokeThickness="1" Data="M172,633.14a339.4,339.4,0,0,1-169.9-294C2.13,151.76,154.2-.29,341.57-.29S681,151.76,681,339.11a339.38,339.38,0,0,1-169.9,294h0a183.88,183.88,0,0,0-84.27,106.38h0l-85.26,283.61L256.3,739.52A183.88,183.88,0,0,0,172,633.14Z"/><TextBlock HorizontalAlignment="Center" Margin="0,5,0,0" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Slider}, Path=Value, Converter={StaticResource double2Int}}"/></Grid></Canvas></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="canvas" Property="Opacity" Value="1"/></Trigger><Trigger Property="IsDragging" Value="True"><Setter TargetName="canvas" Property="Opacity" Value="1"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Thumb.Template></Thumb></Track.Thumb></Track></Grid></Border></ControlTemplate></Slider.Template></Slider>

红色部分为添加的代码。有两点需要注意：

1. TextBlock.Text属性的绑定，使用了RelativeSource模式。

2. 记得要添加触发器（Trigger），使的Canvas能在指定的状态下显示出来。

以这种方式改的Slider控件，有一个问题：“泡”不能超出窗体显示。也就是说当滑块处于屏幕的边缘时，这个“泡”是显示不出来的。

方法二：使用Window
WPF框架中有Popup控件和Tooltip控件。通过微软的源代码可知，他们的实现都是使用Window控件。即在一定的条件下打开一个Windows，并显示内容，在另一个条件下，则关闭这个Window。

根据这个思路，就可以自定义一个控件，并实现更多的功能

1. 自定义控件
   控件类：FellowPopup，其他的几个类为辅助类。

/// <summary>
/// 坐标系转换类
/// </summary>
public static class CoordinateHelper
{/// <summary>/// 将用户空间坐标系的点，转换为屏幕坐标系的点。/// 已考虑系统Dpi问题/// </summary>/// <param name="relativeTo">可视化对象。它的坐标系原点在左上角</param>/// <param name="point">在可视化对象坐标系中的点</param>/// <returns></returns>public static Point ClientToScreen(Visual relativeTo, Point point){if (relativeTo == null) return point;Point targetToScreen = relativeTo.PointToScreen(point);            // 将point的点转换为屏幕坐标系的点var source = PresentationSource.FromVisual(relativeTo);double dpiX = 96.0, dpiY = 96.0;if (source?.CompositionTarget != null){dpiX = 96.0 * source.CompositionTarget.TransformToDevice.M11;dpiY = 96.0 * source.CompositionTarget.TransformToDevice.M22;}return new Point(targetToScreen.X * 96.0 / dpiX, targetToScreen.Y * 96 / dpiY);}
}public static class DependencyPropertyHelper
{/// <summary>/// 为依赖属性注册值发生改变时的回调方法/// </summary>/// <param name="Register">含有依赖属性的对象</param>/// <param name="dependencyProperty">依赖属性</param>/// <param name="action">要注册的值发生改变时的回调方法</param>/// <param name="runOnceImmediately">是否立即执行一次</param>public static void RegisterDependencyPropertyChanged(this DependencyObject Register, DependencyProperty dependencyProperty, EventHandler action, bool runOnceImmediately = false){DependencyPropertyDescriptor obj = DependencyPropertyDescriptor.FromProperty(dependencyProperty, Register.GetType());if(obj != null) obj.AddValueChanged(Register, action);if(runOnceImmediately) action?.Invoke(Register,new EventArgs());}
}/// <summary>
/// 放置模式
/// </summary>
public enum PlacementMode
{/// <summary>/// 顶部靠左/// </summary>TopLeft,/// <summary>/// 顶部居中/// </summary>TopMiddle,/// <summary>/// 顶部靠右/// </summary>TopRight,/// <summary>/// 左侧居中/// </summary>LeftMiddle,/// <summary>/// 右侧居中/// </summary>RightMiddle,/// <summary>/// 底部靠左/// </summary>BottomLeft,/// <summary>/// 底部居中/// </summary>BottomMiddle,/// <summary>/// 底部靠右/// </summary>BottomRight
}/// <summary>
/// 可跟随控件移动的弹出提示框。
/// </summary>
public class FellowPopup : ContentControl
{private Window _popupWnd;/// <summary>/// 水平位置偏移量/// </summary>public double HorizontalOffset{get => (double)GetValue(HorizontalOffsetProperty);set => SetValue(HorizontalOffsetProperty, value);}internal static readonly DependencyProperty HorizontalOffsetProperty = DependencyProperty.Register("HorizontalOffset", typeof(double), typeof(FellowPopup), new PropertyMetadata(0.0d, OnValueChanged));/// <summary>/// 垂直偏移量/// </summary>public double VerticalOffset{get => (double)GetValue(VerticalOffsetProperty);set => SetValue(VerticalOffsetProperty, value);}internal static readonly DependencyProperty VerticalOffsetProperty = DependencyProperty.Register("VerticalOffset", typeof(double), typeof(FellowPopup), new PropertyMetadata(0.0d, OnValueChanged));/// <summary>/// 放置位置/// </summary>public PlacementMode Placement{get => (PlacementMode)GetValue(PlacementProperty);set => SetValue(PlacementProperty, value);}internal static readonly DependencyProperty PlacementProperty = DependencyProperty.Register("Placement", typeof(PlacementMode), typeof(FellowPopup), new PropertyMetadata(PlacementMode.BottomRight,OnValueChanged));/// <summary>/// 放置的目标元素/// </summary>public FrameworkElement PlacementTarget{get => (FrameworkElement)GetValue(PlacementTargetProperty);set => SetValue(PlacementTargetProperty, value);}internal static readonly DependencyProperty PlacementTargetProperty = DependencyProperty.Register("PlacementTarget", typeof(FrameworkElement), typeof(FellowPopup), new PropertyMetadata(null,OnValueChanged));private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){FellowPopup popup = (FellowPopup)d;popup.UpdateLocation();}/// <summary>/// 是否打开。当其为true时，则显示提示框，false则不显示提示框/// </summary>public bool IsOpen{get => (bool)GetValue(IsOpenProperty);set => SetValue(IsOpenProperty, value);}internal static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register("IsOpen", typeof(bool), typeof(FellowPopup), new PropertyMetadata(false,OnIsOpenChanged));private static void OnIsOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){FellowPopup fp = d as FellowPopup;if((bool)e.NewValue ) fp.Open();else  fp.Close();}#region 触发位置更新/// <summary>/// 触发位置更新的控件/// </summary>public FrameworkElement TriggerElement{get => (FrameworkElement)GetValue(TriggerElementProperty);set => SetValue(TriggerElementProperty, value);}internal static readonly DependencyProperty TriggerElementProperty = DependencyProperty.Register("TriggerElement", typeof(UIElement), typeof(FellowPopup), new PropertyMetadata(null, OnTriggerChanged));/// <summary>/// 触发位置更新的控件的属性/// 此属性应该是TriggerElement的属性。/// 当此属性的值发生变化时，会触发FellowPopup的UpdateLocation方法。/// </summary>public DependencyProperty TriggerProperty{get => (DependencyProperty)GetValue(TriggerPropertyProperty);set => SetValue(TriggerPropertyProperty, value);}internal static readonly DependencyProperty TriggerPropertyProperty = DependencyProperty.Register("TriggerProperty", typeof(DependencyProperty), typeof(FellowPopup), new PropertyMetadata(null, OnTriggerChanged));private static void OnTriggerChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){FellowPopup fp = (FellowPopup)d;if (fp.TriggerElement == null || fp.TriggerProperty == null) return;// 如果定义属性的类，与TriggerElement类相同，或者TriggerElement类是它的子类Type propertyType = fp.TriggerProperty.OwnerType;Type elementType = fp.TriggerElement.GetType();if ((elementType != propertyType) && (!elementType.IsSubclassOf(propertyType))) throw new ArgumentException("TriggerElement不包含TriggerProperty属性");DependencyPropertyHelper.RegisterDependencyPropertyChanged(fp.TriggerElement, fp.TriggerProperty, delegate (object sender, EventArgs args){fp.UpdateLocation();}, false);}#endregionstatic FellowPopup(){DefaultStyleKeyProperty.OverrideMetadata(typeof(FellowPopup), new FrameworkPropertyMetadata(typeof(FellowPopup)));}/// <summary>/// 打开窗体/// </summary>private void Open(){_popupWnd = new Window(){Topmost = true,ShowActivated = false,AllowsTransparency = true,WindowStyle = WindowStyle.None,BorderThickness = new Thickness(0),SizeToContent = SizeToContent.WidthAndHeight,WindowStartupLocation = WindowStartupLocation.Manual,Background = this.Background,Content = this.Content,ContentStringFormat = this.ContentStringFormat,ContentTemplate = this.ContentTemplate,ContentTemplateSelector = this.ContentTemplateSelector,};UpdateLocation();_popupWnd.Show();}// 关闭_popup窗体，并回收private void Close(){if (_popupWnd != null){_popupWnd.Close();GC.SuppressFinalize(_popupWnd);}}/// <summary>/// 更新弹出窗体的位置。/// </summary>private void UpdateLocation(){if (_popupWnd == null) return;if(PlacementTarget == null){_popupWnd.Left = 0;_popupWnd.Top = 0;return;}double contentWidth = _popupWnd.Content == null ? 0 : ((FrameworkElement)_popupWnd.Content).ActualWidth;double contentHeght = _popupWnd.Content == null ? 0 : ((FrameworkElement)_popupWnd.Content).ActualHeight;Point targetToScreen;switch (Placement){case PlacementMode.TopLeft:targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget,new Point(0, 0));_popupWnd.Left = targetToScreen.X - contentWidth - HorizontalOffset;_popupWnd.Top = targetToScreen.Y - contentHeght - VerticalOffset;break;case PlacementMode.TopMiddle:targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth/2, 0));_popupWnd.Left = targetToScreen.X - contentWidth / 2 + HorizontalOffset;_popupWnd.Top = targetToScreen.Y - contentHeght - VerticalOffset;break;case PlacementMode.TopRight:targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth, 0));_popupWnd.Left = targetToScreen.X + HorizontalOffset;_popupWnd.Top = targetToScreen.Y - contentHeght - VerticalOffset;break;case PlacementMode.LeftMiddle:targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(0, PlacementTarget.ActualHeight / 2));_popupWnd.Left = targetToScreen.X - contentWidth - HorizontalOffset;_popupWnd.Top = targetToScreen.Y - contentHeght / 2;break;case PlacementMode.RightMiddle:targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth, PlacementTarget.ActualHeight / 2));_popupWnd.Left = targetToScreen.X + HorizontalOffset;_popupWnd.Top = targetToScreen.Y - contentHeght / 2;break;case PlacementMode.BottomLeft:targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(0, PlacementTarget.ActualHeight));_popupWnd.Left = targetToScreen.X - contentWidth - HorizontalOffset;_popupWnd.Top = targetToScreen.Y + VerticalOffset;break;case PlacementMode.BottomMiddle:targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth / 2, PlacementTarget.ActualHeight));_popupWnd.Left = targetToScreen.X - contentWidth / 2 - HorizontalOffset;_popupWnd.Top = targetToScreen.Y + VerticalOffset;break;case PlacementMode.BottomRight:targetToScreen = CoordinateHelper.ClientToScreen(PlacementTarget, new Point(PlacementTarget.ActualWidth, PlacementTarget.ActualHeight));_popupWnd.Left = targetToScreen.X + HorizontalOffset;_popupWnd.Top = targetToScreen.Y + VerticalOffset;break;}}
}

（1）在FellowPopup类中，定义了一个Window类型的变量_popup，用于展示“泡”的内容。PlacementTarget、Placement、HorizontalOffset、VerticalOffset四个属性，用于设置_popup的Left和Top属性，以确定_popup在屏幕中的位置。

这里需要注意，Visual.PointToScreen()方法，参数point是在Visual坐标空间的点，其返回值为将这个点，转换为屏幕坐标系的点。但转换后的点，未考虑到系统DPI及屏幕缩放的情况。因此，需要将这个点再运算，使之成为当前屏幕DPI及缩放模式下的点坐标。

（2）TriggerElement、TriggerProperty属性，用于指示，当哪个元素的哪个属性值发生变化时，更新位置。

要想让一个窗体跟着控件移动，就必须告诉窗体，控件当前的位置在哪儿，然后去计算窗体应该在哪儿。而在WPF中，几乎没有控件会实时报告自己的位置。因此，必须找到元素的一个属性，当元素的“位置”发生改变的时候，这个属性值会发生变化。

除了找到这样的一个属性外，还需要注册一个属性值发生改变时的回调方法。在本例中，滑块在滑动的过程中，本身没有属性（公开的）值发生改变，但是Slider的Value属性会发生改变。因此可以选择它，来触发FellowPopup的位置改变。

由此可见，PlacementTarge系列与TriggerElement可以是不同的。一个用于“布置”窗体，一个用于“触发”窗体。

2. 使用自定义控件
   定义好了控件后，就可以在Xaml中使用它了。继续改造Slider的模板：

    <!-- 别忘了转换器 --><local:Double2IntConverter  x:Key="double2Int" /> <Slider Name="slider" Width="255"><Slider.Template><ControlTemplate TargetType="Slider"><Border Name="border" SnapsToDevicePixels="True"Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" ><Grid><Border Background="Gray" Height="4" CornerRadius="2"/><Track Name="PART_Track" Grid.Row="1"><Track.DecreaseRepeatButton><RepeatButton><RepeatButton.Template><ControlTemplate TargetType="RepeatButton"><Border Height="4" CornerRadius="2" Background="#FF006CBE"/></ControlTemplate></RepeatButton.Template></RepeatButton></Track.DecreaseRepeatButton><Track.Thumb><Thumb Name="thumb" VerticalAlignment="Center" Focusable="False"><Thumb.Template><ControlTemplate TargetType="Thumb"><Grid><Ellipse Name="thumbEllipse" Width="10" Height="10" Fill="White" StrokeThickness="1" Stroke="#FF006CBE" /><local:FellowPopup x:Name="popup" Background="Transparent"Placement="TopMiddle" PlacementTarget="{Binding ElementName=thumbEllipse}"TriggerElement="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Slider}}"TriggerProperty="Slider.Value"><Grid HorizontalAlignment="Center" VerticalAlignment="Center"><Path Width="25" Stretch="Uniform" Fill="White" Stroke="#FF006CBE" StrokeThickness="1" Data="M172,633.14a339.4,339.4,0,0,1-169.9-294C2.13,151.76,154.2-.29,341.57-.29S681,151.76,681,339.11a339.38,339.38,0,0,1-169.9,294h0a183.88,183.88,0,0,0-84.27,106.38h0l-85.26,283.61L256.3,739.52A183.88,183.88,0,0,0,172,633.14Z"/><TextBlock HorizontalAlignment="Center" Margin="0,5,0,0" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Slider}, Path=Value, Converter={StaticResource double2Int}}"/></Grid></local:FellowPopup></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="popup" Property="IsOpen" Value="True"/></Trigger><Trigger Property="IsDragging" Value="True"><Setter TargetName="popup" Property="IsOpen" Value="True"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Thumb.Template></Thumb></Track.Thumb></Track></Grid></Border></ControlTemplate></Slider.Template></Slider>
   

复制代码
注意Placement、TriggerElement、TriggerProperty、Text等属性的绑定方式。

至此，改造搞定。以第二种方式改造的Slider，“泡”可以显示在主窗体之上。没有任何东西会挡住他，以为它是TopMost的。另外也可以再添加自己的逻辑去设置“泡”的位置。

以上为自己学习总结，如有错误，请指正。