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);
    }
    #endregion

    static 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的。另外也可以再添加自己的逻辑去设置“泡”的位置。

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