Zoom semanticoSemantic zoom

Lo zoom semantico consente all'utente di passare tra due diverse visualizzazioni dello stesso contenuto, in modo da spostarsi rapidamente in un set di dati raggruppati di grandi dimensioni.Semantic zoom lets the user switch between two different views of the same content so that they can quickly navigate through a large set of grouped data.

  • La visualizzazione ingrandita è la visualizzazione principale del contenuto.The zoomed-in view is the main view of the content. Questa è la visualizzazione principale da usare per i singoli elementi di dati.This is the main view where you show individual data items.
  • La visualizzazione ridotta è una visualizzazione di livello più alto dello stesso contenuto.The zoomed-out view is a higher-level view of the same content. In genere puoi usare questa visualizzazione per visualizzare le intestazioni di gruppo per un set di dati raggruppato.You typically show the group headers for a grouped data set in this view.

Ad esempio, quando visualizza una rubrica di indirizzi, l'utente può ridurre la visualizzazione per passare rapidamente alla lettera "W" e ingrandirla in corrispondenza di tale lettera per vedere i nomi associati.For example, when viewing an address book, the user could zoom out to quickly jump to the letter "W", and zoom in on that letter to see the names associated with it.

API importanti: Classe SemanticZoom, Classe ListView, Classe GridViewImportant APIs: SemanticZoom class, ListView class, GridView class

Funzionalità:Features:

  • Le dimensioni della visualizzazione ridotta sono vincolate dai limiti del controllo zoom semantico.The size of the zoomed-out view is constrained by the bounds of the semantic zoom control.
  • Toccando un'intestazione di gruppo si cambia visualizzazione.Tapping on a group header toggles views. È possibile abilitare il movimento di avvicinamento delle dita per passare da una visualizzazione all'altra.Pinching as a way to toggle between views can be enabled.
  • Le intestazioni attive consentono di spostarsi tra le visualizzazioni.Active headers switch between views.

È il controllo giusto?Is this the right control?

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.Use a SemanticZoom control when you need to show a grouped data set that's large enough that it can't all be shown on one or two pages.

Non confondere lo zoom semantico con lo zoom ottico.Don't confuse semantic zooming with optical zooming. Anche se le interazioni e il comportamento di base sono gli stessi (visualizzare più o meno dettagli in base a un fattore di zoom), lo zoom ottico fa riferimento alla regolazione dell'ingrandimento o della riduzione di un'area di contenuto o un oggetto, come una fotografia.While they share both the same interaction and basic behavior (displaying more or less detail based on a zoom factor), optical zoom refers to the adjustment of magnification for a content area or object such as a photograph. Per informazioni su un controllo che esegue lo zoom ottico, vedi il controllo ScrollViewer.For info about a control that performs optical zooming, see the ScrollViewer control.

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app XAML Controls Gallery, fai clic qui per aprirla e vedere SemanticZoom in azione.If you have the XAML Controls Gallery app installed, click here to open the app and see the SemanticZoom in action.

Raccolta di controlli XAMLXAML Controls Gallery

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.The SemanticZoom section within the Controls Gallery demonstrates a navigation experience that allows users to quickly zoom in and out of grouped sections of control types.

Esempio di zoom semantico usato nella Raccolta di controlli XAML

App FotoPhotos app

Ecco uno zoom semantico usato nell'app Foto.Here's a semantic zoom used in the Photos app. Le foto sono raggruppate in base al mese.Photos are grouped by month. Selezionando un'intestazione relativa a un mese nella visualizzazione griglia predefinita, viene ridotta la visualizzazione elenco relativa ai mesi, per consentire di spostarsi più rapidamente.Selecting a month header in the default grid view zooms out to the month list view for quicker navigation.

Uno zoom semantico usato nell'app Foto

Creare uno zoom semanticoCreate a semantic zoom

Il controllo SemanticZoom non ha alcuna rappresentazione visiva propria.The SemanticZoom control doesn't have any visual representation of its own. 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.It's a host control that manages the transition between 2 other controls that provide the views of your content, typically ListView or GridView controls. Puoi impostare i controlli di visualizzazione sulle proprietà ZoomedInView e ZoomedOutView di SemanticZoom.You set the view controls to the ZoomedInView and ZoomedOutView properties of the SemanticZoom.

I 3 elementi necessari per uno zoom semantico sono:The 3 elements you need for a semantic zoom are:

  • Un'origine di dati raggruppati.A grouped data source. I gruppi sono specificati dalla definizione GroupStyle nella visualizzazione con zoom avanti.(Groups are defined by the GroupStyle definition in the zoomed-in view.)
  • Una visualizzazione ingrandita che mostra i dati a livello di elemento.A zoomed-in view that shows the item-level data.
  • Una visualizzazione ridotta che mostra i dati a livello di gruppo.A zoomed-out view that shows the group-level data.

Prima di usare uno zoom semantico, devi capire come usare una visualizzazione elenco con dati raggruppati.Before you use a semantic zoom, you should understand how to use a list view with grouped data. Per altre info, vedi ListView e GridView.For more info, see List view and grid view.

