UIElement.OpacityMask Property

July 28, 2014

Gets or sets the brush used to alter the opacity of regions of this object.

Namespace:  System.Windows
Assembly:  System.Windows (in System.Windows.dll)
XMLNS for XAML: Not mapped to an xmlns.

'Declaration
Public Property OpacityMask As Brush
<uiElement>
  <uiElement.OpacityMask>
    singleBrush
  </uiElement.OpacityMask>
</uiElement>

XAML Values

singleBrush

Exactly one object element for an object that derives from Brush. This is typically one of the following: LinearGradientBrush, RadialGradientBrush, or ImageBrush.

Property Value

Type: System.Windows.Media.Brush
A brush that describes the opacity applied to this object. The default is Nothing.

Dependency property identifier field: OpacityMaskProperty

This property only uses the alpha channel values from the supplied Brush. The other channels of the brush content (Red, Green, or Blue) are ignored.

The most typical Brush for this purpose is an ImageBrush, which can be used for a variety of masking techniques such as a vignette, using an irregular shape. Technically, any defined Brush (such as LinearGradientBrush) can be used. VideoBrush is not recommended for this purpose, because videos generally do not carry alpha information (also, the codecs used by Windows Phone cannot process alpha information in video). A SolidColorBrush created with one of the construction syntaxes that specifies an alpha in ARGB form is permitted, but the results would be indistinguishable from using an Opacity that used the same factor as the alpha for the SolidColorBrush.

Generally the XAML syntax for these brushes requires a Brush-derived object element to fill property element syntax in XAML, so this is the XAML syntax shown above. An attribute syntax that involves a SolidColorBrush and its string conversion behavior is technically possible; however, SolidColorBrush is not typically used for OpacityMask, for the reasons discussed in the previous remark.

The following XAML example places a centered elliptical mask on an image, such that the image fades out to zero opacity at the ellipse edges using a radial gradient.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1"  >
   <Image Source="yourImageHere.jpg">
      <Image.OpacityMask>
         <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
            <!-- These Gradient Stop colors are only changing the alpha values so the image fades out toward the edges. -->
           <GradientStop Color="#ffffffff" Offset="0.5" />
           <GradientStop Color="#00ffffff" Offset="0.8" />
        </RadialGradientBrush>
      </Image.OpacityMask>
   </Image>
</Grid>

Windows Phone OS

Supported in: 8.1, 8.0, 7.1, 7.0

Windows Phone

Show:
© 2014 Microsoft