How can I show a vertical line on mouse over?

问题

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.

回答1:

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.

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.

Here's what I would suggest

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

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

回答2:

http://www.codeproject.com/KB/WPF/adornedcontrol.aspx

this reference should give you all necessary information to fix your issue

cheers!

来源：https://stackoverflow.com/questions/8902695/how-can-i-show-a-vertical-line-on-mouse-over

标签

wpf

templates

xaml

slider