Geeks With Blogs
Imran Shaik Silverlight Quintessential Rambling

As you might already know that you can only attach one single colour schema (Either Solid colour or gradients) to an object, so we'll first begin with looking at what opacity masks are.

First we'll look at what opacity masks do on a solid colour, and then we'll go in detail with complex gradients.

Image 1: Rectangle with Solid colour

`<Rectangle Fill="#FF0B1BC6" Stroke="#FF000000" RadiusX="8" RadiusY="8"/>`

Now I have an object with solid colour (Rectangle with Colour FF0B1BC6 in this case) and lets say that we want to apply some transparency to the the object either at the beginning or at the end, so since Silverlight have Alpha channel in its colour definition along with RGB definition its simple to use it, Since we are dealing with a solid colour here its easy to just create a liner gradient with alpha reduced e.g.,

Image 2: Rectangle with Linear gradient with opacity

```<Rectangle RadiusX="8" RadiusY="8" Stroke="#FF000000">
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>```

Notice the Colour between two gradient stops they are the same colour (0B0BC6) the only difference is the Alpha (7F and FF), at offset 0 (beginning of the gradient) we have 50% opacity and at the offset 1 (end of the gradient) we have 100% opacity.

It works but we can also achieve he same by applying opacity mask to the rectangle in Image 1,

Image 3: Rectangle with opacity mask

```<Rectangle Fill="#FF0B1BC6" Stroke="#FF000000" RadiusX="8" RadiusY="8">
</Rectangle>```

Notice Image 2 and Image 3, the difference isn't much, infact technically there isn't any difference because both of them are one and the same, the only difference is applying the opacity mask to a solid colour have achieved the same results as actually applying a gradient.

You might ask well if we can achieve the same results with both gradient and applying opacity mask then why use opacity mask, well the advantages of opacity masks are very clear, consider this you can only apply one gradient to an object but with the addition of opacity mask you can achieve both at the same time.

Here is an example,

Image 4: Rectangle with liner gradient from left to right

Now consider that we want darken the rectangle on the top and leave the bottom the same, given that we can only apply one gradient for a single object, so to achieve this we'll have to put the another rectangle on top of that with a black gradient running from top to bottom, and  giving the top about 50% opacity and the bottom 0% opacity.

Image 5: Rectangle gradient (left to right) with opacity mask (top to bottom)

```<Rectangle RadiusX="8" RadiusY="8" Stroke="#FF000000">
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>```

This trick is usually used in making the glass effects with gradients, and it is limited to dark backgrounds since in reality the opacity mask is actually making the object transparent than actually making it darker or lighter, which brings us to another usage of opacity masks.

Partially transparent objects, captures the imagination, and you can achieve them using opacity masks, for example consider the following image, its the same rectangle in Image 5 over other rectangles.

Opacity masks are not limited to objects rectangles or paths or gradients, opacity masks can also be applied to various objects to give partial transparency, including and not limited to images and vides infact you can apply opacity masks to all UI elements and you can apply any brush (Graident brush/image brush/Video Brush etc.) as a base for opacity mask.

Opacity Masks in Silverlight 2 are limited since other brushes (those available in WPF) are not available in Silverlight, but probably probably they might be avialble in future versions of Silverlight.

### Opacity Masks and animation and themes

One of the areas where I usually use opacity masks are in themes and animation, I'll soon post a tutorial on using opacity masks in animation/ themes and in creating custom controls and templates, watch this space.

Related Posts on Geeks With Blogs Matching Categories

# re: Working with Opacity Masks
The following code ignores the: rect1.OpacityMask = irgb; to apply the opacity mask at runtime.

public MainPage()
{
InitializeComponent();
Rectangle rect1 = new Rectangle();
rect1.Width = 300;
rect1.Height = 300;
rect1.Fill = new SolidColorBrush(Colors.Red);
irgb.Center = new Point(0.5, 0.5);
// Set the color for each stop object
gs1.Color = Color.FromArgb(255, 255, 255, 255);
gs2.Color = Color.FromArgb(255, 255, 255, 255);
gs3.Color = Color.FromArgb(255, 150, 150, 150);
gs4.Color = Color.FromArgb(255, 0, 0, 0);
// Set the offset for each stop object
gs1.Offset = 0.0;
gs2.Offset = 0.25;
gs3.Offset = 0.75;
gs4.Offset = 1.0;
}
Left by Claudio on Feb 23, 2010 5:05 AM

# re: Working with Opacity Masks
I started to use Opacity Masks for improving our Comediantickets site. So far I have seen some nice improvements while using Silverlight with it. Thanks for tips, they make everything more smooth.
Left by Chris on Apr 06, 2011 2:20 AM

Popular Posts on Geeks with Blogs 0
Geeks With Blogs Content Categories ASP.Net SQL Server Apple Google SharePoint Windows Visual Studio Team Foundation Server Agile Office Design Patterns Web Azure
Brand New Posts on Geeks with Blogs 0