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

May 18, 2012 3 Comments

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.

Advertisement

Filed under Graphics Tagged with , , , , , ,

#557 – Using an Image As an Opacity Mask

May 14, 2012 1 Comment

You’ll typically use a gradient brush as an opacity mask, to change the opacity of a control gradually.

You can also use an image as an opacity brush, making various regions of the target control opaque or transparent depending on the opacity at the same spot in the image.

Below, I’ve created a smiley face image in Paint.NET.  I’ve made the background of the image transparent (shown in Paint.NET as a checkerboard).

Next I create a WPF project with a simple Image control.

    <Image Source="Images\Rocks2Small.jpg" Width="400"/>

Now we specify an OpacityMask for this Image.  But instead of using a LinearGradientBrush or RadialGradientBrush, we use an ImageBrush–a brush created from an image.

<Image Source="Images\Rocks2Small.jpg" Width="400">
    <Image.OpacityMask>
        <ImageBrush ImageSource="Images\FaceMask.png"/>
    </Image.OpacityMask>
</Image>

Using the second image as the opacity mask for the first means–the first image will be transparent wherever the second image is transparent.

Filed under Brushes Tagged with , , , ,

#555 – Creating a Radial Opacity Mask

May 10, 2012 Leave a comment

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.

Filed under Blend Tagged with , , , , ,

#554 – Using an Opacity Mask

May 9, 2012 2 Comments

An Opacity Mask allows you to set an opacity for a user interface element that is based on a brush, rather being a single opacity value that is applied to the entire element.

For example, instead of setting a single value for the Opacity of an Image control, you can use a gradient brush as its opacity mask, so that one side of the picture fades out.

We start with a simple Image with a default Opacity (100%).

We then select the OpacityMask property of the Image and select a gradient brush.

We then set the alpha channel of the ending gradient stop to 0 (fully transparent).  Now we have a gradient that goes from solid black to fully transparent.

You’ll see that the Image now starts out solid at its top and fades out at the bottom

Filed under Blend Tagged with , , ,