共用方式為


對齊、邊界、邊框間距

XAML 應用程式中,大部分的使用者介面 (UI) 元素是從 FrameworkElement 類別繼承。 每個 FrameworkElement 皆有影響版面配置行為的維度、邊界、邊框間距屬性。 下列指導方針提供有關如何使用這些版面配置屬性,確定您應用程式的 UI 可辨識且在任何操作概觀中皆容易使用。

尺寸 (高度、寬度)

適當的大小調整可確保所有的內容清楚可辨識。 使用者不必捲動或縮放即可解讀主要內容。

顯示維度的圖

  • HeightWidth 指定元素的大小。 預設值在數學上來說是 NaN (不是數字)。 您可以設定以有效像素衡量的固定值,或者可以使用 Auto 或適用於可變式行為的等比例調整大小

  • ActualHeightActualWidth 是唯讀屬性,在執行階段提供元素的大小。 如果可變式版面配置擴大或縮小,則這些值會在 SizeChanged事件中變更。 請注意,RenderTransform 不會變更 ActualHeight 和 ActualWidth 值。

  • MinWidth/MaxWidthMinHeight/MaxHeight 指定的值會在允許可變式調整大小時限制元素大小。

  • FontSize 和其他文字屬性控制了文字元素的版面配置大小。 文字元素沒有有明確宣告維度,但其實已經計算 ActualWidth 和 ActualHeight。

對齊方式

對齊讓您的 UI 外觀看起來整潔、有組織,且平衡,也可以用來建立視覺階層與關聯性。

顯示對齊方式的圖

  • HorizontalAlignmentVerticalAlignment 指定元素應該如何放置於其父容器內。

    • HorizontalAlignment 的值包含 LeftCenterRightStretch
    • VerticalAlignment 的值包含 TopCenterBottomStretch
  • Stretch 是這兩個屬性的預設,且元素將填滿父容器中提供給它們的所有空間。 Height 和 Width 的實際數字會取消一個 Stretch 值,而這個值將反而做為 Center 值。 某些控制項 (像是 Button) 會在其預設樣式中覆寫預設 Stretch 值。

  • HorizontalContentAlignmentVerticalContentAlignment 指定如何將子元素放置於一個容器內。

  • 對齊可能會影響配置面板中的裁剪。 例如,使用 HorizontalAlignment="Left",如果內容大於 ActualWidth,則剪裁元素的右側。

  • 文字元素使用 TextAlignment屬性。 一般而言,我們建議使用靠左對齊 (預設值)。 如需設定文字樣式的詳細資訊,請參閱印刷樣式

邊界和邊框間距

邊界和邊框間距屬性讓 UI 看起來不會過於雜亂或太疏鬆,也可以讓使用特定輸入方式 (像是手寫筆、觸控) 更容易。 以下圖示容器與其內容的邊界和邊框間距。

XAML 邊界和邊框間距的圖

Margin

Margin 控制元素周圍的空白空間。 邊界不會在 ActualHeight 和 ActualWidth 中增加像素,而且在點擊測試與來源輸入事件中不會被視為元素的一部分。

  • 邊界的值可以統一或不同。 使用 Margin="20" 時,會對左、上、右、下邊界上的元素一致套用 20 像素的邊界。 使用 Margin="0,10,5,25",會依對左、上、右、下的順序套用值。

  • 邊界是累加的。 若兩個元素同時指定一致的邊界為 10 個像素,且皆為方向不拘的相鄰對等元素,則元素之間的距離會是 20 個像素。

  • 允許負邊界。 然而,使用負邊界通常會導裁剪或過度繪製對等,因此負邊界並不是一種常見的技術。

  • 最後才限制邊界值,因此使用邊界時請謹慎小心,因為容器可裁剪或限制元素。 邊界值可能會是造成元素無法轉譯的原因;套用邊界,元素的維度可限制為 0。

填補

Padding 控制元素的內部框線及其子內容或元素之間的空間。 正的邊框間距值會減少元素的內容區域。

不同於邊界,邊框間距不是 FrameworkElement 的屬性。 有幾個類別,每一個皆定義其自身的邊框間距屬性:

  • Control.Padding:會繼承到所有 Control 衍生類別。 不是所有控制項都有內容,因此對於這些控制項而言,設定此屬性沒有作用。 如果控制項有邊框,將會在該邊框內套用邊框間距。
  • Border.Padding:定義 BorderThickness/BorderBrush 所建立的矩形線條與 Child 元素之間的空間。
  • ItemsPresenter.Padding:作用在項目控制項中的項目外觀,在每個項目周圍放上指定的邊框間距。
  • TextBlock.PaddingRichTextBlock.Padding:展開文字元素的文字周圍的周框方塊。 這些文字元素沒有 Background,可能不容易看出。 基於這個原因,改為在 Block容器上使用 Margin 設定。

不論上述哪一種情況,元素也具有邊界屬性。 若同時套用邊界與邊框間距,兩者會相加:外部容器與任何內部內容之間的外觀距離等於邊界加上邊框間距。

範例

讓我們來看看邊界和邊框間距對實際控制的影響。 這是方格內的 TextBox,預設邊界和邊框間距值為 0。

具有邊界和邊框間距為 0 的 TextBox

這是相同的 TextBox 和方格,TextBox 上有邊界和邊框間距值,如該 XAML 所示。

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

具有正邊界和邊框間距值的 TextBox

樣式資源

您不必在控制項上單獨設定每個屬性值。 將屬性值分組到 Style 資源,並將 Style 套用到控制項通常會更有效率。 當您需要將相同的屬性值套用到許多控制項時尤其如此。 如需有關使用樣式的詳細資訊,請參閱 XAML 樣式

一般建議

  • 只將測量值套用到特定按鍵元素,其他元素則使用可變式配置行為。 視窗寬度變更時,這可提供給回應式 UI

  • 如果您使用測量值,所有維度、邊界、邊框間距皆應以 4 個有效像素 (epx) 遞增。 當 XAML 使用有效像素與縮放比例 讓您的應用程式在所有裝置與螢幕尺寸上清楚可辨,它是以 4 的倍數縮放 UI 元素。 藉由符合整數像素,使用以 4 遞增的值,呈現最佳轉譯。

  • 針對小的視窗寬度 (小於 640 像素),建議使用 12 epx 裝訂邊,較大的視窗寬度,建議使用 24 epx 裝訂邊。

建議的裝訂邊