WPF布局

一、Grid 容器 —— 表格布局

Grid 就像一张表格，你可以自由定义有多少行、多少列，然后把子元素放到指定的"格子"里。

• 用RowDefinition定义行
• 用ColumnDefinition定义列
• 子元素通过Grid.Row和Grid.Column属性指定放在哪一行哪一列

<Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Content="左上" Grid.Row="0" Grid.Column="0"/> <Button Content="右下" Grid.Row="1" Grid.Column="1"/> </Grid>

二、StackPanel 容器 —— 顺序排列

StackPanel 会把子元素一个接一个地排列，默认是垂直方向（从上到下）。

• 设置Orientation="Horizontal"可以改为水平排列（从左到右）
• 子元素不会自动换行，超出范围就看不到了

<StackPanel Orientation="Vertical"> <Button Content="按钮1"/> <Button Content="按钮2"/> <Button Content="按钮3"/> </StackPanel>

三、WrapPanel 容器 —— 自动换行

WrapPanel 和 StackPanel 类似，也是按顺序排列子元素，默认是水平方向。但它的独特之处在于：空间不够时会自动换行（或换列）。

• 默认水平排列，放不下了自动换到下一行
• 设置Orientation="Vertical"则垂直排列，放不下了自动换到下一列

<WrapPanel> <Button Content="标签1"/> <Button Content="标签2"/> <Button Content="标签3"/> <Button Content="标签4"/> </WrapPanel>

四、DockPanel 容器 —— 停靠布局

DockPanel 允许你把子元素停靠到容器的上、下、左、右四个方向，最后一个子元素会自动填满剩余空间。

• 通过DockPanel.Dock属性指定停靠方向（Top、Bottom、Left、Right）
• 最后一个子元素（或设置LastChildFill="True"时）会占据中间剩余区域

<DockPanel> <Button Content="顶部" DockPanel.Dock="Top"/> <Button Content="左侧" DockPanel.Dock="Left"/> <Button Content="底部" DockPanel.Dock="Bottom"/> <Button Content="中间（自动填满）"/> </DockPanel>

五、UniformGrid 容器 —— 均匀网格

UniformGrid 会把所有子元素放进一个行列大小完全相同的网格中。你只需要指定有几行几列，它会自动均分空间。

• 通过Rows和Columns属性指定行列数
• 如果只指定其中一个，另一个会自动计算
• 每个格子的大小完全一样

<UniformGrid Rows="2" Columns="3"> <Button Content="1"/> <Button Content="2"/> <Button Content="3"/> <Button Content="4"/> <Button Content="5"/> <Button Content="6"/> </UniformGrid>

六、Margin 属性 —— 外边距

用来设置元素与周围元素（或容器边缘）之间的间距。

它的写法有以下几种：

<Button Content="按钮" Margin="10,5,10,5"/>

对比

七、对比Grid 中 Row/Column 的三种尺寸单位

在 Grid 容器中，RowDefinition的Height和ColumnDefinition的Width支持三种赋值方式。

固定像素值（如100）

直接指定一个固定的像素大小，不管窗口怎么拉伸，这一行/列的大小始终不变。

<RowDefinition Height="100"/>

• 优点：精确可控
• 缺点：窗口放大缩小时不会自适应，可能导致空间浪费或内容溢出
• 适用场景：顶部标题栏、底部状态栏等高度固定的区域

Auto（自动适应内容）

行/列的高度或宽度会自动根据内部子元素的大小来调整，子元素多大，它就多大。

<RowDefinition Height="Auto"/>

• 优点：内容多高就多高，不会浪费空间
• 缺点：如果内容本身大小不固定，可能导致布局不稳定
• 适用场景：搜索框、按钮行等"高度由内容决定"的区域

星号*（比例分配剩余空间）

*表示把剩余的空间按比例分配。这是 Grid 最强大也最容易踩坑的地方。

<RowDefinition Height="*"/> <RowDefinition Height="2*"/>

上面的写法表示：

• 第一行占剩余空间的1 份
• 第二行占剩余空间的2 份
• 也就是说，第二行的高度是第一行的2 倍

如果三行都写Height="*"，那就是三等分。

• 优点：窗口拉伸时自动按比例缩放，自适应能力最强
• 缺点：如果内容超出分配的空间，可能会被截断（需要配合ScrollViewer使用）
• 适用场景：主内容区域、需要自适应拉伸的布局

实际开发中最常见的写法就是三者结合：