Graphics in Silverlight 5: Part I

Silverlight 5 provides graphics capabilities which you can use to enrich your applications and make them more attractive. While graphics support in Silverlight is not as comprehensive as in WPF, it is still useful in many scenarios. This article describes the built-in support in Silverlight 5 for graphics. This article will not go into XNA or gaming related graphics.

Graphics can generally be categorized as two-dimensional (2-D) and 3-D.

Shape and Geometry classes enable you to render 2-D objects. The Shape class acts as a base class for shape elements, such as Ellipse, Rectangle, Polygon, and Polyline. Its hierarchy is shown below in Figure 1.

Figure 1

As you can see, Shape derives from FrameworkElement which in turn derives from UIElement.

Shapes can be used inside Canvas, panels and most other controls.

Shape elements have many properties in common. A few of these properties are:

Fill: Retrieves or specifies the Brush that specifies how to paint the interior of the shape.. The default is null.
Height: Retrieves or specifies the height of the element.
Stroke: Retrieves or specifies the outline of the shape. The default is null.
StrokeThickness: Retrieves or specifies the width of the shape's outline.
Width: Retrieves or specifies the width of the element.
Opacity: Retrieves or specifies the transparency level for the Shape.

Let's now look at some common shapes.

Ellipse

This element is used to draw an elliptical shape.

Create a Silverlight 5 application and name it as SilverlightGraphics.

The following XAML code shows a simple example of an ellipse:

<Ellipse Margin="95,131,386,269" Stroke="DarkRed" >
</Ellipse>
Add this code in MainPage.xaml, between the <Grid></Grid> elements. The MainPage.xaml will now look as follows:

<UserControl x:Class=" SilverlightGraphics.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse Margin="95,131,386,269" Stroke="DarkRed" >
</Ellipse>
</Grid>
</UserControl>
Build and execute the application. The output is shown in Figure 2.

Figure 2

The following XAML code shows how you can draw a circle using the Ellipse element:

<Ellipse Margin="95,69,386,269" Fill="Pink" Stroke="Black" StrokeThickness="2">
</Ellipse>
Follow steps similar to earlier to add this code to the application. Build and execute the application.

The output is shown in Figure 3.

Figure 3

In the next part of this series, we shall see how to create other Shape elements.

Conclusion: The first part of this series introduced graphics in Silverlight 5 and showed how to use the Ellipse element.

Continue to next part >>