Udostępnij za pośrednictwem

Elevation kontrola

  • Artykuł

Formant używany do tworzenia kart i menu wysuwanych.

Kontrolka wysokości.

opis

Elevation służy do zwrócenia uwagi na doświadczenie i nadania aplikacji fizycznej materialności. Płytkie poziomy są zarezerwowane dla elementów, które są ściśle związane z obszarem roboczym lub widokiem, takich jak kafelki. Głębsze poziomy tworzą widoczną ramę wokół powierzchni, skupiając się na samodzielnych doświadczeniach, takich jak dialogi. Obsługuje zdarzenia najechania myszą.

Zapoznaj się z najlepszymi rozwiązaniami postępowania w przypadku kontrolki stylu Elewacji Fluent interfejsu użytkownika.

Właściwości

Właściwości klucza

Właściwości opis
Depth Głębia zdjęcia.
HoverDepth Głębia wszystkich wyświetlanych danych w umieszczeniu kursora.

Właściwości stylu

Właściwości opis
FillColor Kolor tła kontrolki Elevation.
HoverFillColor Kolor tle formantu Elevation wyświetlanego na kursorze.
PaddingLeft Szczelina lewej krawędzi między kartą a granicą kontrolki
PaddingRight Szczelina prawej krawędzi między kartą a granicą kontrolki
PaddingTop Szczelina górnej krawędzi między kartą a granicą kontrolki
PaddingBottom Szczelina dolnej krawędzi między kartą a granicą kontrolki
DarkOverlay Po włączeniu tej funkcji w obszarze wyściełanym jest wyświetlany efekt ciemnej nakładki.

Formatowanie zawartości za pomocą Elevation kontenerów układu

  1. Dodaj do ekranu kontrolkę Container (nie Horizontal container ani Vertical container).

  2. Dodawanie składnika Elevation do kontenera

  3. Ustaw właściwości Elevation pasujące do elementu nadrzędnego Container:

    Właściwości Wartość
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Ustaw właściwości PaddingRight, PaddingTop i PaddingBottom, aby odwoływały się do Self.PaddingLeft

  5. Wybierz żądaną Depth i dostosuj wartość PaddingLeft, aby zapewnić wystarczającą szczelinę, aby cień nie został odcięty.

  6. Włóż Vertical container do tego samego elementu nadrzędnego Container. W tym celu można hostować zawartość karty.

  7. Ustaw właściwości Vertical container tak, aby były wyrównane wizualnie do właściwości składnika Elevation.

    Właściwości Wartość
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Dodaj zawartość do karty Vertical container, aby wypełnić kartę.

Przykład wysokości.

Ograniczenia

Tego składnika kodu można używać tylko w aplikacjach kanwy i na stronach niestandardowych.