Grid UniformGrid container (5)

1. Grid
Grid is a layout of controls in the form of tables, similar to GridLayout in Java AWT,
The difference is that
Multiple controls can be placed in each cell of the Grid in WPF, but the controls may be stacked in one
Start
The Grid in WPF supports cell merging, similar to the row in table td in HTML.
Span and colspan
Rows and columns in the Grid can customize the Height) and Width)
You can use either of the following methods to set the height and width:
1) Height = "60": without an asterisk, it indicates a fixed Height.
2) Height = "60 *": Add an asterisk to indicate the "weighted" Height.
The height or width is scaled according to the ratio of the size of the form.
For example:
1: <Grid>
2: <Grid. RowDefinitions>
3: <RowDefinition Height = "60"/>
4: <RowDefinition Height = "202 *"/>
5: </Grid. RowDefinitions>
6: <Grid. ColumnDefinitions>
7: <ColumnDefinition/>
8: <ColumnDefinition/>
9: </Grid. ColumnDefinitions>
10: <Button Grid. Column = "0" Grid. Row = "0" Height = "30" VerticalA
Lignment = "Top"> ButtonA </Button>
11: <Button Grid. Column = "0" Grid. Row = "0" Height = "30" VerticalA
Lignment = "Bottom"> ButtonB </Button>
12: <Button Grid. Column = "1" Grid. Row = "0"> ButtonC </Button>
13: <Button Grid. Column = "0" Grid. Row = "1" Grid. ColumnSpan = "2"> B
UttonD </Button>
14: </Grid>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1934564S5-0.jpg "title =" qq 30923104214.jpg "alt =" 103799322.jpg"/>

Ii. Use gridsp.pdf for segmentation
You can use the GridSplit control in combination with the Grid control to implement SplitContai in a Windows application.
The following applications are provided:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1934561639-1.jpg "title =" qq 30923104235.jpg "alt =" 104440494.jpg"/>

To implement the following functions:
The whole composed of ButtonA, ButtonB, and ButtonC can be dragged left and right to change the width of the two.
ButtonB and ButtonC can be dragged up or down to change the height of the two.
The code for implementing the above functions is as follows:
1: <Grid>
2: <Grid. ColumnDefinitions>
3: <ColumnDefinition Width = "88 *"/>
4: <ColumnDefinition Width = "Auto"/>
5: <ColumnDefinition Width = "190 *"/>
6: </Grid. ColumnDefinitions>
7: <Grid. RowDefinitions>
8: <RowDefinition Height = "172 *"/>
9: <RowDefinition Height = "Auto"/>
10: <RowDefinition Height = "90 *"/>
11: </Grid. RowDefinitions>
12:
13: <Button Content = "ButtonA" Margin = "3" Grid. Row = "0" Grid. Col
Umn = "0" Grid. RowSpan = "3"/>
14: <Button Content = "ButtonB" Margin = "3" Grid. Row = "0" Grid. Col
Umn = "2"/>
15: <Button Content = "ButtonC" Margin = "3" Grid. Row = "2" Grid. Col
Umn = "2"/>
16:
17: <GridSplitter Width = "3" HorizontalAlignment = "Stre
Tch "VerticalAlignment =" Stretch"
18: Grid. Row = "0" Grid. Column = "1" Grid. RowSpan = "3">
</GridSplitter>
19: <GridSplitter Height = "3" VerticalAlignment = "Stretch" Horiz
OntalAlignment = "Stretch"
20: Grid. Row = "1" Grid. Column = "2"> </GridSplitter>
21: </Grid>
The core idea is:
Define the table 3*3, where the column subscript with the split line is 1) and the row subscript is 1). Set the width and height.
For Auto
ButtonA is placed in rows = 0, Column = 0, and RowSpan = 3.
ButtonB is placed in cells with Row = 0 and Column = 2.
ButtonC is placed in cells Row = 2 and Column = 2.
Vertical Split lines are placed in cells Row = 0, Column = 1, ColSpan = 3
Horizontal Split lines are placed in cells Row = 1 and Column = 2.
As shown in:
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/19345C334-2.jpg "title =" qq 30923104257.jpg "alt =" 104458122.jpg"/>

Iii. UniformGrid
The UniformGrid control provides a simplified grid layout for the control. When the control is added to Unif
OrmGrid is arranged in a grid mode, which is automatically adjusted to control
The distance between parts remains even. The number of cells is adjusted to adapt to the number of controls. For example,
If four controls are added to the UniformGrid, they are arranged in a grid containing four cells.
For example:
1: <UniformGrid>
2: <Button Content = "ButtonA"/>
3: <Button Content = "ButtonB"/>
4: <Button Content = "ButtonC"/>
5: <Button Content = "ButtonD"/>
6: <Button Content = "ButtonE"/>
7: <Button Content = "ButtonF"/>
8: <Button Content = "ButtonG"/>
9: <Button Content = "ButtonH"/>
10: </UniformGrid>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/19345A256-3.jpg "title =" qq 30923104323.jpg "alt =" 104538827.jpg"/>

When using UniformGrid:
The sizes of cells are identical.
The number of cells depends on the number of controls to be placed, and the cells must have the same rows and columns, that is
1*1, 2*2, 3*3, 4*4... Cell Distribution

This article from the "51 records" blog, please be sure to keep this source http://kyirsheng.blog.51cto.com/3432734/1300398