Zoom semantico

Lo zoom semantico permette all'utente di passare tra due diverse visualizzazioni dello stesso contenuto in modo che possa spostarsi rapidamente in un ampio set di dati raggruppati.

• La visualizzazione ingrandita è la visualizzazione principale del contenuto. Si tratta della visualizzazione principale in cui vengono mostrati singoli elementi di dati.
• La visualizzazione ridotta è una visualizzazione di livello superiore dello stesso contenuto. In genere in questa visualizzazione si mostrano le intestazioni di gruppo per un set di dati raggruppato.

Ad esempio, quando si visualizza una rubrica, l'utente può eseguire lo zoom indietro per passare rapidamente alla lettera "W" ed eseguire lo zoom avanti su questa lettera per visualizzare i nomi a essa associati.

Funzionalità:

• Le dimensioni della visualizzazione ridotta sono vincolate dai limiti del controllo zoom semantico.
• Toccare un'intestazione di gruppo per attivare o disattivare le visualizzazioni. È possibile abilitare l'avvicinamento delle dita come interazione per alternare le visualizzazioni.
• Le intestazioni attive passano da una visualizzazione a un'altra.

È il controllo giusto?

Usa un controllo SemanticZoom se vuoi visualizzare un set di dati raggruppati di dimensioni tali da non poter essere visualizzato completamente su una o due pagine.

Non confondere lo zoom semantico con lo zoom ottico. Sebbene condividano lo stesso comportamento di base e la stessa interazione (visualizzando più o meno dettagli in base a un fattore di zoom), lo zoom ottico fa riferimento alla regolazione dell'ingrandimento per un'area di contenuto o un oggetto, ad esempio una fotografia. Per informazioni su un controllo che esegue lo zoom ottico, vedere il controllo ScrollViewer.

Consigli

• Quando si usa lo zoom semantico nell'app, assicurarsi che il layout dell'elemento e la direzione di panoramica non cambino in base al livello di zoom. I layout e le interazioni di panoramica devono essere coerenti e prevedibili tra i livelli di zoom.
• Lo zoom semantico permette all'utente di passare rapidamente al contenuto, pertanto limitare il numero di pagine/schermate a tre nella modalità zoom indietro. Una panoramica eccessiva riduce la praticità dello zoom semantico.
• Evitare di usare lo zoom semantico per modificare l'ambito del contenuto. Ad esempio, un album fotografico non dovrebbe passare a una visualizzazione cartella in Esplora file.
• Usare una struttura e una semantica essenziali per la visualizzazione.
• Usare nomi di gruppi per elementi di una raccolta raggruppata.
• Usare un ordinamento per una raccolta non raggruppata ma ordinata, ad esempio cronologico per le date o alfabetico per un elenco di nomi.

Esempi

Raccolta WinUI

La sezione SemanticZoom all'interno della raccolta di controlli illustra un'esperienza di navigazione che consente agli utenti di fare velocemente zoom avanti e indietro sulle sezioni raggruppate di tipi di controlli.

App Foto

Ecco uno zoom semantico usato nell'app Foto. Le foto sono raggruppate per mese. Se si seleziona un'intestazione mese nella visualizzazione griglia predefinita, viene visualizzata la visualizzazione elenco mesi per una navigazione più rapida.

Piattaforma UWP e WinUI 2

Le API per questo controllo sono presenti nello spazio dei nomi Windows.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli più recenti per tutti i controlli.

Creare uno zoom semantico

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Il controllo SemanticZoom non ha alcuna rappresentazione visiva propria. Si tratta di un controllo host che gestisce la transizione tra altri due controlli che forniscono le visualizzazioni del contenuto, in genere i controlli ListView o GridView. Impostare i controlli di visualizzazione sulle proprietà ZoomedInView e ZoomedOutView di SemanticZoom.

I 3 elementi necessari per uno zoom semantico sono:

• Un'origine di dati raggruppati. I gruppi sono specificati dalla definizione GroupStyle nella visualizzazione con zoom avanti.
• Visualizzazione ingrandita che mostra i dati a livello di elemento.
• Visualizzazione ridotta che mostra i dati a livello di gruppo.

