#561 – Drawing a 3D Donut Using a Radial Gradient

Here’s another visual effect that you can easily create in WPF and Blend, using a gradient.

Let’s say that you want to draw a ring or donut-shaped object that looks 3D.  You can start by using the Ellipse shape to draw a circle.

Next, set the Fill property of the Ellipse to use a radial gradient.  Define five gradient stops, as shown, and use the gradient tool to position them as shown.

For the hole in the middle of the donut, you can use an opacity mask.  Use a paint program to create an opaque circle that is the same size as the circle, but with a smaller transparent circle in its center.  (Trick: Run your app and screen capture what you have so far, then tweak it in a paint program).  Finally, set this image as the OpacityMask of the Ellipse.

<Ellipse.OpacityMask>
    <ImageBrush ImageSource="Images\Mask.png"/>
</Ellipse.OpacityMask>

Voila.

#560 – Using a Radial Gradient to Create a 3D Effect

You can use a radial gradient in WPF to create a 3D effect on a shape.  In the example below, we set up a gradient on a circle (Ellipse shape) to make the circle look like a 3D sphere.

Start by drawing a simple circle (Ellipse).

Now specify a radial gradient for the Fill property.

Next, click on the Gradient tool and then slide the radial gradient off-center, relative to the ellipse.

Finally, adjust the gradient so that the center starts out white and fades to a darker color at the edge of the gradient.  You can also enlarge the gradient so that its outer edge lines up with the outer edge of the ellipse.

Here’s the final result:

#555 – Creating a Radial Opacity Mask

You can define an opacity mask on a user interface element to cause the opacity to change across the element, depending on the mask.  The opacity mask is a brush, where the alpha channel at each point in the brush is used to define the opacity at each point on the element.

You will typically use either a linear or a radial gradient for an opacity mask, since a gradient brush allows you to create a range of alpha values across the brush.

You can use a radial gradient brush as the opacity mask to fade out the edges of a user interface element.  To start with, select a gradient brush for the OpacityMask property.

Change the gradient to be a radial gradient.

Select the outer gradient stop and set its alpha value to be transparent.

Finally, adjust the gradient stops to get the effect that you want.

#533 – Using the Gradient Tool to Modify a Radial Gradient

You can use the Gradient Tool in Blend to adjust a radial gradient, as well as a linear gradient.

Below is a radial gradient that transitions from a darker green at the center of the region to a light green at the outside of the circle.

		<Border.Background>
			<RadialGradientBrush RadiusY="0.496" RadiusX="0.496">
				<GradientStop Color="#FF239D23"/>
				<GradientStop Color="#FFABD2AB" Offset="0.762"/>
				<GradientStop Color="#FFD9F1D9" Offset="1"/>
			</RadialGradientBrush>
		</Border.Background>

When you click on the Gradient Tool, you’ll see an arrow appear in Blend that represents the gradient.

As with linear gradients, you can click and drag any of the gradient stops, represented by the small circles on the arrow.  This will change the point on the radial line at which the gradient achieves the color specified for that gradient stop.

The origin of a radial gradient defaults to the center of the control.  You can change this origin by dragging the tail end of the arrow.


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