Início rápido: adicionando controles SemanticZoom (aplicativos da Windows Store em C#/VB/C++ e XAML)

Aprenda como usar o controle SemanticZoom para dar zoom entre exibições do mesmo conteúdo.

Pré-requisitos

O que é o controle SemanticZoom?

O controle SemanticZoom permite que o usuário aplique zoom entre duas exibições diferentes do mesmo conteúdo, tornando possível navegar rapidamente de uma seção de um grande conjunto de dados para outra. A exibição ampliada é a exibição principal do conteúdo que oferece aos usuários uma visão detalhada dos itens. A exibição reduzida é uma exibição de alto nível do mesmo conteúdo representado de uma forma que permita que os usuários naveguem rapidamente por ele. Por exemplo, ao exibir um catálogo de endereços, o usuário pode reduzir para navegar pelos nomes que começam com a letra "W" e ampliar essa letra e ver os nomes associados a ela.

Para fornecer este recurso de zoom, o controle SemanticZoom usa dois outros controles: um para fornecer a exibição ampliada e outro para fornecer a exibição reduzida. Estes controles podem ser quaisquer dois controles que implementem a interface ISemanticZoomInformation. A estrutura da linguagem XAML oferece diversos controles que implementam essa interface: ListView, GridView e Hub. Os exemplos neste início rápido mostram como usar SemanticZoom com dois controles GridView.

Não confunda zoom semântico com zoom ótico. 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 ótico 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, veja o controle ScrollViewer.

Adicione o controle SemanticZoom

Na sua marcação, crie o controle SemanticZoom. Você atribuirá os controles GridView às propriedades ZoomedOutView e ZoomedInView.

  • Em seu XAML, adicione o controle SemanticZoom. Este exemplo mostra a marcação antes de os controles GridView serem adicionados.
    
    <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
    
        <SemanticZoom.ZoomedOutView>
            <!-- Put the GridView for the zoomed out view here. -->   
        </SemanticZoom.ZoomedOutView>
    
        <SemanticZoom.ZoomedInView>
            <!-- Put the GridView for the zoomed in view here. -->       
        </SemanticZoom.ZoomedInView>
    
    </SemanticZoom>
    
    

Definir exibições ampliadas e reduzidas

Este controle SemanticZoom usa dois controles GridView: um para fornecer a exibição ampliada e um para a exibição reduzida.

Observação  Para obter o código completo deste exemplo, veja Amostra de SemanticZoom e agrupamento de GridView em XAML.

  1. Em seu XAML, defina um controle GridView para a exibição reduzida. Este exemplo mostra como exibir os cabeçalhos de grupo em uma grade de quadrados azuis.
    
    
    <Page.Resources>
        <CollectionViewSource x:Name="cvs2" IsSourceGrouped="true"/>
    </Page.Resources>
    
    ...
    
    <SemanticZoom x:Name="semanticZoom">
        <SemanticZoom.ZoomedOutView>
            <GridView Foreground="White"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Group.Key}" 
                       FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="2"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="4" />
                        <Setter Property="Padding" Value="10" />
                        <Setter Property="Background" Value="#FF25A1DB" />
                        <Setter Property="BorderThickness" Value="1" />
                        <Setter Property="HorizontalContentAlignment" Value="Left" />
                        <Setter Property="VerticalContentAlignment" Value="Bottom" />
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </SemanticZoom.ZoomedOutView>
        
        <SemanticZoom.ZoomedInView>
        ...  
        </SemanticZoom.ZoomedInView>
    </SemanticZoom>
    
    
  2. Defina outro controle GridView para a exibição ampliada. A exibição ampliada deve exibir a coleção de dados completa. Este exemplo mostra como exibir a coleção completa em uma grade com uma imagem e um texto.
    
    
    <Page.Resources>
        <CollectionViewSource x:Name="cvs2" IsSourceGrouped="true"/>
    </Page.Resources>
    
    ...
    
    <SemanticZoom x:Name="semanticZoom">
        <SemanticZoom.ZoomedOutView>
        ...
        </SemanticZoom.ZoomedOutView>
        
        <SemanticZoom.ZoomedInView>
            <GridView x:Name="ItemsGridView" IsSwipeEnabled="True"
                      ItemsSource="{Binding Source={StaticResource cvs2}}"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="10,5,0,5" 
                                    HorizontalAlignment="Left" Background="White">
                            <Image Source="{Binding Image}" Height="60" Width="60" 
                                   VerticalAlignment="Center" Margin="0,0,10,0"/>
                            <StackPanel>
                                <TextBlock Text="{Binding Title}" TextWrapping="Wrap" 
                                           Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                           Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" 
                                           FontFamily="Segoe UI" FontSize="14.667" FontWeight="Light"/>
                                <TextBlock Text="{Binding Category}" TextWrapping="Wrap"                                                    
                                           Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                           Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" 
                                           FontFamily="Segoe UI" FontSize="11" FontWeight="Light"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid MaximumRowsOrColumns="3"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Text='{Binding Key}' 
                               Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                               Margin="5" FontSize="18" FontFamily="Segoe UI" FontWeight="Light" />
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>
        </SemanticZoom.ZoomedInView>
    </SemanticZoom>
    
    
  3. Quando você usar um GridView em um controle de SemanticZoom, sempre defina a propriedade anexada ScrollViewer.IsHorizontalScrollChainingEnabled como false no ScrollViewer que está no modelo de controle do GridView, desta forma:<GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">.

    Quando você usar um ListView em um controle de SemanticZoom, sempre defina a propriedade anexada ScrollViewer.IsVerticalScrollChainingEnabled como false, desta forma:<ListView ScrollViewer.IsVerticalScrollChainingEnabled="False">.

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.

