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

Advertisement

Filed under Graphics Tagged with , , , ,

#219 – Changing the Radius of a Radial Gradient

February 16, 2011 Leave a comment

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>

Filed under Graphics Tagged with , , ,

#218 – Defining a Radial Gradient’s Focal Point

February 15, 2011 1 Comment

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).

Filed under Graphics Tagged with , , , , ,

#217 – Using a Radial Gradient Brush

February 14, 2011 1 Comment

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>

Filed under Graphics Tagged with , ,