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

#219 – Changing the Radius of a Radial Gradient

By default, the radius of a radial gradient is always half of the height and width of the control.  In other words, the gradient will extend exactly to the edge of the control.  In the example below, the gradient goes from white to dark blue and reaches dark blue at the edges of the ellipse.

We can change the radius of the gradient using the RadialGradientBrush.RadiusX and RadiusY properties.  The default value for both is 0.5, indicating that the gradient takes 1/2 the height or width of the circle to reach the final color.

If we change the radius to 0.25, we reach the final color of the gradient halfway out to the edge of the ellipse:

	<RadialGradientBrush x:Name="grad" RadiusX="0.25" RadiusY="0.25">
		<GradientStop Color="White" Offset="0.0"/>
		<GradientStop Color="LightBlue" Offset="0.5"/>
		<GradientStop Color="DarkBlue" Offset="1.0"/>
	</RadialGradientBrush>

#218 – Defining a Radial Gradient’s Focal Point

By default, the focal point of a radial gradient–the spot where the gradient starts–is at the center of the control in which it’s located.

You can specify a different focal point using the RadialGradientBrush.GradientOrigin property.  The GradientOrigin property specifies the start of the gradient in 2D (X,Y) space, with X ranging from 0.0 (left side of control) to 1.0 (right side) and Y ranging from 0.0 (top) to 1.0 (bottom).

Here’s the same gradient as above, with the origin at (0.2,0.4).

#217 – Using a Radial Gradient Brush

With a linear gradient, the color changes along the edge of a straight line, as it sweeps across a control.  You can also define a radial gradient, where the color change radiates out in a circle.

You define a radial gradient using a RadialGradientBrush, which you can use wherever a brush is expected.

In the following example, we draw an Ellipse and fill it with a radial gradient.  The gradient starts out white in the center of the circle and then changes to light blue and then dark blue as it expands out to the edges of the circle.  Note that, like a linear gradient brush, we specify a series of gradient stops, where the color changes.

		<Ellipse Height="200" Width="200">
			<Ellipse.Fill>
				<RadialGradientBrush>
					<GradientStop Color="White" Offset="0.0"/>
					<GradientStop Color="LightBlue" Offset="0.5"/>
					<GradientStop Color="DarkBlue" Offset="1.0"/>
				</RadialGradientBrush>
			</Ellipse.Fill>
		</Ellipse>

Follow

Get every new post delivered to your Inbox.

Join 365 other followers