当拖动WPF滑块时，使工具提示保持在屏幕上。

Question

我正在使用滑块控件来设置应用程序的缩放级别，并且我希望向最终用户实时显示当前缩放级别。因此，我决定在滑块上方显示工具提示，以便用户可以看到缩放级别的值。

但是问题在于，当用户拖动滑块的位置时，工具提示会消失，我无法再次看到工具提示。我必须改变鼠标的位置并再次将鼠标放在滑块上方，才能看到缩放级别是多少。

我使用的XAML如下：

<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>   

我尝试了 ToolTipService.ShowDuration="12000" ，但好像没有效果。如何确保拖动滑块时，滑块提示工具出现在其顶部？

- Sebastian

---

尝试将 StaysOpen=True 应用于您的 ToolTip。 - mahboub_mo

一个工具提示显然不是正确的控件类型。 工具提示有非常明确定义的操作模式：当您第一次将鼠标移动到控件上时出现，然后消失。 要重新出现，您需要将鼠标移开并再次移回。 您想要的是不像这样行为的东西，那么为什么不创建自己的弹出窗口或文本块，当您命令时出现/消失呢？ - Mashton

Answer 1

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

自定义弹出控件的实现：

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>

- supertoha

---

最常用的答案。谢谢！ - TravisWhidden

对我来说最有帮助的答案！谢谢。 - Val

Answer 2

使用AutoToolTipPlacement属性。将其设置为TopLeft，以使其出现在光标上方。

<Slider AutoToolTipPlacement="TopLeft"/>

- Shawn Kendrot

Answer 3

在这种情况下，请尝试使用 弹出窗口：

<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>

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

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;
    }
}

- Anatoliy Nikolaev

---

但是如何打开它？在DragChange事件中，我需要调用代码Popup.Isopen=true吗？然后当我调用隐藏Popup的代码时？？工具提示会自动处理它。 - Sebastian