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.
<Canvas/>
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.
<Canvas Background="LightCyan" >
<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 of ZIndex is 32766.
In Figure 1, the z-order of red, blue, and green rectangles is 1, 2, and 3 respectively. Now, the code in Listing 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.
<Canvas Background="LightCyan" >
<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 StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Blue" Offset="0.1" />
<GradientStop Color="Orange" Offset="0.25" />
<GradientStop Color="Green" Offset="0.75" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Canvas.Background>
<Canvas.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Orange" Offset="0.25" />
<GradientStop Color="Green" Offset="1.0" />
</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>
<ImageBrush ImageSource="Flowers.jpg" />
</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.