Introdução

Panorama é um padrão de design de interfaces nativo do Windows 8 e Windows Phone 8. Este padrão consiste de vários painéis dispostos um do lado do outro de modo que quando você está em um painel é possível ver um pequeno pedaço lateral do painel seguinte.

Exemplo do padrão Panorama

Esse padrão é implementado através do componente de mesmo nome. O componente Panorama é um gestor de layouts com orientação horizontal que se estende para além da área visível. A navegação entre os painéis de um Panorama é dado através do gesto de arrastar.

Criando panoramas

Você pode criar um aplicativo que utilize o panorama diretamente ou adicionar o mesmo em qualquer projeto que utilize Silverlight.

Por ser essencialmente um componente visual iremos trabalhar com o panorama somente no arquivo XAML que descreve a tela que estamos criando. O Código XAML correspondente a uma tela que utiliza Panorama é:

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<phone:Panorama Title="Titulo do Panorama">
<phone:Panorama.Background>
<ImageBrush ImageSource="/PlacesGuide;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>

<phone:PanoramaItem Header="Painel 1">
<grid>
<!– Componentes do painel –>
</grid>
</phone:PanoramaItem>
<phone:PanoramaItem Header="Painel 2">
<grid>
<!– Componentes do painel –>
</grid>
</phone:PanoramaItem>
</phone:Panorama>
[/sourcecode]

No trecho de código acima podemos ver a tag phone:Panorama que corresponde ao componente Panorama. Também é possível ver as tags phone:PanoramaItem que correspondem aos painéis contidos no Panorama. Cada PanoramaItem é um gestor de layout em si mesmo, podendo assim, conter qualquer componente visual que o desenvolvedor deseje.

Para exemplo faremos uma tela que contenha o nome do local, uma descrição e uma imagem relacionada. O nome será colocado no Panorama Title pois deve ser exibido em todos os painéis. Caso o titulo do panorama seja maior que a largura de tela, sempre que você muda de painel um novo pedaço do titulo é exibido.

A descrição do locale a imagem ficarão em PanoramaItem’s . Estes conterão respectivamente um TextBlock e um Image. O código da tela que implementa esta alteração é o seguinte:

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<phone:Panorama Title="UFOP">
<phone:Panorama.Background>
<ImageBrush ImageSource="/PanoramaApp1;component/Assets/escola-minas-ufop-dark.jpg"/>
</phone:Panorama.Background>

<!–Panorama descrição–>
<phone:PanoramaItem Header="Descrição">
<TextBlock HorizontalAlignment="Center" Margin="10,10,10,10" TextWrapping="Wrap" Text="A Universidade Federal de Ouro Preto (UFOP) foi criada em 21 de agosto de 1969 a partir da incorporação de duas centenárias instituições de ensino superior: a Escola de Farmácia fundada em 1839 e a Escola de Minas fundada em 1876, ambas localizadas em Ouro Preto, Minas Gerais. Hoje é uma das mais importantes universidades de Minas Gerais e também do Brasil. A universidade é tomada como referência em todo país pelos cursos de Farmácia e Engenharia." VerticalAlignment="Top" Padding="10,10,0,0" />
</phone:PanoramaItem>

<!–Panorama imagem–>
<phone:PanoramaItem Header="Imagem">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Source="/PanoramaApp1;component/Assets/UFOP_logo.gif"/>
</phone:PanoramaItem>
</phone:Panorama>
[/sourcecode]

E as telas correspondentes a este panorama ficam assim:

Panorama mostrando informações sobre a UFOP.

Assim temos uma tela que usa este padrão de design altamente associado ao Windows Phone. O Panorama além de textos e imagens pode conter vários outros componentes visuais, sendo um elemento muito versátil.