總結開發中基於DevExpress的Winform界面效果


DevExpress是一家全球知名的控件開發公司, DevExpress 也特指此公司出品的控件集合或某系列控件或其中某控件。我們應用最為廣泛的是基於Winform的DevExpress控件組,本篇隨筆主要總結筆者在Winform開發框架中應用到的各種基於DevExpress的Winform界面效果。

1、SplashScreen控件

我們在開發桌面應用程序的時候,由於程序啟動比較慢或者展示公司產品Logo,往往為了提高用戶的體驗,增加一個閃屏,也就是SplashScreen,好處有:1、讓用戶看到加載的過程,提高程序的交互響應;2.可以簡短展示或者介紹程序的功能或者展示Logo,給客戶較深的印象。

 在DevExpress程序中使用SplashScreenManager控件實現啟動閃屏和等待信息窗口,這個SplashScreenManager很好的封裝了日常WInform程序中用到的啟動閃屏窗口和在耗時操作中進行等待提示的信息窗口,合理使用可以增加程序界面的友好交換。

 

2、GridControl控件的封裝分頁控件

在Winform開發中,一直離不開分頁處理,好的分頁控件封裝,能為開發節省很多時間和繁瑣工作,對分頁控件一直的改進和完善,也是我的興趣之一。

可以通過菜單設置顯示的列內容。

 

 

 3、基於Ribbon樣式的界面

為了更多放置一些開發功能,我們可以使用樹列表的方式,也可以使用Ribbon的方式,更加緊湊的展示功能按鈕。

 或者參考框架備件倉庫管理系統的界面

應該會比放在樹列表中展示的比較好一點

有時候,我們需要分類展示不同的菜單功能,而且功能比較多的時候,可以結合Ribbon工具欄和樹列表的方式展示功能點。

 

4、使用布局控件約束內容展示

在錄入數據的界面的設計中, 我一般傾向於使用LayoutControl控件實現布局功能,這個控件對我們排版各種控件非常方便。

我們在展示詳細界面的時候,一般為了整潔美觀,一般使用LayoutControl布局控件來約束內容的展示。

或者如下詳細界面所示

 

下面是我在其中的一個界面中使用該控件調整后得到的一個多樣化一點的界面表達方式,有點類似於分組分類的方式,使得輸入的內容更加易讀。

這個調整好的界面布局的設計模式下的效果如下所示。

 

5、SearchLookUpEdit控件的使用

可以在GridControl中整合SearchLookupEdit控件,以便快速選擇錄入數據

 

 6、內容比較多則封裝控件實現多頁面處理

 我們在做Winform項目開發的時候,經常會發現有一些數據很多,需要通過不同的Tab頁面分類來實現數據的錄入和現實,例如體檢數據,可能包含外科、內科、眼科、耳鼻喉科、口腔科、以及其他的檢查等等內容,如果一次性放在一個窗口中現實,不太合理也不好看,如果通過多個Tab分類進行管理,則用戶體驗好很多。

如上分析,我們把每個模塊獨立出來做一個控件,如眼科的作為一個獨立的用戶控件進行展現,如下所示。

 

或者類似下面客戶關系管理系統中的內容關系

 

 

 

7、GridControl樣式控制

通過控制GridControl的列表展示樣式,可以着重強調某個字段的信息,也可以進行內容的轉義處理。

  

GridView表頭多行顯示(折行),表頭及行內容居中操作

 

 

8、RichEditControl控件的封裝使用

傳統.NET界面有一個RichTextBox控件,這個是一個富文本控件,可以存儲圖片文字等內容,它有自己的文件格式RTF,在DevExpress控件組里面也有一個同等的控件,他的名字是RichEditControl,這個控件功能很強大。基於RichEditControl控件我們可以增加自定義按鈕,實現定制工具條或者自定義的處理功能。

 

9、圖表控件

有時候,基於對一些年份、月份的統計,需要集成多個數值指標進行分析,因此就需要把多種數據放到一個圖形里面展現,也成為多重坐標軸,多重坐標軸可以是多個X軸,也可以是Y軸,它們的處理方式類似。

或者餅圖展示

 

 

10、附件管理的自定義組件

在很多病人資料管理模塊中,都需要管理影像學資料,這個在我的Winfrom開發框架中,提供了一個附件管理的通用模塊供重復使用,因此對這些操作並不會增加太多的工作量,統一使用即可,界面效果如下所示。

附件管理模塊提供了分類的附件管理,圖片縮略圖預覽和圖片預覽,多文件上傳、下載、刪除等附件操作,滿足我們對附件管理的大多數要求。

 

11、 樹列表展示

我們為了直觀顯示的需要,一般把菜單用樹列表控件進行展示,其中就會用到我們說的TreeList控件,如下界面所示。

其中TreeList和一個輸入SearchControl來一起協同使用,可以提高界面的友好性,我們可以通過輸入關鍵字進行節點的過濾顯示。

如輸入過濾內容后查詢過濾樹列表節點,如下所示,這樣可以給用戶快速模糊檢索指定的樹節點。

下面也是樹列表的展示案例界面

或者如下樹形列表界面所示 

整體結合多文檔展示內容,界面效果如下所示。

 

12、 GridControl數據導入導出處理

GridControl內容簡單的導出很容易,只需要把相關的數據表,利用Aspose.cell導出到指定的文件即可。簡單二維表導出Excel數據的效果如下所示。

由於工作的需要,在我的Winform開發框架中引入了一個通用的數據導入模塊,來實現這個既是統一,又是變化的業務需求,首先我們來看看能大致的模塊功能介紹圖,如下所示。

