Windows 8 Store Apps Learning (7) Layout control

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>