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 =＆＃34; 12000＆＃34;但似乎没有效果。如何在拖动滑块拇指的位置时确保滑块顶部出现滑块工具提示

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>

slider with tooltip result

Answer 2

在这种情况下，请尝试使用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;
    }
}

Answer 3

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

<Slider AutoToolTipPlacement="TopLeft"/>

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

3 个答案: