DockPanel

StackPanel

  1. StackPanel 是一种常用的布局容器, 它会将子元素按顺序堆叠在一起, 方向可以是垂直或水平.

StackPanel示例
<StackPanel Orientation="Vertical">
    <Button Content="按钮1" Margin="5"/>
    <Button Content="按钮2" Margin="5"/>
</StackPanel>

<StackPanel Orientation="Horizontal">
    <Image Source="icon1.png" Width="32" Height="32"/>
    <Image Source="icon2.png" Width="32" Height="32"/>
</StackPanel>
📌StackPanel 不会自动处理空间溢出或换行，内容太多可能会被截断或超出容器.

wrappanel

  1. WrapPanel 是一种常用的布局容器，它会将子元素按指定方向排列，并在空间不足时自动换行或换列，就像文字在段落中换行一样.
WrapPanel示例
<WrapPanel Orientation="Horizontal">
    <Button Content="按钮1" Width="100" Height="30" Margin="5"/>
    <Button Content="按钮2" Width="100" Height="30" Margin="5"/>
</WrapPanel>

<WrapPanel Orientation="Vertical">
    <Button Content="按钮1" Width="100" Height="30" Margin="5"/>
    <Button Content="按钮2" Width="100" Height="30" Margin="5"/>
</WrapPanel>

Grid

  1. Grid 是一个二维布局容器，可以定义任意数量的行和列.子元素可以放置在指定的行列中,也可以跨行跨列.
Grid示例
<Grid>
    <Grid.RowDefinitions>
        <!-- 定义了两行 -->
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <!-- 定义了两列 -->
        <!-- *：按比例分配剩余空间(如 2* 表示占两份) -->
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
</Grid>

UniformGrid

  1. UniformGrid 是一种特殊的布局容器，它的作用是将所有子元素均匀地分布在一个规则的网格中，每个单元格的大小完全相同。

UniformGrid 示例
<UniformGrid Rows="2" Columns="3">
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>
    <Button Content="6"/>
</UniformGrid>
📌 UniformGrid 不支持跨行跨列.