Elevation コントロール
カードとポップアップ メニューを構築するために使用されるコントロールです。
説明設定
Elevation
体験に焦点を当て、アプリに物理的な実体性を加えるために使用されます。 浅いレベルは、タイルなどキャンバスやビューに密接に関係するアイテム用に予約されています。 深層部では、表層の周りに目立つフレームを作り、ダイアログなどの自己完結したエクスペリエンスに重点を置いています。 マウス ホバー イベントをサポートします。
ベスト プラクティスについては、Fluent UI エレベイション スタイル ページに移動します。
プロパティ
重要なプロパティ
Property | 説明設定 |
---|---|
Depth |
シャドウの深さ。 |
HoverDepth |
ホバー時に表示されるシャドウの深さ。 |
スタイル プロパティ
Property | 説明設定 |
---|---|
FillColor |
Elevation コントロールの背景色。 |
HoverFillColor |
ホバー時に表示される Elevation コントロールの背景色。 |
PaddingLeft |
カードとコントロール境界の間の左端のギャップ |
PaddingRight |
カードとコントロール境界の間の右端のギャップ |
PaddingTop |
カードとコントロール境界の間の最上部のギャップ |
PaddingBottom |
カードとコントロール境界の間の最下部のギャップ |
DarkOverlay |
有効にすると、パディングされた領域で暗いオーバーレイ効果を示します。 |
レイアウト コンテナによる Elevation
以上のコンテンツの書式設定
画面に
Container
コントロールを追加します (Horizontal container
やVertical container
ではありません)。コンテナに
Elevation
コンポーネントを追加する親である
Container
に合うようにElevation
のプロパティを設定します:Property 価値 X
0
Y
0
Width
Parent.Width
Height
Parent.Height
PaddingRight
、PaddingTop
、PaddingBottom
のプロパティがSelf.PaddingLeft
を参照するように設定するDepth
には任意の値を選び、PaddingLeft
の値は影が切れない程度の隙間になるように調整します。同じ親である
Vertical container
にContainer
を挿入します。 これは、カードのコンテンツをホストするために使用されます。Vertical container
のプロパティは、Elevation
コンポーネントのエッジに視覚的に整列するように設定します:Property 価値 X
Elevation.PaddingLeft
Y
Elevation.PaddingLeft
Width
Parent.Width - Elevation.PaddingLeft * 2
Height
Parent.Height - Elevation.PaddingLeft * 2
Vertical container
にコンテンツを追加して、カードに入力します。
制限
このコード コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。