Opacity Masks Overview

Article
11/03/2006

Opacity masks enable you to make portions of an element or visual either transparent or partially transparent. To create an opacity mask, you apply a Brush to the OpacityMask property of an element or Visual. The brush is mapped to the element or visual, and the opacity value of each brush pixel is used to determine the resulting opacity of each corresponding pixel of the element or visual.

This topic contains the following sections.

Prerequisites
Creating Visual Effects with Opacity Masks
Creating an Opacity Mask
Using a Gradient as an Opacity Mask
Specifying Gradient Stops for an Opacity Mask
Using an Image as an Opacity Mask
Creating an Opacity Mask from a Drawing
Related Topics

Prerequisites

This overview assumes that you are familiar with Brush objects. For an introduction to using brushes, see Painting with Solid Colors and Gradients Overview. For information about ImageBrush and DrawingBrush, see Painting with Images, Drawings, and Visuals.

Creating Visual Effects with Opacity Masks

An opacity mask works by mapping its contents to the element or visual. The alpha channel of each of the brush's pixels are then used to determine the resulting opacity of the element or visual's corresponding pixels; the actual color of the brush is ignored. If a given portion of the brush is transparent, the corresponding portion of the element or visual becomes transparent. If a given portion of the brush is opaque, the opacity of the corresponding portion of the element or visual is unchanged. The opacity specified by the opacity mask is combined with any opacity settings present in the element or visual. For example, if an element is 25 percent opaque and an opacity mask is applied that transitions from fully opaque to fully transparent, the result is an element that transitions from 25 percent opacity to fully transparent.

Note:
Although the examples in this overview demonstrate the use of opacity masks on image elements, an opacity mask may be applied to any element or Visual, including panels and controls.

Opacity masks are used to create interesting visual effects, such as to create images or buttons that fade from view, to add textures to elements, or to combine gradients to produce glass-like surfaces. The following illustration demonstrates the use of an opacity mask. A checkered background is used to show the transparent portions of the mask.

Opacity masking example

Object with a LinearGradientBrush opacity mask

Creating an Opacity Mask

To create an opacity mask, you create a Brush and apply it to the OpacityMask property of an element or visual. You can use any type of Brush as an opacity mask.

LinearGradientBrush, RadialGradientBrush: Used to make an element or visual fade from view.

The following image shows a LinearGradientBrush used as an opacity mask.

LinearGradientBrush Opacity Masking Example
ImageBrush: Used to create texture and soft or torn edge effects.

The following image shows an ImageBrush used as an opacity mask.

LinearGradientBrush opacity masking example
DrawingBrush: Used to create complex opacity masks from patterns of shapes, images, and gradients.

The following image shows a DrawingBrush used as an opacity mask.

DrawingBrush opacity masking example

The gradient brushes (LinearGradientBrush and RadialGradientBrush) are particularly well-suited for use as an opacity mask. Because a SolidColorBrush fills an area with a uniform color, they make poor opacity masks; using a SolidColorBrush is equivalent to setting the element's or visual's OpacityMask property.

Using a Gradient as an Opacity Mask

To create a gradient fill, you specify two or more gradient stops. Each gradient stop contains describes a color and a position (see Painting with Solid Colors and Gradients Overview for more information about creating and using gradients). The process is the same when using a gradient as an opacity mask, except that, instead of blending colors, the opacity mask gradient blends alpha channel values. So the actual color of the gradient's contents do not matter; only the alpha channel, or opacity, of each color matters. The following is an example.

<!--With the opacity mask:--> 
<Image
  Width="200" Height="150"
  Source="sampleImages\Waterlilies.jpg"
  Margin="10"
  HorizontalAlignment="Left"
  Grid.Column="2" Grid.Row="3">
  <Image.OpacityMask>
    <LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
      <LinearGradientBrush.GradientStops>
        <GradientStop Offset="0" Color="Black"/>
        <GradientStop Offset="1" Color="Transparent"/>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Image.OpacityMask>
</Image>

The following image illustrates the opacity mask created with the previous code. A checkered background is used to show the transparent portions of the mask.

Specifying Gradient Stops for an Opacity Mask

In the previous example, the system-defined color Black is used as the starting color of the gradient. Because all of the colors in the Colors class, except Transparent, are fully opaque, they can be used to simply define a starting color for a gradient opacity mask.

For additional control over alpha values when defining an opacity mask, you can specify the alpha channel of colors using ARGB hexadecimal notation in markup or using the Color.FromScRgb method.

Specifying Color Opacity in "XAML"

In Extensible Application Markup Language (XAML), you use ARGB hexadecimal notation to specify the opacity of individual colors. ARGB hexadecimal notation uses the following syntax:

#aarrggbb

The aa in the previous line represents a two-digit hexadecimal value used to specify the opacity of the color. The rr, gg, and bb each represent a two digit hexadecimal value used to specify the amount of red, green, and blue in the color. Each hexadecimal digit may have a value from 0-9 or A-F. 0 is the smallest value, and F is the greatest. An alpha value of 00 specifies a color that is completely transparent, while an alpha value of FF creates a color that is fully opaque. In the following example, hexadecimal ARGB notation is used to specify two colors. The first is fully opaque, while the second is completely transparent.

<Canvas.OpacityMask>
  <RadialGradientBrush>
    <RadialGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="#FF000000"/>
      <GradientStop Offset="1" Color="#00000000"/>
  </RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Canvas.OpacityMask>

Using an Image as an Opacity Mask

Images can also be used as an opacity mask. The following image shows an example. A checkered background is used to show the transparent portions of the mask.

Opacity masking example

An object with an ImageBrush opacity mask

To use an image as an opacity mask, use an ImageBrush to contain the image. When creating an image to be used as an opacity mask, save the image in a format that supports multiple levels of transparency, such as Portable Network Graphics (PNG). The following example shows the code used to create the previous illustration.

<!-- With the Opacity Mask-->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="1">
  <Image.OpacityMask>
    <ImageBrush ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Using a Tiled Image as an Opacity Mask

In the following example, the same image is used with another ImageBrush, but the brush's tiling features are used to produce tiles of the image 50 pixels square.

<!-- With the Opacity Mask -->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="2">

  <Image.OpacityMask>
    <ImageBrush
      Viewport="0,0,50,50"
      ViewportUnits="Absolute"
      TileMode="Tile" 
      ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Creating an Opacity Mask from a Drawing

Drawings can be used an opacity mask. The shapes contained within the drawing can themselves be filled with gradients, solid colors, images, or even other drawings. The following image shows an example of a drawing used as an opacity mask. A checkered background is used to show the transparent portions of the mask.

DrawingBrush opacity masking example

An object with a DrawingBrush opacity mask

To use a drawing as an opacity mask, use a DrawingBrush to contain the drawing. The following example shows the code used to create the previous illustration:

<!-- With the Opacity Mask-->
<Image 
      Grid.Row="4" Grid.Column="5"
      Height="150"
      Width="200"
      Source="sampleImages/Waterlilies.jpg">
  <Image.OpacityMask>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Image.OpacityMask>
</Image>

Using a Tiled Drawing as an Opacity Mask

Like the ImageBrush, the DrawingBrush can be made to tile its drawing. In the following example, a drawing brush is used to create a tiled opacity mask.

<!-- With the Opacity Mask-->
<Button
   Grid.Row="8" Grid.Column="5"
  Height="100"
  Width="200"
  FontFamily="MS Gothic"
  FontSize="16">
  A Button
  <Button.OpacityMask>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Button.OpacityMask>
</Button>