Quickly build Windows 8 style Apps 17-layout controls

Original: Quick build Windows 8 style app 17-layout controls

This post focuses on three common layout controls: Canvas, Grid, StackPanel.

The Panel class is an important class in developing a Windows 8 store app that plays a very important role in the Windows 8 Store app layout system.

A panel can host multiple child elements, which can be placed on a stack, in a grid, or on the edge of a handle element.

The Panel class itself is an abstract class, and the following is the hierarchy of the Panel class:

The three standard layout controls included in the Windows 8 store app:canvas(usually in general layout, try not to think about using canvas, but in some special cases, using canvas is very handy),Grid (It is preferred for most regular layouts),StackPanel(probably the simplest type of panel).

Canvas

To position elements in the canvas, you need to provide the horizontal and vertical coordinates relative to the upper-left corner.

Code implementation effect:

Where the left and top properties represent the relative position of the upper-right corner of the element and the upper-left corner of the canvas.

In general, canvas is better suited to layout elements in any location, so it is more suitable for vector graphics programming than control layout programming.

Similarly our C # code controls the control elements in the canvas layout.

We note that the left and top properties of the button relative to the canvas are not set in the XAML code and are set by C # code.

The SetValue method is defined in the DependencyObject class, where Leftproperty and Topproperty are static fields of the DependencyProperty type in the canvas.

The final implementation of the two layout settings is the same.

Canvas also has an additional property that is ZIndex, and we can use ZIndex to change the hierarchy of the default elements.

We can set the Canvas.ZIndex attached property in one or more character elements, which can be understood as the z-axis that the screen has come up with, and the larger Z-value will overwrite the smaller Z-value elements. If two elements have the same Canvas.ZIndex value, they are layered according to their de-order in the Children collection.

Note : Although the Canvas.ZIndex attached property is defined in the canvas class, it actually applies to any type of panel. In addition, if we customize a panel class, we do not need to deal with Z-values, the layout system will automatically process.

Grid

Grid is the default choice when we select a panel class, it is very flexible and easy to use.

The grid allows us to think of tables in HTML, but there are differences: grids are not like HTML tables, they are not formatted, they are for layout only, and there is no title or built-in cell split line concepts.

The grid has a certain number of rows and columns, the height of the rows can be different, and the column height can be different. Child elements in a grid can occupy a specific row and column, or they can occupy multiple rows and columns. Although the grid is very powerful, it also pays a price, we need to know how many rows and columns are needed to accommodate all the child elements when using the grid.

Note : Nested grids are very common, but do not misuse, especially if the program will frequently regenerate the layout. Overly complex nesting can result in very confusing layouts.

Implementation results:

The grid defines the RowDefinitions and columndefinitions two properties, which are collections of rowdefinition and ColumnDefinition objects, respectively. These objects define the height of each row and the width of each column, and we can usually have three choices:

1) Use the word "Auto";

2) fixed pixels;

3) asterisks, or numbers followed by asterisks;

The rows and columns where the child elements are located are indicated by the additional properties Grid.Row and Grid.column of the grid.

StackPanel

Stactpanel can be understood as a "stack" that arranges its child elements from top to bottom or from left to right, and the child elements do not overlap each other.

By default, the next element is arranged from top to bottom.

We can also set the child elements to be arranged from left to right.

We can change the direction of the arrangement of the child elements by StackPanel the Orientation property.

Of course, we can also set the direction of the child elements through C # code.

Quickly build Windows 8 style Apps 17-layout controls