Windows App - Orientação, Snapping e Semântico Zoom

Por Renato Haddad

Maio, 2013

Dn135303.060DE5057573180CEC6D227C6D3E2207(pt-br,MSDN.10).png

Visão Geral

Uma das melhores funcionalidades de se trabalhar com aplicação no estilo Modern UI é a adaptação para diversos tamanhos de tela, rotacionar entre os modos retrato e paisagem, usar o snapping, o qual permite que duas aplicações compartilhem a mesma tela, rodando lado a lado.

Outra fantástica funcionalidade relativa ao tamanho de tela é o semântico zoom. Diferente do zoom ótico, o qual simplifica a escala do conteúdo na tela em resposta ao estímulo como gestos de toque com os dois dedos para aumentar ou diminuir o tamanho, o semântico zoom altera a representação do conteúdo para mostrar mais ou menos detalhes através do zoom in e zoom out. O semântico zoom permite ao usuário navegar numa grande quantidade de dados sem muita rolagem de tela. O usuário pode usar o zoom out, pesquisar o que deseja e selecionar um item para ir diretamente ao destino.

Neste laboratório, trabalharemos com três importantes características relativas a UI no Cardápio Eletrônico. Primeiro, irá customizar o layout das páginas detalhes do cardápio e do grupo, no tocante a rotação. Em seguida, irá customizar o layout da página de detalhes do item quando a aplicação estiver no modo Snap. E por último, implementaremos o semântico zoom na página inicial, permitindo ao usuário usar o zoom out para visualizar todos os grupos de receitas numa única tela.

Dn135303.835BD582CE18FE5EE0286CCA17450D53(pt-br,MSDN.10).png

Objetivos

Neste lab você aprenderá:

  • Customizar a UI quando o dispositivo é rotacionado
  • Customizar a UI quando a aplicação estiver em Snap
  • Implementar o semântico zoom

Requirementos do Sistema

Você deverá ter os seguintes itens para completar os exercícios:

  • Microsoft Windows 8 Release Preview
  • Microsoft Visual Studio 2012 RC

Configuração

Você deverá seguir estes passos para preparar o seu computador para estes exercícios:

  • Instalar o Microsoft Windows 8 Release Preview
  • Instalar o Microsoft Visual Studio 2012 RC

Exercício 1: Orientação do Dispositivo

O Windows 8 é desenhado para rodar numa variedade de dispositivos, incluindo tablets e outros dispositivos, que embora tenham sensores embutidos, conhecem o modo de orientação retrato e paisagem. Uma página onde o visual é excelente no modo paisagem, nem sempre ocorre o mesmo no mode retrato. Sendo assim, é preciso fazer alguns ajustes e vice-versa. Neste exercício, iremos alterar o Cardápio Eletrônico para se adaptar as estas orientações.

Dn135303.note(pt-br,MSDN.10).gifNota:
Você não precisa ter um Tablet para executar os exercícios. Você pode testar a orientação usando o Windows Simulator, diretamente a partir do Visual Studio. Veja na Figura 1 como selecionar o Simulator na barra Standard do VS. Basta alterar para esta opção e todas as aplicacões serão executadas no simulator. É o único jeito que temos de simular a orientação no Tablet.

Dn135303.19C28694167450029962D4626B6E87BB(pt-br,MSDN.10).png

Figura 1 – Selecionar o Simulator no VS

Tarefa 1 – Testar a página inicial

Primeiro vamos examinar a página inicial da aplicação rodando no modo paisagem e retrato para identificar quais mudanças e onde são necessárias.

  1. Abra o projeto ContosoCookbook feito no exercício anterior.
  2. Certifique-se que o Visual Studio está setado para rodar no simulator. Pressione F5 para executar a aplicação no modo de Debug. Neste momento, o Visual Studio irá abrir o simulator, instalar a aplicação e já executá-la. Você verá uma tela parecida com a Figura 2.

Dn135303.8919C0605AC86630633871B631CAC60A(pt-br,MSDN.10).png

Figura 2 – Execução no Simulator

  1. O simulator contém diversos botões na barra lateral direita, o qual você consegue simular as operações do Tablet. Por exemplo, existem dois ícones para rotacionar para a direita ou esquerda, sendo paisagem ou retrato, dependendo do modo em que se encontra. Agora rotacione o dispositivo (simulator) para o modo retrato, ou seja, clique na seta para direita. Tenha certeza que a tela rotacionou em 90 graus, assim como a página inicial do cardápio. Veja que a sua tela deve ter ficado como a Figura 3.

Dn135303.27AF979824BCB746120DB728D5EDF1EA(pt-br,MSDN.10).png

Figura 3 – Modo retrato

Dn135303.note(pt-br,MSDN.10).gifNota:
Se você está testando num Tablet e a página inicial não está rotacionada, é porque o autorotation está desativado. Alguns dispositivos, como o Tablet da Samsung mostrado no evento 2011 BUILD da Microsoft em setembro/2011, tem uma tecla para travar a rotação atual, então, verifique isto. Você também pode pressionar Win+O para ligar ou desligar o autorotation. Se o hardware que você está testando não suportar trocas de rotação, opte pelo Simulator.

  1. Agradeça ao controle GridView por desenhar os itens do cardápio, a página incial tem um bom visual em ambos os modos, paisagem e retrato, sem precisar alterar nada no código.
  2. Retorne ao Visual Studio e pare a execução.
Dn135303.note(pt-br,MSDN.10).gifNota:
O simulator deve ficar aberto enquanto você testa a aplicação, isto facilitará a execução pelo VS. O ícone do simulator ficará sempre na barra de tarefas do Windows, e caso queira fecha-lo, clique com o botão direito neste ícone e selecione Exit.

Tarefa 2 – Customizar a Página de Detalhes do Grupo

O cardápio eletrônico contém três páginas: a inicial, os detalhes do grupo e os detalhes da receita. A página inicial não requer nenhuma alteração no modo retrato, então, vamos para a página de detalhes do grupo, aquela que aparece quando seleciona o grupo (Chinese, Italian, French, etc).

  1. Execute a aplicação novamente no simulator, selecione Chinese para exibir a página de detalhes deste grupo. No modo paisagem, a página está como a mostrada na Figura 4.

Dn135303.1B41267C6D1FF297E4BDE08E2321EE87(pt-br,MSDN.10).png

Figura 4 – Página do grupo no modo paisagem

  1. Agora troque para o modo retrato, como na Figura 5. Note que o controle GridView que desenha a maioria do conteúdo desta página, posiciona os detalhes do grupo (receitas) no lado direito do cabeçalho (título do grupo, image e descrição), deixando um grande espaço em branco na parte de baixo da tela. Além disso, as receitas deste grupo ficaram truncadas.

Dn135303.CB978BAF2A2BC1DB2FDBB86021917D5E(pt-br,MSDN.10).png

Figura 5 – Página do grupo no modo retrato

  1. Retorne ao Visual Studio e pare a execução.
  2. Abra o arquivo GroupDetailPage.xaml e localize o controle ListView chamado “itemListView”.
  3. Imediatamente após este controle ListView, adicione outro ListView chamado “portraitListView”.
<!-- Vertical scrolling list only used in portrait mode -->
<ListView
    x:Name="portraitListView"
    AutomationProperties.AutomationId="ItemListView"
    AutomationProperties.Name="Items In Group"
    TabIndex="1"
    Grid.Row="1"
    Visibility="Collapsed"
    Padding="86,0,20,60"
    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
    ItemTemplate="{StaticResource Standard500x130ItemTemplate}"
    SelectionMode="None"
    IsItemClickEnabled="True"
    ItemClick="ItemView_ItemClick">

    <ListView.Header>
        <StackPanel>
            <Image Source="{Binding Image}" Margin="20,-10,18,0" MaxWidth="480" Stretch="UniformToFill" HorizontalAlignment="Left"/>
            <TextBlock Margin="20,20,18,30" Text="{Binding Description}" Style="{StaticResource BodyTextStyle}"/>
        </StackPanel>
    </ListView.Header>
