Introduction
In Silverlight we can apply transparency either by using Alpha Channel
or Opacity. In this post you will learn how to apply trnsparency using Alpha
Channel.
As I have discussed in my previous post titled 'Alpha Channels in
XAML Silverlight' about the Alpha Chennel. Take a little look here too.
In Alpha Channel we just add additional code as first element in
existing hexadecimal color code. The additional element specifies the
transparency of a color from 0 (full transparent) to 255 (full opaque). For example,
if we wish to apply 'Blue' color then we'll use its hexadecimal color code as
'#0000FF'. Now to apply the transcarency in this color we add additional
element (from 0 to 255 (FF). FF is default means no transparency) as '#FF0000FF' (no transparency). Let's
take a look at program.
In above screenshot, I marked out the Alpha Channel and normal HTML
based hexa color code.
In above example, I have used a textblock and 5 rectangles overlapped on
text but to show the transparency I have used alpha channel there.
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"/>
<!--4
circle with partially transparent background-->
<Rectangle
Width="80" Height="100" Fill="#19FF0000"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Rectangle
Width="80" Height="100" Fill="#4CFF0000"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="104,0,0,0"/>
<Rectangle
Width="80" Height="100" Fill="#7FFF0000"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="206,0,0,0"/>
<Rectangle
Width="80" Height="100" Fill="#CCFF0000"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="310,0,250,0"/>
<Rectangle
Width="80" Height="100" Fill="#CCFF0000"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="415,0,0,0"/>
</Grid>
Be tuned for next post.
HAVE A HAPPY CODING!!