UI布局

開發工具與關鍵技術：Visual Studio C# Window應用程式

作者：翁一凱

撰寫時間：2021/8/28

UI布局

在WPF的XAML語言中，對頁面的布局有很多的布局控件（元素），但是我們常用到的隻有幾個，是以我們來認識幾個常用的布局控件。

XAML布局元素（常用重點）

1、Grid：網格：可以自定義行和列并通過行列的數量、行高列寬來調整控件的布局。近似Html中的table。

2、DockPanel：泊靠式面闆。内部元素可以選擇泊靠的方向（上下左右），類似于Winform中設定控件的Dock屬性。

3、StackPanel：棧式面闆。可将包含的元素在水準或垂直方向排成一條線，當移除一個元素後，後面的元素會自動向前填充空缺。（菜單欄）

4、WrapPanel：自動折行面闆（環繞面闆）。内部元素在排滿一行後能夠自動折行，類似于Html中的流式布局。

5、UniformGrid：均分布局（橫向的網格分割、縱向的網格分割分别是均等的分割的布局類型，各個單元格的大小完全相同，寬與高分别相同）

6、Canvas：畫布。内部元素可以使用以像素為機關的絕對坐标進行定位，類似于Windows Form 的布局方式。

一、Grid網格

簡介：

Grid顧名思義就是“網格”，它的子控件被放在一個一個實作定義好的小格子裡面，整齊配列。Grid和其他各個Panel比較起來，功能最多也最為複雜。

要使用Grid，首先要向RowDefinitions和ColumnDefinitions屬性中添加一定數量的RowDefinitions和 ColumnDefinitions元素，進而定義行數和列數。

而放置在Grid面闆中的控件元素都必須顯示采用附加屬性文法定義其 放置所在的行和列，它們都是以0為基準的整型值，如果沒有顯式設定任何行或列，Grid将會隐式地将控件加入在第0行第0列。

由于Grid的組成并非簡單的添加屬性标記來區分行列，這也使得使用者在實際應用中可以具體到某一單 元格中，是以布局起來就很精細了。

特點：

·可以定義任意數量的行和列，非常靈活。

·行的高度和列的寬度可以使用絕對值、相對比例或自動調整的方式進行精确設定，并可以設定最大和最小值。

·内部元素可以設定自己所在的行和列Grid.Row和Grid.Column，還可以設定自己縱向跨幾行Grid.RowSpan，橫向跨幾列Grid.ColumnSpan。

·可以設定Children元素的對齊方向：水準HorizontalAlignment，垂直VerticalAlignment。

基于以上這些特點，Grid的适用場合有：

·UI布局的大架構設計。

·大量UI元素需要成行或者成列對齊的情況。

·UI尺寸改變的時候，元素需要保留固有的寬度和高度比列。

二、DockPanel：泊靠式面闆

DockPanel定義一個區域，在此區域中，您可以使子元素通過描點的形式排列，這些對象位于Children 屬性中。

DockPanel會對每個子元素進行排序，并将根據指定的邊進行停靠，多個停靠在同側的元素則按順序排序。

在DockPanel中，指定停靠邊的控件，會根據定義的順序占領邊角，所有控件絕不會交疊。

預設情況下，後添加的元素隻能使用剩餘空間，無論對DockPanel的最後一個子元素設定任何停靠值，該子元素都将始終填滿剩餘的空間。如果不希望最後一個元素填充剩餘區域，可以将DockPanel屬性LastChildFill設定為false，還必須為最後一個子元素顯式指定停靠方向。

使用場合：DockPanel停靠容器，專門負責自适應視窗的布局。

三、StackPanel：棧式面闆

StackPanel就是将控件按照行或列來順序排列，但不會換行。

通過設定面闆的Orientation屬性設定了兩種排列方式：橫排（Horizontal）和豎排（Vertical預設的）。

水準排列時，每個元素都與面闆一樣高；垂直排列時，每個元素都與面闆一樣寬。如果包含的元素超過了面闆空間，它隻會截斷多出的内容。

元素的Margin屬性用于使元素之間産生一定得間隔，當元素空間大于其内容的空間時，剩餘空間将由HorizontalAlignment和 VerticalAlignment屬

特點:

·每個元素各占一行或者一列

使用場合：

·同類元素需要緊湊排列（如制作菜單和清單）。

·移除其中的元素後能夠自動補缺的布局或者動畫。

四、WrapPanel：自動折行面闆（環繞面闆）

WrapPanel布局面闆将各個控件從左至右按照行或列的順序羅列，當長度或高度不夠時就會自動調整進行換行，後續排序按照從上至下或從右至左的順序進行。

Orientation——根據内容自動換行。當Orientation屬性的值設定為 Horizontal：元素是從左向右排列的，然後自上至下自動換行。當Orientation屬性的值設定為Vertical：元素是從上向下排列的，然後從左至右自動換行。

ItemHeight——所有子元素都一緻的高度。每個子元素填充高度的方式取決于它的VerticalAlignment屬性、Height屬性等。任何比ItemHeight高的元素都将被截斷。

ItemWidth——所有子元素都一緻的寬度。每個子元素填充高度的方式取決于它的VerticalAlignment屬性、Width屬性等。任何比ItemWidth高的元素都将被截斷。

五：UniformGrid：均分布局

介紹了前面的Grid,接下來介紹的這個UniformGrid 就是Grid的簡化版，每個單元格的大小相同，不需要定義行列集合。每個單元格始終具有相同的大小，每個單元格隻能容納一個控件，将自動按照定義在其内部的元素個數，自動建立行列，并通常保持相同的行列數。

UniformGrid 中沒有Row 和Column 附加屬性，也沒有空白單元格。

與Grid布局控件相比，UniformGrid布局控件很少使用。Grid面闆是用于建立簡單乃至複雜視窗布局的通用工具。UniformGrid面闆是一個一種更特殊的布局容器，主要用于在一個刻闆的網格中快速地布局元素。

UniformGrid 布局面闆和Grid 面闆相似，将子元素按照行列的方式排列。但是可以Grid 有一下不同：

·- 不需要指定行和列的大小

·- 所有列都是相同的寬度

·- 所有行都是相同的高度

·- 要指定預期的行和列的數目

·- 不需要給子元素指定所在的行和列

子元素将自動的根據添加是順序從第一行開始顯示在對應的行和列中，每樣都是從左至右。

六：Canvas：畫布面闆

畫布，用于完全控制每個元素的精确位置。他是布局控件中最為簡單的一種，直接将元素放到指定位置，主要來布置圖面。

使用Canvas，必須指定一個子元素的位置（相對于畫布），否則所有元素都将出現在畫布的左上角。調整位置用Left、Right、Top和Bottom四個附加屬性。

如果Canvas是視窗主元素（即最外層的布局面闆是Canvas），使用者改變視窗大小時，Canvas也會随之變化，子元素的位置也會随之移動，以保證相對于Canvas的位置屬性不變。

Canvas允許子元素的部分或全部超過其邊界，預設不會裁剪子元素，同時可以使用負坐标，即溢出的内容會顯示在Canvas外面，這是因為預設 ClipToBounds=”False”，是以畫布不需要指定大小。如果想複制畫布内容，将ClipToBounds設為true即可。