</ListView>
  1. Um pouco mais abaixo no código XAML do GroupDetailPage.xaml, localize o elemento VisualState chamado “FullScreenPortrait” e exclua o seguinte item:
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
    <DiscreteObjectKeyFrame KeyTime="0" Value="100,0,90,0"/>
</ObjectAnimationUsingKeyFrames>
  1. Adicione estes elementos exatamente no lugar onde foi excluído o código do item anterior.
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" 
                               Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitListView" 
                               Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
Dn135303.note(pt-br,MSDN.10).gifNota:
O controle ListView (portraitListView) adicionado define como que os grupos das receitas são desenhados no modo retrato. Os códigos adicionados no VisualState controlam as propriedades Visibility (visibilidade) dos controles definidos no TargetName. Ou seja, a animação adicionada oculta o controle GridView usado no modo paisagem e exibe o ListView quando o ViewState mudar para FullScreenPortrait. Observe que o atributo Value da propriedade Visibility é que controla isto, trocando para Collapsed (ocultar) ou Visible (visível). Sendo assim, perceba que você deve apenas dizer quais objetos serão mostrados ou ocultados quando ocorrer a mudança do ViewState de paisagem para retrato ou vice-versa. O ViewState também controla o estado chamado Snapped, o qual veremos futuramente.
O código que detecta a troca do ViewStte está oculto na classe base o qual a página deriva (Page). Esta classe chama-se LayoutAwarePage.cs (está dentro da pasta Common), o qual contém o evento SizeChanged que usa o VisualStateManager em tempo de execução para identificar as mudanças entre os estados do VisualState.

  1. Execute a aplicação (F5) no simulator, selecione o grupo Chinese para exibir a página de detalhes do grupo. Rotacione para o modo retrato e certifique-se que o layout está de acordo com a Figura 6. Note que o layout mudou de acordo com o que definimos no controle ListView portraitListView no XAML. Pode alterar para paisagem e retrato novamente e veja que os layouts são diferentes, justamente para exibir as informações da melhor maneira.

Dn135303.2529628B74413853FAAD99243C1E4883(pt-br,MSDN.10).png

Figura 6 – Novo layout dos detalhes do grupo

  1. Retorne ao Visual Studio e pare a execução.
  2. Já que estamos falando de layouts, no Solution Explorer dê um duplo clique no arquivo Package.appxmanifest. Este arquivo contém algumas configurações da aplicação e uma delas é a chamada Supported rotations, o qual você pode definir quais rotações a aplicação suporta.

Dn135303.F5016B7FAA176B6831836A1D4F9F231F(pt-br,MSDN.10).png

Figura 7 – Rotações suportáveis

Tarefa 3 – Customizar a Página de Detalhes da Receita

Nesta tarefa iremos customizar a página de detalhes da receita para otimizar todos os espaços da tela e preparar o layout para retrato e paisagem.

Execute a aplicação novamente no simulator, selecione uma receita para mostrar todos os detalhes, conforme a Figura 8.

Dn135303.B3470CE5A599C237DD8C442FE1C37BD5(pt-br,MSDN.10).png

Figura 8 – Detalhes da receita em paisagem

  1. Agora rotacione para o modo retrato (Figura 9). Novamente vemos que o layout pode ser melhorado, pois há muito espaço disponível, além de não aparecerem todas as informações.

Dn135303.07A601CDD4B82146A3FED8847CEC3BBE(pt-br,MSDN.10).png

Figura 9 – Detalhes da receita em retrato

  1. Retorne ao Visual Studio e pare a execução.
  2. Abra o arquivo ItemDetailPage.xaml e localize o controle FlipView chamado “flipView”. Após este controle, adicione outro controle FlipView chamado “portraitFlipView”.
