Ombreggiature nelle app di Windows

Windows app usano le ombreggiature per esprimere profondità e aggiungere gerarchia visiva. Le ombreggiature consentono di creare un effetto di profondità, orientando l'attenzione dell'utente verso gli elementi più importanti nell'interfaccia utente.

L'ombra è uno dei modi in cui un utente percepisce l'elevazione. La luce sopra un oggetto elevato crea un'ombra sulla superficie sottostante. Più alto è l'oggetto, più grande e più morbida diventa l'ombreggiatura. Gli oggetti elevati nella tua UI non devono avere ombre, ma aiutano a creare l'apparenza di elevazione.

Nelle app Windows, le ombre devono essere usate in modo intenzionale piuttosto che estetico. L'uso di troppe ombreggiature ridurrà o eliminerà la capacità dell'ombreggiatura di concentrarsi sull'utente.

Se usi controlli standard, le ombreggiature sono già incorporate nell'interfaccia utente. Tuttavia, puoi includere manualmente le ombreggiature nell'interfaccia utente usando themeShadow o le API DropShadow .

ThemeShadow

Il tipo ThemeShadow può essere applicato a qualsiasi elemento XAML per disegnare le ombreggiature in modo appropriato in base alle coordinate x, y e z.

• Applica le ombreggiature agli elementi in base al valore di profondità z, simulando la profondità.
• Mantiene le ombre coerenti in tutte le applicazioni grazie all'estetica dell'ombra.

Ecco come ThemeShadow è stato implementato in un MenuFlyout. MenuFlyout ha un'ombreggiatura incorporata con una profondità di 32px applicata al menu principale e a tutti i menu annidati.

ThemeShadow nei controlli comuni

I controlli comuni seguenti useranno automaticamente ThemeShadow per proiettare ombre con una profondità di 32 pixel, a meno che non diversamente specificato.

• Menu di scelta rapida, barra dei comandi, riquadro a comparsa della barra dei comandi, MenuBar
• Dialoghi e menu a scomparsa (Dialogo a 128px)
• NavigationView
• ComboBox, DropDownButton, SplitButton, ToggleSplitButton
• TeachingTip
• Casella di suggerimento automatico
• Selezione Calendario/Data/Ora
• Suggerimento (16px)
• Casella numerica
• TabView
• Controllo trasporto multimediale, InkToolbar
• Barra di navigazione
• Animazione connessa

ThemeShadow nei popup

Spesso l'interfaccia utente dell'app usa un popup per gli scenari in cui è necessaria l'attenzione e l'azione rapida dell'utente. Questi sono ottimi esempi quando è consigliabile usare shadow per creare una gerarchia nell'interfaccia utente dell'app.

ThemeShadow proietta automaticamente ombre quando applicato a un qualsiasi elemento XAML all'interno di un popup. Proietterà ombre sul contenuto di sfondo dell'app dietro di esso e su tutti gli altri popup aperti sotto di esso.

Per usare ThemeShadow con Popup, usa la Shadow proprietà per applicare themeShadow a un elemento XAML. Elevare quindi l'elemento da altri elementi dietro di esso, ad esempio usando il componente z della Translation proprietà . Per la maggior parte dei popup dell'interfaccia utente, l'elevazione predefinita consigliata rispetto al contenuto dello sfondo dell'app è di 32 pixel effettivi.

Questo esempio mostra un rettangolo in un popup che proietta un'ombra sul contenuto di sfondo dell'app e su qualsiasi altro popup dietro di esso.

<Popup>
    <Rectangle x:Name="PopupRectangle" Fill="Lavender" Height="48" Width="96">
        <Rectangle.Shadow>
            <ThemeShadow />
        </Rectangle.Shadow>
    </Rectangle>
</Popup>

// Elevate the rectangle by 32px
PopupRectangle.Translation += new Vector3(0, 0, 32);

Disabilitazione di ThemeShadow predefinito nei controlli rimovibili personalizzati

I controlli basati su Flyout, DatePickerFlyout, MenuFlyout o TimePickerFlyout usano automaticamente ThemeShadow per eseguire il cast di un'ombreggiatura.

Se l'ombreggiatura predefinita non appare corretta nel contenuto del controllo, è possibile disabilitarla impostando la proprietà IsDefaultShadowEnabled sull'oggetto FlyoutPresenter associato.

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="IsDefaultShadowEnabled" Value="False" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
</Flyout>

ThemeShadow in altri elementi

In generale, è consigliabile considerare attentamente l'uso dell'ombreggiatura e limitarne l'uso ai casi in cui introduce una gerarchia visiva significativa. Tuttavia, è possibile proiettare un'ombra da qualsiasi elemento dell'interfaccia utente per scenari avanzati che lo richiedono.

Per proiettare un'ombra da un elemento XAML che non si trova in un Popup, devi specificare esplicitamente gli altri elementi che possono ricevere l'ombra nella raccolta ThemeShadow.Receivers. I ricevitori non possono essere un antenato del caster nell'albero visivo.

Questo esempio mostra due rettangoli che proiettano ombre su una griglia dietro di essa.

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>

    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

    <Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />

    <Rectangle x:Name="Rectangle2" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>

/// Add BackgroundGrid as a shadow receiver and elevate the casting buttons above it
SharedShadow.Receivers.Add(BackgroundGrid);

Rectangle1.Translation += new Vector3(0, 0, 16);
Rectangle2.Translation += new Vector3(120, 0, 32);

Ombra esterna

DropShadow non fornisce valori shadow predefiniti ed è necessario specificarli manualmente. Per le implementazioni di esempio, vedere la classe DropShadow .

Quale ombreggiatura devo usare?

• Tenere presente che lo scopo dell'ombreggiatura è fornire una gerarchia significativa, non come un semplice trattamento visivo.
• In genere, è consigliabile usare ThemeShadow, che fornisce valori di ombreggiatura coerenti.
• Per problemi relativi alle prestazioni, limitare il numero di ombreggiature, usare altri trattamenti visivi o usare DropShadow.
• Se sono disponibili scenari più avanzati per ottenere una gerarchia visiva, è consigliabile usare altri trattamenti visivi (ad esempio, colore). Se è necessaria l'ombreggiatura, usare DropShadow.

Articoli correlati

• Elevazione e sovrapposizione in Windows
• Materiali (acrilico/Mica)