Windows 8 Instance Tutorial: Layout control

Similar to traditional applications, Windows store application allows developers to manage the application UI through layout controls. This article will discuss WINDOWS8 layout design control.

Windows 8 Layout controls

In the Windows Store application design, layout controls control the location and size of objects, because Windows Store applications are not only for desktop operating systems, but also for mobile device deployments, so at design time, Often need to take into account the different resolution or hardware screen size standards applied layout suitability, the maximum degree of maintenance of design flexibility is an important part of application design principles. Depending on functionality, Windows 8 provides developers with rich layout controls to apply layout design requirements. These include:

Grid

Canvas

StackPanel

Wrapgrid

Variablesized Wrapgrid

Virtualizing StackPanel

As you can see from the MSDN development documentation, the above layout controls derive from the Panel class, and the Panel class can load different types of controls as child controls.

Developers who are familiar with SILVERLIGHT,WPF and Windows Phone will find that some layout controls are the same. Here's a quick look at the effects of these layout controls and how to use them,

Grid

Grid is a layout control similar to an HTML table, and is often used in application design because of its high flexibility. A Grid control contains a set of row (row) and column (column). Developers can assign different object controls to different rows and columns to achieve position control.

Basic code:

<grid x:name= "Mygrid" ></Grid>

Table Definition Code:

<grid x:name= "Mygrid" >
    
<Grid.RowDefinitions>
<rowdefinition/>
<rowdefinition/ >
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<columndefinition/>
<columndefinition/>
</Grid.ColumnDefinitions>
</Grid>

In the above code, The Grid.rowdefinitions and Grid.columndefinitions collections use RowDefinition and columndefinition to define two rows of two-column grid, where additional property rowdefinitions are used to describe the rows and columns collection. (Additional attributes (attached property) XAML important concepts, please refer to the XAML instance tutorial series for details)

The background code declares the rows and columns collection:

Grid.rowdefinitions = new list<rowdefinitions> ();

Grid.columndefinitions = new list<columndefinitions> ();

Complete the table definition, placing the control object in the specified table position, such as adding a TextBlock text box to the first column of the first row, as follows:

<grid x:name= "Mygrid" >
<Grid.RowDefinitions>
<rowdefinition/>
<rowdefinition/ >
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<columndefinition/>
<columndefinition/>
</Grid.ColumnDefinitions>
<textblock x:name= "tbname" grid.row= "0" grid.column= "0"/>
</Grid>

As you can see from the code, because the properties of row and column are not implemented in TextBlock, placing control objects to a table is implemented through additional properties Grid.Row and Grid.column. With the concept of attached properties and dependency properties, it is understandable that all of its child controls can be accessed through grid.