Tutorials » Silverlight tutorials »

Layout panel controls in Silverlight - Canvas


This chapter explains the Canvas control in Silverlight.


Silverlight offers 3 panel controls which can be used to define the layout and positioning of the controls in a page. Canvas is one of the available layout controls.

Canvas defines a area within which you can place other controls by specifying the x and y coordinate position. It is possible to overlap multiple controls within a canvas. Contrary to regular HTML, when controls are overlapped in a Canvas, overlapped controls can hide other controls.

When controls are placed within a Canvas, the x and y coordinates must be specified for each control using the attributes Canvas.Left and Canvas.Top

This sample shows how to place a rectangle control within a Canvas by specifying x and y coordinates:

<Canvas Width="500" Height="500" Background="White">
<Rectangle Canvas.Left="25" Canvas.Top="40" Fill="green" Width="100" Height="100" />
</Canvas>

The above xaml tags defines a rectangle, filled with green color, of size 100x100 pixels. The rectangle will be placed 25 pixels from the left of the Canvas and 40 pixels from the top of the Canvas.

The below example shows 3 rectangles overlapped each other:
 
<Canvas Width="500" Height="500" Background="White">
<Rectangle Canvas.Left="25" Canvas.Top="40" Fill="green" Width="100" Height="100" />
<Rectangle Canvas.Left="50" Canvas.Top="65" Fill="yellow" Width="100" Height="100" />
<Rectangle Canvas.Left="75" Canvas.Top="90" Fill="red" Width="100" Height="100" />
</Canvas>

The below images shows how the output look like:






Next Chapter: How to display image in a Silverlight control ?
Previous Chapter: Layout controls in Silverlight
More Chapters: Silverlight Tutorials
More Tutorials: Tutorial Index



Top Contributors
TodayLast 7 Daysmore...

Awards & Gifts

Online Members

Mohan
More...
 
Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India