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

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


#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:

#559 – Drawing a Masked Gradient in Blend

You can use an opacity mask with simple shapes along with a gradient to get a style that looks like a gradient applied to a paper cutout.  For example, you might want the following cloud-like effect.

To do this, start with a Rectangle and use a linear gradient for its Fill property.

    	<Rectangle Height="400" Stroke="Black" Width="600">
    	        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    		    <GradientStop Color="#FFFBFBFB" Offset="0.504"/>
    		    <GradientStop Color="#FFD6E1EA" Offset="0.734"/>
    		    <GradientStop Color="#FF6EB5F5" Offset="1"/>

Now create an image with the shape of the clouds, using an opaque foreground (black in this example) and a transparent background (shown as checkerboard here).

Finally, use the new clouds image as an ImageBrush for the OpacityMask of the Rectangle.

<Rectangle Height="400" Stroke="Black" Width="600">
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFBFBFB" Offset="0.504"/>
            <GradientStop Color="#FF6EB5F5" Offset="1"/>
            <GradientStop Color="#FFD6E1EA" Offset="0.734"/>
        <ImageBrush ImageSource="Images\CloudsMask.png"/>

#548 – Change the Offset of a Gradient Stop in Blend

Once you’ve added one or more gradient stops to a gradient brush, you can use the mouse to drag any of the gradient stops left or right.  Dragging a gradient stop changes the value of its Offset, which dictates where along the gradient line the specified color is achieved for the gradient.

For example, let’s say that we start with a simple gradient that goes from Blue at the top of a control to white at the bottom of a control.  The gradient line runs from the top of the control (Y=0) to the bottom (Y=1).  The first gradient is at an offset of 0 (top of control) and the second gradient is at an offset of 1 (bottom of control).

You can now move one of the gradient stops by sliding it.  This will change the value of its Offset, changing where on the gradient line that color is reached.

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

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

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.

#532 – Using the Gradient Tool to Move Gradient Stops

You can use the Gradient Tool in Blend to adjust an existing gradient.  You can move the starting and ending points of the gradient, as well as any of the gradient stops.

When you first create a gradient, the endpoints are typically located on the edge of the control and there is a gradient stop at each end.

			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="Green" Offset="0.0"/>
				<GradientStop Color="White" Offset="1"/>

Using the Gradient Tool, you can move one or more gradient stops outside of the control boundaries, to indicate what the color should be at that starting or ending point.  The gradient used inside the control will then be a subset of the full gradient.

#531 – Adjusting a Gradient Using the Gradient Tool

You can change an existing gradient fill by using the Gradient Tool.

To adjust a gradient, start by selecting the control that uses a gradient that you want to change, either in the Objects and Timeline panel, or in the XAML editor.  In this example, we’re going to change the background color gradient for a Border.

If your control uses a gradient for more than one property, select the property on the Properties panel.  You’ll see the existing gradient displayed.

Click the Gradient Tool icon.

You’ll see a visual indication of the gradient drawn on the control, with an arrow showing the direction of the gradient and little circles showing each gradient stop.

You can move the head or tail of the arrow to change the starting/stopping point of the gradient, as well as its direction.

You can change the position of a gradient stop by dragging the corresponding circle.

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

#214 – Starting/Ending a Gradient Fill Inside a Control

You typically set the StartPoint and EndPoint of a gradient fill at the control’s boundary.  For example, a red-blue gradient might start at the left edge of the control and end at the right edge.  This is done with a StartPoint of (0,0.5) and an EndPoint of (1,0.5).

You can also specify start and end points that are in the interior of the control.  If we specify (0.33,0.5) as the StartPoint and (0.67,0.5) as the EndPoint, we get the following.  (Gradient line drawn, for reference).

We still have a red-to-blue gradient, but the gradient starts 1/3 of the way into the rectangle and finishes 2/3 of the way into the rectangle.

The fill behavior outside the specified gradient line depends on the value of the GradientBrush.SpreadMethod.  The default for this property, GradientSpreadMethod.Pad, specifies that the color at the edge of the gradient should just be extended to the edge of the control.