common graphic properties

Some properties apply to all Silverlight UIElement objects: Canvas, shapes, and TextBlock. This document describes the graphics properties these objects have in common.

This document contains the following sections.

the Opacity property

The Opacity property enables you to control the alpha, or transparency value, of a UIElement. You can set the Opacity property to a value between zero and one. The closer the value is to 0.0, the more transparent the object becomes. At zero, the object is completely invisible. The default Opacity setting is 1.0, which is completely opaque. The following example creates two shapes with different opacity settings.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
  <Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[hide] [restart]

the OpacityMask property

The OpacityMask property enables you to control the alpha value of different portions of a UIElement. For example, you can use the OpacityMask to make an element fade from right to left. The OpacityMask property takes a Brush object. The brush is mapped to the element and the alpha channel of each of the brush's pixels are then used to determine the resulting opacity of the element's corresponding pixels. If a given portion of the brush is transparent, that portion of the element becomes transparent.

You can use any type of brush as an OpacityMask, but LinearGradientBrush, RadialGradientBrush, and ImageBrush are the most useful.

The following example applies a LinearGradientBrush opacity mask to a Rectangle object.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
    <Rectangle.OpacityMask>
      <LinearGradientBrush>
        <GradientStop Offset="0.25" Color="#00000000"/>
        <GradientStop Offset="1" Color="#FF000000"/>       
      </LinearGradientBrush>
    </Rectangle.OpacityMask>
  </Rectangle>
  
  
</Canvas>

[hide] [restart]

the Clip property

The Clip property enables you to selectively draw portions of an element. To use the Clip property, you provide a Geometry object that describes the region that should be drawn. Everything that falls outside the geometry you provide is hidden, or "clipped."

The following example uses a RectangleGeometry as the Clip for an Ellipse element. As a result, only the portion of the Ellipse within the area defined by the RectangleGeometry is displayed; the portion outside the RectangleGeometry is clipped.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
    <Ellipse.Clip>
      <RectangleGeometry Rect="0, 0, 100, 100"/>
    </Ellipse.Clip>
  </Ellipse>
</Canvas>

[hide] [restart]

the RenderTransform property

The RenderTransform property enables you to use Transform objects to rotate, skew, scale, or translate (move) an element. The following list describes the different Transform objects you can use with the RenderTransform property.

  • RotateTransform: Rotates an object by a specified amount, expressed in degrees.
  • SkewTransform: Skews an object by the specified amount along the X- or Y-axis.
  • ScaleTransform: Enlarges or shrinks an object horizontally or vertically a the specified amount.
  • TranslateTransform: Moves an object horizontally or vertically a the specified amount.

There's also a special type of transform, TransformGroup, that you can use to apply multiple transforms to a single object.

The following example demonstrates each of the different Transform objects by using them to transform Rectangle elements.

[hide XAML]

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
  <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"
      Fill="Black">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10"
      Fill="red">
    <Rectangle.RenderTransform>
      <SkewTransform AngleX="30"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190"
      Fill="blue">
    <Rectangle.RenderTransform>
      <ScaleTransform ScaleX="1.3" ScaleY=".5"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
      Fill="Green">
    <Rectangle.RenderTransform>
      <TransformGroup>
        <RotateTransform Angle="45"/>
        <ScaleTransform ScaleX=".5" ScaleY="1.2"/>
        <SkewTransform AngleX="30"/>
      </TransformGroup>
    </Rectangle.RenderTransform>
  </Rectangle>
  
</Canvas>

[hide] [restart]

what's next

The next topic, images, describes how to use the Image element to display bitmap images.

Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices.