一、???圖元概述

圖元是構(gòu)成人機(jī)界面的基本單元。如一個個的電機(jī)、設(shè)備、數(shù)據(jù)顯示、儀表盤，都是圖元。構(gòu)建人機(jī)界面的過程就是鋪排、挪移、定位圖元的過程。

圖元設(shè)計是繪圖和編碼的結(jié)合。因為圖元不僅有顯示和動畫，還有背后操縱動畫的控制邏輯。

一個好的圖元設(shè)計框架，應(yīng)該最大限度提高設(shè)計的效率和專業(yè)程度。

因為你找到一個會做美工的碼農(nóng)，和會寫代碼的美工，都很困難，但是單獨(dú)找碼農(nóng)和繪圖員卻一抓一大把。所以專業(yè)性意味著用人的靈活性，和省錢。而你招來一個美工，一個碼農(nóng)，合作完成一個圖元組件，必須考慮減少兩人的交互，最好埋頭各干各的。并行作業(yè)，才有最高效率。

可以通過以下手段提高界面開發(fā)效率：

• 前后端分離。

前后端分離的設(shè)計模式有很多優(yōu)點(diǎn)。前后端對設(shè)計者的要求是不同的。。

前端設(shè)計者需要考慮的是界面更直觀、美觀、清晰、大氣，可以熟練使用繪圖工具（例如Blend），可以不會編程。

后端設(shè)計者要考慮的是業(yè)務(wù)邏輯，如何有條不紊、準(zhǔn)確執(zhí)行?？梢圆粫媹D，但一般必然熟練編碼，使用設(shè)計工具（如Visual Studio）。

前后端分離便于設(shè)計者術(shù)業(yè)有專攻，前后端分工協(xié)作，互不干擾，并行工作，提高效率。

• 專業(yè)的前端設(shè)計工具。

對于繪圖員或美工，一個簡單易用、同時又有強(qiáng)大功能的趁手設(shè)計器是必須的。

繪圖板、動畫、整合、調(diào)色板，美工的全套裝備必須齊全；網(wǎng)格定位、縮放、旋轉(zhuǎn)、保存、撤銷，常規(guī)的設(shè)計器功能必須應(yīng)有盡有。

• 盡可能少的編碼。

很多行業(yè)都有龐大的圖元庫。各種設(shè)備、開關(guān)、構(gòu)件，各種非標(biāo)組件，不斷會有新的圖元入庫。

因此，力求用最少的代碼實(shí)現(xiàn)盡可能多的功能，最大限度提升開發(fā)效率。一個強(qiáng)大的基類和一個方便的繼承是必要的。

二、???前后端分離的設(shè)計模式式

• 通過WPF實(shí)現(xiàn)前后端分離

看看百度百科對WPF的介紹：WPF（Windows Presentation Foundation）是微軟推出的基于Windows 的用戶界面框架，屬于.NET Framework 3.0的一部分。

它提供了統(tǒng)一的編程模型、語言和框架，真正做到了分離界面設(shè)計人員與開發(fā)人員的工作；同時它提供了全新的多媒體交互用戶圖形界面。

WPF通過一種MVVM（Model-View-ViewMode）的設(shè)計模式實(shí)現(xiàn)界面與編碼解耦。界面元素的顏色、動畫、形狀，可以方便的與代碼類的屬性綁定（Binding）。

綁定的便利在于，后臺類的某屬性變化，馬上會自動反映到界面的變化，無需編寫代碼；界面元素的變化，也馬上會觸發(fā)屬性值的改變，這種方式天然適合人機(jī)界面的前后端分離設(shè)計。

同時，WPF提供XAML文件，是一種聲明式編程方式，類似于Android的界面文件、HTML，界面設(shè)計者與代碼編寫者只需要通過XAML文件交互，進(jìn)一步達(dá)成前后端分離并行作業(yè)的目的。

• ?前后端交互的內(nèi)容

繪圖員的工作：

使用Blend繪圖，使用故事板（Storyboard）制作動畫，定義動畫的視圖狀態(tài)（VisualState），綁定屬性如：

Text="{Binding BinName, RelativeSource={RelativeSource TemplatedParent}}"

碼農(nóng)的工作：

定義一個CustomControl。繼承HMIControlBase。

定義依賴項屬性如Running：

public static readonly DependencyProperty RunningProperty = DependencyProperty.Register("Running", typeof(bool), typeof(Elevator), ? ? ? ? ? ?new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender, ? ? ? ? ? ?new PropertyChangedCallback(OnValueChanged)));

屬性變化事件切換視圖狀態(tài)如

VisualStateManager.GoToState(this, _funcRun () ? "Run" : "Stop", true);

就這么簡單。

三、???繪圖與動畫

• 強(qiáng)大的設(shè)計工具：Blend

Blend是VS2010起微軟提供的專業(yè)設(shè)計工具。早期曾經(jīng)有三賤客（Blend,Design, Encoder?），后兩者已經(jīng)合并入Blend。

在 Expression Blend 中，可以在美工板上繪制形狀、路徑和控件，然后修改其外觀和行為，從而直觀地設(shè)計界面元素?？梢詫?dǎo)入圖像、視頻和聲音，還可以導(dǎo)入和更改三維對象。

