會員管理系統經過一段時間的緊鑼密鼓開發,軟件終於完成並發布。在這期間,碰到了不少技術難點,並積累了不少開發心得和經驗,本篇繼續介紹這個開發過程中相關的技術要點,本章主要介紹會員管理里面,列表主界面的一些設計思路分享。
有時候,遵循一些固定的套路做事情,總是很容易,如果每個地方搞一些創新和改進,那么往往需要花費很多時間,但是創新是有積極意義的,雖然可能會遇到困難,但是很值得去做。在Winform的界面設計上,雖然我可以使用代碼生成工具生成比較標准的界面了,但是我總是喜歡參考學習,並改進一些界面方面的元素,因此我經常會花費一些時間在研究一些界面細節上,不過做完后卻可以感覺非常愉悅,同時也可以給后面的項目參考。
1、完成后的會員管理界面
這個里面的會員信息管理界面,分為了左右兩部分的格局,左邊顯示會員的一些屬性和狀態分類,右邊顯示的是查詢條件和查詢列表內容。我們再來看看其會員信息列表界面的設計狀態下的視圖,基本上和運行時的界面保持一致,只是列表部分內容是在運行時刻進行動態加載的而已。
2、界面分析和設計
我們以這個界面效果反推如何實現這個效果,這樣對我們可能更有幫助,也容易理解一些。
1)左右分拆及折疊界面的設計
列表界面的布局方面是左右兩部分,里面還有一個箭頭,雙擊箭頭附件的部分可以把左邊進行折疊,因此我們先來看看這個地方是如何實現的。
首先需要在VS的工具箱里面找到SplitContainerControl控件,然后放到整個窗體里面,並把它Dock屬性設置為Fill,讓它全部占滿整個窗體。
接着設置整個控件的樹形如下所示。
最后就可以看到左右的格局並可以折疊第一個面板的效果了。
然后在左邊的面板里面增加一個TreeView控件,並設置它的Dock屬性,並在設計時刻增加一些樹的節點,方便效果顯示處理。
通過后台代碼的數據綁定,我們可以動態構造樹狀列表了,並且列表界面的數據也可以在右邊進行展示,這樣運行時候我們就可以得到前面介紹的主界面效果了。
有時候,我們可能需要利用面板分割控件,把主從表兩個表的記錄進行關聯展示。
如下界面所示是一個消費信息的表,包括了消費總信息和消費明細信息兩部分,但選擇左邊主表信息的時候,右邊刷新顯示明細表的記錄信息。
2)下拉列表按鈕效果實現
有時候,在列表界面里面放太多的按鈕,會顯得比較凌亂,有時候界面縮小的話,可能就被遮擋或者重疊了,這樣的界面布局就很糟糕,DevExpress控件組提供了一個下拉列表按鈕組的控件,非常方便用於節省屏幕控件,並對按鈕進行分組。如我為了方便,把一些會員的相關操作,放到了一起,集合在一個下拉列表按鈕里面,效果如下所示。
那要實現上面按鈕的效果,應該如何操作才做到的呢?
DevExpress組件的工具欄里面有一個對應的按鈕控件,如下所示。
不過拖動上去,並沒有對應的屬性用來設置里面的按鈕集合的,而是需要配合這三個控件對象進行使用的。
ImageCollection是用來設置按鈕圖標的,其他兩個需要配對使用在這個例子里面,增加后BarManger會增加工具欄、菜單欄、狀態欄,把這些默認的都刪除,不需要,然后制定PopupMenu的Manager屬性為barManager1即可。
處理完這些步驟后,進一步設置彈出的按鈕集合,並添加對應的事件處理即可,如下設計界面所示。
3)列表展示界面
列表展示內容,主要就是使用代碼生成工具Database2sharp自動生成的界面和后台代碼,里面使用了分頁控件進行展示而已,再次不在贅述了,看看界面效果如下所示。