UniformGrid 均匀网格布局学习笔记

1. UniformGrid 容器基础概念

1.1 什么是 UniformGrid？

UniformGrid（均匀网格）是 WPF 中一个特殊的布局容器，它具有以下核心特点：

单元格大小相同：所有网格单元格具有统一的宽度和高度
自动排列：子元素按照顺序自动填充到网格中
简化配置：相比 Grid 容器，不需要明确定义行和列

1.2 UniformGrid 与 Grid 的对比

特性	UniformGrid	Grid
单元格大小	统一相同	可以不同
行列定义	自动计算	必须明确定义
使用复杂度	简单	相对复杂
适用场景	均匀排列的元素	复杂布局

2. UniformGrid 基本使用方法

2.1 最简单的 UniformGrid

xml 复制代码

<UniformGrid>
    <Button Content="1" Background="LightBlue"/>
    <Button Content="2" Background="LightGreen"/>
    <Button Content="3" Background="LightCoral"/>
    <Button Content="4" Background="LightYellow"/>
</UniformGrid>

显示效果：

css 复制代码

[ 1 ] [ 2 ]
[ 3 ] [ 4 ]

2.2 自动排列规则

UniformGrid 按照 从左到右、从上到下 的顺序自动排列子元素：

xml 复制代码

<UniformGrid>
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>
    <Button Content="6"/>
</UniformGrid>

显示效果：

css 复制代码

[ 1 ] [ 2 ] [ 3 ]
[ 4 ] [ 5 ] [ 6 ]

3. UniformGrid 的重要属性详解

3.1 Rows 和 Columns 属性

🔹 设置固定行列数

xml 复制代码

<!-- 创建 2行 x 3列 的均匀网格 -->
<UniformGrid Rows="2" Columns="3">
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>
    <Button Content="6"/>
</UniformGrid>

显示效果：

css 复制代码

[ 1 ] [ 2 ] [ 3 ]
[ 4 ] [ 5 ] [ 6 ]

🔹 只设置行数（自动计算列数）

xml 复制代码

<UniformGrid Rows="2">
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>
</UniformGrid>

显示效果：

css 复制代码

[ 1 ] [ 2 ] [ 3 ]
[ 4 ] [ 5 ]

🔹 只设置列数（自动计算行数）

xml 复制代码

<UniformGrid Columns="3">
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>
</UniformGrid>

显示效果：

css 复制代码

[ 1 ] [ 2 ] [ 3 ]
[ 4 ] [ 5 ]

3.2 FirstColumn 属性

🔹 FirstColumn 的作用

FirstColumn 属性用于指定第一个子元素开始的位置，前面的网格单元格会保持空白。

xml 复制代码

<UniformGrid Columns="3" FirstColumn="1">
    <Button Content="1" Background="Red"/>
    <Button Content="2" Background="Green"/>
    <Button Content="3" Background="Blue"/>
</UniformGrid>

显示效果：

css 复制代码

[空] [ 1 ] [ 2 ]
[ 3 ]

重要说明：

当行或列数不足时，FirstColumn 属性可能不会生效
主要用于创建偏移布局效果

4. 控件溢出处理规则

4.1 什么是控件溢出？

当子元素数量超过 UniformGrid 的容量时，就会发生控件溢出。

4.2 溢出情况分析

🔹 情况一：未设置行列时的自动计算

xml 复制代码

<UniformGrid Height="100" Width="200">
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>
    <Button Content="6"/>
    <Button Content="7"/>  <!-- 这个按钮可能显示不全 -->
</UniformGrid>

🔹 情况二：固定行列数时的溢出

xml 复制代码

<!-- 2x2网格只能容纳4个元素 -->
<UniformGrid Rows="2" Columns="2">
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>  <!-- 溢出，可能显示在网格外 -->
</UniformGrid>

4.3 避免溢出的最佳实践

✅ 正确做法：根据子元素数量设置网格

xml 复制代码

<!-- 假设有6个子元素 -->
<UniformGrid>
    <!-- 让UniformGrid自动计算合适的行列 -->
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>
    <Button Content="6"/>
</UniformGrid>

✅ 或者明确指定足够的行列

xml 复制代码

<UniformGrid Rows="2" Columns="3">
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
    <Button Content="4"/>
    <Button Content="5"/>
    <Button Content="6"/>
</UniformGrid>

5. 实际应用案例

5.1 创建计算器界面

xml 复制代码

<UniformGrid Columns="4" Rows="5" Margin="10">
    <!-- 显示器 -->
    <TextBox UniformGrid.ColumnSpan="4" 
             Text="0" 
             FontSize="20" 
             TextAlignment="Right"
             Margin="2"/>
    
    <!-- 数字和操作符按钮 -->
    <Button Content="7" Margin="2"/>
    <Button Content="8" Margin="2"/>
    <Button Content="9" Margin="2"/>
    <Button Content="÷" Margin="2" Background="LightGray"/>
    
    <Button Content="4" Margin="2"/>
    <Button Content="5" Margin="2"/>
    <Button Content="6" Margin="2"/>
    <Button Content="×" Margin="2" Background="LightGray"/>
    
    <Button Content="1" Margin="2"/>
    <Button Content="2" Margin="2"/>
    <Button Content="3" Margin="2"/>
    <Button Content="-" Margin="2" Background="LightGray"/>
    
    <Button Content="0" Margin="2"/>
    <Button Content="." Margin="2"/>
    <Button Content="=" Margin="2" Background="Orange"/>
    <Button Content="+" Margin="2" Background="LightGray"/>
    
    <Button Content="C" UniformGrid.ColumnSpan="4" 
            Margin="2" Background="LightCoral"/>
</UniformGrid>

5.2 创建图片缩略图网格

xml 复制代码

<UniformGrid Columns="3" Margin="10">
    <Border BorderBrush="Gray" BorderThickness="1" Margin="2">
        <Image Source="image1.jpg" Stretch="Uniform"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" Margin="2">
        <Image Source="image2.jpg" Stretch="Uniform"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" Margin="2">
        <Image Source="image3.jpg" Stretch="Uniform"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" Margin="2">
        <Image Source="image4.jpg" Stretch="Uniform"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" Margin="2">
        <Image Source="image5.jpg" Stretch="Uniform"/>
    </Border>
</UniformGrid>

5.3 创建颜色选择面板

xml 复制代码

<UniformGrid Columns="5" Margin="10">
    <Button Background="Red" Content="红色" Margin="2"/>
    <Button Background="Blue" Content="蓝色" Margin="2"/>
    <Button Background="Green" Content="绿色" Margin="2"/>
    <Button Background="Yellow" Content="黄色" Margin="2"/>
    <Button Background="Purple" Content="紫色" Margin="2"/>
    <Button Background="Orange" Content="橙色" Margin="2"/>
    <Button Background="Pink" Content="粉色" Margin="2"/>
    <Button Background="Brown" Content="棕色" Margin="2"/>
    <Button Background="Gray" Content="灰色" Margin="2"/>
    <Button Background="Black" Foreground="White" Content="黑色" Margin="2"/>
</UniformGrid>

6. 高级技巧与布局优化

6.1 响应式 UniformGrid

通过结合其他容器实现响应式布局：

xml 复制代码

<Viewbox Stretch="Uniform">
    <UniformGrid Columns="4" Width="400" Height="300">
        <Button Content="按钮1"/>
        <Button Content="按钮2"/>
        <Button Content="按钮3"/>
        <Button Content="按钮4"/>
        <Button Content="按钮5"/>
        <Button Content="按钮6"/>
        <Button Content="按钮7"/>
        <Button Content="按钮8"/>
    </UniformGrid>
</Viewbox>

6.2 嵌套使用 UniformGrid

xml 复制代码

<UniformGrid Columns="2">
    <!-- 左侧区域 -->
    <UniformGrid Columns="2" Rows="2" Margin="5">
        <Button Content="A1"/>
        <Button Content="A2"/>
        <Button Content="A3"/>
        <Button Content="A4"/>
    </UniformGrid>
    
    <!-- 右侧区域 -->
    <UniformGrid Columns="1" Rows="3" Margin="5">
        <Button Content="B1"/>
        <Button Content="B2"/>
        <Button Content="B3"/>
    </UniformGrid>
</UniformGrid>

6.3 结合 Margin 属性优化间距

xml 复制代码

<UniformGrid Columns="3" Margin="10">
    <Button Content="1" Margin="5"/>
    <Button Content="2" Margin="5"/>
    <Button Content="3" Margin="5"/>
    <Button Content="4" Margin="5"/>
    <Button Content="5" Margin="5"/>
    <Button Content="6" Margin="5"/>
</UniformGrid>

7. 常见问题与解决方案

7.1 问题：控件显示不全或溢出

解决方案：

xml 复制代码

<!-- 错误：固定行列但元素过多 -->
<UniformGrid Rows="2" Columns="2">
    <Button Content="1"/><Button Content="2"/>
    <Button Content="3"/><Button Content="4"/>
    <Button Content="5"/> <!-- 溢出的元素 -->
</UniformGrid>

<!-- 正确：自动计算或足够行列 -->
<UniformGrid> <!-- 让UniformGrid自动处理 -->
    <Button Content="1"/><Button Content="2"/>
    <Button Content="3"/><Button Content="4"/>
    <Button Content="5"/>
</UniformGrid>

7.2 问题：FirstColumn 不生效

原因分析：

行或列数不足
子元素数量太少

解决方案：

xml 复制代码

<!-- 确保有足够的列来体现FirstColumn效果 -->
<UniformGrid Columns="4" FirstColumn="2">
    <Button Content="1"/>
    <Button Content="2"/>
    <Button Content="3"/>
</UniformGrid>

7.3 问题：单元格大小不一致

原因： 通常是由于子元素内容不同导致的

解决方案：

xml 复制代码

<UniformGrid Columns="3">
    <!-- 限制子元素大小 -->
    <Button Content="短" Width="60" Height="40"/>
    <Button Content="较长文本" Width="60" Height="40"/>
    <Button Content="很长很长的文本" Width="60" Height="40"/>
</UniformGrid>

8. 总结与练习建议

UniformGrid 核心要点回顾

自动均匀布局：所有单元格大小相同
顺序填充：从左到右、从上到下自动排列
行列配置：可以固定行列数或自动计算
溢出处理：注意控件数量不要超过网格容量
FirstColumn ：用于创建起始偏移效果