<!-- FlipView used in portrait mode -->
<FlipView
    x:Name="portraitFlipView"
    AutomationProperties.AutomationId="ItemsFlipView"
    AutomationProperties.Name="Item Details"
    Grid.Row="1"
    Margin="0,-3,20,0"
    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
    Visibility="Collapsed">

    <FlipView.ItemTemplate>
        <DataTemplate>
            <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                <ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">

                    <!-- Vertical StackPanel for item-detail layout -->
                    <StackPanel Orientation="Vertical" Margin="100,0,20,0">
                        <StackPanel Orientation="Vertical">
                            <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/>
                            <Image x:Name="image" Width="400" Margin="0,20,0,40" Stretch="Uniform" Source="{Binding Image}" HorizontalAlignment="Left"/>
                        </StackPanel>

                        <StackPanel Orientation="Vertical">
                            <TextBlock FontSize="26.667" FontWeight="Light" Text="Ingredients" Margin="0,0,0,16"/>
                            <TextBlock FontSize="20" FontWeight="Light" LineHeight="32.5" Text="{Binding Ingredients, Converter={StaticResource ListConverter}}" TextWrapping="Wrap" />
                        </StackPanel>

                        <StackPanel Orientation="Vertical">
                            <TextBlock FontSize="26.667" FontWeight="Light" Text="Directions" Margin="0,24,0,16"/>
                            <ScrollViewer Style="{StaticResource VerticalScrollViewerStyle}">
                                <Grid>
                                    <TextBlock FontSize="20" FontWeight="Light" Text="{Binding Directions}" TextWrapping="Wrap" />
                                </Grid>
                            </ScrollViewer>
                        </StackPanel>
                    </StackPanel>
                </ScrollViewer>
            </UserControl>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>
Dn135303.note(pt-br,MSDN.10).gifNota:
No modo paisagem, as três áreas contidas na página de detalhes da receita (título, imagem, descrição, ingredientes e modo de preparo) são exibidas nas colunas declaradas na seção DataTemplate do Grid contido no controle FlipView chamado flipView. Já o controle FlipView chamado portraitFlipView adicionado no código anterior contém o layout para o modo retrato. Ele usa um StackPanel vertical para empilhar os controles dos dados.

  1. Localize o elemento VisualState chamado “FullScreenPortrait” na parte inferior da página ItemDetailPage.xaml.
  2. Adicione o seguinte Storyboard destacado em amarelo dentro do elemento VisualState chamado “FullScreenPortrait”. Este código irá controlar a exibição dos controles “flipView” e “portraitFlipView” nos modos paisagem ou retrato.
<VisualState x:Name="FullScreenPortrait">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
        </ObjectAnimationUsingKeyFrames>
                        
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" 
                                       Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitFlipView" 
                                       Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>
  1. Execute a aplicação no simulator, selecione uma receita para exibir os detalhes. Rotacione para o modo retrato e verifique se o layout está em uma única coluna, conforme a Figura 10.

Dn135303.7C5F1DC61EAB3214B1ECBDB9AC25D1C8(pt-br,MSDN.10).png

Figura 10 – Detalhes da receita em retrato

  1. Rotacione para o modo paisagem e certique-se que os dados estão exibidos em três colunas.
  2. Retorne ao Visual Studio e pare a execução.

Exercício 2: Snapping

Snapping permite o usuário do Windows 8 executar duas aplicações no estilo Modern UI lado a lado com a tela dividida horizontalmente. Em uma tela de toque, você pode demonstrar o snapping arrastando devagar o dedo a partir do lado esquerdo da tela até surgir a barra de snap. Esta é uma barra vertical que irá dividir a tela. Se você não tiver uma tela de toque, pressione a tecla Windows + . (ponto). Caso você pressionar esta combinação repetidamente, notará que o snap pode ficar do lado esquerdo ou direito.

A Figura 11 mostra o snapping em ação. O cardápio ocupa a parte esquerda da tela (320 pixels), e o Internet Explorer ocupa o restante. Neste contexto, o cardápio está no modo snap e o Internet Explorer é a aplicação principal (Filled app). Se quiser alterar o snap, mova a barra para a direita da tela para reverter os papéis das aplicações.

Dn135303.F3E592AB45862A6E2CF52402D97FCBBC(pt-br,MSDN.10).png

Figura 11 – Snap em ação

Atualmente a aplicação de cardápio já contém o Snap, agradeça ao XAML que o Visual Studio incluiu nas páginas geradas pelo projeto. Neste exercício, você fará uma simples alteração em uma das páginas para melhorar a experiência do usuário.

