會員管理系統的設計和開發（3）--主界面的設計思路分享

會員管理系統通過一段時間的緊鑼密鼓開發，軟件終於完成併發布。在這期間，碰到了很多技術難點，並積累了很多開發心得和經驗，本篇繼續介紹這個開發過程當中相關的技術要點，本章主要介紹會員管理裏面，列表主界面的一些設計思路分享。

有時候，遵循一些固定的套路作事情，老是很容易，若是每一個地方搞一些創新和改進，那麼每每須要花費不少時間，可是創新是有積極意義的，雖然可能會遇到困難，可是很值得去作。在Winform的界面設計上，雖然我能夠使用代碼生成工具生成比較標準的界面了，可是我老是喜歡參考學習，並改進一些界面方面的元素，所以我常常會花費一些時間在研究一些界面細節上，不過作完後卻能夠感受很是愉悅，同時也能夠給後面的項目參考。

一、完成後的會員管理界面

這個裏面的會員信息管理界面，分爲了左右兩部分的格局，左邊顯示會員的一些屬性和狀態分類，右邊顯示的是查詢條件和查詢列表內容。咱們再來看看其會員信息列表界面的設計狀態下的視圖，基本上和運行時的界面保持一致，只是列表部份內容是在運行時刻進行動態加載的而已。

 

二、界面分析和設計

咱們以這個界面效果反推如何實現這個效果，這樣對咱們可能更有幫助，也容易理解一些。

1)左右分拆及摺疊界面的設計

列表界面的佈局方面是左右兩部分，裏面還有一個箭頭，雙擊箭頭附件的部分能夠把左邊進行摺疊，所以咱們先來看看這個地方是如何實現的。

首先須要在VS的工具箱裏面找到SplitContainerControl控件，而後放到整個窗體裏面，並把它Dock屬性設置爲Fill，讓它所有佔滿整個窗體。

接着設置整個控件的樹形以下所示。

最後就能夠看到左右的格局並能夠摺疊第一個面板的效果了。

而後在左邊的面板裏面增長一個TreeView控件，並設置它的Dock屬性，並在設計時刻增長一些樹的節點，方便效果顯示處理。

經過後臺代碼的數據綁定，咱們能夠動態構造樹狀列表了，而且列表界面的數據也能夠在右邊進行展現，這樣運行時候咱們就能夠獲得前面介紹的主界面效果了。

有時候，咱們可能須要利用面板分割控件，把主從表兩個表的記錄進行關聯展現。

以下界面所示是一個消費信息的表，包括了消費總信息和消費明細信息兩部分，但選擇左邊主表信息的時候，右邊刷新顯示明細表的記錄信息。

 

2）下拉列表按鈕效果實現

有時候，在列表界面裏面放太多的按鈕，會顯得比較凌亂，有時候界面縮小的話，可能就被遮擋或者重疊了，這樣的界面佈局就很糟糕，DevExpress控件組提供了一個下拉列表按鈕組的控件，很是方便用於節省屏幕控件，並對按鈕進行分組。如我爲了方便，把一些會員的相關操做，放到了一塊兒，集合在一個下拉列表按鈕裏面，效果以下所示。

那要實現上面按鈕的效果，應該如何操做才作到的呢？

DevExpress組件的工具欄裏面有一個對應的按鈕控件，以下所示。

不過拖動上去，並無對應的屬性用來設置裏面的按鈕集合的，而是須要配合這三個控件對象進行使用的。

ImageCollection是用來設置按鈕圖標的，其餘兩個須要配對使用在這個例子裏面，增長後BarManger會增長工具欄、菜單欄、狀態欄，把這些默認的都刪除，不須要，而後制定PopupMenu的Manager屬性爲barManager1便可。

處理完這些步驟後，進一步設置彈出的按鈕集合，並添加對應的事件處理便可，以下設計界面所示。

 3）列表展現界面

列表展現內容，主要就是使用代碼生成工具Database2sharp自動生成的界面和後臺代碼，裏面使用了分頁控件進行展現而已，再次不在贅述了，看看界面效果以下所示。