AutoEventWireup="true" CodeFile="opacity.aspx.cs" Inherits="tutorials_controls_tutorialtemplate_Opacity"
Title="Silverlight Opacity, OpacityMask Clip, RenderTransform tutorials : DotNetFunda.com" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" runat="Server">
<table width="100%" cellpadding="2" cellspacing="0">
<tr valign="top" class="ArticleTitle">
<td style="padding-left: 10px;" valign="middle">
Silverlight Opacity, OpacityMask, Clip, RenderTransform tutorials</td>
</tr>
<tr>
<td class="ArticleContents">
Opacity, OpacityMask, Clip and RenderTransform are few of the properties of the Drawing/Shapes objects that are commonly used.
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" runat="Server">
<!-- START - Demo Section -->
<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
<tr>
<td class="DemoTitle" style="width:50%;">
DEMO : Opacity, OpacityMask, Clip and RenderTransform properties of the drawing objects
</td>
<td align="right">
<a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/silverlight/opacity.aspx"
target="_blank">Show Source Code</a>
</td>
</tr>
<tr valign="top">
<td>
<b>Opacity</b><br />
Opacity property allows us to control the alpha or transparency value of the object.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Opacity="1" Canvas.Left="5" Fill="Blue" Canvas.Top="5"
Height="50" Width="150" Stroke="Red" StrokeThickness="3" />
<Rectangle Opacity="0.5" Canvas.Left="5" Fill="Yellow"
Canvas.Top="30" Height="50" Width="150" Stroke="Red" StrokeThickness="3" />
</Canvas>
</pre>
</td>
<td>
<!-- START - Define XAML content. -->
<script type="text/xaml" id="xamlScript1">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Opacity="1" Canvas.Left="5" Fill="Blue" Canvas.Top="5" Height="50" Width="150" Stroke="Red" StrokeThickness="3" />
<Rectangle Opacity="0.5" Canvas.Left="5" Fill="Yellow" Canvas.Top="30" Height="50" Width="150" Stroke="Red" StrokeThickness="3" />
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost1">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost1', '200', '150', '#xamlScript1')
</script>
</div>
</td>
</tr>
<tr valign="top">
<td>
<b>OpacityMask</b><br />
OpacityMask property allows us to control the alpha property of the different portion of the drawing objects.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Opacity="1" Canvas.Left="5" Fill="Blue" Canvas.Top="5"
Height="150" Width="150" Stroke="Yellow" StrokeThickness="5">
<Rectangle.OpacityMask>
<LinearGradientBrush>
<GradientStop Color="#00000000" Offset="0.25"/>
<GradientStop Color="#ff000008" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Canvas>
</pre>
</td>
<td>
<!-- START - Define XAML content. -->
<script type="text/xaml" id="xamlScript2">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Opacity="1" Canvas.Left="5" Fill="Blue" Canvas.Top="5" Height="150" Width="150" Stroke="Yellow" StrokeThickness="5">
<Rectangle.OpacityMask>
<LinearGradientBrush>
<GradientStop Color="#00000000" Offset=".80"/>
<GradientStop Color="#ff000008" Offset=".20"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost2">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost2', '200', '200', '#xamlScript2')
</script>
</div>
</td>
</tr>
<tr valign="top">
<td>
<b>Clip</b><br />
Clip property allows us to draw a portion of the object. We need to specify Geometry property to draw the portion of the object, the region that falls outside the specified region is clipped.
Here, the RadiusX and RadiusY is the point from where the clipping begins and Center is the center point of the clipping.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Canvas.Left="5" Fill="Red" Canvas.Top="5"
Height="250" Width="250" Stroke="Blue" StrokeThickness="2">
<Rectangle.Clip>
<EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="100" />
</Rectangle.Clip>
</Rectangle>
</Canvas>
</pre>
</td>
<td>
<!-- START - Define XAML content. -->
<script type="text/xaml" id="xamlScript3">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Canvas.Left="5" Fill="Red" Canvas.Top="5" Height="250" Width="250" Stroke="Blue" StrokeThickness="2">
<Rectangle.Clip>
<EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="100" />
</Rectangle.Clip>
</Rectangle>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost3">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost3', '200', '200', '#xamlScript3')
</script>
</div>
</td>
</tr>
<tr valign="top">
<td>
<b>RenderTransform</b><br />
RenderTransform allows us to transform the object to rotate, skew, scale, move.<br />
<b>RotateTransform</b> allows you to rotate the object in the specified degree.<br />
<b>ScaleTransform</b> allows you to skew the object to specified x and y axis.<br />
<b>SkewTransform</b> allows you to Skew the object to skew in the specified angle.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Canvas.Left="35" Fill="Red" Canvas.Top="5"
Height="50" Width="50" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<RotateTransform Angle="35"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Left="105" Fill="Yellow" Canvas.Top="5"
Height="60" Width="60" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY=".5"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Left="50" Fill="Orange" Canvas.Top="100"
Height="50" Width="50" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<SkewTransform AngleX="45"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</pre>
</td>
<td>
<!-- START - Define XAML content. -->
<script type="text/xaml" id="xamlScript4">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Canvas.Left="35" Fill="Red" Canvas.Top="5" Height="50" Width="50" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<RotateTransform Angle="35"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Left="105" Fill="Yellow" Canvas.Top="5" Height="60" Width="60" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY=".5"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Left="50" Fill="Orange" Canvas.Top="100" Height="50" Width="50" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<SkewTransform AngleX="25"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost4">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost4', '200', '200', '#xamlScript4')
</script>
</div>
</td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" runat="Server">
</asp:Content>
Go Top