Silverlight Canvas Control

Silverlight Canvas Control

The Canvas control, used as a container for child controls, defines functionality to position the child controls. This article demonstrates how to create and use a Canvas control in Silverlight using C# and XAML.

Creating a Canvas

The Canvas element represents a Silverlight Canvas control in XAML.

The Canvas control has three properties. The Left property represents the distance between the left side of a control and its parent container Canvas. The Top property represents the distance between the top of a control and its parent container Canvas.

The code in Listing 1 creates a Canvas and adds three Rectangle controls and position them using Canvas control properties.

<Rectangle

Canvas.Left="10" Canvas.Top="10"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10" Fill="Red" />

<Rectangle

Canvas.Left="60" Canvas.Top="60"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10" Fill="Blue" />

<Rectangle

Canvas.Left="110" Canvas.Top="110"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10" Fill="Green" />

</Canvas>

Listing 1

The output looks like Figure 1.

Figure 1

The z-order of a control determines whether the control is in front of or behind another overlapping control. The default z-order of controls is the order controls are created in. The ZIndex property of Canvas represents the z-order of a control. The maximum value

g 2 changes the z-order of these rectangles using the ZIndex property of the Canvas.

The code snippet in Listing 2 sets the position of the Canvas control in the left top corner of the page.

<Rectangle

Canvas.Left="10" Canvas.Top="10"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10"

Fill="Red" Canvas.ZIndex="2" />

<Rectangle

Canvas.Left="60" Canvas.Top="60"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10"

Fill="Blue" Canvas.ZIndex="1" />

<Rectangle

Canvas.Left="110" Canvas.Top="110"

Height="200" Width="200"

Stroke="Black" StrokeThickness="10"

Fill="Green" Canvas.ZIndex="3" />

</Canvas>

Listing 2

The new output looks like Figure 2 where blue rectangle is below red and green is at the top of both of them.

Figure 2

Formatting a Canvas

The Background property of the Canvas sets the background colors of a Canvas. You may use any brush to fill the border. The code in Listing 3 uses a linear gradient brush to draw the background of a Canvas.

<Canvas.Background>

</LinearGradientBrush>

</Canvas.Background>

<Canvas.Foreground>

</LinearGradientBrush>

</Canvas.Foreground>

Listing 3

The new Canvas looks like Figure 3.

Figure 3

Setting Image as Background of a Canvas

To set an image as background of a Canvas, we can set an image as the Background of the Canvas. The code snippet in Listing 4 sets the background of a Canvas to an image.

<Canvas.Background>

</Canvas.Background>

Listing 4

The new output looks like Figure 4.

Figure 4

Summary

In this article, I discussed how we can create a Canvas control in Silverlight and C#. We saw how we can format a Canvas by setting its background property. After that, we saw you to set an image as the background of a Canvas. We also saw how we can take advantages of Canvas properties Left, Top, and ZIndex to position child controls on a canvas.