如何在鼠标悬停时显示垂直线? [英] How can I show a vertical line on mouse over?

问题描述

我试图在光标的 X 位置显示一条垂直线.我试图在滑块控件中做到这一点，但我无法做到.这将在用户将光标放在其上时显示.

I'm trying to show a vertical line in position X of the cursor. I'm trying to do that in a slider control, but I couldn't made it. This will be showed while the user has its cursor on it.

我只知道我需要修改模板.这样做有那么难吗?如果没有，你能帮我吗?谢谢.

I only know that I need to modify the template. Is so much difficult to do that? If not, can you help me? Thanks.

推荐答案

使用模板并不容易实现这一点，因为鼠标位置不是依赖属性，鼠标移动也不是路由事件.这真的归结为您想要做什么，如果它只是显示一条垂直线是否鼠标，那么我同意 Dany 使用装饰器，因为您对滑块本身并不真正感兴趣.但是，如果要将拇指移动到鼠标所在的位置，我会使用附加属性.

This is not easy to attain using templating because of the fact that mouse position is not a dependency property and mouse move is not a routed event. This really comes down to what you want to do, if it's to just show a vertical line whether the mouse is then I agree with Dany to use adorners, as you're not really interested in the slider itself. However, if it's to move the thumb to where the mouse is I would use an attached property.

我使用附加属性而不是直接在控件上挂接事件的原因是它提供了更加模块化和可重用的代码库，并使 XAML 中的视觉效果更加明显，而不需要将 C# 代码视为嗯.

The reason I use attached properties rather than hooking up the events directly on the control is that it provides more modularised and reusable codebase and makes it more obvious of the visual effect in the XAML, rather than needing to look at C# code as well.

这是我的建议

public class SliderHelperPackage
{
    public static readonly DependencyProperty BindThumbToMouseProperty = DependencyProperty.RegisterAttached(
        "BindThumbToMouse", typeof(bool), typeof(SliderHelperPackage), new PropertyMetadata(false, OnBindThumbToMouseChanged));

    public static void SetBindThumbToMouse(UIElement element, bool value)
    {
        element.SetValue(BindThumbToMouseProperty, value);
    }

    public static bool GetBindThumbToMouse(UIElement element)
    {
        return (bool)element.GetValue(BindThumbToMouseProperty);
    }

    private static void OnBindThumbToMouseChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue.Equals(e.OldValue))
            return;

        var slider = d as Slider;

        if (slider == null)
            throw new ArgumentException(@"dependency object must be a slider", "d");

        if ((bool) e.NewValue)
        {
            slider.MouseMove += SliderMouseMove;
        }
        else
        {
            slider.MouseMove -= SliderMouseMove;
        }
    }

    static void SliderMouseMove(object sender, MouseEventArgs e)
    {
        var slider = (Slider) sender;
        var position = e.GetPosition(slider);
        // When the mouse moves, we update the slider's value so it's where the ticker is (we take into account margin's on the track)     
        slider.Value = (slider.Maximum - slider.Minimum)*Math.Max(position.X-5,0)/(slider.ActualWidth-10) + slider.Minimum;          
    }
}

然后您可以像这样在 XAML 中使用它.因此，当您将其设置为 true 时，我们会连接到滑​​块上的鼠标移动事件并更改其值，以便拇指跟随鼠标

And you can then use it in your XAML like so. So when you set this to true we hook up to the mouse move event on the slider and change its value so the thumb follows the mouse

<Slider SliderPosn:SliderHelperPackage.BindThumbToMouse="True" Margin="5" Height="25" VerticalAlignment="Top"/>

这篇关于如何在鼠标悬停时显示垂直线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！