Dn135303.note(pt-br,MSDN.10).gifNota:
Para ver o snap em ação, você deverá executar a aplicação Modern UI em um dispositivo com uma resolução de no mínimo 1366 x 768 pixels. O time do Windows escolheu 1366 como mínimo porque o tamanho da seção do snap é de 320 pixels e a aplicação principal é de 1024 pixels. Os pixels restantes ocupam a barra do snap. Se você executar em baixa resolução de tela, use o Windows Simulator para este exercício e configure a resolução do simulador para 1366x768.

Tarefa 1 – Executar a Aplicação em Modo Snapped

Nesta tarefa, iremos visualizar cada uma das três páginas no modo Snapped.

  1. Pressione F5 para executar a aplicação no simulador a partir do Visual Studio. Em seguida, no simulador, clique no botão Windows para ir para a página inicial do Windows, e clique no Internet Explorer. Neste momento, o IE ocupa a tela toda, então, passe o dedo do lado esquerdo da tela e arraste levemente para a direita. Quando a aplicação do cardápio eletrônico aparecer abaixo do seu dedo, posicione o dedo na barra do Snap. Em seguida, tire o dedo da tela. Uma dica com o teclado, é usar as teclas Windows + . (ponto) para trocar o modo Snapped.
  2. Quando o cardápio ocupar apenas uma parte da tela, quão diferente é a página inicial se mostrada na tela toda? Clique no nome do grupo Chinese, por exemplo, e veja a página de detalhes do grupo no modo Snapped. Observe a diferença de rodar em tela inteira.
  3. Selecione numa receita e veja a página de detalhes da receita no modo Snapped. Agora o layout é bem diferente se comparado ao modo de tela inteira.
  4. Retorne ao Visual Studio e pare a execução.

Tarefa 2 – Alterar os Itens do Grupo em Modo Snapped

O layout padrão fornecido pelo Visual Studio no modo Snapped é um bom início, mas você pode customizar se desejar. No cardápio eletrônico, precisamos alterar a página de detalhes da receita no modo Snapped porque o layout padrão deixou muitos espaços em branco na tela. Neste caso, podemos customizar para exibir informações adicionais sobre a receita. Precisamos também realizar alguns poucos ajustes nas páginas do grupo e detalhes do grupo. Vamos iniciar com a página de detalhes do grupo.

  1. Abra o arquivo StandardStyles.xaml na pasta Common e localize o DataTemplate chamado “Standard80ItemTemplate”.
  2. Substitua todo o conteúdo do DataTemplate com o seguinte código, o qual empilha as informações num StackPanel.
<DataTemplate x:Key="Standard80ItemTemplate">
    <Grid Margin="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="80">
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
        </Border>
        <StackPanel Grid.Column="1" Margin="10,0,0,0">
            <TextBlock Text="{Binding ShortTitle}" Style="{StaticResource ItemTextStyle}" MaxHeight="40"/>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Tempo de preparo:" Style="{StaticResource CaptionTextStyle}" />
                <TextBlock Text="{Binding PrepTime}" Style="{StaticResource CaptionTextStyle}" Margin="4,0,4,0" />
                <TextBlock Text="minutos" Style="{StaticResource CaptionTextStyle}" />
            </StackPanel>
        </StackPanel>
    </Grid>
</DataTemplate>
  1. Execute a aplicação no simulador, aplique o modo Snapped e certifique-se que está similar a Figura 12. Note que as receitas do grupo estão dispostas para de forma a aproveitar melhor o espaço disponível da tela, afinal, temos apenas 320 pixels de largura.

Dn135303.5B6F76BEEA093D849DC0069E8AD3AF72(pt-br,MSDN.10).png

Figura 12 – Snap com novo layout dos itens do grupo

  1. Retorne ao Visual Studio e pare a execução.

Tarefa 3 – Alterar os Detalhes do Grupo em Modo Snapped

Vamos fazer alguns pequenos ajustes no layout da página de detalhes do grupo.

  1. Abra o arquivo GroupDetailPage.xaml e localize o controle ListView chamado “itemListView”.
  2. Remova o primeiro TextBlock do elemento <ListView.Header>. Para os controles Image e o TextBlock restantes, altere a margem esquerda de 20 para 10.
