UIDesign完整解析

UIDesign完整解析VM.Start\UIDesign到底是干什么的简单一句话它是一个内嵌在软件里的可视化UI编辑器——让你可以像搭积木一样不用写代码就能拖拽控件、拼出一个机器视觉运行的界面。你可以把它想象成软件自带的画板工具左侧是控件工具箱中间是画布右侧是属性面板。你从工具箱里拖一个数据显示框到画布上然后在属性面板里配置这个框要显示哪个数据比如流程1.OK数量就完成了。核心架构文件都扮演什么角色三个主角Document / DocumentView / UIDesignViewModel文件角色通俗理解Document.cs一份设计文档就像是PS里的一个 .psd 文件。它管着一份界面布局的 XAML 代码以及设计模式/代码模式的切换DocumentView.xaml.cs文档的可视外壳左边是拖拽画布Design模式右边是XAML源码编辑器Xaml模式底部有个切换栏UIDesignViewModel.cs设计师的总管家管理所有打开的文档、新建/打开/保存/预览、跳转到错误行等全局操作工作流程大致是UIDesignViewModel新建一个DocumentDocument内有一块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给机器视觉操作员用的可视化界面编辑器。操作员不用写代码拖几个数据显示框和按钮到画布上绑上对应的流程变量就做出了一个机器视觉运行界面。