然后我們再來看看實際的導入模塊操作界面,如下圖所示

在最底的狀態欄里面,但我們保存數據的時候,會調用后台線程進行數據保存,並顯示數據導入的進度狀態,由於是采用后台線程處理,不會阻塞當前的界面,在多文檔的Winform開發框架界面中,可以切換到其他業務界面進行其他處理,不影響整體界面操作。

 

下面我們就來介紹內容比較多的時候,分選項卡展示一個記錄內容的操作,如圖所示。

導入的數據,是一個Excel,它要求包含幾個不同表的數據,導入操作一次性完成數據的導入,Excel文件的格式如下所示。

 

導出操作,我們根據用戶的選擇,可以一次性導出多個Excel文件,每個Excel文件包含客戶的基礎信息,也包含相關數據,它們的格式和導入的格式保持一致即可,這樣方便數據的交換處理。

導出操作,我們需要把客戶的選擇信息轉換為需要導出的對象列表數據,然后綁定到Excel里面即可,因此我們的Excel里面,可以通過自定義模板,指定列的數據屬性就可以綁定好數據了。

 

 

13、SplitContainerControl控件的分拆界面

左右分拆的界面布局效果如下所示。

 

或者主從表的界面效果

 

 

 

 

14、利用DevExpress的控件實現對PDF、Word、Excel文檔的預覽和操作處理

為了演示這些控件的處理,我單獨編寫了一個例子,用來實現對PDF、Word、Excel等文檔的處理。

為了顯示PDF文檔,我們需要在界面里面添加一個XtraPdfViewer.PdfViewer的控件,這個主要是用來顯示PDF的,它有很多屬性方法,用來實現對PDF的處理操作

 

其中RichEditControl能夠較好顯示Word文檔, 加載文檔后,界面顯示內容如下所示:

文檔控件很容易支持打印預覽功能,打印預覽的界面如下所示

對於Excel文檔的預覽和操作,DevExpress控件在最近版本中增加的XtraSpreadsheet.SpreadsheetControl控件就可以實現Excel的顯示和處理操作,這個控件很強大,可以處理很復雜格式的Excel文檔,雖然我原來使用了另外一個FarPoint Spread控件組,不過這個XtraSpreadsheet控件組,如果集成在DevExpress也就很方便了。

這個DevExpress的控件,可以在其中進行Excel的新建、保存、打印預覽等操作,當然也可以打開我們已有的Excel文件了。

打開文件后,界面效果如下所示。

預覽也很方便,和Word的預覽操作類似。

如我在我的《Winform開發框架》、《混合式開發框架里面》使用的通用附件管理模塊,就是基於這些特點,實現圖片、Excel文檔、Word文檔和PDF等文檔的在線預覽和管理操作,界面截圖如下所示。

 

15、WizardControl向導控件

在一些界面操作里面,我們可能把它拆分為幾部進行處理,這個時候引入WizardControl向導控件應該是比較不錯的選擇了。多步的處理方式,可以讓用戶避免一次性輸入太多內容的煩躁心情,也可以針對性的校驗部分內容。

我們一般在DevExpress的VS工具欄里面選擇導航布局選項卡,就可以找到對應的WizardControl向導控件了。

最終我們實現的效果如下所示。

 

16、日程控件XtraScheduler

在一些應用場景中,我們可能需要記錄某一天,某個時段的日程安排,那么這個時候就需要引入了DevExpress的日程控件XtraScheduler了,這個控件功能非常強大,提供了很好的界面展現方式,以及很多的事件、屬性給我們定制修改,能很好滿足我們的日程計划安排的需求。

整個日程控件,可以分為日視圖、周視圖、月視圖等等,當然還有一些不常用的時間線、甘特圖等,本例我們來關注控件的使用以及這幾個視圖的處理。先來看看他們的界面效果,如下所示。

日視圖:

在視圖里面,默認可以打開響應的日程事件進行編輯的。

 

周視圖:

月視圖:

由於控件,默認也是提供右鍵菜單,對幾種控件視圖進行切換的,如下菜單所示。

 

17、背景加按鈕排版,實現更加場景化的功能指引

在一些場景里面,如一些進銷存的系統里面,我們往往把一些相關的模塊處理放在一起,如進貨、退貨、庫存調入、調出、產品、庫存、盤點等這些信息,就是一個場景里面的內容,有時候可以把它們放在一起,但是如果單純的放幾個按鈕,可能會顯得比較單調一些,我們為了豐富界面效果,把界面設計效果如下所示。

這個界面雖說不是特別華麗,但是也是比僅僅放幾個標准的按鈕來的美觀一些,而且按鈕之間也設置了一些箭頭來指示他們的流程或者從屬關系,因此在一些場合,我們更傾向使用這種直觀、清晰的界面表達方式,同時也增加了一定的美感。

利用圖元的繪圖工具如EDraw Max等等這些來繪制背景,預先留出放置圖標按鈕的位置,我們繪制一個背景如下所示。

繪制好這些背景,截圖出來待用,記住要圖片要預留一定的位置,並且具有一定的畫布大小,我們想圖片按正常方式設為背景即可,這樣我們在窗口放大的時候,不至於直接看完圖片了,截取出來的圖片,左上角預留一定的位置即可。

在我們預先新建的窗體上面,設置它的BackgroundImage背景圖片,如下圖所示。

 

18、Winform開發框架介紹

Winform開發框架詳細了解可以訪問:http://www.iqidi.com/Framework/info.html 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM