当前位置：首页 > news >正文

WPF布局控件（界面骨架核心）

news 2025/10/23 7:18:43

布局控件（界面骨架核心）

1.1 Grid（最常用：复杂布局）

核心场景：表单、多区域划分（如 “顶部标题 + 中间内容 + 底部按钮”）
必记属性：
- RowDefinitions/ColumnDefinitions：行 / 列定义（*表示占剩余空间，Auto自适应）
- Grid.Row/Grid.Column：子元素指定行 / 列
避坑点：不设置Width/Height时，默认撑满父容器；行 / 列未设置Height/Width时，默认Auto

极简示例（直接复制）：

<Grid Width="400" Height="300"><!-- 2行2列：第1行高50，第2行占剩余；第1列宽100，第2列占剩余 --><Grid.RowDefinitions><RowDefinition Height="50"/><RowDefinition Height="*"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="100"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><!-- 子元素：标题（跨2列）、标签、输入框 --><TextBlock Text="用户表单" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center"/><Label Content="姓名：" Grid.Row="1" Grid.Column="0"/><TextBox Grid.Row="1" Grid.Column="1" Width="200"/>
</Grid>

实战备注：用Grid.ColumnSpan/Grid.RowSpan实现跨列 / 跨行，适合复杂表单布局

效果展示：

1.2 StackPanel（线性排列）

核心场景：按钮组、简单列表（如 “确定 + 取消” 按钮横向排列）
必记属性：
- Orientation：排列方向（Horizontal横向 /Vertical纵向，默认纵向）
- Spacing（.NET 5+）：子元素间距（避免用Margin逐个设置）
避坑点：纵向排列时，子元素默认撑满宽度；横向排列时，默认撑满高度

极简示例：

<!-- 横向按钮组，间距10 -->
<StackPanel Orientation="Horizontal" Margin="20"><Button Content="确定" Width="80"/><Button Content="取消" Width="80"/><Button Content="重置" Width="80"/>
</StackPanel>

效果展示：

1.3 ScrollViewer（滚动容器）

核心场景：内容超出容器（如长文本、多选项列表）
必记属性：
- VerticalScrollBarVisibility：垂直滚动条（Auto自动显示 /Visible始终显示 /Hidden隐藏）
- HorizontalScrollBarVisibility：水平滚动条
避坑点：必须设置Width/Height，否则会撑满父容器，滚动条不生效

极简示例：

<ScrollViewer Width="300" Height="200" VerticalScrollBarVisibility="Auto"><StackPanel><TextBlock Text="第1行内容" Margin="5"/><TextBlock Text="第2行内容" Margin="5"/><TextBlock Text="第3行内容" Margin="5"/><!-- 省略N行... --><TextBlock Text="第20行内容" Margin="5"/></StackPanel>
</ScrollViewer>

效果展示：

1.4 WrapPanel（自动换行）

核心场景：动态数量元素（如标签云、图片墙）
必记属性：
- Orientation：排列方向（默认横向，排满换行）
- ItemWidth/ItemHeight：子元素统一尺寸（避免大小不一）
避坑点：父容器需有固定宽度（横向排列）或高度（纵向排列），否则不会换行

极简示例：

<!-- 横向排列，子元素宽80，排满换行 -->
<WrapPanel Width="300" Orientation="Horizontal" ItemWidth="80" Margin="10"><Button Content="标签1"/><Button Content="标签2"/><Button Content="标签3"/><Button Content="标签4"/><Button Content="标签5"/>
</WrapPanel>

效果展示：

1.5 Canvas（绝对定位）

核心场景：自定义图形、固定位置元素（如仪表盘、流程图）
必记属性：子元素用Canvas.Left/Canvas.Top/Canvas.Right/Canvas.Bottom定位
避坑点：不自动适配父容器大小，分辨率变化时元素位置会偏移，慎用在响应式界面

极简示例：

<Canvas Width="300" Height="200" Background="LightGray"><!-- 圆（左上角定位） --><Ellipse Width="50" Height="50" Fill="Red" Canvas.Left="20" Canvas.Top="20"/><!-- 文本（右下角定位） --><TextBlock Text="绝对定位" Canvas.Right="20" Canvas.Bottom="20"/>
</Canvas>

效果展示：

1.6 DockPanel（边缘停靠）

核心场景：工具栏 + 内容区（如 “顶部工具栏 + 中间内容 + 底部状态栏”）
必记属性：
- LastChildFill：最后一个子元素是否占满剩余空间（默认True）
- DockPanel.Dock：子元素停靠方向（Top/Bottom/Left/Right）
避坑点：子元素停靠顺序影响布局，建议先停靠Top/Bottom，再停靠Left/Right

极简示例：

<DockPanel LastChildFill="True" Width="400" Height="300"><!-- 顶部工具栏 --><ToolBar DockPanel.Dock="Top"><Button Content="剪切"/><Button Content="复制"/></ToolBar><!-- 左侧列表 --><ListBox Width="100" DockPanel.Dock="Left"/><!-- 中间内容（占剩余空间） --><TextBlock Text="主内容区" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DockPanel>

效果展示：

1.7 其他高频布局控件（简表）

控件	核心场景	必记属性	极简示例
GridSplitter	调整 Grid 行 / 列大小	`ResizeDirection`（`Columns`/`Rows`）	`<GridSplitter Width="5" Background="Gray" ResizeDirection="Columns"/>`
GroupBox	控件分组（带标题）	`Header`（分组标题）	`<GroupBox Header="登录信息"><TextBox/></GroupBox>`
Viewbox	自动缩放子元素（保持比例）	`Stretch`（`Uniform`自适应比例）	`<Viewbox Width="200"><Button Content="缩放按钮"/></Viewbox>`
VirtualizingStackPanel	大量数据列表（优化性能）	`VirtualizingPanel.IsVirtualizing="True"`	`<ListBox.ItemsPanel><ItemsPanelTemplate><VirtualizingStackPanel/></ItemsPanelTemplate></ListBox.ItemsPanel>`
Expander	折叠 / 展开内容（省空间）	`Header`（标题）、`IsExpanded`	`<Expander Header="高级设置"><CheckBox/></Expander>`