（一）StackPanel
优点 最简单的布局容器，代码少、上手零门槛； Spacing 统一控间距，排版整齐，不用大量 Margin； 适合表单行、工具栏、侧边菜单这种纯线性界面。
（示例 1-1 ）垂直 StackPanel（登录表单）
<StackPanel Spacing="15" Width="320" Margin="30"> <StackPanel Orientation="Horizontal"> <TextBlock Text="用户名：" Width="70"/> <TextBox Width="200"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="密码：" Width="70"/> <TextBox Width="200"/> </StackPanel> <Button Content="登录" Margin="220,0,0,0" Width="50"/> </StackPanel>
说明：
Margin格式：左,上,右,下k
（示例 1-2） 水平 StackPanel（顶部工具栏）
<Border BorderThickness="1" Margin="10" Padding="10"> <StackPanel Spacing="10"> <!-- 工具栏按钮行 --> <StackPanel Orientation="Horizontal" Spacing="5"> <Button Content="新建"/> <Button Content="保存"/> <Button Content="删除"/> <!-- 竖分割线 --> <Border Width="1" Background="Gray" Margin="20,0"/> <Button Content="设置"/> </StackPanel> </StackPanel> </Border>
说明：
<Border Width="1"/>生成垂直分隔线，Margin="20,0"控制分割线左右留白；不用给设置按钮写死左边距，自适应布局更稳定。
（二）DockPanel（停靠布局）
DockPanel 停靠规则： Dock.Dock="Top"：顶部横向区域（标题栏） Dock.Dock="Left"：左侧纵向菜单 Dock.Dock="Bottom"：底部状态栏 最后一个子元素自动填充剩余全部空白（主内容区，无需写停靠属性） 默认 LastChildFill="True"，就是自动填充中间区域
（示例 2-1） 经典软件三栏布局
<DockPanel> <!-- 1. 顶部标题栏，停靠Top --> <StackPanel DockPanel.Dock="Top" Height="60" Background="#FFf0f0f0"> <TextBlock Text="软件标题栏文字" FontSize="24" Margin="20,10"/> </StackPanel> <!-- 2. 左侧菜单栏，停靠Left，固定宽度 --> <StackPanel DockPanel.Dock="Left" Width="160" Background="#FFe8e8e8" Spacing="8"> <TextBlock Text="菜单1" FontSize="16" Margin="15,10"/> <TextBlock Text="菜单2" FontSize="16" Margin="15,10"/> <TextBlock Text="菜单3" FontSize="16" Margin="15,10"/> <TextBlock Text="菜单4" FontSize="16" Margin="15,10"/> </StackPanel> <!-- 3. 底部状态栏，停靠Bottom --> <StackPanel DockPanel.Dock="Bottom" Height="40" Background="#FFf0f0f0"> <TextBlock Text="状态栏：设备正常运行" Margin="20,8"/> </StackPanel> <!-- 4. 最后一个控件 = 自动填满剩下所有空间 → 主内容区域 --> <Border Background="White"> <TextBlock Text="主内容区域" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </DockPanel>
关键特性说明：
顺序不影响停靠效果：只要标注Dock.Dock="xxx"，就会固定在对应方位；
中间主内容不用设置任何停靠，DockPanel 自动把剩下空白全部给它；
自适应窗口缩放：拉大窗口，只有中间主区域同步放大，顶部 / 左侧 / 底部尺寸保持固定；
工业上位机标准页面结构，几乎所有设备监控软件都用这套布局。
（2.2）简易播放器布局
代码：
<DockPanel> <!-- 底部控制栏，停靠Bottom --> <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Spacing="12" Margin="10" Height="60"> <Button Content="后退"/> <!-- 进度条占满中间剩余宽度 --> <Slider Width="500" HorizontalAlignment="Stretch"/> <Button Content="前进"/> <Button Content="音量"/> </StackPanel> <!-- 最后一个控件自动填充剩余空间 = 视频画面区域 --> <Border BorderThickness="1" Margin="10"> <TextBlock Text="视频画面区域" FontSize="26" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </DockPanel>
（三）Grid
一、底层核心能力：行列二维网格布局 唯一支持行、列二维分区的基础容器，能同时控制横向、纵向位置； 通过 ColumnDefinitions 定义列、RowDefinitions 定义行，把面板切成格子； 子控件用附加属性定位： Grid.Row="数字"：放在第几行 Grid.Column="数字"：放在第几列 支持合并单元格（StackPanel、DockPanel 都做不到）： Grid.ColumnSpan="2"：横向跨多列 Grid.RowSpan="3"：纵向跨多行 二、三种尺寸规则（Grid 灵魂，自适应布局关键） 每行 / 每列宽度高度可单独设置三种模式，自由搭配： Auto：自动尺寸，格子大小贴合内部控件最小宽度 / 高度 例：ColumnDefinitions="Auto,*" 左边标签自适应文字宽度 固定数字：写死像素尺寸，固定宽高 例：ColumnDefinitions="180,*,220" 左右两栏固定 180、220 像素 星号 *：剩余空间按比例均分（Grid 独有） 单个*：占用所有剩下空白（播放器进度条、中间主内容区） 2*,*：2:1 比例瓜分剩余空间 三、对齐与拉伸规则 单元格内控件默认 HorizontalAlignment="Stretch"、VerticalAlignment="Stretch"，自动填满整个格子； 可单独改成 Left/Center/Right/ Top/Bottom 自由对齐； 和 Horizontal StackPanel 本质区别： StackPanel 横向时子控件永远不会拉伸；Grid 的 * 列天然拉伸填充空白。 四、优缺点 优点 布局能力最强，表单、分栏、均分面板、跨行跨列场景全部通吃； 自适应窗口缩放，靠 * 实现自动留白，不用写死 Margin 偏移； 工业上位机参数表单、工具栏、多分区界面首选； 结构清晰，所有分区规则写在开头 Row/ColumnDefinitions，后期维护方便。 短板 简单单行 / 单列线性布局时代码比 StackPanel 繁琐； 只需要上下 / 左右停靠的页面（顶部标题 + 底部状态栏），用 DockPanel 更简洁； 自动换行流式布局不如 WrapPanel。
练习 1：两列多行参数表单（工业上位机最常用）
需求：左列标签固定宽度，右列输入框自动铺满剩余宽度，4 行参数
布局规则：2 列，左列 Auto，右列 *；4 行全部 Auto 高度
代码：
<Grid Width="600" Margin="20" ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto"> <!-- 第1行 --> <TextBlock Grid.Row="0" Grid.Column="0" Text="设备ID" Margin="8"/> <TextBox Grid.Row="0" Grid.Column="1" Margin="8"/> <!-- 第2行 --> <TextBlock Grid.Row="1" Grid.Column="0" Text="运行转速" Margin="8"/> <TextBox Grid.Row="1" Grid.Column="1" Margin="8"/> <!-- 第3行 --> <TextBlock Grid.Row="2" Grid.Column="0" Text="报警阈值" Margin="8"/> <TextBox Grid.Row="2" Grid.Column="1" Margin="8"/> <!-- 第4行 --> <TextBlock Grid.Row="3" Grid.Column="0" Text="启停模式" Margin="8"/> <ComboBox Grid.Row="3" Grid.Column="1" Margin="8"/> </Grid>
练习 2：2×2 均等功能按钮网格
需求：窗口 4 等分，4 块区域大小完全相同，自适应缩放
布局规则：2 行 2 列，行列都设为*，4 区域均分窗口
代码：
<Grid Margin="20" ColumnDefinitions="*,*" RowDefinitions="*,*"> <Border Grid.Row="0" Grid.Column="0" BorderThickness="1" Margin="5"> <TextBlock Text="实时监控画面" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Grid.Row="0" Grid.Column="1" BorderThickness="1" Margin="5"> <TextBlock Text="参数配置页面" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Grid.Row="1" Grid.Column="0" BorderThickness="1" Margin="5"> <TextBlock Text="历史报警记录" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <Border Grid.Row="1" Grid.Column="1" BorderThickness="1" Margin="5"> <TextBlock Text="系统日志查询" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </Grid>
练习 3：跨行列合并表单（跨行、跨列综合）
需求：标题整行跨 2 列，下方分左右两块，左侧 3 行，右侧一块跨 3 行
布局规则：3 行 2 列；标题 Row0 跨 Column0+1；图表 Column1 跨 Row1、Row2、Row3
代码：
<Grid Width="700" Margin="20" ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto"> <!-- 标题跨2列 --> <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BorderThickness="1" Padding="10"> <TextBlock Text="设备参数总设置" FontSize="20" HorizontalAlignment="Center"/> </Border> <!-- 左侧三行标签 --> <TextBlock Grid.Row="1" Grid.Column="0" Text="压力上限" Margin="8"/> <TextBlock Grid.Row="2" Grid.Column="0" Text="温度上限" Margin="8"/> <TextBlock Grid.Row="3" Grid.Column="0" Text="流量上限" Margin="8"/> <!-- 图表跨3行 --> <Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" BorderThickness="1" Margin="8"> <TextBlock Text="实时曲线图表" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </Grid>
练习 4：播放器底部控制栏（左右分离 + 中间自适应进度条）
需求：最贴合你刚才播放器场景，左按钮、中间长条进度条、右侧两个按钮
布局规则：4 列，第 1/3/4 列 Auto，第 2 列*自动占满空白
代码：
<Grid Height="60" Margin="10" ColumnDefinitions="Auto,*,Auto,Auto"> <Button Content="后退" Margin="5"/> <Slider Grid.Column="1" Margin="10,5"/> <Button Grid.Column="2" Content="前进" Margin="5"/> <Button Grid.Column="3" Content="音量" Margin="5"/> </Grid>
练习 5：三分区软件首页（左菜单 + 中间内容 + 右侧信息栏）
需求：三列布局，左右固定宽度，中间内容自适应窗口大小
布局规则：3 列：Column0=Auto，Column1=*，Column2=Auto；单行高度撑满窗口
代码：
<Grid ColumnDefinitions="180,*,220"> <!-- 左侧固定菜单栏 --> <Border Grid.Column="0" Background="#FFeeeeee" Margin="5"> <TextBlock Text="功能菜单" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18"/> </Border> <!-- 中间自适应主内容区域 --> <Border Grid.Column="1" Background="#FFffffff" Margin="5"> <TextBlock Text="主操作内容区域" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"/> </Border> <!-- 右侧固定信息栏 --> <Border Grid.Column="2" Background="#FFf4f4f4" Margin="5"> <TextBlock Text="系统消息栏" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18"/> </Border> </Grid>
（四）WrapPanel
自动换行布局，空间不够就自动折到下一行；
两种排列：
Orientation="Horizontal"（默认横向换行）、Orientation="Vertical"（纵向换列）；独有属性
ItemSpacing：统一控制子控件横向 / 纵向间距，不用逐个写 Margin；和 StackPanel 最大区别：StackPanel 不会换行，控件溢出直接看不见；WrapPanel 自动换行。
代码：
<WrapPanel Margin="20" ItemSpacing="15"> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位1正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位2正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FFff3300" CornerRadius="12"/> <TextBlock Text="工位3报警" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位4正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FFaaaaaa" CornerRadius="12"/> <TextBlock Text="工位5停机" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位6正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> </WrapPanel>
如果希望有滚动条，必须外层套 ScrollViewer 才能在窗口缩小时产生滚动。
代码：
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"> <WrapPanel Margin="20" ItemSpacing="15"> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位1正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位2正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FFff3300" CornerRadius="12"/> <TextBlock Text="工位3报警" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位4正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FFaaaaaa" CornerRadius="12"/> <TextBlock Text="工位5停机" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位6正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FF00cc00" CornerRadius="12"/> <TextBlock Text="工位7正常" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> <StackPanel Width="90"> <Border Width="24" Height="24" Background="#FFff3300" CornerRadius="12"/> <TextBlock Text="工位8报警" HorizontalAlignment="Center" FontSize="12"/> </StackPanel> </WrapPanel> </ScrollViewer>
ScrollViewer 关键属性说明
VerticalScrollBarVisibility="Auto"
内容高度超过窗口时自动显示垂直滚动条，内容足够则隐藏；
可选值：Visible(永久显示) / Auto(自动) / Hidden(永久隐藏) / Disabled(禁用滚动)
HorizontalScrollBarVisibility="Disabled"
禁用横向滚动，只允许 WrapPanel 自动换行，不会出现左右滑动条（工控场景推荐）。