Elevation control
A control used to construct cards and flyout menus.
Description
Elevation
is used to draw focus to an experience and add a physical materiality to the app. Shallow levels are reserved for items that are closely connected to the canvas or view, such as tiles. Deeper levels create a prominent frame around the surface, drawing strong focus to self-contained experiences like dialogs. Supports mouse hover events.
Go to Fluent UI Elevation style page for best practices.
Properties
Key properties
Property | Description |
---|---|
Depth |
The depth of the shadow. |
HoverDepth |
The depth of the shadow that appears on hover. |
Style properties
Property | Description |
---|---|
FillColor |
The background color of the Elevation control. |
HoverFillColor |
The background color of the Elevation control that appears on hover. |
PaddingLeft |
Left edge gap between card and control boundary |
PaddingRight |
Right edge gap between card and control boundary |
PaddingTop |
Top edge gap between card and control boundary |
PaddingBottom |
Bottom edge gap between card and control boundary |
DarkOverlay |
When enabled, displays a dark overlay effect in the padded area. |
Formatting content over Elevation
with layout containers
Add a
Container
control to the screen (notHorizontal container
orVertical container
).Add an
Elevation
component in the containerSet
Elevation
properties to fit it's parentContainer
:Property Value X
0
Y
0
Width
Parent.Width
Height
Parent.Height
Set
PaddingRight
,PaddingTop
andPaddingBottom
properties to referenceSelf.PaddingLeft
Choose desired
Depth
and adjust the value ofPaddingLeft
to provide enough gap for the shadow not to get cut off.Insert a
Vertical container
into the same parentContainer
. This is used to host the content of the card.Set the
Vertical container
properties to visually align to theElevation
component's edges:Property Value X
Elevation.PaddingLeft
Y
Elevation.PaddingLeft
Width
Parent.Width - Elevation.PaddingLeft * 2
Height
Parent.Height - Elevation.PaddingLeft * 2
Add contents into the
Vertical container
to populate the card.
Limitations
This code component can only be used in canvas apps and custom pages.