#230 – Changing a Radial Gradient as Mouse Moves Over a Control
February 27, 2011 2 Comments
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;
}
About Sean
2,000 Things You Should Know About WPF 
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.
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.