Elevation controllare

Un controllo utilizzato per creare menu con schede e riquadri a comparsa.

Description

Elevation viene utilizzato per focalizzare l'attenzione su un'esperienza e aggiungere una materialità fisica all'app. I livelli bassi sono riservati agli elementi strettamente collegati al canvas o alla visualizzazione, come i riquadri. I livelli più profondi creano una cornice prominente attorno alla superficie, attirando l'attenzione su esperienze autonome come le finestre di dialogo. Supporta eventi al passaggio del mouse.

Vai alla pagina stile Elevation dell'interfaccia utente Fluent per le procedure consigliate.

Proprietà

Proprietà chiave

Proprietà	Descrizione
Depth	Profondità dell'ombra.
HoverDepth	La profondità dell'ombra che appare al passaggio del mouse.

Proprietà di stile

Proprietà	Descrizione
FillColor	Colore di sfondo del controllo Elevation.
HoverFillColor	Il colore di sfondo del controllo Elevation che appare al passaggio del mouse.
PaddingLeft	Spazio sul bordo sinistro tra scheda e limite di controllo
PaddingRight	Spazio sul bordo destro tra scheda e limite di controllo
PaddingTop	Spazio sul bordo superiore tra scheda e limite di controllo
PaddingBottom	Spazio sul bordo inferiore tra scheda e limite di controllo
DarkOverlay	Quando abilitata visualizza un effetto di sovrapposizione scuro nell'area riempita.

Formattazione del contenuto su Elevation con contenitori di layout

1. Aggiungi un controllo Container alla schermata (non Horizontal container o Vertical container).

2. Aggiungi un componente Elevation nel contenitore

3. Imposta le proprietà Elevation per adattarsi al suo Container padre:

   Proprietà	valore
   X	0
   Y	0
   Width	Parent.Width
   Height	Parent.Height

4. Imposta le proprietà PaddingRight, PaddingTop e PaddingBottom in modo da fare riferimento a Self.PaddingLeft

5. Scegli il valore desiderato per Depth e regola il valore di PaddingLeft per fornire uno spazio sufficiente affinché l'ombra non venga ritagliata.

6. Inserisci un Vertical container nello stesso Container padre. Viene utilizzato per ospitare il contenuto della scheda.

7. Imposta le proprietà Vertical container per allineare visivamente ai bordi del componente Elevation:

   Proprietà	valore
   X	Elevation.PaddingLeft
   Y	Elevation.PaddingLeft
   Width	Parent.Width - Elevation.PaddingLeft * 2
   Height	Parent.Height - Elevation.PaddingLeft * 2

8. Aggiungi contenuti nel Vertical container per popolare la scheda.

Limiti

Questo componente di codice può essere usato solo nelle app canvas e nelle pagine personalizzate.