One of the WPF Study Notes series (layout details)

Layout:
Stackpanel STACK layout: controls do not bend and more are not displayed.
The dockpanel dock layout is sucked down or left or right.
The wrappanel layout will bend around a row of controls
Canvas for coordinate-based layout

If the grid. Row attribute and grid. column are not specified in the grid, the default value is 0 rows and 0 columns. Rowdefinitions columndefinitions showgridlines = true

<Columndefinition width = "100"> </columndefinition>
<Columndefinition width = "Auto"> </columndefinition>
Columndefinition width = "*"> </columndefinition>
<Grid. rowdefinitions>
<Rowdefinition Height = "*"> </rowdefinition>
</Grid. rowdefinitions>
Layout Rounding:
If the two parts of a form are divided into exactly one pixel, the border will be separated and unclear. You can set the uselayoutrounding attribute of the grid to true.
Spanning multiple rows and multiple columns:
Grid. rowspan = "N" grid. columnspan = "N"

<Grid showgridlines = "true">
<Grid. rowdefinitions>
<Rowdefinition Height = "*"> </rowdefinition>
<Rowdefinition Height = "*"> </rowdefinition>
</Grid. rowdefinitions>
<Grid. columndefinitions>
<Columndefinition width = "*">
</Columndefinition>
<Columndefinition width = "Auto">
</Columndefinition>
<Columndefinition width = "Auto">
</Columndefinition>
</Grid. columndefinitions>
<Textbox margin = "10" grid. Row = "0" grid. Column = "0" grid. columnspan = "3"> This is a test. </textbox>
<Button margin = "10, 10, 2, 10" padding = "3" grid. Row = "1" grid. Column = "1"> OK </button>
<Button margin = "2, 10, 10" padding = "3" grid. Row = "1" grid. Column = "2"> cancel </button>
</GRID>

Principles for using gridsplitter separators in Grid:
1. Adjust the margins if you want to place non-and other controls in a cell so that they do not overlap. A better way is to reserve one or more columns for gridsplitter and set the heigh or width attribute values of the reserved rows or columns to auto.
2. the gridsplitter object always changes the size of the entire row or entire column (instead of changing the size of a single cell) to make the gridsplitter object look the same as its behavior, you need to stretch the gridsplitter object so that it can traverse the entire row or entire column, instead of limiting it to a cell. To do this, you can use rowspan or columnspan
3. If it is too small to be visible, you need to set the height and width. If it is vertical, it is set to verticalignment = "stretch" width = "10" horizontal, horizontalalignment = "center"
Example:
<Grid showgridlines = "true">
<Grid. rowdefinitions>
<Rowdefinition> </rowdefinition>
<Rowdefinition> </rowdefinition>
</Grid. rowdefinitions>
<Grid. columndefinitions>
<Columndefinition width = "100" type = "codeph" text = "/codeph">
</Columndefinition>
<Columndefinition width = "Auto">
</Columndefinition>
<Columndefinition width = "50">
</Columndefinition>
</Grid. columndefinitions>
<! -- <Textbox margin = "10" grid. row = "0" grid. column = "0" grid. columnspan = "3"> This is a test. </textbox> -->
<Button margin = "3" grid. Row = "0" grid. Column = "0"> left </button>
<Button margin = "3" grid. Row = "0" grid. Column = "2"> right </button>
<Button margin = "3" grid. Row = "1" grid. Column = "0"> left </button>
<Button margin = "3" grid. Row = "1" grid. Column = "2"> right </button>
<Gridsplitter grid. row = "0" grid. column = "1" grid. rowspan = "2" width = "3" verticalcontentalignment = "stretch" horizontalcontentalignment = "center" showspreview = "true"> </gridsplitter>
</GRID>
Showspreview = "true" showpreview the properties of gridsplitter. When it is set to false, the effect is immediately displayed when you drag it. If it is set to true, only the shadow you checked is displayed until you open the mouse.
The code for multiple gridsplitter in a grid is as follows:
<Window X: class = "studywpf. mainwindow"
Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "Sun yebao learning WPF started" Height = "350" width = "525">
<! -- This is the grid for the entire window. -->
<Grid>
<Grid. columndefinitions>
<Columndefinition> </columndefinition>
<Columndefinition width = "Auto"> </columndefinition>
<Columndefinition> </columndefinition>
</Grid. columndefinitions>
<! -- This is the nested grid on the left. It isn't subdivided further with a splitter. -->
<Grid. Column = "0" verticalignment = "stretch">
<Grid. rowdefinitions>
<Rowdefinition> </rowdefinition>
<Rowdefinition> </rowdefinition>
</Grid. rowdefinitions>
<Button margin = "3" grid. Row = "0"> top left </button>
<Button margin = "3" grid. Row = "1"> bottom left </button>
</GRID>
<! -- This is the vertical splitter that sits between the two nested (left and right) grids. -->
<Gridsplitter grid. Column = "1" width = "3" horizontalalignment = "center" verticalignment = "stretch" showspreview = "false"> </gridsplitter>
<! -- This is the nested grid on the right. -->
<Grid. Column = "2">
<Grid. rowdefinitions>
<Rowdefinition> </rowdefinition>
<Rowdefinition Height = "Auto"> </rowdefinition>
<Rowdefinition> </rowdefinition>
</Grid. rowdefinitions>
<Button margin = "3" grid. Row = "0"> upper right </button>
<Button margin = "3" grid. Row = "2"> bottom right </button>
<! -- This is the horizontal splitter that subdivides it into a top and botton region... -->
<Gridsplitter grid. Row = "1" Height = "3" horizontalalignment = "stretch" showspreview = "false"> </gridsplitter>
</GRID>
</GRID>
</WINDOW>
Shared size group: You can set two different grids with the same width by setting the grid of the grid. issharedsizgroups = true; and the example code of sharedsizegroup = "Same Name" for columns that want to use a shared size group is as follows:
<Grid. issharedsiz.pdf = "true" margin = "3">
<Grid margin = "3" background = "lightyellow" showgridlines = "true">
<Grid. columndefinitions>
<Columndefinition width = "Auto" sharedsizegroup = "textlabel"> </columndefinition>
<Columndefinition width = "Auto"> </columndefinition>
<Columndefinition> </columndefinition>
</Grid. columndefinitions>
<Label margin = "5"> A very long bit of text </label>
<Label grid. Column = "1" margin = "5"> more text </label>
<Textbox grid. Column = "2" margin = "5"> a text box </textbox>
</GRID>
<Grid margin = "3" background = "lightyellow" showgridlines = "true">
<Grid. columndefinitions>
<Columndefinition width = "Auto" sharedsizegroup = "textlabel">
</Columndefinition>
<Columndefinition> </columndefinition>
</Grdi. columndefinitinos>
<Label margin = "5"> short </lable>
<Textbox grid. Column = "1" margin = "5"> a text box </textbox>
</GRID>