天天看點

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

會員管理系統經過一段時間的緊鑼密鼓開發,軟體終于完成并釋出。在這期間,碰到了不少技術難點,并積累了不少開發心得和經驗,本篇繼續介紹這個開發過程中相關的技術要點,本章主要介紹會員管理裡面,清單主界面的一些設計思路分享。

有時候,遵循一些固定的套路做事情,總是很容易,如果每個地方搞一些創新和改進,那麼往往需要花費很多時間,但是創新是有積極意義的,雖然可能會遇到困難,但是很值得去做。在Winform的界面設計上,雖然我可以使用代碼生成工具生成比較标準的界面了,但是我總是喜歡參考學習,并改進一些界面方面的元素,是以我經常會花費一些時間在研究一些界面細節上,不過做完後卻可以感覺非常愉悅,同時也可以給後面的項目參考。

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

這個裡面的會員資訊管理界面,分為了左右兩部分的格局,左邊顯示會員的一些屬性和狀态分類,右邊顯示的是查詢條件和查詢清單内容。我們再來看看其會員資訊清單界面的設計狀态下的視圖,基本上和運作時的界面保持一緻,隻是清單部分内容是在運作時刻進行動态加載的而已。

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

我們以這個界面效果反推如何實作這個效果,這樣對我們可能更有幫助,也容易了解一些。

清單界面的布局方面是左右兩部分,裡面還有一個箭頭,輕按兩下箭頭附件的部分可以把左邊進行折疊,是以我們先來看看這個地方是如何實作的。

首先需要在VS的工具箱裡面找到SplitContainerControl控件,然後放到整個窗體裡面,并把它Dock屬性設定為Fill,讓它全部占滿整個窗體。

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

接着設定整個控件的樹形如下所示。

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

最後就可以看到左右的格局并可以折疊第一個面闆的效果了。

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

然後在左邊的面闆裡面增加一個TreeView控件,并設定它的Dock屬性,并在設計時刻增加一些樹的節點,友善效果顯示處理。

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

通過背景代碼的資料綁定,我們可以動态構造樹狀清單了,并且清單界面的資料也可以在右邊進行展示,這樣運作時候我們就可以得到前面介紹的主界面效果了。

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

有時候,我們可能需要利用面闆分割控件,把主從表兩個表的記錄進行關聯展示。

如下界面所示是一個消費資訊的表,包括了消費總資訊和消費明細資訊兩部分,但選擇左邊主表資訊的時候,右邊重新整理顯示明細表的記錄資訊。

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

有時候,在清單界面裡面放太多的按鈕,會顯得比較淩亂,有時候界面縮小的話,可能就被遮擋或者重疊了,這樣的界面布局就很糟糕,DevExpress控件組提供了一個下拉清單按鈕組的控件,非常友善用于節省螢幕控件,并對按鈕進行分組。如我為了友善,把一些會員的相關操作,放到了一起,集合在一個下拉清單按鈕裡面,效果如下所示。

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

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

DevExpress元件的工具欄裡面有一個對應的按鈕控件,如下所示。

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

不過拖動上去,并沒有對應的屬性用來設定裡面的按鈕集合的,而是需要配合這三個控件對象進行使用的。

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

ImageCollection是用來設定按鈕圖示的,其他兩個需要配對使用在這個例子裡面,增加後BarManger會增加工具欄、菜單欄、狀态欄,把這些預設的都删除,不需要,然後制定PopupMenu的Manager屬性為barManager1即可。

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

處理完這些步驟後,進一步設定彈出的按鈕集合,并添加對應的事件處理即可,如下設計界面所示。

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

清單展示内容,主要就是使用代碼生成工具Database2sharp自動生成的界面和背景代碼,裡面使用了分頁控件進行展示而已,再次不在贅述了,看看界面效果如下所示。

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

繼續閱讀