自適應XAML佈局經驗總結 （一）原則和頁面結構設計

XAML佈局回顧

Grid和StackPanel是核心佈局，尤爲以Grid最爲重要。

Grid是網格佈局，XAML的設計者有可能參考了Html裏的Table設計了Grid佈局，但進行了改進。Html中的Table是tr套td，要想變更行列很是麻煩。XAML中的Grid使用的是指定行列序號和跨行跨列數的方式，修改起來靈活方便。

Grid裏行或列的大小有三種方式，一種方式是固定大小（Double值），一種方式是由裏面的內容決定（Auto），一種方式是按比例分割剩餘空間（Double值加*，剩餘空間由外部容器的大小決定）。

指定一個固定的Double值表示固定大小，它的單位默認爲px（若是不寫單位），也能夠是其餘單位，見下。

px （默認值）爲與設備無關的單位（每一個單位 1/96 英寸）

in 表示英寸；1in==96px

cm 表示釐米；1cm==(96/2.54) px

pt 表示磅；1pt==(96/72) px

這裏的px不是肯定的像素值，而是一種與設備無關的單位，具體的解釋見後文。

指定爲Auto指大小由最大的內容決定，由裏面最大的內容把這個行或列撐開。

星的含義是按比例分割外界給它的剩餘空間，*是1*的簡寫，把星前面的數加在一塊兒作分母，每個星前面的數作分子，做爲這個行或列的比例。

還需結合最大值和最小值限制。

Grid.Row和Grid.Column指定在第幾行和第幾列，Grid.RowSpan和Grid.ColumnSpan指定跨幾行和跨幾列，行和列都是從0開始。

以上就是Grid佈局的要點，其中的核心是分爲了固定大小，內容決定和按比例分割剩餘空間三種狀況，這是自適應佈局的基礎。

Android中的線性佈局也支持固定大小，內容決定和按比例分割剩餘空間三種狀況，因此Android也能夠而且應該製做自適應佈局的界面。但線性佈局一次只支持在一個方向上佈局，如要實現複雜的網格效果，須要多層嵌套，比較麻煩。而Android中的Grid佈局不能實現按比例分割剩餘空間，只能支持部分自適應的狀況。還有一種相對佈局，實際界面設計時須要這幾種佈局結合使用，使用技巧和XAML不一樣，但下文討論的自適應佈局的原則對Android平臺也是適用的。

StackPanel至關於Grid中全是Auto，但不須要指定序號，也省去了Grid定義部分分行或分列那塊。並且若是添加或移除中間部分的元素，不用改序號。因此在只須要按內容大小排列的時候使用StackPanel比Grid更簡潔方便。

Canvas就是絕對定位佈局，經過指定X和Y座標佈局，待佈局的元素應該有固定寬高。

Border是邊框，是裝飾，嚴格來說不能算佈局，在裏面只能放一個元素，它給加個邊，沒有Margin和Padding時對大小無影響。能夠給佈局容器套一層Border，給整個區域加個邊框。

ScrollViewer支持裏面的內容滾動，裏面的內容通常會超出容器大小，只顯示一部分，由滾動條控制滾動。

ViewBox對內容進行縮放，以適應容器大小。

WrapPanel是流式佈局，一行一行的排，一行不夠折行到下一行。裏面的東西固定寬高。

UniformGrid是固定行數或列數，內容一行一行或一列一列地排。

默認的Z方向上下關係是誰在後面，誰在上面。指定Panel.ZIndex可指定上下位置關係。

自適應動態佈局

自適應動態佈局是指界面的控件大小和位置會隨着控件中內容的變化和窗口大小的變化而自動調整，以達到較好的顯示效果的佈局方案。

與之相對的是傳統的固定佈局，固定佈局不能隨內容和窗口大小變化，因此通常只支持固定窗口大小，顯示內容也不能隨意變化。

製做固定佈局界面時通常直接指定控件的大小和位置。

要想製做自適應動態佈局界面須要使用支持自適應動態佈局的UI平臺。基於XAML的平臺就是這樣一個平臺，Android平臺也是，之前的Winform平臺就不能徹底支持自適應動態佈局。

使用支持自適應動態佈局的平臺，也不是說就必定能製做出自適應動態佈局的界面。若是還使用直接指定控件的大小和位置的方法，製做出的仍是固定佈局界面。

要想製做自適應動態佈局界面，須要使用動態佈局容器（Grid，StackPanel等）並遵循必定的原則。

自適應動態佈局詳解

上文說自適應佈局會隨着內容和窗口大小的變化自動調整控件大小和位置，下面來詳細分析一下。

變化的方面，即須要自適應的方面包括：

