WPF notes (2.4 Grid)--layout

The first chapter is a brief introduction to this container, which is described in detail in this section.

Grid is generally used in tables (Grid.Row and Grid.column), more detailed than StackPanel, but, so it's troublesome to play a big pile, and then the element to specify its table position, that is, inserting the data, and our usual habit of the HTML table is not very much the same, Even more trouble.

The reason is as follows: HTML empty cells to place placeholders, which will put a lot of; grid play is what elements to specify the cell position, the unused cell default is empty, do not specify. In addition, multiple controls in the grid cell can be stacked on the z axis, which is determined by the order in which the controls appear in XAML.

The definition of grid column width:

<Grid.ColumnDefinitions>
　　　 <ColumnDefinition Width="50" />
　　　 <ColumnDefinition Width="Auto" />
　　　 <ColumnDefinition Width="Auto" />
　　　 <ColumnDefinition Width="2*" />
　　　 <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

The first, fixed length--not enough width, will cut, not good. Unit pixel.

The 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; both lines are *, and the remaining width is divided equally, like a 2* above, a *, which indicates the 2/3 width of the former.

Cell merging, 1.4 has been introduced, and here it is emphasized that although a control a spans 2 cells, it does not change all the cells in the original grid, that is, this is two objects grid and control A, which do not affect each other. Then, another control B can still use one of these two cells, and the final order of A and B will have overlapping effects. This is different from the concept of merging HTML cells. This passage is my own thinking, how incisive ah, on the nail. Finally feel a little bit about XAML.

The

Next is the technology for multiple grid shared width groups. Smaple is to put the grid into the ScrollViewer, but once the scroll Scollbar,grid title will be followed by scrolling, in order to achieve the title of the scroll to stay fixed, to do two grid: one put title; another put the subject, and nested into the ScrollViewer. This scrolling problem is resolved, and another problem arises, that is, two grid fields are misaligned, so use the Shared-size group.

<dockpanel grid.issharedsizescope= "True"
<grid dockpanel.dock= "Top"
; Grid.columndefinitions>
<columndefinition width= "*"/>
<columndefiniti On width= "Auto" sharedsizegroup= "Location"/>
<columndefinition width= "Auto" sharedsizegroup= "Ra NK "/>
<columndefinition width=" Auto "/>

///omit several lines of 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.co Lumn= "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.scrollwidthke 　　　　　　　　　　　　　　　 Y}} "/>

</grid>

<scrollviewer>
<grid>
　　　　　　　　　　　　　　　　　　　 <grid.columndefinitions>
<columndefinition width= "*"/>
<columndefinition width= "Auto" sharedsizegroup= "Location"/>
<columndefinition width= "A Uto "sharedsizegroup=" Rank/>
</grid.columndefinitions>

Omit several lines of code

　　　　　　　　　　　 </Grid>
　　　　　　　 </ScrollViewer>
</DockPanel>