Zoom semánticoSemantic zoom

El zoom semántico permite que el usuario cambie entre dos vistas distintas del mismo contenido para poder navegar rápidamente a través de un gran conjunto de datos agrupados.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 vista ampliada es la vista principal del contenido.The zoomed-in view is the main view of the content. Esta es la vista principal donde se muestran los elementos de datos individuales.This is the main view where you show individual data items.
  • La vista alejada es un nivel superior del mismo contenido.The zoomed-out view is a higher-level view of the same content. Por lo general, en esta vista se muestran los encabezados de grupo para un conjunto de datos agrupados.You typically show the group headers for a grouped data set in this view.

Por ejemplo, al ver una libreta de direcciones, el usuario puede alejarse para pasar rápidamente a la letra "W" y ampliar para ver los nombres con esa letra.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 importantes: Clase SemanticZoom, Clase ListView, Clase GridViewImportant APIs: SemanticZoom class, ListView class, GridView class

Funciones:Features:

  • El tamaño de la vista alejada está restringido por los límites del control del zoom semántico.The size of the zoomed-out view is constrained by the bounds of the semantic zoom control.
  • Al pulsar en un encabezado de grupo, se alterna entre las vistas.Tapping on a group header toggles views. Se puede habilitar el gesto de reducir como una forma de alternar entre las vistas.Pinching as a way to toggle between views can be enabled.
  • Los encabezados activos cambian entre vistas.Active headers switch between views.

¿Es este el control adecuado?Is this the right control?

Usa un control SemanticZoom si es necesario para mostrar un conjunto de datos agrupado lo suficientemente grande como para que no se pueda mostrar en una o dos páginas.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.

No confundas el zoom semántico con el zoom óptico.Don't confuse semantic zooming with optical zooming. Aunque comparten la misma interacción y el comportamiento básico (muestran más o menos detalle en función de un factor de zoom), el zoom óptico hace referencia al ajuste de ampliación de un área de contenido o un objeto, como una fotografía.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. Para obtener información sobre un control que aplique el zoom óptico, consulta el control ScrollViewer.For info about a control that performs optical zooming, see the ScrollViewer control.

EjemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Si tienes instalada la aplicación Galería de controles XAML, haz clic aquí para abrirla y ver SemanticZoom en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see the SemanticZoom in action.

XAML Controls GalleryXAML Controls Gallery

En la sección SemanticZoom de la galería de controles se muestra una experiencia de navegación que permite a los usuarios acercar y alejar rápidamente secciones agrupadas de tipos de control.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.

ejemplo de zoom semántico usado en la Galería de controles de XAMl

Aplicación FotosPhotos app

Este es un zoom semántico usado en la aplicación Fotos.Here's a semantic zoom used in the Photos app. Las fotos se agrupan por mes.Photos are grouped by month. Al seleccionar un encabezado de mes en la vista de cuadrícula predeterminada, se aleja a la vista de lista de mes para obtener una navegación más rápida.Selecting a month header in the default grid view zooms out to the month list view for quicker navigation.

Un zoom semántico en la aplicación Fotos

Creación de un zoom semánticoCreate a semantic zoom

El control SemanticZoom no tiene una representación visual de sí mismo.The SemanticZoom control doesn't have any visual representation of its own. Es un control de host que administra la transición entre otros 2 controles que proporcionan las vistas de tu contenido, normalmente los controles 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. Puedes establecer los controles de vista en las propiedades ZoomedInView y ZoomedOutView de SemanticZoom.You set the view controls to the ZoomedInView and ZoomedOutView properties of the SemanticZoom.

Los 3 elementos que necesitas para un zoom semántico son:The 3 elements you need for a semantic zoom are:

  • Un origen de datos agrupados.A grouped data source. (Los grupos se definen mediante la definición de GroupStyle en la vista ampliada).(Groups are defined by the GroupStyle definition in the zoomed-in view.)
  • Una vista ampliada que muestre los datos a nivel de elemento.A zoomed-in view that shows the item-level data.
  • Una vista alejada que muestre los datos a nivel de grupo.A zoomed-out view that shows the group-level data.

Antes de usar el zoom semántico, debes saber cómo usar una vista de lista con los datos agrupados.Before you use a semantic zoom, you should understand how to use a list view with grouped data. Para más información, consulte Vista de lista y vista de cuadrícula.For more info, see List view and grid view.