Hh781234.wedge(pt-br,WIN.10).gifUsar um CollectionViewSource

  1. Observação  Para obter o código completo deste exemplo, incluindo a classe StoreData e o método GetGroupsByLetter, veja Amostra de SemanticZoom e agrupamento de GridView em XAML.

    Aqui, você obtém uma lista de itens de dados agrupados pela primeira letra do título. Os itens agrupados são definidos como CollectionViewSource.Source.

    
    // Create a new instance of the data.
    _storeData = new StoreData();
    
    // Get a list of groups. Each group contains a list of items.
    List<GroupInfoList<object>> dataLetter = _storeData.GetGroupsByLetter();
                
    // Set the CollectionViewSource defined in the XAML page resources
    // to the grouped data.
    cvs2.Source = dataLetter;
    
    
    
  2. Em seu XAML, o CollectionViewSource é vinculado como o ItemsSource da exibição ampliada. Essa exibição mostra a coleção completa dos itens agrupados.

    
    
    <Page.Resources>
        <CollectionViewSource x:Name="cvs2" IsSourceGrouped="true"/>
    </Page.Resources>
    
    ...
        <SemanticZoom.ZoomedInView>
            <GridView x:Name="ItemsGridView" IsSwipeEnabled="True"
                      ItemsSource="{Binding Source={StaticResource cvs2}}"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
    ...
    
    
    
  3. Aqui, você define o ItemsSource da exibição reduzida para a propriedade CollectionGroups do CollectionViewSource.View. Essa exibição mostra apenas os grupos, mas não os itens individuais.

    
    // Set the items source for the zoomed out view to the group data as well.
    (semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = cvs2.View.CollectionGroups;
    
    

    É aqui que esses elementos são declarados no XAML.

    
    
    <SemanticZoom x:Name="semanticZoom">
        <SemanticZoom.ZoomedOutView>
            <GridView Foreground="White"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
    ...
    
    
    

    Como as duas exibições usam o mesmo CollectionViewSource (cvs2) como suas fontes de dados, elas sempre são mantidas sincronizadas.

Hh781234.wedge(pt-br,WIN.10).gifUsar código

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

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

Usando o SemanticZoom

Ao executar o aplicativo, agora você vê uma única grade e agora você pode aplicar zoom entre as duas exibições que definiu.

Exibições ampliada e reduzida de um controle SemanticZoom

Para aplicar zoom entre dois modos de exibição:

Mecanismo de entradaReduçãoAmpliação
ToqueAperto para foraPinçagem, toque
TecladoCtrl + sinal de subtração, Enter, EspaçoCtrl + sinal de adição, Enter, Espaço
MouseCtrl + Girar a roda do mouse para trás Ctrl + Girar a roda do mouse para frente

 

Exemplos

Para saber mais sobre o controle SemanticZoom, baixe Amostra de SemanticZoom e agrupamento de GridView em XAML.

Resumo

Você aprendeu como criar um SemanticZoom que usa dois controles GridView para criar as suas exibições ampliada e reduzida.

Tópicos relacionados

SemanticZoom
GridView
ListView
Como agrupar itens em uma lista ou grade

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.