2

I'm following this tutorial for how to create a Windows Vista/7 styled glass button in VS Blend (I'm using VS 2013 Community Edition). When it comes to the button shine, I want to re-create how Windows 7 handles buttons on the task bar - as in, when the mouse is over the button, the radial gradient that makes up the shine itself is always centered on the cursor.

My guess to make this work is that I would want to bind the position of the gradient (x and y) to the cursor coordinates.

How, in Blend, do I data-bind the coordinates of a radial gradient to the x/y coordinates of the mouse cursor?

Will
  • 3,413
  • 7
  • 50
  • 107

1 Answers1

3

One way is to add a dependency property to the view, and hook that to the MouseMove event.

The dependency property: 

    public static readonly DependencyProperty MousePointProperty = DependencyProperty.Register(
        "MousePoint",
        typeof (Point),
        typeof (MyWindow),
        new FrameworkPropertyMetadata(new Point());

    public Point MousePoint
    {
        get { return (Point)GetValue(MousePointProperty ); }
        set { SetValue(MousePointProperty , value); }
    }

Then in the MouseMove handler, update this point. In the XAML (this is on a rectangle, should be similar for your control):

<Rectangle>
    <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="{Binding MousePoint}"/>
    </Rectangle.Fill>
</Rectangle>
Nzc
  • 170
  • 1
  • 5
  • How do I expose that property of the control so that the parent can bind to it? The property itself exists within a template that I want to reuse, so this is a little counter-intuitive to what I want to do... This means that each time I placed the control, I would have to bind to that property on that control, and implement what you have suggested here. I was hoping for something a little more drag-and-drop-and-go friendly... – Will Apr 02 '15 at 16:57
  • You mean the MousePoint property is defined on a template class? – Nzc Apr 03 '15 at 08:40