DE:

<ListView.Header>
    <StackPanel>
        <TextBlock Text="{Binding Subtitle}" Margin="20,0,18,20" Style="{StaticResource TitleTextStyle}" MaxHeight="60"/>
        <Image Source="{Binding Image}" Margin="20,0,18,0" MaxHeight="160" Stretch="UniformToFill"/>
        <TextBlock Margin="20,20,18,30" Text="{Binding Description}" Style="{StaticResource BodyTextStyle}"/>
    </StackPanel>
</ListView.Header>

PARA:

<ListView.Header>
    <StackPanel>
        <Image Source="{Binding Image}" Margin="10,0,18,0" MaxHeight="160" Stretch="UniformToFill"/>
        <TextBlock Margin="10,20,18,30" Text="{Binding Description}" Style="{StaticResource BodyTextStyle}"/>
    </StackPanel>
</ListView.Header>
  1. Execute a aplicação no simulador, aplique o modo Snapped e certifique-se que está similar a Figura 13. Nesta página de detalhes do grupo, o cabeçalho (Header) do ListView mostra a imagem e a descrição do grupo.

Dn135303.87E36DF4FBE9F0D17BEFB1653297C315(pt-br,MSDN.10).png

Figura 13 – Snap com novo layout do grupo

Retorne ao Visual Studio e pare a execução.

Tarefa 4 – Alterar os Detalhes da Receita no Modo Snapped

Nesta última tarefa iremos alterar o layout da página de receitas, a fim de dispor melhor as informações e exibir os ingredientes.

  1. Abra o arquivo ItemDetailPage.xaml, localize os dois controles FlipViews já existentes (flipView e portraitFlipView).
  2. Abaixo do portraitFlipView insira mais um FlipView chamado snappedFlipView, conforme a seguinte listagem. Este novo FlipView será usado somente no modo Snapped.
<FlipView
    x:Name="snappedFlipView"
    AutomationProperties.AutomationId="ItemsFlipView"
    AutomationProperties.Name="Item Details"
    Grid.Row="1"
    Margin="0,-3,0,0"
    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
    Visibility="Collapsed">

    <FlipView.ItemTemplate>
        <DataTemplate>
            <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                <ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">

                    <!-- Vertical StackPanel for item-detail layout -->
                    <StackPanel Orientation="Vertical" Margin="20,0,20,0">
                        <StackPanel Orientation="Vertical">
                            <TextBlock FontSize="20" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/>
                            <Image x:Name="image" Width="260" Margin="0,12,0,40" Stretch="Uniform" Source="{Binding Image}" HorizontalAlignment="Left"/>
                        </StackPanel>
                        <StackPanel Orientation="Vertical">
                            <TextBlock FontSize="20" FontWeight="Light" Text="Ingredients" Margin="0,0,0,16"/>
                            <TextBlock FontSize="16" FontWeight="Light" TextWrapping="Wrap" Text="{Binding Ingredients, Converter={StaticResource ListConverter}}" />
                        </StackPanel>
                    </StackPanel>
                </ScrollViewer>
            </UserControl>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>
  1. Agora que já temos os três layouts paisagem, retrato e snapped, é preciso dizer ao Windows 8 quando exibir tal layout. Localize o elemento VisualState chamado Snapped no arquivo ItemDetailPage.xaml e adicione o código destacado em amarelo na seguinte listagem. Estes códigos serão disparados somente no modo Snapped e a propriedade Visibility irá ocultar o controle flipView e exibir o controle snappedFlipView.
<VisualState x:Name="Snapped">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" 
                                        Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedFlipView" 
                                        Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>
  1. Execute a aplicação no simulador da mesma maneira que a anterior, com o cardápio no Snapped. Selecione uma receita e certifique-se que está similar a Figura 4, mostrando o nome da receita, a imagem e todos os ingredientes. Note ainda que você pode navegar em todas as receitas do grupo através do FlipView.

Dn135303.CD5E3D644711BA0ED5D03D084E0CBA2A(pt-br,MSDN.10).png

