Windows Phone development path (8) Silverlight three layout containers

Silverlight inherits the most important part of WPF, which is an extremely flexible Layout mode. With this layout mode, you can organize content into a group of different layout containers. Each container has its own layout logic, one for placing elements (stackpanel), and the other for using a hardcoded coordinate system (canvas ), the last one is used to arrange elements in an invisible cell (GRID ). You can even create custom Layout containers.

Because the top-level usercontrol defines a Silverlight page, it can only accommodate one element. To load more than one element and build a more practical user interface, you need to place the container on the webpage and add other elements to the container.

Silverlight provides three Derived classes for the Panel class to arrange layout: stackpanel, canvas, and grid. The following describes the three layout containers.

Stackpanel

The layout logic of stackpanel is to arrange a group of elements from top to bottom or from left to right (depending on orientation ).

The stackpanel layout is used to define a piece of text and a button. The Code is as follows:

<StackPanel Background="White">
        <TextBlock x:Name="lbMsg" Text="Hello StackPanel" Margin="5"></TextBlock>
        <Button x:Name="btnClick" Content="Click me" Margin="5"></Button>
</StackPanel>

Effect

Canvas

The canvas is the simplest of the three Silverlight containers. Its Layout logic is to place elements with precise coordinates. To layout elements in the canvas, you need to set three attributes: Left coordinate, top coordinate, and zindex layer.

To set additional attributes in XAML, you need to use a two-segment syntax. These two parts are separated by periods. The left side of the period is the name of the attribute class to be defined (for example, canvas), and the right side is the name of the property (for example, top ). The following is an example of the canvas layout. A rectangle and an elliptical ellipse are created in the canvas. The Code is as follows.

View code

<Canvas>
        <Rectangle Name="rtg1" Canvas.Left="5" Canvas.Top="5" Width="100" Height="50" Stroke="Red" StrokeThickness="3"/>
        <Ellipse Name="ell1" Canvas.Left="5" Canvas.Top="60" Width="100" Height="50" Stroke="Red" StrokeThickness="3"/>
</Canvas>

Effect

Note: The coordinates start at the upper left corner. If left and top attributes are not set, they are both 0 by default. That is, the element is placed in the upper left corner of the canvas.

Grid

Grid (or grid) is the most powerful layout container in Silverlight. Grid separates elements and places them in an invisible grid composed of multiple rows and multiple columns, although the grid is designed to be invisible, you can use the grid. the showgridlines attribute is set to true to display it.

There are two steps to create a grid-based layout. First, select the expected number of columns and the number of rows. Second, assign appropriate rows and columns to the contained elements.

The following is an example of creating a grid-based layout. The Code is as follows:

View code

<Grid showgridlines = "true" background = "white">
<! -- Define rows and columns -->
<Grid. rowdefinitions>
<Rowdefinition> </rowdefinition>
<Rowdefinition> </rowdefinition>
</Grid. rowdefinitions>
<Grid. columndefinitions>
<Columndefinition> </columndefinition>
<Columndefinition> </columndefinition>
<Columndefinition> </columndefinition>
</Grid. columndefinitions>
<! -- Assign appropriate rows and columns to the put elements -->
<Button content = "top left" grid. Row = "0" grid. Column = "0"/>
<Button content = "middle left" grid. Row = "0" grid. Column = "1"/>
<Button content = "bottom Middle" grid. Row = "1" grid. Column = "1"/>
<Button content = "bottom right" grid. Row = "1" grid. Column = "2"/>
</GRID>

Effect

Note: 1. There is no need to provide any information in the rowdefinition or columndefinition element. If they are empty, the grid will share the space evenly among all rows and columns.
2. To put individual elements into a cell, use the two additional attributes grid. Row and grid. column. The two additional attributes use 0 as the default index number.
3. If you want to put the elements in the first cell, you can leave the values of these two additional attributes unspecified because they are 0 by default, but are explicitly specified at the end, because it looks clearer.

Of course, grid also has three types of dimension adjustment policies and the content about the nested layout of grid can be used in combination with the actual usage. What we want to summarize today is the three layout containers, the content to be summarized in the next article is about Silverlight animation. I hope you can continue to support it. Thank you!