Transparency using Opacity in XAML Silverlight

Introduction

 

In Silverlight we can apply transparency either by using Alpha Channel or Opacity. In this article you will learn how to apply trnsparency using Opacity.

 

I have discussed the Alpha Channel in my previous article 'Alpha Channels in XAML Silverlight'; take a little look there too.

 

Opacity is nothing more than an additional element attribute; it is very different from Alpha Channel where we applied an additional color code in hexadecimal color code to create transparency. But in Opacity we use an Opacity attribute with a decimal value varying from 0 to 1. So, to apply opacity we can use 0 or 0.1, 0.2, 0.3 …, 0.9 or 1 (1 is the default which means no opacity or in other words no transparency). Let's take a look at a screenshot where I will be using opacity.

 

<!--[if !vml]-->
<!--[endif]-->

 

In the above screenshot, I marked out the Alpha Channel and Opacity.

 

In the above example, I have used a textblock and 6 rectangles overlapped on text to show the transparency.

 

XAML Code

 

<Grid

          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

          x:Class="SilverlightApplication1.MainPage"

          Width="640" Height="480">

         

          <!--TextBlock with text-->

          <TextBlock Text="ITORIAN.COM/ABOUT" FontSize="50"/>

         

          <!--6 rectangles with partially transparent background-->

          <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.1" VerticalAlignment="Top" HorizontalAlignment="Left" />

          <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="104,0,0,0"/>

          <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.5" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="206,0,0,0"/>

          <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.7" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="310,0,250,0"/>

          <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.9" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="415,0,0,0"/>

          <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="520,0,0,0"/>

         

</Grid>

 

Be tuned for the next article.

 

HAVE A HAPPY CODING!!