Silverlight 2 study NOTE 2: three basic layout controls (Canvas, StackPanel, Grid)

This article mainly translated the ScottGu blog article: Silverlight Tutorial Part 2: Using Layout Management. Although it was a translation, I found that I had a deeper understanding of the three layout controls through the notes.

Silverlight provides a flexible layout management system that allows programmers and artists to conveniently control the location of controls. The layout management system provides two layout Methods: absolute positioning and relative positioning. The two positioning methods are actually the same as the two HTML positioning methods. Three commonly used layout controls are built in Silverlight 2 beta1: Canvas, StackPanel, and Grid.

I. Canvas:A fairly basic control, which controls the position of a word control through absolute positioning.
In Canvas, we use a new XMAL feature called "additional property" to control the position of the child control. You can set the Top, Left, Bottom, and Right values of the Child control relative to its parent control to control the position of the child control. In Canvas, we can use Canvas. Left and Canvas. Top to control the position of the child control relative to the parent control (Canvas. For example:

The preceding code is displayed as follows:

Canvas is very convenient for la s where child controls do not need to be moved. However, if the number of child controls is too large or the position of the child controls changes, it is not convenient to use Canvas. In this case, you can use other layout controls, such as StackPanel and Grid.

Ii. StackPanel: This control is used to arrange child widgets horizontally or vertically (by default, child widgets are arranged vertically ). Controls the padding of controls by using the Margin attribute of the Child control (the effect of this attribute is the same as that of the Margin attribute of HTML. For example:

The preceding code is displayed as follows:

3. Grid: Grid is a flexible layout control. It manages the layout of child controls through tables in the row and column, similar to the Table control in HTML.
Unlike the Table control in HTML, you cannot directly nest the child control in cells. In Grid, you must use <Grid. rowDefinitions> and <Grid. columnDefinitions> to define the row and column structure of the Grid. Then, use the additional properties of the Grid in the Child control to control the cells to which the child control belongs.
The following is an example of Grid layout. Pay attention to the cell to which the control belongs:

The preceding code is displayed as follows:

After learning about the three basic layout controls, we can easily manage the layout of the controls on the page.