Grid
The picture below is three rows and three columns
<Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> </Grid>

The second column is twice as wide as the other two columns
The height of the row is also similar

Show grid lines
ShowGridLines="True"

StackPanel
Default vertical alignment
Flow layout container; the default is vertical direction, when there are many controls, they will not be displayed beyond the scope of the container
<StackPanel Orientation="Horizontal"> <Button Width="200" Height="50" Content="button1"/> <Button Width="200" Height="50" Content="button2"/> <Button Width="200" Height="50" Content="button3"/> <Button Width="200" Height="50" Content="button4"/> <Button Width="200" Height="50" Content="button5"/> <Button Width="200" Height="50" Content="button6"/> <Button Width="200" Height="50" Content="button7"/> <Button Width="200" Height="50" Content="button8"/> <Button Width="200" Height="50" Content="button9"/> <Button Width="200" Height="50" Content="button10"/> </StackPanel>

change direction
Orientation="Horizontal"

WrapPanel
Similar to StackPanel, but it will automatically wrap beyond the scope of the container
default horizontal arrangement
<WrapPanel Orientation="Vertical"> <Button Width="200" Height="50" Content="button1"/> <Button Width="200" Height="50" Content="button2"/> <Button Width="200" Height="50" Content="button3"/> <Button Width="200" Height="50" Content="button4"/> <Button Width="200" Height="50" Content="button5"/> <Button Width="200" Height="50" Content="button6"/> <Button Width="200" Height="50" Content="button7"/> <Button Width="200" Height="50" Content="button8"/> <Button Width="200" Height="50" Content="button9"/> <Button Width="200" Height="50" Content="button10"/> </WrapPanel>

change direction
Orientation="Horizontal"

DockPanel
bound to the edge of the container
By default the last button fills the entire container

bbb is the last control and fills the rest of the container

The last button does not fill the entire container
<DockPanel LastChildFill="False">

bbb is the last control and does not fill the rest of the container
<DockPanel LastChildFill="False"> <Button Content="top" DockPanel.Dock="Top"></Button> <Button Content="botton" DockPanel.Dock="Bottom"></Button> <Button Content="left" DockPanel.Dock="Left"></Button> <Button Content="right" DockPanel.Dock="Right"></Button> <Button Content="aaa" ></Button> <Button Content="bbb" ></Button> </DockPanel>

DockPanel
canvas,
The default is to overlap

A distance of 100 from the left and top of the canvas
Canvas.Left="100" Canvas.Top="100"
<Canvas> <Button Width="200" Height="50" Content="111" Canvas.Left="100" Canvas.Top="100"></Button> <Button Width="200" Height="50" Content="222" Canvas.Left="200" Canvas.Top="150"></Button> <Button Width="200" Height="50" Content="333" Canvas.Left="300" Canvas.Top="200"></Button> <Button Width="200" Height="50" Content="444" Canvas.Left="400" Canvas.Top="250"></Button> </Canvas>

Border
Border is a decorative control. This control is used to draw borders and backgrounds. There can only be one child control in Border. To display multiple child controls, an additional Panel control needs to be placed in the parent Border. Child controls can then be placed inside the Panel control.
Attributes | meaning |
Background | background color |
BorderBrush | border color |
BorderThickness | border width |
CornerRadius | the corners, the radius of the circle |

ScrollViewer
ScrollViewer is a panel with scroll bars. There can only be one sub-control in ScrollViewer. To display multiple sub-controls, an additional Panel control Placed inside the parent ScrollViewer. Child controls can then be placed within this control.
Attributes | meaning |
HorizontalScrollBarVisibility | Whether the horizontal scroll bar is displayed or not, the default is Hidden |
VerticalScrollBarVisibility | Whether the vertical scroll bar is displayed, the default is Visible |
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> <Button Content="Button" Width="800" Height="800"></Button> </ScrollViewer>

Notice:
Generally, we will set HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto", which means: when the content exceeds the visible range, the horizontal/vertical scroll bar will be displayed.
ViewBox
The role of the Viewbox is to stretch or stretch the components inside it to fill the available space. There can only be one child control in a Viewbox. To display multiple child controls, an additional Panel control needs to be placed in the parent Viewbox. Child controls can then be placed within this control.
Common properties: Stretch: Get or set the stretch mode to determine how the content in the component fills the existing space of the component. The default value of Stretch is Uniform.
Attribute Value Meaning
None does not stretch, and displays according to the height and width set by the child element
Uniform Scales the child element proportionally so that one side is insufficient and the other side is just filled
Fill scales the child element so that the length of the child element becomes the length of the Viewbox and the width becomes the width of the Viewbox
UniformToFill scales the child element according to the original proportion, so that one side of the child element is just filled, and the other side exceeds the Viewbox area
<Grid> <Grid.RowDefinitions> <RowDefinition> </RowDefinition> <RowDefinition> </RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition> </ColumnDefinition> <ColumnDefinition> </ColumnDefinition> </Grid.ColumnDefinitions> <Viewbox Grid.Row="0" Grid.Column="0" Stretch="None"> <Button Width="100" Height="50" Content="None"></Button> </Viewbox> <Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform"> <Button Width="100" Height="50" Content="Uniform"></Button> </Viewbox> <Viewbox Grid.Row="1" Grid.Column="0" Stretch="Fill"> <Button Width="100" Height="50" Content="Fill"></Button> </Viewbox> <Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill"> <Button Width="100" Height="50" Content="UniformToFill"></Button> </Viewbox> </Grid>

Commonality
ViewBox ScrollViewer Border can only have one child control. To display multiple child controls, an additional Panel control needs to be placed in the parent Viewbox. Child controls can then be placed within this control