前言
在開發應用程式時，一個很重要的工作項目就是設計使用者介面的排版布局。WPF中所提供的Grid控制項，讓開發人員擁有將版面分割為欄列交錯表格區域的能力。而開發人員在使用Grid控制項分割版面之後，還可以在版面中加入GridSplitter控制項，用以在執行期間提供使用者動態調整表格區域大小的功能。
本篇文章介紹使用Grid控制項與GridSplitter控制項，來設計幾個常見的基本排版布局，為自己留個紀錄也希望能幫助到有需要的開發人員。
一上二下佈局
上圖是一個一上二下的佈局樣式，MSDN網站採用這個佈局樣式來提供各種資訊內容。
完成這個佈局樣式可以透過Grid控制項，將版面切割為2欄2列的表格，並且合併第0列中的兩個欄。
加入GridSplitter控制項：
*在第0列、第0欄表格區域下方，附加一個定義為Grid.ColumnSpan="2"的GridSplitter控制項，用以提供動態調整上下兩列表格區域高度的功能。 *在第1列、第0欄表格區域右方，附加一個GridSplitter控制項，用以提供動態調整下方左右兩欄表格區域寬度的功能。
在完成加入這些Grid控制項、GridSplitter控制項之後，記得將GridSplitter控制項的背景顏色定義為透明色(Background="Transparent")，用以提供漂亮的排版布局。
一左二右佈局
上圖是一個一左二右的佈局樣式，Outlook採用這個佈局樣式來提供各種資訊內容。
完成這個佈局樣式可以透過Grid控制項，將版面切割為2欄2列的表格，並且合併第0欄中的兩個列。
加入GridSplitter控制項：
*在第0列、第0欄表格區域右方，附加一個定義為Grid.RowSpan="2"的GridSplitter控制項，用以提供動態調整左右兩欄表格區域寬度的功能。 *在第0列、第1欄表格區域下方，附加一個GridSplitter控制項，用以提供動態調整右方上下兩欄表格區域高度的功能。
在完成加入這些Grid控制項、GridSplitter控制項之後，記得將GridSplitter控制項的背景顏色定義為透明色(Background="Transparent")，用以提供漂亮的排版布局。
四分割佈局
上圖是一個四分割的佈局樣式，電視牆採用這個佈局樣式來提供各種資訊內容。
完成這個佈局樣式可以透過Grid控制項，將版面切割為2欄2列的表格。
加入GridSplitter控制項：
*在第0列、第0欄表格區域下方，附加一個定義為Grid.ColumnSpan="2"的GridSplitter控制項，用以提供動態調整上下兩列表格區域高度的功能。 *在第0列、第0欄表格區域右方，附加一個定義為Grid.RowSpan="2"的GridSplitter控制項，用以提供動態調整左右兩欄表格區域寬度的功能。
在完成加入這些Grid控制項、GridSplitter控制項之後，記得將GridSplitter控制項的背景顏色定義為透明色(Background="Transparent")，用以提供漂亮的排版布局。
原始碼下載
點此下載原始碼：