Windows 8.1 App re-start-several layout controls

Original: Windows 8.1 app to start again-several layout controls

This article introduces you to the use of several layout controls in Windows Store apps. Are canvas, Grid, StackPanel, and Variablesizedwrapgrid, respectively.

1. Canvas

The canvas uses absolute positioning to lay out the child elements. Element uses Canvas.Left and Canvas.Top attached properties for absolute positioning. Elements can use the Canvas.ZIndex attached property to specify a hierarchy, Canvas.ZIndex is an int type, and the larger the value, the higher the hierarchy.

So, in the code below, if the Canvas.ZIndex value of the element is the same, the order of the elements in the canvas is red, Blue, Green, Yellow, as shown in the left-hand side, from the back to the front. But because the red color block is set to Canvas.ZIndex = 1, the order of the elements is changed to blue, Green, Yellow, and red, as shown in the image below.

<CanvasWidth= " the"Height= " the">   <RectangleFill= "Red"Width= "+"Height= "+"Canvas.ZIndex= "1"/>   <RectangleFill= "Blue"Width= "+"Height= "+"Canvas.Left= " the"Canvas.Top= " the"/>   <RectangleFill= "Green"Width= "+"Height= "+"Canvas.Left= "+"Canvas.Top= "+"/>   <RectangleFill= "Yellow"Width= "+"Height= "+"Canvas.Left= "Max"Canvas.Top= "Max"/></Canvas>

2. Grid

Grid is a grid layout that uses Grid.rowdefinitions and grid.columndefinitions to define rows and columns in a grid. Its height and width can include pixel values, auto (auto set, default), and * (scale value) of three. As in the code below * and, the ratio represents 1/3 and 2/3 respectively.

Elements use the Grid.Row and Grid.column attached properties to define the index of the rows and columns of an element, respectively, with a value greater than or equal to 0, and the maximum index for the number of rows/columns.

Use the Grid.rowspan and Grid.columnspan attached properties to define, respectively, the number of rows and columns that the element can span, the value must be greater than 0, and the number of rows/columns remaining is greater than the number of rows/columns left.

HorizontalAlignment and VerticalAlignment define the horizontal and vertical alignment of the elements, respectively, and the default values are stretch. The Margin property is positioned relative to the element.

<GridWidth= "The "Height= "$">    <grid.columndefinitions>        <ColumnDefinitionWidth= "+"/>        <ColumnDefinitionWidth="*"/>        <ColumnDefinitionWidth= "Auto"/>        <ColumnDefinitionWidth= "* *"/>    </grid.columndefinitions>    <grid.rowdefinitions>        <RowDefinition/>        <RowDefinition/>        <RowDefinition/>    </grid.rowdefinitions>    <BorderGrid.Row= "0"Grid.column= "0"Grid.columnspan= "3"Background= "Red"Margin= "10,0,0,0"/>    <BorderGrid.Row= "1"Grid.column= "2"Grid.columnspan= "1"Background= "Blue"HorizontalAlignment= "Left"Width= "+"/>    <BorderGrid.Row= "1"Grid.rowspan= "2"Grid.column= "0"Background= "Green"VerticalAlignment= "Center"Height= "a"/>    <BorderGrid.Row= "2"Grid.column= "1"Grid.columnspan= "3"Background= "Yellow"/></Grid>

3. StackPanel

StackPanel is a streaming layout in which elements are stacked vertically or horizontally in a single row. Orientation represents the arrangement direction of elements within the StackPanel, horizontal is arranged horizontally, and vertical is arranged vertically.

When the StackPanel is arranged vertically, if the element width is not explicitly specified, the element stretches to fill the available width, and the height is the same when it is arranged horizontally.

<StackPanelOrientation= "Vertical"Width= "The "Height= "+"Background= "Darkblue">    <BorderBackground= "Darkgray"Height= "$"/>    <StackPanelOrientation= "Horizontal"Background= "Darkorange"Height= "+">        <BorderBackground= "Greenyellow"Width= "$"/>        <BorderBackground= "Purple"Width= " the"/>    </StackPanel></StackPanel>

4. Variablesizedwrapgrid

Variablesizedwrapgrid is a grid layout, and when the Maximumrowsorcolumns value is reached, the element wraps itself to a new row or column. Orientation represents the arrangement direction of elements, horizontal is arranged horizontally, and vertical is arranged vertically.

With Variablesizedwrapgrid.rowspan and Variablesizedwrapgrid.columnspan, content can span multiple rows and columns. Sets the element size as specified by the ItemHeight and Itemwidth properties.

<VariablesizedwrapgridMaximumrowsorcolumns= "3"ItemHeight= "+"Itemwidth= "+">    <RectangleFill= "Red"/>    <RectangleFill= "Blue"Height= " the"Variablesizedwrapgrid.rowspan= "2"/>    <RectangleFill= "Green"Width= " the"Variablesizedwrapgrid.columnspan= "2"/>    <RectangleFill= "Yellow"Height= " the"Width= " the"Variablesizedwrapgrid.rowspan= "2"Variablesizedwrapgrid.columnspan= "2"/></Variablesizedwrapgrid>

About these kinds of layout control basic use method is finished, in the later actual use process will have more complex layout nesting and definition, we will explain again, thank you.