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