Nota  Per definire la visualizzazione ingrandita e quella ridotta del controllo SemanticZoom, puoi usare due controlli qualsiasi che implementano l'interfaccia ISemanticZoomInformation.Note  To define the zoomed-in view and the zoomed-out view of the SemanticZoom control, you can use any two controls that implement the ISemanticZoomInformation interface. Il framework XAML fornisce tre controlli che implementano questa interfaccia: ListView, GridView e Hub.The XAML framework provides 3 controls that implement this interface: ListView, GridView, and Hub.

Questo codice XAML mostra la struttura del controllo SemanticZoom.This XAML shows the structure of the SemanticZoom control. Assegna gli altri controlli alle proprietà ZoomedInView e ZoomedOutView.You assign other controls to the ZoomedInView and ZoomedOutView properties.

<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 relativa a SemanticZoom dell'esempio dei controlli di base dell'interfaccia utente XAML.The examples here are taken from the SemanticZoom page of the XAML UI Basics sample. Puoi scaricare l'esempio per vedere il codice completo, inclusa l'origine dati.You can download the sample to see the complete code including the data source. Lo zoom semantico usa un controllo GridView per fornire la visualizzazione ingrandita e un controllo ListView per quella ridotta.This semantic zoom uses a GridView to supply the zoomed-in view and a ListView for the zoomed-out view.

Definire la visualizzazione ingranditaDefine the zoomed-in view

Ecco il controllo GridView per la visualizzazione ingrandita.Here's the GridView control for the zoomed-in view. La visualizzazione ingrandita dovrebbe mostrare i singoli elementi di dati in gruppi.The zoomed-in view should display the individual data items in groups. Questo esempio mostra come visualizzare gli elementi in una griglia con un'immagine e del testo.This example shows how to display the items in a grid with an image and text.

<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.The look of the group headers is defined in the ZoomedInGroupHeaderTemplate resource. L'aspetto degli elementi è definito nella risorsa ZoomedInTemplate.The look of the items is defined in the ZoomedInTemplate resource.

<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 ridottaDefine the zoomed-out view

Il codice XAML definisce un controllo ListView per la visualizzazione ridotta.This XAML defines a ListView control for the zoomed-out view. Questo esempio mostra come visualizzare le intestazioni di gruppo come testo in un elenco.This example shows how to display the group headers as text in a list.

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

L'aspetto è definito nella risorsa ZoomedOutTemplate.The look is defined in the ZoomedOutTemplate resource.

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

Sincronizzare le visualizzazioniSynchronize the views

La visualizzazione ingrandita e quella ridotta devono essere sincronizzate in modo che se l'utente seleziona un gruppo in quella ridotta i relativi dettagli vengano visualizzati in quella ingrandita.The zoomed-in view and zoomed-out view should be synchronized, so if a user selects a group in the zoomed-out view, the details of that same group are shown in the zoomed-in view. Puoi usare un CollectionViewSource o aggiungere codice per sincronizzare le visualizzazioni.You can use a CollectionViewSource or add code to synchronize the views.

Tutti i controlli associati allo stesso oggetto CollectionViewSource avranno sempre lo stesso elemento corrente.Any controls that you bind to the same CollectionViewSource always have the same current item. Se entrambe le visualizzazioni usano lo stesso oggetto CollectionViewSource come origine dati, CollectionViewSource sincronizza le visualizzazioni automaticamente.If both views use the same CollectionViewSource as their data source, the CollectionViewSource synchronizes the views automatically. Per altre info, vedi CollectionViewSource.For more info, see CollectionViewSource.

Se non usi un elemento CollectionViewSource per sincronizzare le visualizzazioni, devi gestire l'evento ViewChangeStarted e sincronizzare gli elementi nel gestore dell'evento, come illustrato qui.If you don't use a CollectionViewSource to synchronize the views, you should handle the ViewChangeStarted event and synchronize the items in the event handler, as shown here.

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

ConsigliRecommendations

  • Quando usi lo zoom semantico nella tua app, assicurati che il layout degli elementi e la direzione di panoramica non cambino in base al livello di zoom.When using semantic zoom in your app, be sure that the item layout and panning direction don't change based on the zoom level. I layout e le interazioni di panoramica devono essere coerenti e prevedibili in tutti i livelli di zoom.Layouts and panning interactions should be consistent and predictable across zoom levels.
  • Lo zoom semantico permette all'utente di passare velocemente al contenuto, quindi ti consigliamo di limitare a tre il numero di pagine o schermate nella visualizzazione ridotta.Semantic zoom enables the user to jump quickly to content, so limit the number of pages/screens to three in the zoomed-out mode. Un livello eccessivo di panoramica riduce la praticità dello zoom semantico.Too much panning diminishes the practicality of semantic zoom.
  • Non usare lo zoom semantico per cambiare l'ambito del contenuto.Avoid using semantic zoom to change the scope of the content. Ad esempio, un album fotografico non deve passare a una visualizzazione cartella in Esplora file.For example, a photo album shouldn't switch to a folder view in File Explorer.
  • Usa una struttura e una semantica essenziale per la visualizzazione.Use a structure and semantics that are essential to the view.
  • Usa i nomi dei gruppi per gli elementi di una raccolta raggruppata.Use group names for items in a grouped collection.
  • Usa un ordinamento per una raccolta non raggruppata ma ordinata, ad esempio un ordinamento cronologico per le date o alfabetico per un elenco di nomi.Use sort ordering for a collection that is ungrouped but sorted, such as chronological for dates or alphabetical for a list of names.

Scaricare il codice di esempioGet the sample code