开源纯C#工控网关+组态软件(六)图元组件

本文介绍了开源纯C#工控网关+组态软件中图元组件的设计,强调前后端分离提高开发效率。通过WPF的MVVM模式实现界面与代码解耦,利用Blend作为前端设计工具,实现图元的绘制和动画。图元基类HMIControlBase提供连线、绑定变量表达式和动画显示等功能,简化新图元的实现过程。
摘要由CSDN通过智能技术生成

一、   图元概述

图元是构成人机界面的基本单元。如一个个的电机、设备、数据显示、仪表盘,都是图元。构建人机界面的过程就是铺排、挪移、定位图元的过程。

图元设计是绘图和编码的结合。因为图元不仅有显示和动画,还有背后操纵动画的控制逻辑。

一个好的图元设计框架,应该最大限度提高设计的效率和专业程度。

因为你找到一个会做美工的码农,和会写代码的美工,都很困难,但是单独找码农和绘图员却一抓一大把。所以专业性意味着用人的灵活性,和省钱。而你招来一个美工,一个码农,合作完成一个图元组件,必须考虑减少两人的交互,最好埋头各干各的。并行作业,才有最高效率。

可以通过以下手段提高界面开发效率:

  • 前后端分离。

前后端分离的设计模式有很多优点。前后端对设计者的要求是不同的。。

前端设计者需要考虑的是界面更直观、美观、清晰、大气,可以熟练使用绘图工具(例如Blend),可以不会编程。

后端设计者要考虑的是业务逻辑,如何有条不紊、准确执行。可以不会画图,但一般必然熟练编码,使用设计工具(如Visual Studio)。

前后端分离便于设计者术业有专攻,前后端分工协作,互不干扰,并行工作,提高效率。

  • 专业的前端设计工具。

对于绘图员或美工,一个简单易用、同时又有强大功能的趁手设计器是必须的。

绘图板、动画、整合、调色板,美工的全套装备必须齐全;网格定位、缩放、旋转、保存、撤销,常规的设计器功能必须应有尽有。

  • 尽可能少的编码。

很多行业都有庞大的图元库。各种设备、开关、构件,各种非标组件,不断会有新的图元入库。

因此,力求用最少的代码实现尽可能多的功能,最大限度提升开发效率。一个强大的基类和一个方便的继承是必要的。

二、   前后端分离的设计模式式

  • 通过WPF实现前后端分离

看看百度百科对WPF的介绍:WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分。

它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交互用户图形界面。

WPF通过一种MVVM(Model-View-ViewMode)的设计模式实现界面与编码解耦。界面元素的颜色、动画、形状,可以方便的与代码类的属性绑定(Binding)。

绑定的便利在于,后台类的某属性变化,马上会自动反映到界面的变化,无需编写代码;界面元素的变化,也马上会触发属性值的改变,这种方式天然适合人机界面的前后端分离设计。

同时,WPF提供XAML文件,是一种声明式编程方式,类似于Android的界面文件、HTML,界面设计者与代码编写者只需要通过XAML文件交互,进一步达成前后端分离并行作业的目的。

  •  前后端交互的内容

绘图员的工作:

使用Blend绘图,使用故事板(Storyboard)制作动画,定义动画的视图状态(VisualState),绑定属性如:

Text="{B
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值