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.

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.

<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