Quick building of Windows 8 style apps 17-layout controls

This blog article mainly introduces three common layout controls: Canvas, Grid, and StackPanel.

Panel is an important class in the Development of Windows 8 Store applications. It plays a very important role in the Windows 8 Store application layout system.

A Panel can hold multiple sub-elements. A Panel class can store sub-elements in a stack, a grid, or a sub-element on its edge.

The Panel class itself is an abstract class. below is the hierarchy of the Panel class: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F5222M6-0.png "/> the Windows 8 Store application contains three standard layout controls: CanvasIn general layout, try not to consider Canvas, but in some special circumstances, it is very convenient to use Canvas ), GridIt is the first choice for most general la S ), StackPanelIt may be the simplest panel type ). CanvasTo locate an element in the Canvas, you must provide the horizontal and vertical coordinates relative to the upper left corner. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F5223246-1.png "/> code implementation: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F5222241-2.png "/> where the Left and Top attributes indicate the relative position of the upper Left corner of the element to the upper Left corner of the Canvas. Generally, Canvas is suitable for element layout at any position, so it is more suitable for vector graphics programming than control layout programming. Similarly, the control elements in the C # code are laid out in the Canvas. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F522G10-3.png "/> we noticed that the Left and Top attributes of the button relative to the Canvas were not set in the xaml code, the C # code is used for setting. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F5225L1-4.png "/> the SetValue method is defined in the DependencyObject class, leftProperty and TopProperty are static fields of the DependencyProperty type in the Canvas. The final effect of the two layout settings is the same. Canvas also has an additional attribute: ZIndexYou can use ZIndex to change the hierarchy of default elements. You can set Canvas in one or more characters. ZIndex additional attribute, which can be understood as the z axis in the screen. The element with a large z value will overwrite the element with a smaller z value. If the two elements have the same Canvas. ZIndex value, they are layered Based on the Sino-German Order in the Children set. Note:: Although the Canvas. ZIndex additional 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 process the Z value, and the layout system will automatically process it. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F52223I-5.png "/> GridGrid is the default choice for panel category selection. It is flexible and easy to use. Grid reminds us of the Table in HTML), but the two are different: Unlike the HTML Table, Grid is not used for formatting, but only for layout, there are no titles or built-in cell lines. The Grid has a certain number of rows and columns. The row height can be different, and the column height can be different. The sub-elements in the Grid can occupy a specific row and column, or occupy multiple rows and columns. Although the Grid function is very powerful, it also requires a price. When using the Grid, we need to know how many rows and columns are needed to accommodate all the sub-elements. Note:: Nested Grid is very common, but do not abuse it, especially when the program will often regenerate the layout. Too complex nesting can lead to messy layout. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F522A16-6.png "/> effect: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F52221G-7.png "/> Grid defines the RowDefinitions and ColumnDefinitions attributes, which are a collection of RowDefinition and ColumnDefinition objects, respectively. These objects define the height of each row and the width of each column. There are three options: 1) use the word "Auto"; 2) fixed pixels; 3) Asterisk, or add an asterisk after the number. Use the additional attribute Grid of the Grid. row and Grid. column to specify the row and Column of the child element. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F522B18-8.png "/> StackPanelStactPanel can be understood as "Stacks" to arrange its child elements from top to bottom or from left to right without overlapping each other. By default, child elements are arranged from top to bottom. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F5225Z1-9.png "/> we can also set the child element to be arranged from left to right. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F5225356-10.png "/> we can change the direction of the child element arrangement through the Orientation attribute of StackPanel. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F5221031-11.png "/> Of course we can also set the direction of sub-elements through the C # code. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1F5225546-12.png "/>

This article is from the "Wang Zukang" blog, please be sure to keep this source http://wzk89.blog.51cto.com/1660752/1019840