Zoom Semântico

Zoom Semântico permite que o usuário alterne duas exibições diferentes do mesmo conteúdo, de maneira que possa navegar rapidamente em um grande conjunto de dados agrupados.

  • A exibição ampliada é o modo de exibição principal do conteúdo. Essa é a exibição principal na qual você mostra itens de dados individuais.
  • A exibição reduzida é um modo de exibição de alto nível do mesmo conteúdo. Normalmente, você mostra os cabeçalhos de grupo para um conjunto de dados agrupado nesse modo de exibição.

Por exemplo, ao exibir um catálogo de endereços, o usuário pode reduzir a fim de ir rapidamente para a letra "W" e ampliar essa letra para ver os nomes associados a ela.

Recursos:

  • O tamanho da exibição reduzida é restrito pelos limites do controle de zoom semântico.
  • Ao tocar em um cabeçalho de grupo, os modos de exibição são alternados. É possível habilitar a pinçagem para alternar entre os modos de exibição.
  • Os cabeçalhos ativos alternam entre os modos de exibição.

Esse é o controle correto?

Use um controle SemanticZoom quando precisar mostrar um conjunto de dados agrupado que seja suficientemente grande para que ele não possa ser todo mostrado em uma ou duas páginas.

Não confunda zoom semântico com zoom óptico. Apesar deles compartilharem a mesma interação e o mesmo comportamento básico (exibindo mais ou menos detalhes baseados em um fator de zoom), o zoom óptico se refere ao ajuste da ampliação para uma área de conteúdo ou objeto como uma fotografia. Para obter informações sobre um controle que executa ampliação óptica, confira o controle ScrollViewer.

Recomendações

  • Ao usar o zoom semântico em seu aplicativo, o layout do item e a direção do movimento panorâmico não devem mudar de acordo com o nível de zoom. Os layouts e as interações de movimento panorâmico devem ser consistentes e previsíveis em todos os níveis de zoom.
  • Como o zoom semântico, o usuário pode saltar rapidamente para o conteúdo. Então, limite o número de páginas/telas a três no modo com zoom reduzido. Muito movimento panorâmico diminui a viabilidade do zoom semântico.
  • Evite usar o zoom semântico para alterar o escopo do conteúdo. Por exemplo, um álbum de fotos não deve alternar para um modo de exibição de pasta no Gerenciador de Arquivos.
  • Use uma estrutura e a semântica essenciais ao modo de exibição.
  • Use os nomes dos grupos para os itens em uma coleção agrupada.
  • Use ordens de classificação para uma coleção desagrupada, porém classificada; por exemplo, a ordem cronológica para datas e ordem alfabética para uma lista de nomes.

Exemplos

A seção SemanticZoom na Galeria de Controles demonstra uma experiência de navegação que permite aos usuários ampliar e reduzir rapidamente as seções agrupadas dos tipos de controle.

exemplo de zoom semântico usado na Galeria do WinUI

Aplicativo Fotos

Eis um zoom semântico usado no aplicativo Fotos. As fotos são agrupadas por mês. A seleção do cabeçalho de um mês na exibição em grade padrão é reduzida para a exibição de lista do mês para uma navegação mais rápida.

Um zoom semântico usado no aplicativo Fotos

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK do Aplicativo Windows e o WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam o WinUI 2. Consulte a referência da API da UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações necessárias para usar o controle em um aplicativo UWP ou WinUI 2.

As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls .

Recomendamos usar o WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles.

Criar um Zoom Semântico

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub

O controle SemanticZoom não tem nenhuma representação visual dele próprio. Ele é um controle de host que gerencia a transição entre 2 outros controles que fornecem as exibição do conteúdo, normalmente os controles ListView ou GridView. Você define os controles de exibição como as propriedades ZoomedInView e ZoomedOutView do SemanticZoom.

Os 3 elementos de que você precisa para um Zoom Semântico são:

  • Uma fonte de dados agrupada. (Os grupos são definidos pela definição de GroupStyle na exibição ampliada.)
  • Uma exibição ampliada que mostre os dados no nível do item.
  • Uma exibição reduzida que mostre os dados no nível do grupo.

Antes de usar um Zoom Semântico, você deve entender como usar uma exibição de lista com dados agrupados. Para saber mais, confira Exibição de lista e exibição de grade.

Observação

Para definir a exibição ampliada e a exibição ampliada do controle SemanticZoom, você pode usar os dois controles que implementam a interface ISemanticZoomInformation . A estrutura XAML fornece 3 controles que implementam essa interface: ListView, GridView e Hub.

Esta XAML mostra a estrutura do controle SemanticZoom. Você atribui outros os controles às propriedades 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>

Os exemplos aqui são obtidos da página SemanticZoom do exemplo da Galeria WinUI. Você pode baixar a amostra para conferir o código completo, inclusive a origem de dados. O Zoom Semântico usa um GridView para fornecer a exibição ampliada e um ListView para a exibição reduzida.

Definir a exibição ampliada

Aqui está o controle GridView para a exibição ampliada. A exibição ampliada deve mostrar os itens de dados individuais em grupos. Este exemplo mostra como exibir os itens em uma grade com uma imagem e um texto.

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

A aparência dos cabeçalhos de grupo é definida no recurso ZoomedInGroupHeaderTemplate. A aparência dos itens é definida no recurso 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>

Definir a exibição reduzida

Esta XAML define um controle ListView para a exibição reduzida. Este exemplo mostra como exibir os cabeçalhos de grupo como texto em uma lista.

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

A aparência é definida no recurso ZoomedOutTemplate.

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

Sincronizar as exibições

As exibições ampliadas e reduzidas devem ser sincronizadas, de forma que se um usuário selecionar um grupo na exibição reduzida, os detalhes desse mesmo grupo sejam mostrados na exibição ampliada. Você pode usar um CollectionViewSource ou adicionar código para sincronizar as exibições.

Quaisquer controles associados ao mesmo CollectionViewSource sempre terão o mesmo item atual. Se as duas exibições usarem o mesmo CollectionViewSource como fonte de dados, o CollectionViewSource sincronizará as exibições automaticamente. Para saber mais, consulte a CollectionViewSource.

Se você não usar um CollectionViewSource para sincronizar as exibições, será preciso manipular o evento ViewChangeStarted e sincronizar os itens no manipulador de eventos como esse, conforme mostrado aqui.

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

Obter o código de exemplo