Go to DotNetFunda.com
 Online : 1325 |  Welcome, Guest!   Login
 
<<= Please see left side tutorials menu.
WPF Tutorials  Download Online Sessions Videos   Subscribe for Online Trainings  Ask Technical Question

ASP.NET Tutorials | Report a Bug in this Tutorial

Found interesting? Add this to:

| More

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 | Testimonials | Privacy Policy | Terms of Use | Link Exchange | Members | Go Top
General Notice: If you found plagiarised (copied) contents on this page, please let us know the original source along with your correct email id (to communicate) for further action.
Copyright © DotNetFunda.Com. All Rights Reserved. Copying or mimicking the site design and layout is prohibited. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks. | 9/3/2010 4:00:27 AM