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

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

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

  1. Pingback: Dew Drop – May 18, 2012 (#1,330) | Alvin Ashcraft's Morning Dew

  2. Pingback: #561 – Drawing a 3D Donut Using a Radial Gradient | Hispafoxing

  3. Steve says:

    Another way to do this (and avoid having to create an opacity mask) would be to add a transparent gradient stop just below the current innermost stop.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: