Canvas, Grid, StackPanel, virtualizings
Introduced
Re-imagine the layout controls for Windows 8 Store Apps
Canvas-Absolute Positioning layout
GRID-Network format layout
StackPanel-Streaming layout
VirtualizingStackPanel-can only be used for ItemsControl
Wrapgrid-can only be used for ItemsControl
Variablesizedwrapgrid-for Wrap child element collections
Example
1, Canvas's Demo
Canvasdemo.xaml
<page x:class= "XamlDemo.Controls.Layout.CanvasDemo" xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/prese Ntation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" Using:XamlDemo.Controls.Layout "x" Mlns:d= "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/ markup-compatibility/2006 "mc:ignorable=" D "> <grid background=" Transparent "> <!- -Canvas-Absolute positioning layout canvas.left-the distance from the y-axis of the upper Canvas, and the upper-left corner is the Origin Canvas.
Top-the distance from the x-axis of the upper Canvas, the upper-left corner is the original point note: Canvas is positioned based on coordinates and does not limit the size of the child element because of its size--> <canvas horizontalalignment= "left" verticalalignment= "Top" background= "Red" width= "height=" "margin=" 120 0 0 0 "> <canvas background=" Green "width=" height= "canvas.left=" "canvas.top=" 120 "> <textblock text= "TextBlock" canvas.top= "/> </Canvas> </Canvas> </grid" > </Page>
2, the Grid Demo
Griddemo.xaml
<page x:class= "XamlDemo.Controls.Layout.GridDemo" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/present ation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" Using:XamlDemo.Controls.Layout "xml Ns:d= "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/ markup-compatibility/2006 "mc:ignorable=" D "> <grid background=" Transparent "> <!- -Grid-Grid layout grid.rowdefinitions-for defining rows in the grid grid.columndefinit
Ions-Defines column width-width minwidth-min width maxwidth-Maximum width in Grid Height-height minheight-min height maxheight-max height G Rid. Row-The index of the row in the grid where the control is located grid.column-the index of the column in the grid where the control is located grid.rowspan-merges the rows.
The row number of rows that need to be merged continuously after the control's row Grid.columnspan-merge columns.
The column that contains the control, and the total number of columns that need to be merged continuously after the column that contains the control Canvas.ZIndex-to set the Z-index value of any control The available values for Width and Height are as follows:, auto-automatically set to an appropriate value. Default value, Pixel-pixel value, *-scale value. If * is all, 2* and 8* are respectively accounted for 20% and 80%--> <grid background= "Blue" width= "height=" Canvas.zind
"ex=" > <Grid.RowDefinitions> <rowdefinition height= "/>" <rowdefinition height= "3*"/> <rowdefinition height= "7*"/> <
RowDefinition height= "*" minheight= "maxheight="/> <rowdefinition "Auto" height= </Grid.RowDefinitions> <Grid.ColumnDefinitions> <columndefini tion/> <columndefinition/> <columndefinition/> <
/grid.columndefinitions>
<textbox grid.row= "0" grid.column= "0" background= "Red" text= "Webabcd"/> <textbo
X grid.row= "0" grid.column= "1" background= "Red" text= "WEBABCD" grid.columnspan= "2" horizontalalignment= "Center"/> <textbox grid.row= "1" grid.column= "0" background= "Red" text= "Webabcd"/> <textbox Grid .
row= "1" grid.column= "1" background= "Red" text= "WEBABCD" grid.columnspan= "2" horizontalalignment= "Center"/> <textbox grid.row= "2" grid.column= "0" background= "Red" text= "Webabcd"/> <textbox grid.row= "2" grid.column= "1" background= "Red" text= "WEBABCD" grid.rowspan= "2" verticalalignment= "Bottom"/> <text Box grid.row= "2" grid.column= "2" background= "Red" text= "Webabcd"/> <textbox grid.row= "3" Grid.column = "2" background= "Red" text= "Webabcd"/> <textbox grid.row= "4" grid.column= "2" background= "Red" text= "
Webabcd "/> </Grid> <!--Canvas.ZIndex-for setting z-index values for arbitrary controls Description: The HorizontalAlignment property of grid and the default value of VerticalAlignment attribute are Stretch, all child elements in grid need to pass M
Argin properties for relative positioning--> <rectangle margin= "Ten" fill= "Green" canvas.zindex= "ten"/> </Grid> </Page>