1. 窗口大小會變，對應全屏界面時就是顯示器分辨率會變化，就是說外層所給的佈局總空間會變化。

2. 內容大小會變，包括文字多少會變，圖片大小會變，列表條目多少會變等狀況。

3. 顯示屏DPI會變。

第一種狀況咱們用比例分割剩餘空間（星）去應對，第二種狀況咱們用內容決定大小（Auto）去應對，第三種狀況系統幫咱們應對。下面詳細說說第三種狀況。

上文提到WPF默認單位px不是像素，是與設備無關的單位，系統會處理這個單位和像素之間的關係，處理的依據是DPI。

Windows系統認爲非高分辨率屏幕的DPI通常爲96DPI左右，因此設備無關的單位和像素之間的比例爲1比1。遇到高分辨率的屏幕（如Surface Pro 3），調節控制面板-外觀和個性化-顯示選項中的更改全部項目的大小選項，即更改系統DPI，見下圖，

更改系統DPI後WPF中設備無關的單位和像素之間的比例再也不是1比1，而是1比多於1的值，也就是說系統會把界面等比例放大。這個DPI設置指的是桌面DPI，會影響全部的桌面程序。也就是說Windows但願用戶對桌面程序的顯示方式進行統一的設置。若是想顯示更多的內容就不要選擇放大，若是想顯示更大的內容就開啓放大。這種控制是全局的，用戶能夠獲得統一的用戶體驗。

但之前的桌面程序UI系統可能對這種放大機制的支持不是很好，須要應用程序本身控制。在WPF中放大機制能獲得系統良好的支持，矢量的內容（文字，漸變畫刷，路徑等）不會有問題，但位圖的內容有問題。因此要儘可能使用矢量的內容，位圖內容需額外處理。

Windows Store App使用的應該不是上述設置的桌面DPI，而是內部設置的DPI，但一樣也能獲得良好的界面等比例放大支持。

Android系統也使用相似的機制來處理DPI變化的問題，界面也會根據DPI的變化進行等比例縮放，DPI爲系統內部設置，和Windows Store App同樣不容許用戶修改（Root後可修改）。

總之，DPI的問題系統幫咱們處理了，咱們只考慮第一個和第二個方面的問題。因此可用空間變化和內容變化是核心問題。

下面對核心問題給出解決方案，即核心原則。

自適應動態佈局核心原則

1. 有範圍，有最優。

有一個自適應的範圍，有一個最合適分辨率或窗口大小，不是無限適應。

好比，支持最小分辨率爲1366*768的全屏程序，最合適分辨率爲1920*1080，最大分辨率支持到2560*1440，長寬比能夠變化，不必定爲16:9。但小於最小分辨率可能形成顯示不全，大於最大分辨率可能形成顯示效果很差。在最合適分辨率時顯示效果最好，在支持的範圍內的顯示效果均可以接受。

2. 定DPI，定大小。

使用默認的96DPI進行設計，根據DPI進行放大的任務交給系統。因此通常不用添加動態調整字號的功能，使用一套固定的字號大小就能夠了。咱們假設你們都是使用默認DPI進行設計的，因此你們的大小標準是一致的。用戶想看小的不開系統放大選項，用戶想看大的就開系統放大選項，選擇權在用戶，並且各個程序的體驗是一致的。

高級的軟件，可在某些特定區域支持動態調整字號，好比Visual Studio的代碼編輯區。

3. 有定有變，比例分割填剩餘。

定的意思是區域大小是由內容決定的或手動指定一個固定大小。內容決定時，在內容不變的狀況下，窗口大小變化了，該塊區域大小不變。區域大小不依賴於窗口大小而變化。相對窗口大小來講它是定的部分，由內容自己決定的。

手動指定固定大小也是定的狀況，但使用內容決定優於使用固定大小，能不寫固定寬高就不寫固定寬高，由Margin和Padding加上內容來控制大小。一塊內容它的大小不該該是我給他強制指定一個大小，而應該是由它自己本身決定的，由內容（文字或圖片，文字指字的多少字體字號），Margin和Padding來決定這一塊區域的大小。若是指定了固定大小，內容（文字）變化了，就有可能存在多餘空白或顯示不全。

變的意思是指區域大小會隨窗口大小變化而變化。因爲窗口大小會發生變化，因此除去上述定的部分外的剩餘空間會發生變化，剩餘空間由變的部分來填充，並且可能會由多個變的部分按比例分割來填充。

變的部分有幾種狀況，包括：

A. 自動縮放的狀況。內容自己能自動縮放，圖片能自動縮放，但可能效果會很差，視頻能夠自動縮放，ViewBox包起來的內容亦能夠自動縮放。

