Pages

2011-11-05

自己畫Cell Container

當有個UI程式畫面需要開發如下圖:
image

一般作法是尋求DataGrid或一些具有窗格的控制項來作基底,每個格子Cell可能有特殊的功能及顯示
我的作法會儘量以既有Container控件項為基礎,透過User Control自訂控件及Table物件結構來描述這個UI的對映資料
畢竟User對這個UI的操作,必須儲存下來做一些運算。

以下是我的VS2010專案架構,我總是喜歡透過目錄階層把程式的架構作分類呈現:
image

即透過讀取xml檔將資料載入MenuData等物件結構裏,依這些資料結構的描述將窗格畫出來
為了達到Reuse及模組化的標準,我包成User Control自訂控項,最後就顯示成所需要的畫面。

查看原始碼,每個*.cs都很短且簡略,但它們能有張力地呈現Rich UI及功能封裝,
與「程式打字員」總是一大雜鍋地從頭寫到尾的傳統寫程序方式,
這種比較能獲得工作的喜悅感。

PS. 很多時候沒有適合的UI控件來滿足特殊Grid的要求,也懶得去找各家商業UI控件,就自己動手畫格子。
在最下面舖一張黑色Panel,裏頭每個格子都是Button,再設定每個Button的Margin屬性,就產生格線效果!
看起來好像UI雜工很多,其實也沒想像中複雜…