6 11 2012

Olá pessoal,

Depois de muito tempo sem escrever, resolvi voltar à ativa, já que gosto muito de escrever a gravar vídeos. O motivo da minha ausência, além da mudança que ainda não nos adaptamos 100%, é que estou investindo um tempo desenvolvendo aplicativos para a Windows Store.

Desde o final do ano passado, em uma iniciativa em conjunto com o Pedro Castelo, iniciamos o brain4dev. Inicialmente tínhamos pensado que ele seria um portal onde escreveríamos todo tipo de dicas e truques que aprendemos no dia-a-dia de trabalho, além de artigos de alto nível. Porém, com o passar do tempo, resolvemos mudar o foco dessa iniciativa e começamos a desenvolver aplicativos para a Windows Store. O nosso primeiro aplicativo, o Bible Verses, foi publicado na Store e em pouco mais de um mês foi baixado mais de 700 vezes, sem termos feito propaganda alguma. Enfim, agora estamos trabalhando em um outro aplicativo (na verdade um jogo) e, assim que tivermos mais novidades, compartilho aqui com vocês.

Enfim, fiz essa pequena introdução para explicar que vou começar a relatar algumas experiências que temos tido com o desenvolvimento de aplicativos para a Windows Store. Uma surpresa que tive nos últimos dias é que o controle Panorama, existente no Windows Phone 7, não existe no WinRT. A sugestão de um substituto para esse controle seria a utilização do controle FlipView. Porém, na maioria dos casos o controle FlipView acaba não sendo um bom substituto para o controle Panorama, então, como podemos fazer para ter um comportamento mais parecido com o Panorama? Como fazer com que nosso aplicativo se pareça com o aplicativo de Weather do Windows 8? Para isso, podemos utilizar um StackPanel com orientação horizontal dentro de um ScrollViewer. Então é só colocar os controles com um tamanho fixo dentro do StackPanel e você acaba obtendo um resultado parecido com o Panorama! Vamos à prática…

Crie um novo projeto do tipo “Blank App (XAML)”, da categoria Windows Store. Na MainPage desse projeto, vamos primeiramente adicionar duas RowDefinitions ao nosso Grid, uma com tamanho “Auto” e outra com o restante do Grid (asterisco). Na primeira Row do nosso Grid, vamos adicionar um TextBlock com um título para a nossa aplicação:

<Page
    x:Class="Panorama.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Panorama"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="Simulação de Panorama" Style="{StaticResource HeaderTextStyle}" Margin="25"/>
    </Grid>
</Page>

Feito isso, vamos adicionar o ScrollViewer com o StackPanel na segunda Row do nosso Grid:

<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
   <StackPanel Orientation="Horizontal">
   </StackPanel>
</ScrollViewer>

E, finalmente, dentro do StackPanel, vamos adicionar três Grids simulando os conteúdos que exibiríamos no Panorama:

<Grid Width="700" Background="LightGray" Margin="25">
   <TextBlock Text="Primeiro Bloco" Style="{StaticResource SubheaderTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Width="450" Background="DarkGray" Margin="25">
   <TextBlock Text="Segundo Bloco" Style="{StaticResource SubheaderTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Width="850" Background="Gray" Margin="25">
   <TextBlock Text="Terceiro Bloco" Style="{StaticResource SubheaderTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

Pronto! O resultado final é algo parecido com a screenshot abaixo:

Recapitulando, o código final da nossa Page ficaria desta forma:

<Page
    x:Class="Panorama.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Panorama"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="Simulação de Panorama" Style="{StaticResource HeaderTextStyle}" Margin="25"/>
        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
            <StackPanel Orientation="Horizontal">
                <Grid Width="700" Background="LightGray" Margin="25">
                    <TextBlock Text="Primeiro Bloco" Style="{StaticResource SubheaderTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
                <Grid Width="450" Background="DarkGray" Margin="25">
                    <TextBlock Text="Segundo Bloco" Style="{StaticResource SubheaderTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
                <Grid Width="850" Background="Gray" Margin="25">
                    <TextBlock Text="Terceiro Bloco" Style="{StaticResource SubheaderTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>

Você pode fazer o download do exemplo pronto no MSDN Code Gallery.

É isso aí pessoal, até a próxima!

Abraço,

André Alves de Lima

Vídeos sobre o Visual Studio LightSwitch Implementando FlyOuts de forma inteligente em aplicações para Windows Store com C#