共用方式為

Elevation 控制

用於建構卡和快顯視窗功能表的控制項。

Elevation 控制項。

描述

Elevation 用於將焦點吸引到體驗上，併為應用添加物理物質性。 淺層保留給與畫布或檢視表緊密相連的項目，例如圖標。 更深的層次會在表面周圍建立醒目的框架，高度聚焦自身的體驗 (例如對話方塊)。 支援滑鼠懸停事件。

前往 Fluent UI 標高樣式頁面以取得最佳作法。

屬性

索引鍵屬性

屬性 描述
Depth 陰影的深度。
HoverDepth 懸停時顯示的陰影深度。

樣式屬性

屬性 描述
FillColor Elevation 控制項的背景色彩。
HoverFillColor 懸停時顯示的 Elevation 控制項背景色彩。
PaddingLeft 卡片與控制項邊界之間的左邊緣間隙
PaddingRight 卡片與控制項邊界之間的右邊緣間隙
PaddingTop 卡片與控制項邊界之間的上邊緣間隙
PaddingBottom 卡片與控制項邊界之間的下邊緣間隙
DarkOverlay 啟用時，在填補區域中顯示深色重疊效果。

使用版面配置容器格式化 Elevation 內容

  1. 在畫面中新增 Container 控制項 (不是 Horizontal container 或 Vertical container)。

  2. 在容器中新增 Elevation 元件

  3. 設定 Elevation 屬性以符合其上層 Container：

    屬性 數值
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. 設定 PaddingRight、PaddingTop 和 PaddingBottom 屬性以參考 Self.PaddingLeft

  5. 選擇所需的 Depth 並調整 PaddingLeft 的值，以提供足夠的間隙使陰影不會被切斷。

  6. 將 Vertical container 插入相同的上層 Container。 這是用來託管卡片的內容。

  7. 將 Vertical container 屬性設定為在視覺上與 Elevation 元件的邊緣對齊：

    屬性 數值
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. 將內容新增到 Vertical container 以填入卡片。

標高範例。

限制

此程式碼元件只能在畫布應用程式和自訂頁面中使用。

  • Last updated on