Z-depth e ombreggiatura

La creazione di una gerarchia visiva di elementi nell'interfaccia utente facilita la scansione dell'interfaccia e consente di identificare le informazioni importanti su cui concentrarsi. Per ottenere tale gerarchia nel software, viene spesso usato l'effetto di elevazione, che consiste nel mettere in evidenza determinati elementi dell'interfaccia utente. Questo articolo illustra come creare l'effetto di elevazione in un'app di Windows usando la profondità z e l'ombreggiatura.

Profondità z è un termine usato dagli autori di app 3D per indicare la distanza tra due superfici lungo l'asse z. Indica pertanto quanto un oggetto è vicino alla persona che guarda. Si tratta di un concetto analogo alle coordinate x/y, ma nella direzione z.

Le app di Windows usano le ombreggiature per esprimere la profondità e aggiungere una gerarchia visiva. A tale scopo, l'asse Z fornisce un percorso di codifica semplice. Tuttavia, le ombre sono emulate,; non vengono visualizzati nel vero senso 3D. In questo modo è possibile ottenere la sensazione di profondità senza sacrificare le prestazioni dell'interfaccia utente dell'app.

Perché è opportuno usare la profondità z?

Nel mondo fisico tendiamo a concentrarci sugli oggetti più vicini a noi. Questo istinto spaziale può essere applicato anche all'interfaccia utente digitale. Ad esempio, se avvicini un elemento all'utente, quest'ultimo si concentrerà istintivamente su tale elemento. Avvicinando gli elementi dell'interfaccia dell'utente sull'asse z, è possibile stabilire la gerarchia visiva tra gli oggetti, consentendo agli utenti di completare le attività in modo naturale ed efficiente all'interno dell'app.

Che cos'è l'ombreggiatura?

L'ombreggiatura è un modo in cui l'utente percepisce l'effetto di elevazione. La luce sopra un oggetto in posizione elevata crea un'ombreggiatura sulla superficie sottostante. Più è elevata la posizione dell'oggetto, più risulta estesa e sfumata l'ombreggiatura. Non è necessario che gli oggetti in posizione elevata nell'interfaccia utente abbiano le ombreggiature, ma esse contribuiscono a dare la sensazione dell'elevazione.

Nelle app di Windows le ombreggiature devono essere usate con uno scopo specifico anziché per motivazioni estetiche. L'uso di un numero eccessivo di ombreggiature, infatti, ridurrà o eliminerà del tutto la capacità di far focalizzare l'utente sugli elementi più significativi.

Se si usano controlli standard, le ombreggiature sono già incorporate nell'interfaccia utente. È possibile tuttavia includere manualmente le ombreggiature nell'interfaccia utente usando le API ThemeShadow o DropShadow.

ThemeShadow

Il tipo ThemeShadow può essere applicato a qualsiasi elemento XAML per creare ombre in modo appropriato in base alle coordinate x, y, z.

• Applicare le ombreggiature agli elementi in base al valore di profondità z, simulando la profondità.
• Mantenere le ombre coerenti in tutte le applicazioni grazie alla relativa estetica.

Di seguito viene illustrato il modo in cui ThemeShadow è stato implementato in un riquadro a comparsa di menu (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 creare le ombreggiature da una profondità di 32 pixel, se non specificato diversamente:

• Menu di scelta rapida, barra dei comandi, riquadro a comparsa della barra dei comandi, MenuBar
• Finestre di dialogo e riquadri a comparsa (finestra di dialogo a 128 pixel)
• NavigationView
• ComboBox, DropDownButton, SplitButton, ToggleSplitButton
• TeachingTip
• AutoSuggestBox
• Controlli per calendario, data e ora
• Descrizione comando (16 pixel)
• Casella numero
• TabView
• Controllo di trasporto multimediale, InkToolbar
• BreadcrumbBar
• Animazioni connesse

ThemeShadow nei popup

Accade spesso che nell'interfaccia utente dell'app venga usato un popup per gli scenari in cui richiedi l'attenzione e un intervento rapido dell'utente. Queste sono situazioni veramente esemplificative dell'opportunità di usare l'ombreggiatura per creare una gerarchia nell'interfaccia utente dell'app.

ThemeShadow crea automaticamente le ombreggiature se applicato a qualsiasi elemento XAML in un oggetto Popup. Creerà le ombreggiature per il contenuto di sfondo dell'app dietro di esso e per tutti gli altri popup aperti sotto di esso.

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

Questo esempio mostra un rettangolo in un popup che crea un'ombreggiatura per il contenuto di sfondo dell'app e per 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 del tipo ThemeShadow predefinito nei controlli riquadro a comparsa (Flyout) personalizzati

I controlli basati su Flyout, DatePickerFlyout, MenuFlyout o TimePickerFlyout usano automaticamente ThemeShadow per creare un'ombreggiatura.

Se l'ombreggiatura predefinita non è corretta per il contenuto del controllo in uso, puoi disabilitarla impostando la proprietà IsDefaultShadowEnabled su false nell'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 valutare attentamente l'uso dell'ombreggiatura e limitarlo ai casi in cui consente di creare una gerarchia visiva significativa. Viene tuttavia fornito un modo per creare un'ombreggiatura da qualsiasi elemento dell'interfaccia utente nel caso in cui tu disponga di scenari avanzati che la richiedono.

Per creare un'ombreggiatura da un elemento XAML non incluso in un popup, devi specificare in modo esplicito gli altri elementi che possono ricevere l'ombreggiatura nella raccolta ThemeShadow.Receivers. I ricevitori non possono essere un predecessore del caster nell'albero visivo.

Questo esempio mostra due rettangoli che creano ombreggiature su una griglia dietro di essi:

<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);

DropShadow

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

Quale ombreggiatura è consigliabile usare?

• Tieni presente che lo scopo dell'ombreggiatura è fornire una gerarchia significativa, non un semplice trattamento visivo.
• In genere, è consigliabile usare ThemeShadow, che fornisce valori di ombreggiatura coerenti.
• Per evitare problemi di prestazioni, limita il numero di ombreggiature, usa altri trattamenti visivi oppure usa DropShadow.
• Se sono presenti scenari più avanzati per cui ottenere una gerarchia visiva, considera la possibilità di usare un altro trattamento visivo (ad esempio, il colore). Se è necessaria l'ombreggiatura, usa DropShadow.