Go to DotNetFunda.com
 Online : 1499 |  Welcome, Guest!   Login
 
<<= Please see left side tutorials menu.

  • Nominate yourself for "Agile Software Development using Scrum" online session for FREE, click here (Hurry, limited seats).

  • Download OOPS and ASP.NET Online training session video and PPT from here.

ASP.NET Tutorials | Report a Bug in this Tutorial

Interesting?   Share and Bookmark this

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>



About Us | The Team | Advertise | Contact Us | Feedback | Privacy Policy | Terms of Use | Link Exchange | Members | Go Top
General Notice: If you found copied contents on this page, please let us know the original source along with your correct email id (to communicate) for further action.
All rights reserved to DotNetFunda.Com. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
(Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher)