#230 – Changing a Radial Gradient as Mouse Moves Over a Control

Here’s an example of one way to change a radial gradient at runtime, based on mouse movements.

The radial gradient is defined in the XAML:

		<Button x:Name="btnActiveGradient" Content="Click Me" Width="120" Height="30" Margin="30"
			MouseMove="btnActiveGradient_MouseMove"
			MouseLeave="btnActiveGradient_MouseLeave"
			Style="{DynamicResource ButtonStyle1}" >
			<Button.Background>
				<RadialGradientBrush x:Name="gradRadial" RadiusX="0.25">
					<GradientStop Color="AliceBlue" Offset="0.0"/>
					<GradientStop Color="LightSteelBlue" Offset="1.0"/>
				</RadialGradientBrush>
			</Button.Background>
		</Button>

We also need to disable the default rendering of the button while the mouse is over it.  We can do this by changing the RenderMouseOver property of the ButtonChrome object–found in the button’s control template–to False.

Finally, we add some code to the button’s MouseMove and MouseLeave events, to change the gradient’s origin and center as we move the mouse.

        private void btnActiveGradient_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            Point pt = Mouse.GetPosition(btnActiveGradient);
            gradRadial.GradientOrigin = new Point(pt.X / btnActiveGradient.Width, pt.Y / btnActiveGradient.Height);
            gradRadial.Center = gradRadial.GradientOrigin;
        }

        private void btnActiveGradient_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
        {
            gradRadial.GradientOrigin = new Point(0.5, 0.5);   // Default
            gradRadial.Center = gradRadial.GradientOrigin;
        }

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

2 Responses to #230 – Changing a Radial Gradient as Mouse Moves Over a Control

  1. Steve says:

    This is great, but is there a way to define something like this in a template? Or do you have to name every button and gradient so you can refer to it from code behind? Even if there was a way to reference the gradient from simply knowing which button was pressed would be very helpful.

    For example you could:
    private void btn_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
    {

    Button btn = sender as Button;
    Point pt = Mouse.GetPosition(btn);
    btn.(somehow refer to its gradient???).GradientOrigin = new Point(pt.X / btn.Width, pt.Y / btn.Height);
    }

    Then share the handler between all buttons you want to have the effect. Of course you’d want to perform a check to make sure the button had a RadialGradient before trying to access the origin.

  2. Steve says:

    I figured it out the second way myself.

    if (btn.Background is RadialGradientBrush)
    {
    RadialGradientBrush rgb = (RadialGradientBrush)btn.Background;
    rgb.GradientOrigin = new Point(pt.X / btn.Width, pt.Y / btn.Height);
    rgb.GradientCenter = rgb.GradientOrigin;
    }

    I’d still be interested if this could be done in a template rather than having to use the MouseMove event.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: