157 lines
6.9 KiB
Plaintext
157 lines
6.9 KiB
Plaintext
|
|
液体吸收测试报告 - 隔行变色实现说明
|
|||
|
|
=========================================
|
|||
|
|
|
|||
|
|
## 实现方式
|
|||
|
|
|
|||
|
|
参考图片示例,使用DataGridView的内置属性实现黄色和白色交替的隔行变色效果。
|
|||
|
|
|
|||
|
|
### 1. Designer.cs配置
|
|||
|
|
|
|||
|
|
在Form3.Designer.cs中,DataGridView配置了隔行变色:
|
|||
|
|
|
|||
|
|
```csharp
|
|||
|
|
dataGridViewCellStyle1.BackColor = System.Drawing.Color.FromArgb(255, 255, 200);
|
|||
|
|
this.dataGridView1.AlternatingRowsDefaultCellStyle = dataGridViewCellStyle1;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这个配置会自动为奇数行和偶数行设置不同的背景色:
|
|||
|
|
- 偶数行(0, 2, 4...):白色背景(默认)
|
|||
|
|
- 奇数行(1, 3, 5...):黄色背景 RGB(255, 255, 200)
|
|||
|
|
|
|||
|
|
### 2. 颜色说明
|
|||
|
|
|
|||
|
|
根据参考图片,使用以下颜色方案:
|
|||
|
|
- **白色行**:RGB(255, 255, 255) - 纯白色
|
|||
|
|
- **黄色行**:RGB(255, 255, 200) - 浅黄色
|
|||
|
|
|
|||
|
|
这种配色方案:
|
|||
|
|
- ✅ 对比度适中,不刺眼
|
|||
|
|
- ✅ 清晰区分不同行
|
|||
|
|
- ✅ 提高数据可读性
|
|||
|
|
- ✅ 符合常见表格设计规范
|
|||
|
|
|
|||
|
|
### 3. 代码优化要点
|
|||
|
|
|
|||
|
|
为了让隔行变色正常工作,需要注意以下几点:
|
|||
|
|
|
|||
|
|
#### 3.1 不要在列样式中设置BackColor
|
|||
|
|
```csharp
|
|||
|
|
// ❌ 错误做法 - 会覆盖隔行变色
|
|||
|
|
DataGridViewCellStyle style = new DataGridViewCellStyle
|
|||
|
|
{
|
|||
|
|
BackColor = Color.White, // 这会覆盖隔行变色
|
|||
|
|
Alignment = DataGridViewContentAlignment.MiddleCenter
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 正确做法 - 不设置BackColor
|
|||
|
|
DataGridViewCellStyle style = new DataGridViewCellStyle
|
|||
|
|
{
|
|||
|
|
Alignment = DataGridViewContentAlignment.MiddleCenter
|
|||
|
|
// 不设置BackColor,让隔行变色自动生效
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3.2 避免使用CellPainting事件设置背景色
|
|||
|
|
```csharp
|
|||
|
|
// ❌ 错误做法 - CellPainting会覆盖隔行变色
|
|||
|
|
private void DataGridView1_CellPainting(...)
|
|||
|
|
{
|
|||
|
|
e.CellStyle.BackColor = Color.White; // 这会覆盖隔行变色
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ✅ 正确做法 - 移除CellPainting事件或不设置BackColor
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3.3 只在必要时使用CellFormatting
|
|||
|
|
```csharp
|
|||
|
|
// ✅ 正确做法 - 只格式化显示内容,不改变背景色
|
|||
|
|
private void DataGridView1_CellFormatting(...)
|
|||
|
|
{
|
|||
|
|
// 只处理显示格式,不设置BackColor
|
|||
|
|
e.Value = value.ToString("F2");
|
|||
|
|
e.FormattingApplied = true;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 效果展示
|
|||
|
|
|
|||
|
|
实现后的效果(参考图片):
|
|||
|
|
```
|
|||
|
|
┌─────────────┬────────┬────────┬────────┬────────┬────────┬──────────────────┐
|
|||
|
|
│ 序号 │ 试样1 │ 试样2 │ 试样3 │ 试样4 │ 试样5 │ 时间 │
|
|||
|
|
├─────────────┼────────┼────────┼────────┼────────┼────────┼──────────────────┤
|
|||
|
|
│吸水时间(s) │ 30.49 │ 30.78 │ 31.41 │ 31.19 │ 30.82 │ 2025-12-30 17:25 │ ← 黄色背景
|
|||
|
|
├─────────────┼────────┼────────┼────────┼────────┼────────┼──────────────────┤
|
|||
|
|
│吸芯高度(mm) │ 30.62 │ 30.53 │ 31.43 │ 32.62 │ 30.35 │ 2025-12-30 17:26 │ ← 白色背景
|
|||
|
|
├─────────────┼────────┼────────┼────────┼────────┼────────┼──────────────────┤
|
|||
|
|
│芯吸速率 │ 31.11 │ 31.05 │ 30.52 │ 33.21 │ 31.13 │ 2025-12-30 17:27 │ ← 黄色背景
|
|||
|
|
├─────────────┼────────┼────────┼────────┼────────┼────────┼──────────────────┤
|
|||
|
|
│平均芯吸速率 │ 32.71 │ 30.53 │ 30.92 │ 33.96 │ 31.52 │ 2025-12-30 17:28 │ ← 白色背景
|
|||
|
|
├─────────────┼────────┼────────┼────────┼────────┼────────┼──────────────────┤
|
|||
|
|
│标准偏差 │ 32.26 │ 30.64 │ 31.04 │ 34.00 │ 31.13 │ 2025-12-30 17:29 │ ← 黄色背景
|
|||
|
|
├─────────────┼────────┼────────┼────────┼────────┼────────┼──────────────────┤
|
|||
|
|
│互检/审核 │ 30.57 │ 31.20 │ 33.66 │ 32.12 │ 33.22 │ 2025-12-30 17:30 │ ← 白色背景
|
|||
|
|
└─────────────┴────────┴────────┴────────┴────────┴────────┴──────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5. 优势
|
|||
|
|
|
|||
|
|
使用DataGridView内置的隔行变色功能有以下优势:
|
|||
|
|
|
|||
|
|
1. **性能好**:不需要在CellPainting事件中手动绘制
|
|||
|
|
2. **代码简洁**:只需要在Designer中配置一次
|
|||
|
|
3. **自动适应**:添加/删除行时自动调整颜色
|
|||
|
|
4. **视觉清晰**:黄白交替,易于区分不同行
|
|||
|
|
5. **符合规范**:与参考图片保持一致的视觉效果
|
|||
|
|
|
|||
|
|
### 6. 颜色对比
|
|||
|
|
|
|||
|
|
| 背景色 | RGB值 | 用途 | 视觉效果 |
|
|||
|
|
|--------|-------|------|----------|
|
|||
|
|
| 白色 | (255, 255, 255) | 偶数行 | 纯白色,清爽 |
|
|||
|
|
| 浅黄色 | (255, 255, 200) | 奇数行 | 淡黄色,温和 |
|
|||
|
|
|
|||
|
|
### 7. 与参考图片的对比
|
|||
|
|
|
|||
|
|
参考图片的特点:
|
|||
|
|
- ✅ 黄白交替的隔行变色
|
|||
|
|
- ✅ 黄色背景不刺眼
|
|||
|
|
- ✅ 数据清晰易读
|
|||
|
|
- ✅ 专业的表格外观
|
|||
|
|
|
|||
|
|
我们的实现:
|
|||
|
|
- ✅ 完全匹配参考图片的颜色方案
|
|||
|
|
- ✅ 使用相同的RGB(255, 255, 200)黄色
|
|||
|
|
- ✅ 自动隔行变色,无需手动设置
|
|||
|
|
- ✅ 性能优化,流畅显示
|
|||
|
|
|
|||
|
|
### 8. 注意事项
|
|||
|
|
|
|||
|
|
1. 如果需要特定单元格使用特殊背景色,可以在CellFormatting中设置
|
|||
|
|
2. 但要注意,特殊背景色会覆盖隔行变色效果
|
|||
|
|
3. 建议只对特殊情况(如错误提示)使用特殊背景色
|
|||
|
|
4. 大部分情况下,让隔行变色自动生效即可
|
|||
|
|
|
|||
|
|
### 9. 测试验证
|
|||
|
|
|
|||
|
|
运行程序后,应该看到:
|
|||
|
|
- 第1行(吸水时间):黄色背景 RGB(255, 255, 200)
|
|||
|
|
- 第2行(吸芯高度):白色背景
|
|||
|
|
- 第3行(芯吸速率):黄色背景
|
|||
|
|
- 第4行(平均芯吸速率):白色背景
|
|||
|
|
- 第5行(标准偏差):黄色背景
|
|||
|
|
- 第6行(互检/审核):白色背景
|
|||
|
|
|
|||
|
|
如果看不到隔行变色效果,检查:
|
|||
|
|
1. Designer.cs中是否配置了AlternatingRowsDefaultCellStyle
|
|||
|
|
2. 代码中是否设置了BackColor覆盖了隔行变色
|
|||
|
|
3. 是否使用了CellPainting事件设置背景色
|
|||
|
|
|
|||
|
|
### 10. Excel导出
|
|||
|
|
|
|||
|
|
导出到Excel时,也可以保持相同的隔行变色效果:
|
|||
|
|
- 使用NPOI设置单元格背景色
|
|||
|
|
- 奇数行使用黄色背景
|
|||
|
|
- 偶数行使用白色背景
|
|||
|
|
- 保持与界面一致的视觉效果
|