OpacityMask
This page is specific to:Microsoft Version:Silverlight 3
JavaScript API for Silverlight
OpacityMask

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

<object ...>
  <object.OpacityMask>
    singleBrush
  </object.OpacityMask>
</object>
value = object.OpacityMask
object.OpacityMask = value

XAML Values

Value

Description

singleBrush

Exactly one object element for an object that derives from Brush. This can be one of the following: <LinearGradientBrush ... />, <RadialGradientBrush ... />, or <ImageBrush ... />.

SolidColorBrush is technically permitted, but you could more easily obtain the same effect with Opacity (UIElement).

VideoBrush is technically permitted, but videos generally do not carry alpha information.

Property Value

Type: Brush

A Brush that describes the opacity of this object.

This property is read/write. The default value is null.

Managed Equivalent

OpacityMask

Remarks

This property uses the alpha channel value for 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 photo masking techniques such as vignettes. However, any defined Brush (such as LinearGradientBrush) can be used. All brushes require a Brush-derived object element to fill property element syntax in XAML, as shown in the XAML syntax earlier in this topic.

Example

The following example creates a RadialGradientBrush with three gradient stops in the implicit GradientStopCollection. The three gradient stops specify a brush with a varying transparency, which is then applied as the OpacityMask for an Image.

<Canvas  
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

  <Image Source="sampleImages/forest.jpg" Height="100">
    <Image.OpacityMask>
      <RadialGradientBrush Center="0.5,0.5">
        <!-- This gradient stop is partially transparent. -->
        <GradientStop Color="#00000000" Offset="1" />
        <!-- This gradient stop is partially transparent. -->
        <GradientStop Color="#20000000" Offset="0.8" />
        <!-- This gradient stop is fully opaque. -->
        <GradientStop Color="#FF000000" Offset="0" />
      </RadialGradientBrush>
    </Image.OpacityMask>
  </Image> 
</Canvas>

The following illustration shows the rendered result of the preceding code.

RadialGradientBrush applied to OpacityMask of an image

Bb979637.JOLT_opacitymask_radialgradient(en-us,VS.95).png
Applies To

Border (Silverlight 2)

Canvas

Ellipse

Glyphs

Image

InkPresenter

Line

MediaElement

PasswordBox (Silverlight 2)

Path

Polygon

Polyline

Popup (Silverlight 2)

Rectangle

StackPanel (Silverlight 2)

TextBlock

TextBox (Silverlight 2)

Community Content

OpacityMask is inconsistent
Added by:LukeSkywalker

You may want to apply an OpacityMask to a panel such as Canvas or Grid so that the content fades into its surrounds at its edges.

The mask appears to be applied to the content and isn't consistent; picture a ticker - if a Label in a Canvas contains a long string and is clipped right as it disappears outside the bounds of the panel, the fading will occur perfectly on the left edge but will not occur on the right --it will, but its applied to the right end of the label which is outside the visible area of the Canvas.

With a Grid, this all works as expected. However, if you translate the Label then the mask irritatingly moves with it!

The only way I have managed to get an OpacityMask to fade at the edges is to use a ScrollViewer, then put a Canvas inside to ensure that the Label (inside that) doesn't get resized. Also add padding to the end of the Label...

When the contents of the ScrollViewer are translated left (e.g -200) out of the panel and the right hand 'end' of the Label is now about halfway along inside the ScrollViewer, the OpacityMask gets shrunk down so it begins at the left edge of the ScrollViewer but instead of ending at the right edge of it, it ends at the right edge of the Label, i.e. halfway along!

If the mask serves to feather the edges to transparency then it means that the last few pixels of text in the label are always transparent!! Only after adding some right padding does your period mark become visible.

© 2009 Microsoft Corporation. All rights reserved.   Terms of Use | Trademarks | Privacy Statement
Page view tracker
Rate the Lightweight library
x
Lightweight builds on ScriptFree (loband) by adding features you've requested: a SearchBox and default code language selection.
Do you like the SearchBox?
Do you like the tabbed code blocks?
How useful is this topic?
Tell us more.
Thanks
x
You're helping to improve MSDN Online.
Feedback
Switch View
Classic
Lightweight Beta
ScriptFree
Switch View