The layout of WPF (ii)

First, Canvas

Canvas is the most basic panel, just a container for storing controls, it does not automatically adjust the arrangement and size of internal elements, it only supports positioning controls with explicit coordinates, and it also allows you to specify the coordinates of any corner, not just the upper-left corner. You can use the left, Top, right, bottom attached properties to position controls in the canvas. By setting the value of the left and right properties to represent the edge closest to the element, you should keep a fixed distance from the canvas's edge or the starboard side, and setting the value of top and bottom is similar. Essentially, when you select the corner to dock for each control, the value of the attached property is used as the margin. If a control does not use any attached properties, it is placed at the top left of the canvas (the equivalent of setting leave and top to 0).

The main purpose of canvas is to draw. Canvas default does not automatically cut content beyond its own scope, that is, the overflow content will appear outside the canvas, because the default cliptobounds= "False"; we can crop out the extra content by setting cliptobounds= "True".

child controls within a canvas cannot use more than two canvas attached properties, and if you set both the Canvas.Left and Canvas.right properties, the latter will be ignored.

Second, WrapPanel

The WrapPanel layout panel lists the controls from left to right in the order of rows or columns, and automatically adjusts for line breaks when the length or height is not enough, and subsequent sorting occurs from top to bottom or right to left.

orientation--automatically wraps according to content. When the horizontal option looks similar to the thumbnail view of Windows Explorer: The elements are arranged from left to right, and then wrap from top to bottom. The Vertical option looks like a list view of Windows Explorer: elements are arranged from top to bottom, and then wrapped from left to right.

itemheight--all child elements have a consistent height. The way each child element fills the height depends on its VerticalAlignment property, height property, and so on. Any element higher than ItemHeight will be truncated.

itemwidth--all child elements have a consistent width. The way each child element fills the height depends on its VerticalAlignment property, the Width property, and so on. Any element higher than Itemwidth will be truncated.

Third, StackPanel

StackPanel is to arrange the controls in the order of rows or columns, but not wrap them. Two permutations are arranged by setting the Orientation property of the panel: horizontal (horizontal default) and vertical (Vertical).

Vertical StackPanel The default width of each element is as wide as the panel, and vice versa. If the contained element exceeds the panel space, it truncates only the extra content. The margin property of an element is used to make an interval between elements, and when the element space is greater than the space of its content, the remaining space is determined by the HorizontalAlignment and VerticalAlignment properties.

When you set the FlowDirection property of StackPanel to the Righttoleft,orientation property to Horizontal,stackpanel the element is arranged from right to left.

Four, Grid

The grid, as its name implies, is "grid", and its sub-controls are placed in a small, well-defined grid, neatly lined with columns. The grid is the most complex of functions compared to other panel. To use grids, you first add a certain number of rowdefinitions and columndefinitions elements to the RowDefinitions and ColumnDefinitions properties to define the number of rows and columns. The control elements placed in the grid panel must show the rows and columns in which the placement is defined with the attached property syntax, which are all 0-based integer values, and if no rows or columns are explicitly set, the grid implicitly joins the control in the No. 0 row, column No. 0. Because the composition of the grid is not a simple addition of attribute tags to differentiate rows and columns, this also allows the user to be specific to a cell in the actual application, so the layout is very fine.

A grid cell can be empty, a cell can have more than one element, and the elements in the cell are rendered one after the other in their Z-order. As with canvas, child elements in the same cell do not interact with other elements in the layout, information-they are just overlapping.

Name	Description
Absolute size	is to give an actual number, but this value is usually specified as an integer, as in
Automatic (autosizing)	A value of auto, the actual effect is to take the actual control required minimum value
Starsizing	A value of * or N, the actual effect is to take the largest possible value, when a column or row is defined as a * is as large as possible, when multiple columns or rows are defined as * is to represent a number of people proportional to set the size of the square

The first kind, fixed length--not enough width, will be cut, not good use. Unit pixel.
The second, automatic length-automatically matches the width of the longest element in the column.
The third, the proportional length of the--* represents the full width of the remaining, the two lines are *, the remaining width will be divided evenly; like one of the above, A *, the former 2/3 width.

2) spanning multiple rows and columns, using Grid.columnspan and Grid.rowspan attached properties allows you to merge the rows and columns of each other, so that elements can also span multiple cells.

3) using Gridsplit segmentation, use the Gridsplit control with a grid control to implement a function similar to SplitContainer in WinForm.

<gridsplitter height= "6" verticalalignment= "Stretch" horizontalalignment= "Stretch"                grid.row= "2" grid.column = "2" ></GridSplitter>

Wu,UniformGrid

The next UniformGrid is the simplified version of the grid, with the same size for each cell, and no need to define a row and column collection. Each cell always has the same size, and each cell can hold only one control, automatically creating rows and columns as defined by the number of elements within it, and usually maintaining the same number of rows. There are no row and column attached properties in UniformGrid, and there are no blank cells.

UniformGrid layout controls are rarely used compared to grid layout controls. The grid panel is a common tool for creating simple and even complex window layouts. The UniformGrid panel is a more special layout container that is used to quickly lay out elements in a rigid grid.

The layout of WPF (ii)