wpf - WPF 将工具提示添加到滑块的轨道

Question

我在滑块模板中的轨道上添加了一个工具提示（如下所示），但不是绑定到滑块的当前值，我想绑定到与鼠标所在的“轨道值”对应的值。类似于 youtube 视频滑块允许的内容。因此，用户可以将鼠标悬停在轨道上并查看相应的值，而无需实际移动拇指。

<Track Grid.Row="1" Name="PART_Track" ToolTip="{Binding Path=Value}" ToolTipService.Placement="Mouse">
</Track>

有任何想法吗？谢谢！

Answer 1

I have created an attached behaviour that will find the Track from a slider and subscribe to its MouseMove event to set the tooltip of the track to the corresponding value of the tick the mouse is over. I also added a Prefix property so you can write what the value is:

internal class ShowTickValueBehavior : Behavior<Slider>
{
    private Track track;

    public static readonly DependencyProperty PrefixProperty = DependencyProperty.Register(
        "Prefix",
        typeof(string),
        typeof(ShowTickValueBehavior),
        new PropertyMetadata(default(string)));

    public string Prefix
    {
        get
        {
            return (string)this.GetValue(PrefixProperty);
        }
        set
        {
            this.SetValue(PrefixProperty, value);
        }
    }

    protected override void OnAttached()
    {
        this.AssociatedObject.Loaded += this.AssociatedObjectOnLoaded;
        base.OnAttached();
    }

    protected override void OnDetaching()
    {
        this.track.MouseMove -= this.TrackOnMouseMove;
        this.track = null;
        base.OnDetaching();
    }

    private void AssociatedObjectOnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        this.AssociatedObject.Loaded -= this.AssociatedObjectOnLoaded;
        this.track = (Track)this.AssociatedObject.Template.FindName("PART_Track", this.AssociatedObject);
        this.track.MouseMove += this.TrackOnMouseMove;
    }

    private void TrackOnMouseMove(object sender, MouseEventArgs mouseEventArgs)
    {
        var position = mouseEventArgs.GetPosition(this.track);
        var valueFromPoint = this.track.ValueFromPoint(position);
        var floorOfValueFromPoint = (int)Math.Floor(valueFromPoint);
        var toolTip = string.Format(CultureInfo.InvariantCulture, "{0}{1}", this.Prefix, floorOfValueFromPoint);

        ToolTipService.SetToolTip(this.track, toolTip);
    }
}

Usage

<Window x:Class="TestSlider.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-TestSlider"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    >
    <Grid>
        <Slider Name="Slider1"
                IsSnapToTickEnabled="True"
                TickFrequency="1"
                TickPlacement="BottomRight"
                IsMoveToPointEnabled="True"
                Minimum="13"
                Maximum="25"
                >
                <i:Interaction.Behaviors>
                    <local:ShowTickValueBehavior Prefix="Volume: "/>
                </i:Interaction.Behaviors>
        </Slider>
    </Grid>

Result:

Answer 2

首先你需要修改 Slider 控件

    <Slider VerticalAlignment="Center" HorizontalAlignment="Stretch">
        <Slider.Template>
            <ControlTemplate TargetType="{x:Type Slider}">
                <Grid>
                    <xamlTest:ReflectablePopup x:Name="InfoPopup" Width="Auto" Height="Auto" PlacementTarget="{Binding ElementName=Thumb}" Placement="Top" StaysOpen="False" IsOpen="False" AllowsTransparency="True">
                        <Border Padding="2" CornerRadius="3" Background="#555C5C5C">
                            <Label Content="Your Text"></Label>
                        </Border>
                    </xamlTest:ReflectablePopup>
                    <Track x:Name="PART_Track">
                        <Track.Thumb>
                            <Thumb x:Name="Thumb" Width="10" Height="20">
                            </Thumb>
                        </Track.Thumb>
                    </Track>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger SourceName="Thumb" Property="IsDragging" Value="True">
                        <Setter Value="True" TargetName="InfoPopup" Property="IsOpen" />
                    </Trigger>
                    <Trigger SourceName="Thumb" Property="IsDragging" Value="False">
                        <Setter Value="False" TargetName="InfoPopup" Property="IsOpen" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Slider.Template>
    </Slider>

如您所见，我使用 ReflectablePopup 而不是 Popup。因为PlacementTarget移动后 Popup 无法重新定位。

在 ReflectablePopup (C#) 的代码下方：

public class ReflectablePopup : Popup
{
    protected override void OnOpened(EventArgs e)
    {
        var friend = this.PlacementTarget;
        friend.QueryCursor += friend_QueryCursor;

        base.OnOpened(e);
    }

    protected override void OnClosed(EventArgs e)
    {
        var friend = this.PlacementTarget;
        friend.QueryCursor -= friend_QueryCursor;

        base.OnClosed(e);
    }

    private void friend_QueryCursor(object sender, System.Windows.Input.QueryCursorEventArgs e)
    {
        this.HorizontalOffset += +0.1;
        this.HorizontalOffset += -0.1;
    }
}

Answer 3

我想您将不得不创建一个从滑块继承的新控件。您需要实现 mousein/out 和 mousemove，根据鼠标偏移量计算值并更改工具提示。

我认为没有任何属性可以“开箱即用”使用，因此如果您需要考虑重新设置边距等因素，计算可能会相当棘手。