![]() | drawing and painting |
Silverlight supports vector graphics by providing the Ellipse, Rectangle, Line, Polyline, Polygon, and Path elements. Collectively, these elements are known as the shape elements.
This document contains the following sections
Silverlight provides three basic shape elements: Ellipse, Rectangle, and Line.
The following example draws an Ellipse, a Rectangle, and a Line in a Canvas.
[hide XAML]
<Canvas 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"/> <Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> <Line X1="280" Y1="10" X2="10" Y2="280" Stroke="black" StrokeThickness="5"/> </Canvas>
[hide] [restart]
In addition to the Ellipse, Line, and Rectangle elements, Silverlight provides three other shape elements: Polygon, Polyline, and Path. A Polygon is a closed shape with an arbitrary number of sides, while a Polyline is a series of connected lines that might or might not form a closed shape. The following example creates a Polygon and a Polyline.
[hide XAML]
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Polyline Points="150, 150 150, 250 250, 250 250, 150" Stroke="Black" StrokeThickness="10"/> <Polygon Points="10,10 10,110 110,110 110,10" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas>
[hide] [restart]
The Path element can be used to represent complex shapes that include curves and arcs. To use a Path element, you use a special type of attribute syntax to set its Data property. The following example creates three Path elements.
[hide XAML]
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z" Stroke="Black" Fill="SlateBlue" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 10,100 C 10,300 300,-200 250,100z" Stroke="Red" Fill="Orange" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 0,200 L100,200 50,50z" Stroke="Black" Fill="Gray" Canvas.Left="150" Canvas.Top="70" /> </Canvas>
[hide] [restart]
For more information about path markup syntax, see Path Markup Syntax in the Silverlight SDK.
Most shapes consist of two parts, a stroke (the outline) and a fill which are controllable through their Stroke and Fill properties. The following illustration labels the stroke and fill of the Rectangle from the first example.
Not every shape has both a fill and a stroke: A Line has only a stroke. Setting the Fill property of a Line has no effect.
You set a shape's Stroke and Fill with a Brush. There are 4 types of brush objects that you can use:
To paint an area a solid color, you use a SolidColorBrush. XAML provides several ways to create a SolidColorBrush.
"Black"
or "Gray"
.#rrggbb
, where rr is a two-digit
hexadecimal value that describes the amount of red in the color, gg describes the amount of green,
and bb describes the amount of blue. For example, #0033FF
.#aarrggbb
. For example, #990033FF
.The following example shows several ways to paint an object black.
[hide XAML]
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10" Fill="black"/> <!-- SolidColorBrush by color name. --> <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10" Fill="#000000"/> <!-- SolidColorBrush by 6-digit hexadecimal notation. --> <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110" Fill="#ff000000"/> <!-- SolidColorBrush by 8-digit hexadecimal notation. --> <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110"> <Ellipse.Fill> <!-- SolidColorBrush by object element syntax. --> <SolidColorBrush Color="Black"/> </Ellipse.Fill> </Ellipse> </Canvas>
[hide] [restart]
Silverlight supports both linear and radial gradients. Gradients have one or more gradients stops that describe the different colors that the gradient transitions between and the location of those colors. Most gradients only need two gradients stops, but you can add as many gradients stops as you need.
To add gradient stops to a gradient brush, you create GradientStop objects. Set the Offset property of a GradientStop to a value between 0 and 1 to set its relative position in the gradient. Set the Color property of the GradientStop to a named color or a hexadecimal value.
The following example uses LinearGradientBrush and RadialGradientBrush objects to paint four Rectangle objects.
[hide XAML]
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- Linear gradients --> <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <!-- Radial gradients --> <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="1,0"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas>
[hide] [restart]
You can also use gradients to paint a shape's Stroke.
The following illustration highlights the gradient stops of the first LinearGradientBrush from the previous example.
Another type brush is ImageBrush. By default, the image is stretched to fill the entire shape, but you can use the Stretch property to control how the brush stretches its image. The following example uses two ImageBrush objects with different Stretch settings to paint two Rectangle objects.
[hide XAML]
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White"> <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <ImageBrush ImageSource="star.png"/> </Rectangle.Fill> </Rectangle> <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <ImageBrush ImageSource="star.png" Stretch="Uniform"/> </Rectangle.Fill> </Rectangle> </Canvas>
[hide] [restart]
Like all UI elements, shape elements can be scaled, rotated, or translated by using their RenderTransform property. For more information, see the next topic, common graphics properties.
Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices.