wpf 布局专题 - 技术栈

Grid控件（网格布局）

继承关系: 继承自Panel基类，实现了IAddChild接口
关键属性:
- ColumnDefinitions: 列定义集合
- RowDefinitions: 行定义集合
- ShowGridLines: 是否显示网格线（默认为false）
列位置控制:
- Grid.Column="0"表示第1列（从0开始索引）
- Grid.Column="1"表示第2列

js 复制代码

  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
      </Grid.ColumnDefinitions>
  
  <Button Content="红色" Background="red"   Grid.Column="0" Grid.Row="0" Margin="20"/>
  <Button Content="黑色" Background="Black"  Grid.Column="1" Grid.Row="0" Margin="20" Panel.ZIndex="1"/>
  <Button Content="蓝色" Background="Blue" Grid.Column="0" Grid.Row="1" Margin="20"/>
  <Button Content="绿色" Background="Green" Grid.Column="1" Grid.Row="1" Margin="20"/>
  </Grid>

布局特性: 是WPF窗体的默认控件，创建新窗体时自动包含Grid控件
跨行列属性:
- ColumnSpan: 跨列数
- RowSpan: 跨行数
列集合: 通过ColumnDefinitions属性定义

列宽设置:
- Width="100"固定宽度
- Width="*"按比例分配剩余空间
- Width="Auto"根据内容自动调整

Border控件作为装饰器

实现实线网格:
- 为每个单元格添加Border控件
- 设置BorderThickness控制边框粗细
- 通过BorderBrush设置颜色

知识小结

知识点	核心内容	关键属性/易混淆点	应用示例
Grid网格布局基础	继承自Panel基类，用于多元素排版	依赖属性：ColumnDefinitions(列)、RowDefinitions(行)、Grid.ColumnSpan(跨列)、Grid.RowSpan(跨行)	通过Grid.Column/Row实现元素行列定位
行列定义方式	通过ColumnDefinition和RowDefinition集合配置	下标从0开始；星号表示剩余空间分配比例（如5和10*表示1:2比例）	定义两列：
跨行列布局	ColumnSpan/RowSpan控制元素占据范围	跨列需设置起始列号，跨行需同步设置起始行号	按钮跨两列：Grid.ColumnSpan="2"
尺寸控制	固定值/自动/Auto三种模式	自动模式计算包含元素margin值；星号比例分配需注意优先级	行高100px：
辅助线显示	ShowGridLines属性控制虚线显示	实际开发推荐用Border控件模拟实线（需处理重叠边框问题）	隐藏重叠边线：BorderThickness="0,1,1,0"
边距控制	Margin属性（上,左,下,右）和Padding属性	Margin影响布局计算，与Auto高度模式会产生联动效果	统一边距：Margin="20"，非对称边距：Margin="10,5,10,5"
UniformGrid对比	简化版网格（后续课程）	关键差异：Grid支持不规则布局，UniformGrid强制均等分布
实战技巧	Border控件装饰网格线	需嵌套布局：Grid作为Border子元素，通过BorderThickness精细控制	实线实现：

UniformGrid控件（均分布局）

基本概念：UniformGrid控件是一种均分布局控件，与Grid控件相似但每个单元格面积相等
布局特点：无论横向还是纵向单元格，都会自动平分整个UniformGrid空间
核心属性：
- FirstColumn：控制第一行需要空出的单元格数，默认值为0
- Columns：定义列数，默认值为0
- Rows：定义行数，默认值为0
继承关系：继承自Panel基类，属于WPF布局控件体系

行列控制：
- 明确设置Rows="3" Columns="3"可创建3×3网格
- FirstColumn="1"会使第一行第一列留空
- 示例中5个Button在3×3网格中排列，第一行空1格后排列

StackPanel控件（栈式布局）

继承关系: 继承自Panel布局基类，实现IScrollInfo和IStackMeasure接口
核心属性:
- Orientation: 决定子元素排列方向（水平/垂直）
- Children: 子元素集合，只能按指定方向排列
- Scroll相关: ViewportHeight/Width, ExtentHeight/Width等滚动属性
布局特性: 通过LogicalOrientation控制逻辑方向，HasLogicalOrientation判断是否有方向性
方向切换: 设置Orientation="Horizontal"
溢出处理: 当子元素超出容器宽度时会被截断
性能优势: 相比Grid布局计算资源消耗更少
scrollViewer: 包裹StackPanel实现滚动功能
实现步骤:
- 添加ScrollViewer控件
- 将StackPanel放入其中
- 设置足够多的子元素触发滚动
- - 对齐属性: HorizontalAlignment控制子元素水平对齐
四种模式:
- Left: 左对齐，宽度由内容决定
- Right: 右对齐，宽度由内容决定
- Center: 居中对齐
- Stretch: 默认值，拉伸填满可用空间

WrapPanel控件（瀑布流布局）

布局特性: 以流式布局自动排列子元素，当空间不足时会自动换行
常见用途: 适用于不确定显示尺寸的自适应界面设计
对比特性: 与StackPanel不同，WrapPanel会根据容器尺寸自动调整子元素位置
- 自适应原理: 子元素会根据容器宽度/高度自动换行排列
内容约束: 当设置ItemHeight=100和ItemWidth=100时，所有子元素都会限制在这个尺寸范围内
布局方向: 默认水平排列(从左到右)，排满后自动换行；也可设置为垂直排列(从上到下)
Orientation:
- 控制排列方向，Horizontal(水平)或Vertical(垂直)
- 水平排列时：从左到右，排满换行
- 垂直排列时：从上到下，排满换列
ItemHeight:
- 统一设置所有子元素的高度
- 示例中设置为50时，所有按钮高度统一为50
ItemWidth:
- 统一设置所有子元素的宽度
- 与ItemHeight配合使用可实现统一尺寸

DockPanel控件（停靠布局）

基本特性：与StackPanel和WrapPanel不同，DockPanel通过Dock属性控制子元素的停靠位置
经典布局：
- 第一个元素设置Dock="Left"将左靠边停靠
- 第二个元素设置Dock="Top"将停靠顶部（左侧空间被第一个元素占据）
- 第三个元素设置Dock="Right"将停靠右侧（顶部部分空间被第二个元素占据）
- 第四个元素设置Dock="Bottom"将停靠底部
- 最后一个未指定Dock属性的元素将自动填满剩余空间
LastChildFill属性：
- 默认值为True，使最后一个元素填满剩余空间
- 设置为False时，剩余空间不会被自动填满，可继续添加新控件
水平/垂直布局：
- 通过设置DockPanel.Dock="Center"可实现水平排列
- 垂直排列时使用Dock="Top"，但StackPanel更适合处理这类布局
- 实际开发中更推荐使用经典的四方向停靠布局
布局特点：
- 每个停靠方向的元素会占据该方向的全部可用空间
- 后续停靠的元素会受到先前元素占据空间的影响
- 剩余空间的计算是动态的，取决于已停靠元素的位置和大小

二、知识小结

知识点	核心内容	考试重点/易混淆点	难度系数
停靠布局（DockPanel）	用于控件停靠布局，支持上下左右及剩余空间填充	经典布局模式（上下左右+剩余填充）与属性优先级	⭐⭐
Dock 属性	设置停靠方向（Left/Top/Right/Bottom），影响控件占位逻辑	空间抢占规则（先停靠控件会限制后续控件可用空间）	⭐⭐⭐
LastChildFill 属性	控制最后一个子控件是否填满剩余空间（默认 true）	false 时需手动计算剩余空间分配	⭐⭐
对齐方式	支持 Center/Top 等对齐，但推荐用 StackPanel 实现	与 StackPanel 的布局差异（DockPanel 侧重停靠，StackPanel 侧重线性排列）	⭐
经典应用场景	上下左右分栏布局（如工具栏、状态栏、侧边栏组合）	优先使用停靠模式，对齐模式易导致控件重叠	⭐⭐⭐

####Canvas控件（固定布局）

一、绝对布局

核心属性：提供4个依赖属性：LeftProperty、TopProperty、RightProperty、BottomProperty，通过附加属性方式设置子元素位置。
方法机制：通过Get/Set系列方法（如GetLeft()、SetTop()）操作这些附加属性，控制子元素相对于Canvas边界的像素距离。

二、知识小结

知识点	核心内容	考试重点/易混淆点	难度系数
Canvas绝对布局	WPF中通过坐标定位控件的布局方式	与DockPanel布局属性的区别（无Dock属性）	⭐⭐
附加属性	Left/Top/Right/Bottom四个依赖属性控制位置	拖拽自动生成vs手动设置属性	⭐⭐⭐
布局特性	子控件默认堆叠在左上角（3像素边距）	垂直/水平对齐属性无效	⭐⭐
坐标定位	通过Canvas.Left=200等属性精确控制位置	Right/Bottom与Left/Top的坐标计算差异	⭐⭐⭐
实现原理	通过DependencyProperty.RegisterAttached注册附加属性	附加属性在MVVM模式中的扩展应用	⭐⭐⭐⭐

