Partilhar via

Zoom semântico

  • Artigo

O zoom semântico permite que o usuário alterne entre duas exibições diferentes do mesmo conteúdo para que possa navegar rapidamente por um grande conjunto de dados agrupados.

  • A vista ampliada é a vista principal do conteúdo. Esta é a vista principal onde mostra itens de dados individuais.
  • A vista reduzida é uma vista de nível superior do mesmo conteúdo. Normalmente, você mostra os cabeçalhos de grupo para um conjunto de dados agrupados nesta exibição.

Por exemplo, ao visualizar um catálogo de endereços, o usuário pode reduzir o zoom para saltar rapidamente para a letra "W" e aumentar o zoom nessa letra para ver os nomes associados a ela.

Características:

  • O tamanho da vista reduzida é limitado pelos limites do controlo de zoom semântico.
  • Clicar em um cabeçalho de grupo alterna as visões. A opção de beliscar como forma de alternar entre visões pode ser ativada.
  • Os cabeçalhos ativos alternam entre modos de exibição.

Será este o controlo correto?

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

Não confunda zoom semântico com zoom ótico. Embora compartilhem a mesma interação e o mesmo comportamento básico (exibindo mais ou menos detalhes com base em um fator de zoom), o zoom ótico refere-se ao ajuste da ampliação para uma área de conteúdo ou objeto, como uma fotografia. Para obter informações sobre um controlo que executa zoom ótico, consulte o controlo ScrollViewer.

Recomendações

  • Ao usar o zoom semântico em seu aplicativo, certifique-se de que o layout do item e a direção do movimento panorâmico não sejam alterados com base no nível de zoom. Os layouts e as interações panorâmicas devem ser consistentes e previsíveis em todos os níveis de zoom.
  • O zoom semântico permite que o usuário salte rapidamente para o conteúdo, portanto, limite o número de páginas/telas a três no modo reduzido. O movimento panorâmico excessivo diminui a praticidade do zoom semântico.
  • Evite usar zoom semântico para alterar o escopo do conteúdo. Por exemplo, um álbum de fotografias não deve mudar para uma vista de pastas no Explorador de Ficheiros.
  • Use uma estrutura e semântica que são essenciais para a visualização.
  • Use nomes de grupo para itens em uma coleção agrupada.
  • Use a ordenação de classificação para uma coleção não agrupada, mas classificada, como cronológica para datas ou alfabética para uma lista de nomes.

Exemplos

A seção SemanticZoom dentro da Galeria de Controles demonstra uma experiência de navegação que permite aos usuários aumentar e reduzir rapidamente o zoom de seções agrupadas de tipos de controle.

exemplo de zoom semântico usado na Galeria WinUI

Aplicação Fotografias

Aqui está um zoom semântico usado no aplicativo Fotos. As fotos são agrupadas por mês. A seleção de um cabeçalho de mês na vista de grelha predefinida reduz o zoom para a vista de lista de meses para uma navegação mais rápida.

Um zoom semântico usado no aplicativo Fotos

Criar um zoom semântico

Abra o aplicativo WinUI 3 Gallery e veja SemanticZoom em ação

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

O controlo SemanticZoom não possui representação visual própria. É um controlo anfitrião que gere a transição entre 2 outros controlos que fornecem as vistas do seu conteúdo, normalmente controlos ListView ou GridView. Você define os controles de exibição para as propriedades ZoomedInView e ZoomedOutView do SemanticZoom.

Os 3 elementos necessários para um zoom semântico são:

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

Antes de usar um zoom semântico, você deve entender como usar um modo de exibição de lista com dados agrupados. Para obter mais informações, consulte vista de lista e vista de grelha.

Observação

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

Este XAML mostra a estrutura do controle SemanticZoom. Você atribui outros 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 retirados da página SemanticZoom do exemplo WinUI Gallery. Você pode baixar o exemplo para ver o código completo, incluindo a fonte de dados. Esse zoom semântico usa um GridView para fornecer o modo de exibição ampliado e um ListView para o modo de exibição reduzido.

Definir a vista ampliada

Aqui está o controle GridView para o modo de exibição ampliado. O modo de exibição ampliado deve exibir os itens de dados individuais em grupos. Este exemplo mostra como exibir os itens em uma grade com uma imagem e 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 vista ampliada

Esse XAML define um controle ListView para o modo de exibição reduzido. 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 vistas

A vista ampliada e a vista reduzida devem ser sincronizadas, por isso, se um utilizador selecionar um grupo na vista reduzida, os detalhes desse mesmo grupo são mostrados na vista ampliada. Você pode usar um CollectionViewSource ou adicionar código para sincronizar as exibições.

Todos os controles que você vincular ao mesmo CollectionViewSource sempre têm o mesmo item atual. Se ambos os modos de exibição usarem o mesmo CollectionViewSource como fonte de dados, o CollectionViewSource sincronizará os modos de exibição automaticamente. Para obter mais informações, consulte CollectionViewSource.

Se não utilizares um CollectionViewSource para sincronizar as vistas, deves tratar do evento ViewChangeStarted e sincronizar os itens no manipulador de eventos, 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;
    }
}

UWP e WinUI 2

Importante

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

Esta seção contém informações que você precisa 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 mais recente WinUI 2 para obter os estilos e modelos mais atuais para todos os controles.