#554 – Using an Opacity Mask

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

Follow

Get every new post delivered to your Inbox.

Join 349 other followers