Border控件（边框布局)

核心属性:
- BorderThickness: 边框宽度
- Padding: 内部元素与边框的边距
- CornerRadius: 圆角半径
- BorderBrush: 边框颜色刷子
- Background: 背景颜色
尺寸设置:
- 直接继承FrameworkElement的Width/Height属性
- 示例：Width="100" Height="50"
对齐方式:
- 通过HorizontalAlignment/VerticalAlignment控制子元素位置
- 示例：HorizontalAlignment="Center" VerticalAlignment="Center"
背景设置:
- 通过Background属性直接设置
- 示例：Background="LightBlue"
圆角控制:

diff 复制代码

-   CornerRadius属性控制四个角的弧度

ini 复制代码

-   示例：CornerRadius="10"

特殊效果:
- 当CornerRadius设为高度/宽度的一半时(如50)，会形成正圆
- 示例：Height="100" CornerRadius="50"会显示圆形

js 复制代码

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!--top-->
    <DockPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="#126a74" Height="60">
        <TextBlock Text="wpf应用程序布局程序" Foreground="White" FontSize="20" Margin="15,15"/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Border Height="35" Margin="10" BorderThickness="1" BorderBrush="#ca5100" Background="#ca5100" CornerRadius="10">
                <TextBlock Text="退出系统" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"/>
            </Border>
        </StackPanel>
    </DockPanel>
    <!--left-->
    <StackPanel Grid.Row="1" Grid.Column="0" Width="350">
        <Border Height="250" Margin="10" Padding="5" Background="#439d84">
            <TextBlock Text="参数区域" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
        </Border>

        <Border Height="250" Margin="10" Padding="5" Background="#439d84">
            <TextBlock Text="参数区域" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
        </Border>

        <Border Height="110" Margin="10" Padding="5" Background="#439d84">
            <TextBlock Text="参数区域" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
        </Border>
    </StackPanel>

    <!--right-->
    <Grid Grid.Row="1" Grid.Column="1">
        <Border Margin="10" Padding="5" BorderThickness="1" BorderBrush="#f7bd93" CornerRadius="5" Background="#fdd2d2">
            <TextBlock Text="主体区域" Margin="5"/>
        </Border>
        <Border Width="150" Height="150" Padding="5" BorderThickness="1" Background="red" BorderBrush="Gray" CornerRadius="75">
            <TextBlock Text="开始运行" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20"/>
        </Border>
    </Grid>

    <!--Bottom-->
    <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Background="Orange">
        <TextBlock Text="版本号 1.2658.24546 版权所有：" Foreground="White" FontSize="14"/>
    </Grid>

</Grid>

GridSplitter分割窗口_

功能特性：可将区域分成两部分并通过鼠标拖动调整区域大小
交互方式：鼠标悬停时显示双向箭头光标，按住拖动可实时调整分割比例
基础结构：需要先创建包含多列的Grid布局
关键设置：
- 中间列宽度设为"Auto"（Width="Auto"）
- 两侧列采用默认或固定宽度
注意事项：未放置控件时Auto列会隐藏
交互反馈：鼠标悬停时显示双向箭头光标
动态调整：拖动时可实时改变两侧区域宽度比例
应用价值：适用于需要灵活调整布局比例的场景（如IDE面板、文件管理器等）

js 复制代码

 <Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition Width="auto"/>
         <ColumnDefinition/>
     </Grid.ColumnDefinitions>

     <Border Grid.Column="0" Background="LightBlue">
         <TextBlock TextWrapping="Wrap" Padding="10" LineHeight="20" Text="老实交代苦上加苦离开时间段咖啡机来上课大姐夫立卡见识到了咖啡机猎杀对决饭卡上电力科技阿萨达激发拉卡受打击立卡离开家卡结算单可接受的发生了肯德基困了就睡地方"/>
     </Border>

     <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" ShowsPreview="False"/>
     <Border Grid.Column="2"  Background="LightCoral">
         <TextBlock TextWrapping="Wrap" Padding="10" LineHeight="20" Text="老实交代苦上加苦离开时间段咖啡机来上课大姐夫立卡见识到了咖啡机猎杀对决饭卡上电力科技阿萨达激发拉卡受打击立卡离开家卡结算单可接受的发生了肯德基困了就睡地方"/>
     </Border>
 </Grid>