wpf - Make Tooltip of WPF slider stay on screen while dragging

Question

I am using a slider control to set the zoom level of an application and i want to show the current zoom level as live to end user. So i decided to show a tooltip on top of slider so user can see the value of zoom level.

But the problem is when user drag the position of slider the Tooltip disappears and i cant see the Tooltip again. I have to change position of mouse an dagain i have to place mouse on top of slider to see what the zoom level is

The xaml i used is this

<Slider                                        
    VerticalAlignment="Center"                                             
    Minimum="50" Maximum="200" Width="150"  Name="ViewZoomlevel" 
    IsMoveToPointEnabled="True" IsSnapToTickEnabled="True"   
    Thumb.DragStarted="ViewZoomlevel_DragStarted" Thumb.DragCompleted="ViewZoomlevel_DragCompleted"                                         
        >
    <Slider.ToolTip >
        <ToolTip StaysOpen="True" ToolTipService.ShowDuration="12000" Content="{Binding RelativeSource={RelativeSource Self},
                    Path=PlacementTarget.Value}" 
                    ContentStringFormat="Zoom: {0:0} %" />
    </Slider.ToolTip>
</Slider>   

I applied ToolTipService.ShowDuration="12000" But it seems to have no effect. How can i make sure the Slider Tooltip appears there on top of slider while Dragging the position of Slider Thumb

Answer 1

有没有“代码背后”的解决方案

自定义Popup控件的实现：

public class PopupEx : 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;
    }
}

XAML：

<Slider Minimum="0" Maximum="100" VerticalAlignment="Center" HorizontalAlignment="Stretch">
        <Slider.Template>
            <ControlTemplate TargetType="{x:Type Slider}">
                <Grid Background="#05000000">
                    <PopupEx 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">
                            <TextBlock Foreground="Black" Text="{Binding ElementName=PART_Track, Path=Value, StringFormat=Zoom:{0:0}%}"></TextBlock>
                        </Border>
                    </PopupEx>
                    <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>

Answer 2

使用AutoToolTipPlacement属性。将其设置TopLeft为使其显示在光标上方。

<Slider AutoToolTipPlacement="TopLeft"/>

Answer 3

在这种情况下尝试使用Popup：

<Grid>
    <Slider Name="MySlider"                                       
            VerticalAlignment="Center"
            Minimum="50" Maximum="200" Width="150"
            IsMoveToPointEnabled="True" IsSnapToTickEnabled="True" />

    <Popup Name="MyPopup"
           IsOpen="False"
           StaysOpen="True"
           PlacementTarget="{Binding ElementName=MySlider}"
           PlacementRectangle="150,0,0,0">
        <Grid Background="AliceBlue">
            <TextBlock Text="{Binding ElementName=MySlider, Path=Value}" />
        </Grid>
    </Popup>
</Grid>

您还可以在事件中添加IsOpen="True"和：IsOpen="False"Slider

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void MySlider_DragStarted(object sender, System.Windows.Controls.Primitives.DragStartedEventArgs e)
    {
        MyPopup.IsOpen = true;
    }

    private void MySlider_DragCompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
    {
        MyPopup.IsOpen = false;
    }
}