Artigos Mobile Conhecendo os templates Panorama e Pivot no Windows Phone

Existem dois templates padrões para Windows Phone, chamados de Pivot e Panorama, que podem ser bem parecidos à primeira vista, mas tem objetivos bem distintos.

Galeria de imagens do Windows Phone com o template Panorama

Figura 1: Galeria de imagens do Windows Phone com o template Panorama

Na Figura 1, podemos observar o padrão de design panorama, que possui o objetivo de apresentar ao usuário o aplicativo inteiro, com tudo que é possível fazer a partir dali. O panorama é composto pelo PanoramaControl e pelos PanoramaItems, e cada item do panorama representa uma parte da tela que possuirá parcela dos dados do aplicativo. Você pode notar que a primeira parte mostra a galeria toda e no segmento seguinte os álbuns recentemente abertos.

Template Pivot do Windows Phone exibindo as notícias de cada dia da semana

Figura 2: Template Pivot do Windows Phone exibindo as notícias de cada dia da semana

O outro template padrão do Windows Phone também separado em segmentos é chamado de Pivot e organiza o conteúdo do aplicativo em sequência, na forma de instruções para o usuário, separado em segmentos, como mostra a Figura 2.

O Panorama, como mostra a Figura 1, tem o objetivo de apresentar o aplicativo ao usuário com o conteúdo segmentado. Já o Pivot organiza o conteúdo da aplicação de forma com que fique uma sequência de instruções para ao usuário, como mostrado na Figura 2.

Uma maneira de fixar a diferença entre Pivot e Panorama é que, por exemplo, um aplicativo do cardápio de uma lanchonete, com a MainPage (tela inicial) sendo um panoram,a mostrará ao usuário tudo que a lanchonete oferece, como pratos bebidas, sobremesas e etc.

Mas na hora de escolher os complementos do prato escolhido, isso será feito através do template Pivot. Como uma sequência de instruções, o usuário escolherá o molho a bebida e a carne de sua refeição.

Neste artigo será construído um aplicativo como exemplo dessa lanchonete utilizando os dois padrões de template do Windows phone, com o panorama na tela inicial e o pivot na escolha dos pratos.

Abra o Visual Studio e crie um novo projeto com o nome de LanchoneteWindowsPhone, como mostra a Figura 3.

Criação do projeto LanchoneteWindowsPhone no Visual Studio

Figura 3: Criação do projeto LanchoneteWindowsPhone no Visual Studio

Ao criar o projeto, é exibida uma caixa com a opção de escolha da versão do Windows Phone. Escolha a 7.1, pois assim o seu aplicativo funcionará em todas as versões de Windows Phone disponíveis.

Agora, o próximo passo é alterar os dados do XAML carregado no Visual Studio, adicionando os controles com os itens do cardápio da lanchonete, que ficarão num ListBox. O arquivo MainPage.xaml ficará conforme a Listagem 1.

Listagem 1: Código do arquivo MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="LanchoneteWindowsPhone.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

        <!--Panorama control-->
        <controls:Panorama Title="lanchonete">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="PanoramaBackground.png"/>
            </controls:Panorama.Background>

            <controls:PanoramaItem Header="pratos">
                <StackPanel Width="400" Height="450" Background="Black">
                    <ListBox Width="400" Height="450">
                        <ListBoxItem Height="100" FontSize="30">
                            Sanduíche combo I
                        </ListBoxItem>
                        <ListBoxItem Height="100" FontSize="30">
                            Sanduíche combo II
                        </ListBoxItem>
                        <ListBoxItem Height="100" FontSize="30">
                            Sanduíche combo III
                        </ListBoxItem>
                    </ListBox>
                </StackPanel>
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="sucos">
                <StackPanel Width="400" Height="450" Background="Black">
                    <ListBox Width="400" Height="450">
                        <ListBoxItem Height="100" FontSize="30">
                            Suco de Laranja
                        </ListBoxItem>
                        <ListBoxItem Height="100" FontSize="30">
                            Suco de Maracujá
                        </ListBoxItem>
                        <ListBoxItem Height="100" FontSize="30">
                            Suco de abacaxi e hortelã
                        </ListBoxItem>
                    </ListBox>
                </StackPanel>
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="sobremesas">
                <StackPanel Width="400" Height="450" Background="Black">
                    <ListBox Width="400" Height="450">
                        <ListBoxItem Height="100" FontSize="30">
                            Bolo e Sorvete
                        </ListBoxItem>
                        <ListBoxItem Height="100" FontSize="30">
                            Café e chocolate
                        </ListBoxItem>
                        <ListBoxItem Height="100" FontSize="30">
                            Pavê
                        </ListBoxItem>
                    </ListBox>
                </StackPanel>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>
</phone:PhoneApplicationPage>

Na Listagem 1, você pode ver que foram criados três controles PanoramaItem dentro do PanoramaControl. Cada PanoramaItem está representando uma categoria de itens no cardápio, e cada categoria do cardápio está com uma lista dos itens disponíveis, que ao ser aberto, serão escolhidos os complementos.

No exemplo será implementado apenas um item, o combo I de sanduíche. Então deve ser criada agora a página dos complementos desse combo. Vá ao Solution Explorer, clique com o botão direito no projeto e vá em Add New Item. Selecione uma nova página com o template pivot, conforme a Figura 4.

Adicionando Pivot Item ao projeto

Figura 4: Adicionando Pivot Item ao projeto

E então serão criados 3 segmentos, um para a escolha do sanduíche, outro para a bebida e por fim, um para o complemento. Verifique como ficará na Listagem 2.

Listagem 2: Criação do Template pivot item

<phone:PhoneApplicationPage
    x:Class="LanchoneteWindowsPhone.ComboSanduiche"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Pivot Control-->
        <controls:Pivot Title="lanchonete">
            <!--Pivot item one-->
            <controls:PivotItem Header="sanduíche">
                <TextBlock Text="Aqui você escolherá seu sanduíche" />
            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="bebida">
                <TextBlock Text="Aqui você escolherá sua bebida" />
            </controls:PivotItem>

            <!--Pivot item three-->
            <controls:PivotItem Header="complemento">
                <TextBlock Text="Aqui você escolherá seu complemento" />
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>

</phone:PhoneApplicationPage>

Para navegar para esta página, você deverá criar um evento no MainPage.xaml no item do ListBox com o nome de Combo Sanduíche I. Abra esse arquivo e modifique o ListboxItem conforme a Listagem 3.

Listagem 3: Adição do evento tap ao ListBoxItem do Combo I

<ListBoxItem Height="100" FontSize="30" Tap="ListBoxItem_Tap_1">
Sanduíche combo I
</ListBoxItem>

Agora o evento Tap do ListBoxItem deve ser tratado para que ocorra a navegação para a página com o template Pivot. Então adicione o método ListBoxItem_Tap_1 ao classe MainPage.xaml.cs, conforme a listagem 4 abaixo:

Listagem 4: Adição do método ListBoxItem_Tap_1

private void ListBoxItem_Tap_1(object sender, GestureEventArgs e)
{
	NavigationService.Navigate(new Uri("ComboSanduiche.xaml", UriKind.RelativeOrAbsolute));
}

Agora seus templates estão no aplicativo, basta pressionar F5 e testar a aplicação.

Um abraço e até o próximo artigo.

Quer dar os primeiros passos com o desenvolvimento para Windows Phone?