可以創(chuàng)建Storyboard實(shí)現(xiàn)幀動畫，定義狀態(tài)（VisualState），并設(shè)計觸發(fā)器（Trigger）觸發(fā)動畫。還可以定義樣式（Style）。

Blend對美工人員是簡單易上手的。按我的經(jīng)驗，對于習(xí)慣AutoCAD工具的繪圖工程師，熟練掌握Blend一般在兩周內(nèi)，就可以繪制復(fù)雜的動畫圖形。

所有的圖元組件均為CustomControl類型，這樣編輯好的圖元文件會自動加入到Generic.xaml文件。相應(yīng)的圖元模板可在Blend內(nèi)重新編輯。

?

• 用代碼實(shí)現(xiàn)動畫

如果不用Blend，也可以用代碼直接實(shí)現(xiàn)動畫。部分對性能要求高、使用頻繁的圖元組件如Guage，LinkLine，可以繼承Control的OnRender方法并使用StreamGeometry這類的底層API繪圖，以達(dá)到最佳的性能。

StreamGeometry的優(yōu)點(diǎn)是調(diào)用底層繪圖API，不生成多余的對象，而Blend在生成圖形過程中有大量冗余元素和對象，復(fù)雜的層次結(jié)構(gòu)，在對性能要求較高的場合略顯笨重。

四、???強(qiáng)大的圖元基類

為了盡可能減少編碼，需要在圖元基類（HMIControlBase） 中實(shí)現(xiàn)盡可能多的功能；但又不能包辦一切，犧牲圖元自身的“個性”。要實(shí)現(xiàn)簡潔、強(qiáng)大、可擴(kuò)展。

因此，我在圖元基類實(shí)現(xiàn)了所有界面元素共有的幾個基本功能：

• 連線。

為了實(shí)現(xiàn)方便的連線，需要能自行設(shè)置圖元的錨點(diǎn)，作為拖放連線的連接點(diǎn)。

?

繼承GetLinkPositions方法，錨點(diǎn)分上下左右四個，每個錨點(diǎn)用一個Point確定相對位置。如果只有一個錨點(diǎn)，就返回單一的LinkPosition如下：

public override LinkPosition[] GetLinkPositions(){ ? ? ? ? ?
?return new LinkPosition[1]{ new LinkPosition(new Point(0.75,0),ConnectOrientation.Top),};}

• 綁定變量表達(dá)式。

只要繼承基類，就可以彈出變量組態(tài)界面。

?

可以自行定義左邊的屬性樹。即繼承GetActions方法。注意這個樹狀結(jié)構(gòu)支持嵌套，如某設(shè)備帶兩個電機(jī)（Motor），則電機(jī)的屬性列表會作為樹的子節(jié)點(diǎn)顯示。

public override string[] GetActions(){ ? ? ? ? ?
?return new string[] { TagActions.VISIBLE, TagActions.CAPTION,
?TagActions.RUN, TagActions.ALARM, TagActions.DEVICENAME };}

• 動畫顯示。

繼承SetTagReader方法，只要相關(guān)Tag變化，就會觸發(fā)動畫腳本。如

public override Action SetTagReader(string key, Delegate tagChanged) { ? ?switch (key){ ? ? ? ? ? ? ? ?case TagActions.RUN: ? ? ? ? ?
? ? ? ? ?var _funcInRun = tagChanged as Func<bool>; ? ? ? ?
? ? ? ? ? ? ? ? ? ? ?if (_funcInRun != null){ ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ?return delegate {
? ? ? ? ? ? ? ? ? ? ? ? ?VisualStateManager.GoToState(this, _funcInRun() ? "Running" : "NotRunning", true); };} ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ??else return null;} ? ? ? ? ? ?return base.SetTagReader(key, tagChanged);}

VisualStateManager.GoToState方法根據(jù)不同的狀態(tài)字，觸發(fā)了在Blend里定義的故事板動畫。

五、???如何實(shí)現(xiàn)：增加新圖元

圖元設(shè)計流程：

?

六、???下面的計劃

寫一系列帖子，把架構(gòu)、原理講清楚。大致如下：

• 網(wǎng)關(guān)層接口概述

• 上下位機(jī)通訊原理

• 如何實(shí)現(xiàn)一個設(shè)備驅(qū)動

• 如何設(shè)計圖元

• VS插件模塊及原理

• 歸檔模塊及文件格式

• 如何進(jìn)行功能擴(kuò)展

• 組態(tài)變量表達(dá)式實(shí)現(xiàn)

github地址：https://github.com/GavinYellow/SharpSCADA。QQ群：102486275

相關(guān)文章：?

• .NET十年回顧
  

• 開源純C#工控網(wǎng)關(guān)+組態(tài)軟件

• 開源純C#工控網(wǎng)關(guān)+組態(tài)軟件(三)加入一個新驅(qū)動：西門子S7

• 開源純C#工控網(wǎng)關(guān)+組態(tài)軟件(四)上下位機(jī)通訊原理

• 開源純C#工控網(wǎng)關(guān)+組態(tài)軟件(五)從網(wǎng)關(guān)到人機(jī)界面

原文：http://www.cnblogs.com/evilcat/p/7909578.html

---

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結(jié)

以上是生活随笔為你收集整理的开源纯C#工控网关+组态软件(六)图元组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。