WPF notes (2.4 grid) -- Layout

The first chapter has briefly introduced this container, which is described in detail in this section.
Grid generally uses tables (grid. Row and Grid. Column ), Which is more detailed than stackpanel. However, it is very troublesome to do so. First, define a large number of elements horizontally and then specify the table location, that is, insert data, it is not the same as the HTML table we normally use, and it is even more troublesome.
The reason is as follows: HTML empty cells need to be placed with placeholders, which will lead to a lot of space. The grid method uses the element to specify the cell location. Unused cells are empty by default and do not need to be specified. In addition, multiple controls in the grid cell can be stacked on the Z axis, which is determined by the display sequence of controls on the XAML.

Definition of grid column width: < Grid. columndefinitions >
< Columndefinition width = " 50 "   />
<Columndefinition width="Auto" />
< Columndefinition width="Auto"  />
< Columndefinition width="2 *"  />
< Columndefinition width="*"  />
</ Grid. columndefinitions >

First, fixed length-if the width is not enough, it will be cropped. Unit: pixel.
Second, automatic length: automatically matches the width of the longest element in the column.
Third, the proportional length-* indicates that the remaining width is occupied; the two rows are both *, and the remaining width is evenly divided. For example, the preceding 2 * and one * indicate that the former is 2/3 in width.

Cell merge, which has been introduced in 1.4. Here, although a control a spans two cells, it does not change all cells of the original grid. That is to say, this is two objects, grid and control, does not affect each other. Then, another control B can still use one of the two cells, and the result will overlap according to the order in which a and B appear. This is different from the HTML cell merging concept. This is what I think. It's so brilliant. Finally, I felt a little bit about XAML.

Next we will talk about the technology of multiple grid sharing width groups. Smaple refers to putting the grid into the scrollviewer, but once the scollbar is rolled, the title of the grid will be rolled together. In order to make the title remain unchanged, two grids should be created: one with the title; the other is placed in the body and nested in scrollviewer. In this way, the rolling problem is solved, and another problem occurs again, that is, the two grid fields are not aligned, so shared-size groups are used.

<Dockpanel grid. issharedsiz.pdf = "true">
<Grid dockpanel. Dock = "TOP">
<Grid. columndefinitions>
<Columndefinition width = "*"/>
<Columndefinition width = "Auto" sharedsizegroup = "location"/>
<Columndefinition width = "Auto" sharedsizegroup = "rank"/>
<Columndefinition width = "Auto"/>

// Omit several rows Code

<Border grid. Column = "0" grid. Row = "0" borderthickness = "1"
Background = "lightgray" borderbrush = "gray">
<Textblock> title </textblock>
</Border>
<Border grid. Column = "1" grid. Row = "0" borderthickness = "1"
Background = "lightgray" borderbrush = "gray">
<Textblock> location </textblock>
</Border>
<Border grid. Column = "2" grid. Row = "0" borderthickness = "1"
Grid. columnspan = "2"
Background = "lightgray" borderbrush = "gray">
<Textblock> rank </textblock>
</Border>

<Frameworkelement grid. Column = "3"
Width = "{dynamicresource {X: static systemparameters. scrollwidthkey}"/>

</GRID>

<Scrollviewer>
<Grid>
<Grid. columndefinitions>
<Columndefinition width = "*"/>
<Columndefinition width = "Auto" sharedsizegroup = "location"/>
<Columndefinition width = "Auto" sharedsizegroup = "rank"/>
</Grid. columndefinitions>

// Omit several lines of code

</GRID>
</Scrollviewer>
</Dockpanel>

First Dockpanel sharing settings: grid. issharedsiz.pdf = " True ". The purpose of this operation is to make the same name outside the dockpanel unaffected.
The two containers in the dockpanel are grid and scrollviewer. The former sets the title, the latter embeds the grid, and loads the content line (in red ).
First, let's talk about grid. There are four columns. Then, set the third column of the second column to shared-size group. The width of the first column is * (applicable ); the fourth column is added because width = * is invalid for sharedsize. Therefore, this column is added as a scrollbar placeholder:
<Columndefinition width = "*"/>
<Columndefinition width = "Auto" sharedsizegroup = "location"/>
<Columndefinition width = "Auto" sharedsizegroup = "rank"/>
<Columndefinition width = "Auto"/>

Rank occupies two columns. In order to be compatible with multiple generated fourth columns,
<Border grid. Column = "2" grid. Row = "0" borderthickness = "1"
Grid. columnspan = "2"
Background = "lightgray" borderbrush = "gray">
<Textblock> rank </textblock>
</Border>
Then, set the grid 4th column as the scroll bar width, so because the rank cross occupies two columns, the rank width is its maximum width + the scroll bar width, which ensures that the following are aligned, the first column is also aligned:
<Frameworkelement grid. Column = "3"
Width = "{dynamicresource {X: static systemparameters. scrollwidthkey}"/>

In addition, in the scrollviewer container, set the shared-size group in the embedded grid to correspond to the columns in the first grid:
<Columndefinition width = "Auto" sharedsizegroup = "location"/>
<Columndefinition width = "Auto" sharedsizegroup = "rank"/>

Note:Dynamicresource instead of staticresource. For more information about the technology, see Chapter 6th.

The analysis is complete.