B. 文本的狀況。文本區域，若是這塊區域大小變了的話，顯示效果通常能夠接受。文字少的話是一行，多了的話它會多折幾行，也可能會截斷，出...，或者出滾動條，也可不出滾動條用光標控制滾動，來經過滾動的方式顯示所有文本。

C. 可滾動區域。ListView，DataGrid等數據呈現區都屬於這種狀況。

說到這裏能夠看出，其實自適應動態佈局的核心問題是肯定定的部分和變的部分。下面分享一下經驗。

標題，工具欄等通常爲定的部分，表單的標籤部分也爲定的部分。

空間大了的話由哪部分去撐，或者空間小了去擠哪部分，這種區域通常爲變的部分。

展現用圖片，視頻，不定內容的文本塊，輸入內容的文本框，大量內容呈現的可滾動區域通常爲變的部分。

自適應動態佈局的優點

固定佈局和動態佈局，固定佈局固定大小和位置，動態佈局使用佈局系統進行佈局。動態佈局能夠自適應窗口大小變化，若是沒有自適應窗口大小變化的需求，也應該使用動態佈局，由於設計有可能會變，固定佈局沒有可維護性。

動態佈局是符合設計師的思路的。固定佈局至關於把設計思路給柵格化了，柵格化的過程應該由佈局系統在呈現界面時動態完成，而不該該由開發人員靜態完成。

PS作的文字和矢量圖形柵格化成PNG位圖，給人家了，能改嗎，不能改或者很難改。若是給人家PSD原圖，就好改，

用Grid這種動態的佈局系統來佈局其實是表達佈局思路。實際的大小和位置是由佈局系統經過動態計算獲得的，即時運算出來的。給佈局系統指定佈局的依據和參數，讓佈局系統自動計算大小和位置，儘可能不要手動指定大小和位置。

給佈局系統指定佈局的依據和參數，讓佈局系統自動計算大小和位置，儘可能不要手動指定大小和位置。

相似於矢量圖工具指定圖形的參數，呈現時像素是即時運算出來的，而不是像位圖同樣直接存儲像素信息。

WPF等XAML呈現引擎是一個矢量系統，更近一步地說是矢量動畫系統（相似的系統還有Flash，JavaFx，Android等），其使用兩層的方式進行呈現。1.佈局系統計算大小位置，2.渲染引擎柵格化成像素顯示。

其餘原則

1. Margin是邊距不是座標，若是須要使用座標用Canvas。

2. Grid要使用Auto，由內容決定大小，不要手動設置大小。

3. 要使用嵌套Grid替代跨行跨列，但需權衡，嵌套Grid結構好些，思路和邏輯性清楚，好維護，但損失性能，跨行跨列，性能好些。

4. 須要按內容大小自動排列的時候優先用StackPanel，不要用全是Auto的Grid，易於維護。

5. 比例分割剩餘空間時，某些行或列，能夠用最小或最大寬高進行額外控制，以達到較好的效果。

頁面結構設計

下面列舉出一些常見的頁面結構設計思路。

1. 頁面結構是分層的，通常可分爲二至三層。

2. 每一層均可能有標題和內容區之分，最外層可包括頁面標題和內容區，內容區可再分爲幾個子區域，每一個子區域可分爲標題區和內容區兩部分。

3. 若是存在第三層嵌套，和第2層相似，也可再把2級區域的內容區分爲幾個子區域，子區域能夠有標題。

4. 標題區可能換爲工具欄區或兼有工具欄的功能。

5. 區域之間的分割要明顯。

6. 不一樣的層次要易於區分。

7. 最外層或第二層的區域可以使用TabControl提供內容區切換功能。

8. 主視圖和詳視圖或功能切換區和實際內容區通常左右或上下排布。

9. 如出現兩層功能切換的狀況，能夠第一層左右排布，第二層上下排布。也可第一層上下排布，第二層左右排布。或同爲上下排布，功能切換區第一層在上邊，第二層在下邊，避免重複感。

10. 頁面中的一個或多個核心內容區通常爲可滾動區域或可縮放區域，要佔據頁面最大的空間，要能明顯辯認出。核心內容區不宜過多，避免產生雜亂感。

佈局設計模式

從實際工做經驗中，總結出了幾種佈局設計模式，和GoF設計模式相似，模式指在某種特定的場景中能夠套用的設計方法。

佈局設計模式在類似的頁面場景中也能夠套用，能達到較好的效果。包括，

局部佈局設計模式：

1. 工具欄模式

2. 壓縮空白模式

3. 表單模式

4. 表格模式

5. 工具箱模式

6. 選擇題模式

區域佈局設計模式：

7. 頭尾模式

8. 邊欄模式

9. 可變等分模式

10. 文檔模式

11. 圖片模式

從下一篇開始詳細闡述這些模式。