In Silverlight, there are a several options for creating shapes and drawing them on the screen. This QuickStart introduces shapes, such as ellipses, rectangles, polygons, and paths. This QuickStart focuses on creating graphics using XAML.

This QuickStart contains the following sections:

Introduction to Graphics in Silverlight

In Silverlight, there are two sets of classes that define a region of space: Shape and Geometry. The main difference between these classes is that a Shape has a brush associated with it and can be rendered to the screen, while a Geometry simply defines a region of space and is not rendered. You can think of a Shape as a UIElement with its boundary defined by a Geometry. This QuickStart just covers Shape classes.

The different Shape classes are Line, Ellipse, Rectangle, Polygon, Polyline, and Path. Path is interesting in that it allows you to define an arbitrary geometry for its boundary.

In order for a Shape to be renedered to the screen, a Brush must be assoiated with it. The Fill property of the Shape is set to the desired Brush. The different types of brushes in Silverlight are: SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush, and VideoBrush. For more information about Brushes, see the Brushes Quickstart.

For more information about the Shape and Geometry classes, see the following topics on MSDN:

• Shapes and Drawing
• Geometries
• Path Markup Syntax

Ellipses

An Ellipse is a shape with a curved perimeter. To create a basic Ellipse, simple specify a Width, Height, and a Brush for the Fill.

The following example creates an Ellipse with a Width of 100, a Height of 100, and uses a SteelBlue SolidColorBrush as its Fill. Use the sliders in this example to experiment with different property values.

Rectangles and Strokes

A Rectangle is a four sided shape with opposite sides being equal. To create a basic Rectangle, simple specify a Width, a Height, and a Fill.

Silverlight enables you to round the corners of a Rectangle. To create rounded corners, specify a value for the RadiusX and RadiusY properties. These properties specify the x and y axes of an ellipse that defines the curve of the corners. The maximum value of RadiusX is the Width divided by two and the maximum value of RadiusY is the Height divided by two.

All Shape classes have Stroke and StrokeThickness properties. Stroke specifies the Brush that is used to paint the border of the Shape. If a Brush for Stroke is not specified, then the border around the shape is not drawn. StrokeThickness specifies the width of the border.

The following example creates a Rectangle with a Width of 100 and Height of 50. It uses a SteelBlue SolidColorBrush for its Fill and a Black SolidColorBrush for its Stroke. The StrokeThickness is set to 3 and the RadiusX and RadiusY properties are set to 10, which gives the Rectangle rounded corners. Use the sliders in this example to experiment with different property values.

Polygons

A Polygon is a shape with a boundary defined by an arbitrary number a points. The boundary is created by connecting a line from one point to the next, with the last point connected to the first point. The Points property defines the collection of points that make up the boundary. In XAML, you define the points with a comma separated list. In C# or Visual Basic, you use a PointCollection to define the points and you add each individual point as a Point structure to the collection.

The following example creates a Polygon with four points set to (10,200), (60,140), (130,140), and (180,200). It uses a Blue SolidColorBrush for its Fill. No Stroke is defined, so it is possible to arrange the points so that nothing is rendered. If a Stroke is defined, at least a line or a point as thick as the Stroke is drawn. Use the sliders in this example to experiment with the coordinates of the different points. Also, note that if you select the Stroke check box, the last point is connected to the first point.

Polylines

A Polyline is similar to a Polygon in that the boundary of the shape is defined by a set of points. The main difference between a Polyline and a Polygon is that the last point in a Polyline is not connected to the first point. The Fill of a Polyline still paints the interior space of the shape, even if the ends of the boundary (or Stroke) do not meet.

As with a Polygon, the Points property defines the collection of points that make up the boundary. In XAML, you define the points with a comma separated list. In C# or Visual Basic, you use a PointCollection to define the points and you add each individual point as a Point structure to the collection.

The following example creates a Polyline with four points set to (10,200), (60,140), (130,140), and (180,200). A Fill is not defined, but a Stroke is defined. Notice that the last and first points are not connected as they are in a Polygon. Use the sliders in this example to experiment with the coordinates of the different points. Compare the differences between a Polyline and a Polygon when the Fill and Stroke check boxes are changed.

Paths

A Path is the most versatile Shape because it allows you do define an arbitrary geomtery. However, with this versatility comes complexity. This section shows how to create a basic Path in XAML. For an in-depth discussion of Paths and how to define them, see Path Markup Syntax and Shapes and Drawing on MSDN.

The geometry of a path is defined with the Data property. The Data property can be set to a Geometry object or in XAML. To define a path in XAML, you use the path markup syntax.

The following example creates a Path that is comprised of a Bezier curve segment and a line segment. The Data begins with the move command, indicated by M, which establishes a start point for the path. The capital M indicates an absolute location for the new current point. A lowercase m indicates a relative location. The first segment is a cubic Bezier curve that begins at (100,200) and ends at (400,175), which is drawn by using the two control points (100,25) and (400,350). This segment is indicated by the C command in the Data attribute string. Again, the capital C indicates an absolute path; the lowercase c indicates a relative path.

The second segment begins with an absolute horizontal line command H, which specifies a line drawn from the preceding subpath's endpoint (400,175) to a new endpoint (280,175). Because it is a horizontal line command, the value specified is an x-coordinate.

XAML

<Path Stroke="DarkGoldenRod" 
              StrokeThickness="3" 
              Data="M 100,200 C 100,25 400,350 400,175 H 280" />

What's Next

You can fill graphics and controls with all kinds of brushes including solid colors, gradients, images, even video. Next, we introduce you to Brushes in Silverlight.

See Also

• Shapes and Drawing
• Geometries
• Path Markup Syntax