Figura 14 – Receita no modo Snapped

  1. Aproveite para testar a aplicação completa em todos os modos de orientação paisagem, retrato e snapped. Após os testes, retorne ao Visual Studio e pare a execução.

Exercício 3: Semântico Zoom

Muitas aplicações que são executadas em telas de toque permitem aos usuários usarem dois dedos com o movimento de deslizar (veja Pinch to zoom) para aplicar o Zoom In e Out. Este recurso é comum em smartphones e aplicações de edição de fotos para visualizar mais detalhes da foto.

Dn135303.3DA3E4342EF6691E1E2D9D5F552E113B(pt-br,MSDN.10).png

Figura 15 – Interações com toques no Windows 8

A maioria dos zooms é ótico, o que significa que simplesmente escala o conteúdo exibido na tela. É fácil o suficiente para incluir o zoom ótico em um aplicativo de estilo Modern UI, mas o Windows 8 também suporta o semântico zoom (ou zoom semântico). O semântico zoom não escala simplesmente para mais ou menos. Ele agrupa um conteúdo para fornecer uma visão semântica diferente. Por exemplo, o semântico zoom numa aplicação de mapa, pode fornecer detalhes adicionais como os nomes das ruas e prédios quando o usuário aplicar o Zoom In, e quando aplicar o Zoom Out, retirar estas informações.

Para ajudá-lo na implementação de zoom semântico, o namespace WinRT’s Windows.UI.Xaml.Controls inclui o controle SemanticZoom. Basicamente você deve fornecer ao controle dois tipos de visão, o Zoom In e o Zoom Out, e o controle que alternará entre ambos, de acordo com a entrada do usuário. Você não tem que fazer a mudança e não precisa escrever nenhum código para reconhecimento de gestos para ativar esta ação quando o usuário usar os dois dedos no contato com a tela ao mover juntos ou separados. Caso você não tenha nenhuma tela de toque, você pode usar o Zoom In e Out com a combinação das teclas CTRL + rodinha de rolamento do mouse. Gostou desta idéia? Então, vamos montar um exemplo de como trabalhar com o zoom.

Tarefa 1 – Adicionar o Controle Semântico Zoom na Página Inicial

Adicionar um semântico zoom ao cardápio eletrônico, é tão simples quanto declarar o controle SemanticZoom e preenchê-lo com uma visão para o Zoom In e outra para o Zoom Out.

  1. Abra o arquivo GroupedItemsPage.xaml.
  2. Localize o controle GridView chamado “itemGridView”. Exclua este controle, inclusive o conteúdo.
  3. Substitua o GridView excluído pelo seguinte código da listagem. Veja como é fácil de entender. A estrutura é o controle SemanticZoom inserido na linha 1 do GridView principal. Dentro deste, temos duas seções chamadas SemanticZoom.ZoomedInView e SemanticZoom.ZoomedOutView. Cada seção contém um respectivo layout, são completamente diferentes, você pode e deve montar layouts distintos. Note ainda que o layout base para o ZoomedInView é o template Standard250x250ItemTemplate que está no arquivo StandarStyles.xaml. Já o ZoomedOutView tem o layout diretamente na seção.
<SemanticZoom Grid.Row="1">
    <SemanticZoom.ZoomedInView>
        <!-- Horizontal scrolling grid used in most view states -->
        <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Margin="0,-3,0,0"
            Padding="116,0,40,46"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
            SelectionMode="None"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="1,0,0,6">
                                <Button
                    AutomationProperties.Name="Group Title"
                    Content="{Binding Title}"
                    Click="Header_Click"
                    Style="{StaticResource TextButtonStyle}"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <GridView x:Name="groupGridView" Margin="116,0,40,46">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0,0,24,0">
                        <Image Source="{Binding Group.GroupImage}" Width="250" Height="500" Stretch="UniformToFill" />
                        <TextBlock Text="{Binding Group.Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" FontSize="28" Margin="12"/>
                        <TextBlock Text="{Binding Group.RecipesCount}" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" FontSize="96" Margin="12,64,12,12" HorizontalAlignment="Right"/>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>
