UIDesign完整解析

UIDesign完整解析

VM.Start\UIDesign到底是干什么的？

简单一句话：它是一个内嵌在软件里的"可视化UI编辑器"——让你可以像搭积木一样，不用写代码就能拖拽控件、拼出一个机器视觉运行的界面。

你可以把它想象成软件自带的"画板工具"：左侧是控件工具箱，中间是画布，右侧是属性面板。你从工具箱里拖一个"数据显示框"到画布上，然后在属性面板里配置这个框要显示哪个数据（比如"流程1.OK数量"），就完成了。

核心架构（文件都扮演什么角色）

三个主角：Document / DocumentView / UIDesignViewModel

工作流程大致是：UIDesignViewModel新建一个Document，Document内有一块DesignSurface（画布），然后DocumentView把它显示出来。用户在画布上拖拽控件时，底层自动生成对应的 XAML 代码。

四个子文件夹

Control/— 自定义控件工具箱

这是你可以在画布上拖拽使用的"积木块"，每一个都是针对机器视觉场景定制的：

• DataCount.xaml— OK/NG/良率统计面板（带清空按钮）
• UITextBox.cs— 数据绑定文本框，自动读写变量（支持前缀/后缀/小数位数）
• UINumericUpDown.cs— 数值调节框，绑变量
• UICheckBox.cs— 复选框，绑布尔变量
• UITextBlock.cs— 白色前景色的文本标签
• ModuleSetButton.cs— "模块参数设置"按钮，点击弹出对应模块的配置窗口
• RunOnceProjectButton.cs— "单次执行流程"按钮，点击启动指定流程

这些控件的共同特征：每个都有一个叫xx数据源的属性（比如tb数据源、num数据源、cb数据源），这个属性的值是一个数据路径（如流程1.模块A.OK），控件的显示内容会自动从这个路径读取/写入。

Dialog/— 弹窗选择器

当你在属性面板里配置某个控件的"数据源"时，会弹出这些窗口让你选：

• AxisSelectView— 选轴卡+选轴（比如"运动卡0.X轴"）
• ModuleDataSelectView— 选流程+模块+变量（比如选流程1.模板匹配.OK数量）

它们的 ViewModel 负责加载可选列表，用户选完后返回一个拼接好的路径字符串（如"流程1.模板匹配.OK数量"）。

Editor/— 属性面板编辑器

这是属性面板里的"特殊编辑控件"：

• TextBoxTextLinkEditor.xaml— 点击...按钮弹出数据源选择框，给 UITextBox/UINumericUpDown 绑定变量
• ModuleLinkEditor.xaml— 点击...弹出模块选择框
• SelectAxisLinkEditor.xaml— 点击...弹出轴选择框
• CheckboxBoolLinkEditor.xaml— 给复选框绑定布尔变量
• RunOnceProjectLinkEditor.xaml— 给"单次执行"按钮绑定要执行的流程

这些 Editor 通过[PropertyEditor(typeof(UITextBox), "tb数据源")]特性注册，告诉 WpfDesign 框架：当选中 UITextBox 控件、编辑它的tb数据源属性时，就用这个自定义编辑器。

辅助文件

• ExtensionMethods.cs— 一些工具扩展方法（文件拖放路径解析、字符串转流等）
• MyTypeFinder.cs— 帮助 WpfDesign 框架找到程序集中的控件类型（目前大部分被注释掉了）
• ComponentPropertyService.cs— 过滤属性面板里显示哪些属性，目前只让Foreground和MyStringProperty两个属性可见
• ErrorListView.xaml— 显示 XAML 错误列表（行号+错误信息），双击跳转到错误位置

另外那个06UIDesign又是什么？

那是底层依赖库ICSharpCode.WpfDesign的源码——一个开源的 WPF 可视化设计器框架，来自 SharpDevelop 项目。它提供了画布（DesignSurface）、选中/拖拽/调整大小、属性面板（PropertyGrid）、撤销/重做等基础能力。VM.Start\UIDesign是在这个库的基础上，加了机器视觉行业专用的控件和编辑器。

一句话总结

UIDesign=给机器视觉操作员用的可视化界面编辑器。操作员不用写代码，拖几个"数据显示框"和"按钮"到画布上，绑上对应的流程变量，就做出了一个机器视觉运行界面。