Freigeben über

Elevation Kontrolle

  • Artikel

Ein Steuerelement zum Erstellen von Karten und Flyoutmenüs.

Anhebungs-Steuerelement.

Beschreibung des Dataflows

Elevation wird verwendet, um den Fokus auf ein Erlebnis zu lenken und der App eine physische Materialität zu verleihen. Flache Ebenen sind für Elemente reserviert, die eng mit dem Canvas oder der Ansicht verbunden sind, wie z. B. Kacheln. Tiefere Ebenen bilden einen markanten Rahmen um die Oberfläche herum und lenken den Fokus stark auf in sich geschlossene Erfahrungen wie Dialoge. Unterstützt Maus-Hover-Ereignisse.

Wechseln Sie zur Seite Anhebungsstil in Fluent UI für Best Practices.

Eigenschaften

Schlüsseleigenschaften

Eigenschaften Beschreibung des Dataflows
Depth Die Tiefe des Schattens.
HoverDepth Die Tiefe des Schattens, die beim Hover angezeigt wird.

Stileigenschaften

Eigenschaften Beschreibung des Dataflows
FillColor Die Hintergrundfarbe des Elevation-Steuerelements.
HoverFillColor Die Farbe des Hintergrund, die auf dem Elevation-Steuerelement beim Hover angezeigt wird.
PaddingLeft Lücke am linken Rand zwischen Karte und Steuerelementgrenze
PaddingRight Lücke am rechten Rand zwischen Karte und Steuerelementgrenze
PaddingTop Lücke am oberen Rand zwischen Karte und Steuerelementgrenze
PaddingBottom Lücke am unteren Rand zwischen Karte und Steuerelementgrenze
DarkOverlay Zeigt, wenn sie aktiviert ist, einen dunklen Überlagerungseffekt im aufgefüllten Bereich.

Inhalt formatieren über Elevation mit Layout-Containern

  1. Fügen Sie ein Container-Steuerelement dem Bildschirm hinzu (nicht Horizontal container oder Vertical container).

  2. Eine Elevation-Komponente im Container hinzufügen

  3. Legen Sie Elevation-Eigenschaften so fest, dass sie zum übergeordneten Container passen:

    Eigenschaften Wert
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Eigenschaften PaddingRight, PaddingTop und PaddingBottom zum Verweis auf Self.PaddingLeft festlegen

  5. Wählen Sie Depth wie gewünscht aus, und passen Sie den Wert von PaddingLeft an, um genug Lücke zu schaffen, damit der Schatten nicht abgeschnitten wird.

  6. Fügen Sie einen Vertical container in denselben übergeordneten Container ein. Dieser wird verwendet, um den Inhalt der Karte zu hosten.

  7. Legen Sie die Vertical container-Eigenschaften so fest, dass sie visuell an den Elevation-Komponentenkanten ausgerichtet sind:

    Eigenschaften Wert
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Fügen Sie Inhalte im Vertical container hinzu, um die Karte zu füllen.

Anhebungs-Beispiel.

Einschränkungen

Diese Codekomponente kann nur in Canvas-Apps und benutzerdefinierten Seiten verwendet werden.