Search
Author
ASP.NET Tutorials
Author
Sheo Narayan
Silverlight 4.0 Tutorials
Silverlight 1.0 Tutorials
Latest Articles
Winners

Win Prizes

Social Presence
Like us on Facebook
Silverlight Tutorials | Report a Bug in the Tutorial
Bookmark It
Silverlight Opacity, OpacityMask, Clip, RenderTransform tutorials
Opacity, OpacityMask, Clip and RenderTransform are few of the properties of the Drawing/Shapes objects that are commonly used.
 
DEMO : Opacity, OpacityMask, Clip and RenderTransform properties of the drawing objects Show Source Code
Opacity
Opacity property allows us to control the alpha or transparency value of the object. 
<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>
OpacityMask
OpacityMask property allows us to control the alpha property of the different portion of the drawing objects. 
<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>
Clip
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. 
<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>
RenderTransform
RenderTransform allows us to transform the object to rotate, skew, scale, move.
RotateTransform allows you to rotate the object in the specified degree.
ScaleTransform allows you to skew the object to specified x and y axis.
SkewTransform allows you to Skew the object to skew in the specified angle. 
<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>