Dn135303.note(pt-br,MSDN.10).gifNota:
Esta estrutura de definir duas seções distintas no container SemanticZoom é que nos dá esta enorme facilidade de proporcionar ao usuário uma interação mais intuitiva, clara e simples de se navegar. Particularmente acho este controle um dos melhores que existe.

  1. Próximo ao rodapé do arquivo GroupedItemsPage.xaml, localize o elemento VisualState chamado “Snapped” e adicione o seguinte elemento ao Storyboard para ocultar a visão do zoomed-out quando a aplicação estiver no modo snapped.
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="groupGridView" 
                               Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
  1. Abra o arquivo GroupedItemsPage.xaml.cs e adicione o seguinte código (destacado em amarelo) no final do método LoadState. Este código atribui a coleção de dados do grupo à fonte (ItemsSource) do controle groupGridView que está na seção ZoomedOutView.
protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
    // TODO: Create an appropriate data model for your problem domain to replace the sample data
    var sampleDataGroups = RecipeDataSource.GetGroups((String)navigationParameter);
    this.DefaultViewModel["Groups"] = sampleDataGroups;

    this.groupGridView.ItemsSource = this.groupedItemsViewSource.View.CollectionGroups;
}

Tarefa 2 – Testar o Resultado

Agora é a hora de ver o semântico zoom em ação.

  1. Execute a aplicação e veja que a tela inicial deve ser parecida com a Figura 16. Obviamente que está sem o semântico zoom aplicado.

Dn135303.46A28D552E38D7BB3C843565A5B58E2F(pt-br,MSDN.10).png

Figura 16 – Página inicial da aplicação

  1. Responda a seguinte pergunta: Quantas receitas existem por grupo? Que tal mostrar uma tela com os dados agrupados por tipo de receita, por exemplo, Italian, French, German, etc? E o melhor, oferecer um acesso rápido ao grupo. Então, para aplicar Zoom Out do semântico zoom coloque os dois dedos na tela e mova-os juntos. Ou use a tecla CTRL + rodinha do mouse. Verifique se a tela ficou parecida com a Figura 17.

Dn135303.835BD582CE18FE5EE0286CCA17450D53(pt-br,MSDN.10).png

Figura 17 – Página inicial da aplicação com o Zoom Out

  1. Esta tela reúne a quantidade de receitas existentes por grupo. Coloque os dois dedos novamente na tela, mas desta vez afaste um do outro (ou use o CTRL + rodinha do mouse) para aplicar o Zoom In. O que acontece com a página inicial?
  2. Aplique um Zoom Out novamente e selecione um grupo de receita, por exemplo German. Veja na Figura 18, que o Zoom In é mostrado e posiciona a exibição exatamente no grupo selecionado, mostrando todas as receitas deste.

Dn135303.FCF78ED4E1B701565EA913783758CE4E(pt-br,MSDN.10).png

Figura 18 – Zoom In diretamente no grupo

  1. Retorne ao Visual Studio e pare a execução.

Resumo

Neste laboratório, você aprendeu alguns pontos chave relacionados à interface de usuário UI da aplicação do cardápio eletrônico. Você adaptou o layout para exibir as rotações paisagem e retrato, customizou o layout para o modo snapped e adicionou o semântico zoom para simplificar a tarefa de navegar entre grupos de receita na página inicial. E o melhor de tudo é que todos estes recursos foram implementados com poucos códigos.

A maioria dos exercícios nos laboratórios 1 e 2 envolveu a criação da experiência do usuário, ficando as páginas preparadas para rodar em todas as orientações e todos os modos.

Agora é hora de fazer algum trabalho nos bastidores para implementar suporte para compartilhamento e pesquisa de informações. O cardápio eletrônico está prestes a tornar-se mais integrado com o Windows 8 e aplicativos de estilo Modern UI.

Sobre o Autor

Renato Haddad (rehaddad@msn.comwww.renatohaddad.com) é MVP, MCT, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2010/2012, ASP.NET 4, ASP.NET MVC, Entity Framework, Reporting Services, Windows Phone e Windows 8. Visite o blog http://weblogs.asp.net/renatohaddad.

Mostrar: