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.

 

<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

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.

<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.