在 XAML 應用程式中，大多數使用者介面（UI）元素繼承自 FrameworkElement 類別。 每個 FrameworkElement 都有尺寸、對齊、邊距和填充屬性，這些都會影響版面的行為。 以下指引概述如何使用這些版面屬性，確保你的應用程式介面在任何情境下都清晰易讀且易於使用。
尺寸（高度、寬度）
適當的尺寸確保所有內容清晰可讀。 使用者不應該需要捲動或縮放才能解讀主要內容。
高度 與 寬度則指定 元素的大小。 預設值是數學上的
NaN（Not A Number）。 你可以設定以有效像素計算的固定值，或者使用自動 或 比例大小 來實現流暢的行為。ActualHeight 和 ActualWidth 是唯讀屬性，能在執行時提供元素的大小。 如果流動佈局會成長或縮小，則在 SizeChanged 事件中值會改變。 請注意， RenderTransform 不會改變 ActualHeight 和 ActualWidth 的值。
FontSize 及其他文字屬性控制文字元素的版面大小。 雖然文字元素沒有明確宣告的尺寸，但它們會計算出實際寬度（ActualWidth）和實際高度（ActualHeight）。
對齊方式
對齊讓你的 UI 看起來整齊、有條理且平衡，也能用來建立視覺層級與關係。
HorizontalAlignment 與 VerticalAlignment 指定元素在其父容器中應如何定位。
- HorizontalAlignment 的值包含 Left、Center、Right 和 Stretch。
- VerticalAlignment 的值包含 Top、Center、Bottom 和 Stretch。
Stretch 是這兩種屬性的預設，元素會填滿它們在父容器中提供的所有空間。 實數高度與寬度會抵銷拉伸值，該值將作為中心值。 有些控制項，比如按鈕，會在它們的預設樣式中覆寫預設的拉伸值。
HorizontalContentAlignment 與 VerticalContentAlignment 指定 子元素在容器中的位置。
對齊方式可能會影響版面配置面板內的裁剪。 例如，使用
HorizontalAlignment="Left"時，如果內容大於實際寬度，元素的右側會被裁切。文字元素使用 TextAlignment 屬性。 一般來說，我們建議使用預設值左對齊。 欲了解更多關於字體樣式的資訊，請參見 字體設計。
邊距與填充
邊界和填充屬性能讓 UI 看起來不會太雜亂或太稀疏，也能讓某些輸入（如筆和觸控）更容易使用。 這裡有一張展示容器及其內容的邊界與填充的插圖。
Margin
邊距 控制元素周圍的空白空間量。 Margin 不會將像素加入 ActualHeight 和 ActualWidth，也不被視為進行命中測試和輸入事件來源的一部分元素。
- 邊距值可以是統一的，也可以是不同的。 當使用
Margin="20"時，元素的上下左右四側會均勻地增加20像素的邊距。 當Margin="0,10,5,25"時，這些值分別依序套用到左、上、右、下。 - 邊距是相加的。 若兩個元素都指定均勻的 10 像素距，且在任意方向上相鄰，則它們之間的距離為 20 像素。
- 允許負邊距。 然而，使用負邊距常會導致內容被截斷或其他元素重疊，因此使用負邊距並不常見。
- 邊距值是最後才會被限制的，所以要小心處理邊距，因為容器可能會限制或剪除元素。 邊界值可能是元素未呈現的原因;在施加邊際時，元素的維度可以被限制為 0。
填充
填充 控制元素內邊界與子元素之間的空間大小。 正的 Padding 值會減少元素的內容區域。
與 Margin 不同，Padding 並非 FrameworkElement 的屬性。 有數個類別各自定義其自己的 Padding 屬性：
- Control.Padding：繼承所有 Control 衍生類別。 並非所有控制項都有內容，因此對這些控制項來說，設定屬性不會有作用。 如果控制項有邊框，填充會套用在邊框內。
- Border.Padding：定義由 BorderThickness/BorderBrush 建立的矩形線與 子 元素之間的空間。
- ItemsPresenter.Padding：在物品控制項中調整物品外觀，將指定的填充物置於每個物品周圍。
- TextBlock.Padding 與 RichTextBlock.Padding：展開文字元素文字周圍的邊界框。 這些文字元素沒有 背景，因此視覺上可能不太容易被看見。 因此，建議改用區塊容器的邊界設定。
在這些情況下，元素也具有邊際性質。 若同時應用邊際與填充，則為加法：外層容器與內部內容物之間的表觀距離即為邊際加填充。
Example
讓我們來看看 Margin 與 Padding 對實際控制元件的影響。 這裡有一個放在格子裡的文字框，預設邊距和填充值為 0。
這是與本 XAML 所示相同的文字框和網格，其中文字框上設有邊距和內距值。
<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
<TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>
樣式資源
您不必在控制項上單獨設定每個屬性值。 將屬性值分組到 Style 資源，並將 Style 套用到控制項通常會更有效率。 當您需要將相同的屬性值套用到許多控制項時尤其如此。 想了解更多樣式的使用資訊，請參見 XAML 樣式。
一般建議
- 只對特定關鍵元素套用測量值，其他元素則採用流動佈局行為。 這在視窗寬度改變時提供 響應式介面 。
- 如果你使用測量單位， 所有尺寸、邊距和填充都應該以 4 epx 為增量。 當 XAML 利用 有效像素和縮放 技術，讓你的應用程式在所有裝置和螢幕尺寸上都能讀懂時，它會將 UI 元素放大成 4 的倍數。 以 4 為單位使用數值，能透過與整像素對齊，達到最佳渲染效果。
- 對於小於640像素的窗戶寬度，我們建議使用12個EPX排水溝;對於較大窗戶寬度，我們建議使用24個EPX排水溝。
