Day 6 - Avalonia UI 批量刷新
建议用时:150-210 分钟
你将学会什么
- 后台采集不直接改控件
- 按固定帧率刷新 ViewModel
- 批量更新 ObservableCollection
采集可以 50 ms 一次,但界面不需要每条都刷新。用快照和节流保护 UI 线程。 今天的 3 个例子都要亲手敲,不能只复制,也不能只看运行结果。
标为 Program.cs 的最小例子可以放进控制台练习项目;标为 Service、ViewModel、XAML 或 SQL 文件的例子,要在本周项目中按前一天已经建立的模型继续敲。文件名和上下文不同,不要把所有片段塞进同一个 Program.cs。
学习衔接
这是 Week 17 的第 6 天。先使用前面已经掌握的 C#、异步、异常、接口和 MVVM,只增加今天这一层上位机能力。
今天的最低通过线
| 顺序 | 必须掌握 | 怎么证明 |
|---|---|---|
| 1 | 后台采集不直接改控件 | 能用自己的话解释并完成对应例子 |
| 2 | 按固定帧率刷新 ViewModel | 能用自己的话解释并完成对应例子 |
| 3 | 批量更新 ObservableCollection | 能用自己的话解释并完成对应例子 |
先用大白话理解
采集可以 50 ms 一次,但界面不需要每条都刷新。用快照和节流保护 UI 线程。
学习时固定按这个顺序:
先看数据是什么
-> 再看最小代码
-> 对照运行结果
-> 修改一个参数
-> 故意制造错误
-> 最后组合进上位机项目例子 1:定时取得快照
文件:Program.cs
using var timer = new PeriodicTimer(TimeSpan.FromMilliseconds(200));
while (await timer.WaitForNextTickAsync(token))
{
DashboardSnapshot snapshot = cache.CreateSnapshot();
await uiUpdater.ApplyAsync(snapshot);
}运行结果或界面效果:
界面每 200 ms 应用一次快照必须改一次: 把采集周期设为 20 ms 比较职责。
例子 2:切到 UI 线程
文件:Program.cs
await Dispatcher.UIThread.InvokeAsync(() =>
{
Temperature = snapshot.Temperature;
OnlineCount = snapshot.OnlineCount;
});运行结果或界面效果:
所有绑定属性在 UI 线程批量更新必须改一次: 一次更新多个属性。
例子 3:限制曲线窗口
文件:Program.cs
series.Add(new DataPoint(sample.SourceTime, value));
while (series.Count > 600)
{
series.RemoveAt(0);
}运行结果或界面效果:
曲线只保留最近 600 点必须改一次: 避免每次 RemoveAt(0),改用环形缓冲区。
常见错误和修法
- 每条采样 Dispatcher.Post 一次
- 后台线程修改 ObservableCollection
- 曲线集合永远只增不删
修错顺序固定为:先看第一条异常和行号,再看输入数据,再看原始字节或状态,最后才怀疑框架。
小白重复敲写训练
- 不看上面的代码,重新敲“定时取得快照”。
- 不看上面的代码,重新敲“切到 UI 线程”。
- 不看上面的代码,重新敲“限制曲线窗口”。
- 完成改动任务:把采集周期设为 20 ms 比较职责。
- 完成改动任务:一次更新多个属性。
- 完成改动任务:避免每次 RemoveAt(0),改用环形缓冲区。
每日小测
- 今天的知识在上位机里解决什么问题?
- 三个例子分别输入了什么,输出了什么?
- 如果运行结果不对,你第一步检查什么?
- 哪一段代码负责停止、超时或错误处理?
小测答案
答案不能只背一句话。回到三个例子,用代码中的变量、方法和输出逐项说明。能脱离页面说清楚,才算真的理解。
今日作业
- 新建空项目,不复制地重做三个例子。
- 每个例子都完成“必须改一次”。
- 故意制造一个错误,记录错误文字和修复办法。
- 把今天代码提交到自己的练习仓库。
作业验收
- 三个例子都能运行或显示预期界面。
- 能解释关键数据从哪里来、经过什么处理、最后去哪里。
- 失败时不会让程序无提示崩溃。
- 能说出今天内容如何进入“多设备统一采集服务”。