Nota Para definir la vista ampliada y la vista reducida del control SemanticZoom, puedes usar cualquiera de los dos controles que implementan la interfaz  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. El marco XAML proporciona 3 controles que implementan esta interfaz: ListView, GridView y Hub.The XAML framework provides 3 controls that implement this interface: ListView, GridView, and Hub.

Este XAML muestra la estructura del control SemanticZoom.This XAML shows the structure of the SemanticZoom control. Puedes asignar otros controles a las propiedades ZoomedOutView y ZoomedInView.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>

Estos ejemplos se han tomado de la página SemanticZoom de la Ejemplo de conceptos básicos de interfaz de usuario de XAML.The examples here are taken from the SemanticZoom page of the XAML UI Basics sample. Puedes descargar el ejemplo para ver el código completo, incluido el origen de los datos.You can download the sample to see the complete code including the data source. El zoom semántico usa un control GridView para proporcionar la vista ampliada y un control ListView para la vista alejada.This semantic zoom uses a GridView to supply the zoomed-in view and a ListView for the zoomed-out view.

Definición de la vista ampliadaDefine the zoomed-in view

Este es el control GridView para la vista ampliada.Here's the GridView control for the zoomed-in view. La vista ampliada muestra los elementos de datos individuales en grupos.The zoomed-in view should display the individual data items in groups. En este ejemplo se muestra cómo visualizar los elementos en una cuadrícula con una imagen y texto.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>

El aspecto de los encabezados de grupo se define en el recurso ZoomedInGroupHeaderTemplate.The look of the group headers is defined in the ZoomedInGroupHeaderTemplate resource. La apariencia de los elementos se define en el recurso 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>

Definición de la vista reducidaDefine the zoomed-out view

Este código XAML define un control ListView para la vista alejada.This XAML defines a ListView control for the zoomed-out view. Este ejemplo muestra cómo mostrar los encabezados de grupo como texto en una lista.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>

El aspecto se define en el recurso 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>

Sincronizar las vistasSynchronize the views

La vista alejada y la vista ampliada deberían estar sincronizadas, de modo que si un usuario sincroniza un grupo en la vista alejada, los detalles de ese mismo grupo se muestran en la vista ampliada.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. Puedes usar una clase CollectionViewSource o agregar código para sincronizar las vistas.You can use a CollectionViewSource or add code to synchronize the views.

Todos los controles que vínculos a la misma clase CollectionViewSource tendrán siempre el mismo elemento actual.Any controls that you bind to the same CollectionViewSource always have the same current item. Si las dos vistas usan el mismo CollectionViewSource que su origen de datos, la clase CollectionViewSource sincroniza las vistas automáticamente.If both views use the same CollectionViewSource as their data source, the CollectionViewSource synchronizes the views automatically. Para obtener más información, consulta CollectionViewSource.For more info, see CollectionViewSource.

Si no usas CollectionViewSource para sincronizar las vistas, deberías controlar el evento ViewChangeStarted y sincronizar los elementos del controlador de eventos, tal como se muestra aquí.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;
    }
}

RecomendacionesRecommendations

  • Al usar el zoom semántico en la aplicación, asegúrate de que el diseño de los elementos y la dirección del movimiento panorámico no cambian en función del nivel de 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. Las interacciones de movimiento panorámico y de diseño deben ser predecibles y coherentes en todos los niveles de zoom.Layouts and panning interactions should be consistent and predictable across zoom levels.
  • El zoom semántico permite al usuario saltar rápidamente al contenido, de forma que se limita el número de páginas y pantallas a tres en el modo alejado.Semantic zoom enables the user to jump quickly to content, so limit the number of pages/screens to three in the zoomed-out mode. Demasiado movimiento panorámico disminuye la utilidad del zoom semántico.Too much panning diminishes the practicality of semantic zoom.
  • Evita usar el zoom semántico para cambiar el ámbito del contenido.Avoid using semantic zoom to change the scope of the content. Por ejemplo, un álbum de fotos no debería cambiar a una vista de carpeta en el Explorador de archivos.For example, a photo album shouldn't switch to a folder view in File Explorer.
  • Usa una estructura y una semántica que sean esenciales para la vista.Use a structure and semantics that are essential to the view.
  • Usa los nombres de los grupos para elementos en una colección agrupada.Use group names for items in a grouped collection.
  • Usa criterios de ordenación de una colección que esté sin agrupar, pero ordenada, como orden cronológico de fechas u orden alfabético de una lista de nombres.Use sort ordering for a collection that is ungrouped but sorted, such as chronological for dates or alphabetical for a list of names.

Obtención del código de ejemploGet the sample code