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

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

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>