第二部分：核心技术

第3章：布局与控件

3.1 常用布局控件

概述

WPF提供了多种布局控件（Panel），用于管理子元素的排列方式。这些控件通过不同的布局逻辑实现灵活的界面设计，是构建响应式UI的基础。

核心布局控件

1. Grid

   • 功能：基于行/列的网格布局，支持单元格合并和比例分配。
   • 关键属性：

     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/> <!-- 自适应高度 -->
             <RowDefinition Height="*"/>   <!-- 剩余空间占比 -->
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="100"/>
             <ColumnDefinition Width="2*"/> <!-- 宽度为第一列的两倍 -->
         </Grid.ColumnDefinitions>
     </Grid>
     
   • 适用场景：复杂表单、数据表格布局。

2. StackPanel

   • 功能：子元素按水平或垂直方向线性排列。
   • 关键属性：

     <StackPanel Orientation="Horizontal" Margin="5">
         <Button Content="按钮1"/>
         <Button Content="按钮2"/>
     </StackPanel>
     
   • 适用场景：工具栏、简单列表。

3. DockPanel

   • 功能：子元素停靠在面板的指定边缘（Top/Bottom/Left/Right）。
   • 关键属性：

     <DockPanel LastChildFill="True">
         <Button DockPanel.Dock="Top" Content="顶部"/>
         <Button Content="填充剩余区域"/>
     </DockPanel>
     
   • 适用场景：主界面框架（如菜单栏+内容区）。

4. WrapPanel

   • 功能：子元素按顺序排列，空间不足时自动换行/列。
   • 示例：

     <WrapPanel Orientation="Horizontal" ItemWidth="100">
         <!-- 子元素宽度固定为100，超出宽度时换行 -->
     </WrapPanel>
     
   • 适用场景：动态标签页、图片墙。

5. Canvas

   • 功能：通过绝对坐标（X/Y）定位子元素。
   • 注意：缺乏自适应能力，适用于固定尺寸设计（如绘图工具）。

选择建议

最佳实践

• 嵌套使用：组合多种布局控件（如Grid内嵌套StackPanel）实现复杂设计。
• 性能优化：避免过度嵌套，减少布局计算开销。
• 响应式设计：结合MinWidth/MaxWidth和SizeToContent属性增强适应性。

提示：在Visual Studio中使用XAML设计器时，可通过拖拽方式快速生成布局代码，再手动调整细节。