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

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: