Introduction
It is possible to add a fancy touch to the appearance of Windows Controls using a simple feature called Opacity Mask. An opacity mask is like a layer having different degrees of transparency, which can be applied to any Windows control object or even panels. Depending on the opacity/transparency settings of the mask, the background of the control will also acquire the same properties. So the mask acts like a template to specify the opacity/transparency settings for the background of a control.
By creating masks with various designs and transparency levels and applying them to controls, it is possible to create interesting effects in the appearance of controls. One such sample is shown in Figure 1.
Figure 1
How is opacity specified in XAML?
In XAML, the #AARRGGBB notation is used to specify a color and its opacity. In this notation 'AA' stands for the alpha value which is used to define opacity using a 2 digit hexadecimal number. 'AA' can take values from 00 (fully transparent) to FF (fully opaque).
While setting the opacity values for a mask, it is very important to note the following point:
It really does not matter what values are set to the R, G and B values of an opacity mask. The alpha value is the only important factor that determines the nature of the mask. This means that the mask itself can be of any color but this will not have any influence on how the object beneath it appears. The object beneath will be rendered depending only on the alpha values of the mask. This is shown in Figure 2.
Figure 2
How is an opacity mask applied to a Windows control?
Opacity mask can be set to a control using any type of brush such as Gradient Brush or Tile Brush. This brush should be applied to the OpacityMask property of the control. The following examples demonstrate this in detail.
Examples
Opacity mask using LinearGradient Brush
In order to apply an opacity mask in the form of a linear gradient, a LinearGradientBrush is defined and applied to the OpacityMask property of a control, say, Button, as shown in the code below. The transparency of the mask is determined by the alpha values specified in the brush definition.
<
Button Width="100" Height="150" Background="DeepSkyBlue" Canvas.Top="100" Canvas.Left="275">
Button 1<Button.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#00000000" Offset="0.0" />
<GradientStop Color="#99000000" Offset="0.25"/>
<GradientStop Color="#55000000" Offset="0.5" />
<GradientStop Color="#BB000000" Offset="0.75" >
<GradientStop Color="#33000000" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>
Figure 3
By varying the gradient stops and start and end points, different kinds of mask patterns can be produced.
Opacity mask using RadialGradient Brush
This is very similar to the previous type. In this case the mask is defined using alpha values in a RadialGradientBrush. This brush is then applied to the OpacityMask property of a RadioButtonList control.
<
RadioButtonList Width="150" Height="200" Background="FireBrick" Canvas.Left="700" Canvas.Top="100">
<RadioButtonList.OpacityMask>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#aa000000" Offset="0" />
<GradientStop Color="#55000000" Offset="0.25"/>
<GradientStop Color="#aa000000" Offset="0.5" />
<GradientStop Color="#55000000" Offset="0.75"/>
<GradientStop Color="#aa000000" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</RadioButtonList.OpacityMask>
.........
</RadioButtonList>
Figure 4
Opacity mask using Image Brush
An Image Brush can be used to produce interesting masks. The image (used by the Image Brush) can be constructed such that different portions of it have different levels of transparency. When such a mask is applied to a control, the effect of the mask gets beautifully reflected on the background of the control.
An Image Brush is constructed by using its ImageSource property to specify the name of the file to use as mask. In Figure 5, the mask is applied to a ComboBox control.
<
ComboBox Width="200" Height="150" Background="Gold" Canvas.Left="700" Canvas.Top="100">
<ComboBoxItem Foreground="Red">Option 1</ComboBoxItem>
<ComboBoxItem Foreground="Red">Option 2</ComboBoxItem>
<ComboBoxItem Foreground="Red">Option 3</ComboBoxItem>
<ComboBox.OpacityMask>
<ImageBrush ImageSource="Images\Im6.png"/>
</ComboBox.OpacityMask>
</ComboBox>
Figure 5
In the case of a mask constructed using Image Brush, it is necessary to create the mask using a tool which specifically allows transparency values to be set on it. It is not sufficient to merely use an image (say, created using PaintBrush) which has areas with different colors and shades. In that case, even though the image has different colors, all those colors are fully opaque so it is equivalent to not setting a mask.
To be able to create an image with transparency settings, use a photo shop tool which has provision for such settings to be made.
Opacity mask using Drawing Brush
Opacity mask can also be constructed using a Drawing Brush. A Drawing Brush is used to construct drawings with basic components like rectangle and ellipse or even images or text. While specifying the color of the brush to be used for the drawing, the opacity is also specified using #AARRGGBB notation. Now if the brush is applied to the Opacity Mask property of a control, the effect of the mask can be seen as shown in Figure 6.
. . . . .
<Button.OpacityMask>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="#AA00FF00">
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry RadiusX="75" RadiusY="75"/>
<EllipseGeometry RadiusX="75" RadiusY="65"/>
<EllipseGeometry RadiusX="75" RadiusY="55"/>
<EllipseGeometry RadiusX="45" RadiusY="100"/>
<EllipseGeometry RadiusX="35" RadiusY="100"/>
<EllipseGeometry RadiusX="25" RadiusY="100"/>
<EllipseGeometry RadiusX="15" RadiusY="100"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Button.OpacityMask>
. . . . .
Figure 6
Opacity mask using a pattern
It is possible to create tiled patterns of a given image or drawing using ImageBrush or DrawingBrush, which are types of Tile Brushes. Such a tiled pattern can itself be used as an opacity mask.
<
Label Width="200" Height="150" Canvas.Left="5" Canvas.Top="400">
<Label.Background>
<ImageBrush ImageSource="Images\sunset.jpg" />
</Label.Background>
<Label.OpacityMask>
<ImageBrush Stretch="UniformToFill" AlignmentX="Center" Viewport="0,0,25,25" ViewportUnits="Absolute" TileMode="Tile" ImageSource="Images\Im7.png" />
</Label.OpacityMask>
</Label>
Figure 7
Image Brush is used to create a pattern in the above example. The type of tile pattern is specified using various attributes of the Image Brush. A pentagon shaped mask is used. The pentagon itself has a certain degree of opacity while areas surrounding it are completely transparent. When such a mask is applied to a base image, portions of the image lying beneath the pentagon shape are made partially visible while the remaining portions become completely transparent.
Conclusion
Thus we have seen that it is possible to introduce interesting patterns and variations in the look of Windows Controls using opacity masks. We have also seen that XAML provides a simple way to implement opacity masks without using procedural code.