Elevation コントロール

  • [アーティクル]

カードとポップアップ メニューを構築するために使用されるコントロールです。

Elevation コントロール。

説明設定

Elevation は、エクスペリエンスに焦点を当て、アプリに物理的な物質性を付加するために使用されます。 浅いレベルは、タイルなどキャンバスやビューに密接に関係するアイテム用に予約されています。 深層部では、表層の周りに目立つフレームを作り、ダイアログなどの自己完結したエクスペリエンスに重点を置いています。 マウス ホバー イベントをサポートします。

ベスト プラクティスについては、Fluent UI エレベイション スタイル ページに移動します。

プロパティ​​

重要なプロパティ

Property 説明設定
Depth シャドウの深さ。
HoverDepth ホバー時に表示されるシャドウの深さ。

スタイル プロパティ

Property 説明設定
FillColor Elevation コントロールの背景色。
HoverFillColor ホバー時に表示される Elevationコントロールの背景色。
PaddingLeft カードとコントロール境界の間の左端のギャップ
PaddingRight カードとコントロール境界の間の右端のギャップ
PaddingTop カードとコントロール境界の間の最上部のギャップ
PaddingBottom カードとコントロール境界の間の最下部のギャップ
DarkOverlay 有効にすると、パディングされた領域で暗いオーバーレイ効果を示します。

レイアウト コンテナによる Elevation 以上のコンテンツの書式設定

  1. 画面に Container コントロールを追加します (Horizontal container や Vertical container ではありません)。

  2. コンテナに Elevation コンポーネントを追加する

  3. 親である Container に合うように Elevation のプロパティを設定します:

    Property 価値
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. PaddingRight、PaddingTop、PaddingBottom のプロパティが Self.PaddingLeft を参照するように設定する

  5. Depth には任意の値を選び、PaddingLeft の値は影が切れない程度の隙間になるように調整します。

  6. 同じ親である Container に Vertical container を挿入します。 これは、カードのコンテンツをホストするために使用されます。

  7. Vertical container のプロパティは、Elevation コンポーネントのエッジに視覚的に整列するように設定します:

    Property 価値
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Vertical container にコンテンツを追加して、カードに入力します。

エレベーションの例。

制限

このコード コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。