[Windows Phone] use of stackpanel and grid in Layout

In windowsphone development, there are three main layout Methods: canvas, grid, and stackpanel.

Canvas locates child elements in coordinates, which is equivalent to absolutelayout in Android. A canvas can also contain a child canvas.

Grid locates child elements in a table. You can define rows and columns, and then layout the elements in the table. Similar to the table element in HTML.

Stackpanel arranges child elements horizontally or vertically. It is equivalent to linearlayout in Android or flowlayout in javagui.

I personally think that to be compatible with multiple screens, it is best to use grid and stackpanel layout as much as possible. The following uses a Common Logon window as an example to describe how to use grid and stackpanel layout. Grid and stackpanel are used for convenience. (Any layout method can achieve the design purpose .)

 

Phone: phoneapplicationpage X: class = "phoneapp1.login" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: Phone = "CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone "xmlns: shell =" CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" fontfamily = "{staticresource quota}" fontsize = "{staticresource quota}" foreground = "{staticresource quota}" supportedorientations = "portrait" orientation = "portrait" MC: ignorable = "D" D: designheight = "768" D: designwidth = "480" shell: systemtray. isvisible = "true"> <stackpanel X: Name = "loginpanel"> <textblock X: name = "pagetitle" text = "login" style = "{staticresource phonetexttitle1style}" horizontalalignment = "center" margin = ","/> <grid. columndefinitions> <columndefinition width = "*"/> <columndefinition width = "*"/> </grid. columndefinitions> <grid. column = "0"> <textblock text = "username:" style = "{staticresource phonetextlargestyle}" horizontalalignment = "center"/> </GRID> <grid. column = "1"> <textbox X: Name = "name" horizontalalignment = "stretch"/> </GRID> <grid. columndefinitions> <columndefinition width = "*"/> <columndefinition width = "*"/> </grid. columndefinitions> <grid. column = "0"> <textblock text = "Password:" style = "{staticresource phonetextlargestyle}" horizontalalignment = "center"/> </GRID> <grid. column = "1"> <textbox X: Name = "pass" horizontalalignment = "stretch"/> </GRID> <button X: name = "login" content = "login" horizontalalignment = "center" margin = "," padding =, 30,5 "Click =" login_click "/> </stackpanel> </Phone: phoneapplicationpage>

A stackpanel is defined first, and the default orientation is used to place the text display control, grid, grid, and button control from top to bottom. The text display control displays "login ". The first grid is configured with two columns. The first column is the text control, "username" is displayed, and the second column is a text input control. The second grid has the same structure as the first grid and is used to enter the password. The "login" button control is displayed, and the "login_click" event is triggered.

Although the UI is simple, the layout of grid and stackpanel is basically described.

The page is shown as follows:

 

---------------------------------------------------------------------------

GL(Arui319)

Http://blog.csdn.net/arui319

<This article can be reproduced, but please keep the above author information. Thank you.>

---------------------------------------------------------------------------