Prima di usare uno zoom semantico, è necessario comprendere come usare una visualizzazione elenco con dati raggruppati. Per altre info, vedi ListView e GridView.

Questo XAML mostra la struttura del controllo SemanticZoom. È possibile assegnare altri controlli alle proprietà ZoomedInView e ZoomedOutView.

<SemanticZoom>
   <SemanticZoom.ZoomedInView>
       <!-- Put the GridView for the zoomed in view here. -->
   </SemanticZoom.ZoomedInView>

   <SemanticZoom.ZoomedOutView>
       <!-- Put the ListView for the zoomed out view here. -->
   </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Questi esempi sono tratti dalla pagina SemanticZoom dell'esempio della Raccolta WinUI. Puoi scaricare l'esempio per vedere il codice completo, inclusa l'origine dati. Questo zoom semantico usa un controllo GridView per la visualizzazione ingrandita e un controllo ListView per la visualizzazione ridotta.

Definire la visualizzazione ingrandita

Ecco il controllo GridView per la visualizzazione ingrandita. La visualizzazione ingrandita deve visualizzare i singoli elementi di dati in gruppi. Questo esempio mostra come visualizzare gli elementi in una griglia con un'immagine e un testo.

<SemanticZoom.ZoomedInView>
    <GridView ItemsSource="{x:Bind cvsGroups.View}"
              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedInTemplate}">
        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}"/>
        </GridView.GroupStyle>
    </GridView>
</SemanticZoom.ZoomedInView>

L'aspetto delle intestazioni di gruppo è definito nella risorsa ZoomedInGroupHeaderTemplate. L'aspetto degli elementi è definito nella risorsa ZoomedInTemplate.

<DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:ControlInfoDataGroup">
    <TextBlock Text="{x:Bind Title}"
               Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
               Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>

<DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
    <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
        <Image Source="{x:Bind ImagePath}" Height="80" Width="80"/>
        <StackPanel Margin="20,0,0,0">
            <TextBlock Text="{x:Bind Title}"
                       Style="{StaticResource BaseTextBlockStyle}"/>
            <TextBlock Text="{x:Bind Subtitle}"
                       TextWrapping="Wrap" HorizontalAlignment="Left"
                       Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

Definire la visualizzazione ridotta

Questo XAML definisce un controllo ListView per la visualizzazione ridotta. Questo esempio mostra come visualizzare le intestazioni di gruppo come testo in un elenco.

<SemanticZoom.ZoomedOutView>
    <ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>

L'aspetto è definito nella risorsa ZoomedOutTemplate.

<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
    <TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}"
               Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>

Sincronizzare le visualizzazioni

La visualizzazione ingrandita e la visualizzazione ridotta devono essere sincronizzate, pertanto se un utente seleziona un gruppo nella visualizzazione ridotta, i dettagli di quello stesso gruppo vengono visualizzati nella visualizzazione ingrandita. È possibile usare CollectionViewSource o aggiungere codice per sincronizzare le visualizzazioni.

I controlli associati allo stesso elemento CollectionViewSource hanno sempre lo stesso elemento corrente. Se entrambe le visualizzazioni usano lo stesso elemento CollectionViewSource come origine dati, CollectionViewSource sincronizza automaticamente le visualizzazioni. Per altre informazioni, vedere CollectionViewSource.

Se non si usa un elemento CollectionViewSource per sincronizzare le visualizzazioni, gestire l'evento ViewChangeStarted e sincronizzare gli elementi nel gestore, come mostrato qui.

<SemanticZoom x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted">

private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
    if (e.IsSourceZoomedInView == false)
    {
        e.DestinationItem.Item = e.SourceItem.Item;
    }
}

Scaricare il codice di esempio

• Esempio di Raccolta WinUI: visualizza tutti i controlli XAML in un formato interattivo.

Articoli correlati

• Nozioni di base sulla progettazione della struttura di spostamento
• Visualizzazione elenco e visualizzazione griglia
• Modelli e contenitori di elementi