拖拽流程式运动控制画板 工控行业,图形化,可视化控件编程框架,可进行二次开发,多页签文档,可停靠布局,拖拽画板,控件框架, 支持如下 可定制开发价格另议 可视化逻辑编辑区。 多页签文档,可停靠布局,拖拽画板。 拖拽式控件。 有右键菜单功能特点。 源码
工控现场的兄弟们估计都经历过这种场景:调试设备时得在十几个参数页面来回切,手忙脚乱找控件。这时候要是能有个自由拖拽的画板,把不同设备的控制模块像拼积木一样摆在一起...嘿,我们团队还真搓出来这么个玩意儿。
先看界面布局这块硬骨头。核心是DockPanel+TabControl组合拳,用MVVM模式动态加载文档页签。下面这段XAML展示了如何实现可停靠的容器:
<dg:DockingManager x:Name="DockManager"> <dg:LayoutRoot> <dg:LayoutPanel Orientation="Horizontal"> <dg:LayoutDocumentPaneGroup> <dg:LayoutDocumentPane> <dg:LayoutDocument Title="主控面板" Content="{Binding MainCanvas}"/> </dg:LayoutDocumentPane> </dg:LayoutDocumentPaneGroup> <dg:LayoutAnchorablePaneGroup DockWidth="200"> <dg:LayoutAnchorablePane Header="控件箱"> <local:ToolboxView/> </dg:LayoutAnchorablePane> </dg:LayoutAnchorablePaneGroup> </dg:LayoutPanel> </dg:LayoutRoot> </dg:DockingManager>重点在LayoutDocument和LayoutAnchorable的分工——前者处理主工作区文档,后者搞定侧边栏停靠。绑定的MainCanvas是个ObservableCollection,用来动态加载用户创建的控件实例。
拖拽功能是灵魂所在。咱们给控件箱里的元件加了DragDrop扩展:
public class DragDropBehavior { public static readonly DependencyProperty IsDraggableProperty = DependencyProperty.RegisterAttached("IsDraggable", typeof(bool), typeof(DragDropBehavior), new PropertyMetadata(false, OnIsDraggableChanged)); private static void OnIsDraggableChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is UIElement element) { element.PreviewMouseLeftButtonDown += (sender, args) => { var data = new DataObject(); data.SetData("ControlType", element.GetType().Name); DragDrop.DoDragDrop(element, data, DragDropEffects.Copy); }; } } }这段代码利用附加属性给控件添加拖拽能力。注意DataObject里存的是控件类型名而不是实例,这样在画布上拖放时能动态创建新控件,避免直接操作原有元件。
右键菜单的扩展性很重要。我们在画布上实现了动态菜单生成:
public class CanvasContextMenu : ContextMenu { protected override void OnOpened(RoutedEventArgs e) { Items.Clear(); var selected = DataContext as CanvasElement; if(selected != null) { Items.Add(new MenuItem { Header="对齐到网格", Command=selected.SnapToGridCommand }); Items.Add(new MenuItem { Header="复制参数", Command=selected.CopyParamsCommand }); Items.Add(new Separator()); Items.Add(new MenuItem { Header="删除元件", Command=selected.DeleteCommand }); } else { Items.Add(new MenuItem { Header="粘贴配置", Command=PasteCommand }); } } }这里根据当前选中的元素类型动态生成菜单项。注意else分支处理画布空白处的右键操作,实现了上下文敏感的菜单系统。
二次开发的关键在于控件继承体系。基础控件类长这样:
public abstract class BaseControl : UserControl { public abstract string ControlType { get; } public abstract void ApplySettings(JObject config); public abstract JObject ExportSettings(); // 运动控制专用方法 public virtual void BindPLCAddress(string address) { } public virtual void SetMotionProfile(double velocity, double acceleration) { } }自定义控件只需要继承并实现这几个核心方法,就能自动集成到框架里。比如做个气缸控制块:
public class CylinderControl : BaseControl { public override string ControlType => "Cylinder"; public override void ApplySettings(JObject config) { // 解析JSON配置初始化 } public override void BindPLCAddress(string address) { // 连接PLC地址 } }这套机制让工控设备厂商能快速封装自己的控制元件,同时保持框架的扩展性。
源码结构采用模块化设计:
/Src /Core // 框架核心 /Controls // 内置控件库 /Adapters // PLC通讯适配器 /Customization // 二次开发示例 MainWindow.xaml.cs // 入口重点说下Controls模块里的元件加载器,用反射动态加载控件库:
var controlTypes = Assembly.GetExecutingAssembly() .GetTypes() .Where(t => typeof(BaseControl).IsAssignableFrom(t) && !t.IsAbstract) .ToDictionary(t => t.GetProperty("ControlType").GetValue(null).ToString());这种设计让新增控件只需要放在指定目录,框架会自动识别加载,特别适合需要频繁添加自定义元件的场景。
最后给个实战案例:某包装机厂商用这个框架重构他们的HMI界面,把原本分散的20多个监控画面整合到同一个画板,通过拖拽组合实现不同产品的快速切换配置。二次开发的气缸控制块直接绑定PLC的DB块地址,调试时间从原来的3天缩短到半天——这才是工控人想要的效率工具。