Skip to content

WPF/Silverlight: Using an ellipse as an opacity mask for another ellipse

October 10, 2007

Internal mail thread that is likely useful to people outside of Microsoft.  Please read bottom up:

——————————————————

From: Blend Program Manager
OpacityMask is a brush, clip is a geometry. They are both valid on Shapes but it depends on what type of masking you’re looking to do.

In the example of an elliptical mask, it could also be done with opacity mask and a radial gradient brush.

——————————————————

From: MS Employee new to Xaml Vectors

Ah, so is Opacity Mask not valid for shapes?  When do I need to use .CLIP instead of Opacity Mask?  Anyway, I knew it would be easy.  Thanks!

——————————————————

From: Blend Program Manager

Real easy using Blend, just draw out two ellipses, select both then use Object->Path->Make Clipping Path.

Alternatively, the XAML is:

<Ellipse Width="100" Height="100" Fill="#FFFF0000" Stroke="#FF000000">

                <Ellipse.Clip>

                                <EllipseGeometry RadiusX=’25’ RadiusY=’25’ Center=’50,50’/>

                </Ellipse.Clip>

</Ellipse>

——————————————————

From: MS Employee new to Xaml Vectors

Ok.. this has got to be SO simple, but I cant figure it out.  I’m trying to use an object like an ellipse as an opacity mask for another ellipse.  What is the syntax to make this work.  It seems to be looking for a “Brush” but I thought it would use the nested ellipse as the necessary brush.  Any help would be greatly appreciated.  Thanks!

<Ellipse Width="259" Height="239" Fill="#FFFFFFFF" Stroke="#FF000000" Canvas.Left="198" Canvas.Top="82">

                                <Ellipse.OpacityMask>

                                                <Ellipse Width="197" Height="198" Fill="#FF888888" Stroke="#FF000000" Canvas.Left="159" Canvas.Top="140"/>

                                </Ellipse.OpacityMask>

                </Ellipse>

From → 2D Graphics

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: