Olá, pessoal, tudo bem?

Como todo mundo sabe, a Microsoft está lançando o Windows
Phone 7, que parece ser o grande trunfo da empresa pra brigar com o iPhone e com
os aparelhos móveis desenvolvidos em Android.

Para fugir um pouco daquele velho “Hello World!” que todo
mundo está cansado de ver, vamos construir uma aplicação um pouco mais complexa
e mais divertida.

Nossa aplicação será o Zodiac7, que permite ao usuário ver seu horóscopo diário no seu smartphone, clicando na imagem correspondente ao seu
signo.

Legal, não? Então vamos lá.

Para tornar o aprendizado mais fácil e para que o artigo não fique muito longo e cansativo, dividi o trabalho em 3
partes, ou seja, serão três artigos até que tenhamos desenvolvido todo nosso
aplicativo.

• Parte 1: Criação do Projeto e Desenvolvimento da GUI
• Parte 2: Desenvolvimento
  do nosso WCF (Windows Communication Foundation)
• Parte
  3: Consumindo nosso WCF através da nossa aplicação
  e manipulação de eventos

 Bem, dito isso, vamos por a mão na massa.

Partindo do princípio de que você já tem o Visual Studio 2010
instalado, assim como o kit de desenvolvimento para Windows Phone 7, vamos
criar nosso projeto.

Abra o
Visual Studio 2010 -> New Project -> Visual C# -> Silverlight for
Windows Phone.

Escolha
a opção “Windows Phone Application”, dê um nome ao seu projeto e clique
em “OK”.

Depois disso, vamos ter a seguinte tela:

Temos duas perspectivas diferentes da aplicação.

Do lado esquerdo, a vemos em modo “design” e, do lado
direito, em modo “code”, onde escrevemos nosso xaml. Caso você não conheça xaml, visite este artigo do grande
mestre Macoratti.

Agora vamos criar a cara da nossa aplicação. Antes, baixe aqui o pacote de imagens que usaremos para representar cada signo do zodíaco em
nosso aplicativo. Depois de baixado, coloque a pasta com as imagens dentro da pasta do seu projeto. 

Vamos adicionar as imagens ao nosso projeto. Clique com o botão direito no seu projeto e escolha a opção Add -> New Folder.

Crie a pasta img, nela guardaremos as imagens da nossa aplicação.

Clique com o botão direito sobre a pasta img e escolha a opção Add -> Existing Item.

Adicione todas as imagens que iremos usar em nosso projeto.

Feito isso, vamos alterar algumas coisas no nosso código xaml. Localize o trecho abaixo e altere a propriedade “Text” das duas tags TextBlock.

Você pode colocar um texto de sua preferência.

<!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="O futuro na palma da sua mão" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Zodiac 7" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}" Width="452" />
        </StackPanel>

O que fizemos foi alterar o título da aplicação e da caixa de texto que aparece logo abaixo dele.

Salve as alterações e teremos o seguinte resultado:

Agora vamos definir o “corpo” da nossa aplicação.

É importante que, ao desenvolver para dispositivos móveis, você leve sempre em conta a usabilidade. Quanto mais fácil de usar, melhor será o aplicativo.

Então, vamos criar uma interface onde apareçam os doze signos do zodíaco e, quando o usuário tocar em um deles, o horóscopo daquele signo será exibido logo em seguida.

Localize o código:

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">

 E, logo após, adicione o seguinte código:

<Image Name="iAries" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="10,24,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/aries.png" />
<Image Name="iTouro" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="180,24,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/touro.png" />
<Image Name="iGemeos" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="344,24,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/gemeos.png" />
<Image Name="iCancer" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="10,174,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/cancer.png" />
<Image Name="iLeao" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="176,174,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/leao.png" />
<Image Name="iVirgem" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="344,174,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/virgem.png" />
<Image Name="iLibra" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="10,332,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/libra.png" />
<Image Name="iEscorpiao" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="176,332,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/escorpiao.png" />
<Image Name="iSagitario" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="344,332,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/sagitario.png" />
<Image Name="iCapricornio" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="10,483,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/capricornio.png" />
<Image Name="iAquario" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="176,483,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/aquario.png" />
<Image Name="iPeixes" Cursor="Hand" Height="128" Width="128" HorizontalAlignment="Left" Margin="344,483,0,0"  Stretch="Fill" VerticalAlignment="Top" Source="/Zodiac;component/img/peixes.png" />

O que fizemos foi utilizar a tag “Image” para adicionar nossas imagens ao grid principal da aplicação.

Dentro da tag Image, setamos as seguintes propriedades que eu gostaria de destacar:

• Name: damos um nome àquela tag
• Cursor: dizemos qual tipo de cursor do mouse iremos usar quando ele passar pela imagem
• Height e Width: definições de tamanho
• Source: caminho onde a imagem está localizada
• Margin: posicionamento da imagem em relação aos quatro lados do aparelho

Sobre o Margin, não se preocupe se você achar complicado fazer esse posicionamento via código, não há problemas. Você pode modificar a posição das imagens utilizando o mouse no modo “design”, a propriedade da tag é ajustada dinamicamente.

Então, depois de adicionar e de ajustar nossas imagens, teremos o seguinte resultado:

Para finalizar essa parte, vamos adicionar outro grid à nossa aplicação. Ele será responsável por exibir o horóscopo do signo selecionado pelo usuário.
Após fechar o ContentGrid, adicione o seguinte código:

<Grid x:Name="TextGrid" Grid.Row="1" Visibility="Collapsed">
            <TextBlock Name="txtTituloPrevisao" Style="{StaticResource PhoneTextNormalStyle}" Width="452" FontSize="20"></TextBlock>
            <TextBlock Name="txtPrevisao"  Width="400" Height="500" TextWrapping="Wrap" FontSize="24" />
            <Button Name="btnHome" VerticalAlignment="Bottom" Width="90" Height="90" Cursor="Hand" BorderBrush="Black">
                <Button.Background>
                    <ImageBrush ImageSource="/Zodiac;component/img/back_button.png" Stretch="None" />
                </Button.Background>
            </Button>
        </Grid>

O que fizemos aí foi:

• Adicionar um grid não visível (Collapsed), que será exibido somente quando o usuário escolher um signo;
• Adicionar um TextBlock que terá o título com o nome do signo escolhido;
• Adicionar um TextBlock que exibirá o horóscopo escolhido. A propriedade TextWrapping permite que o TextBlock tenha quebra de linha;
• Adicionar um botão “Voltar”.

E então teremos este resultado:

É claro que, para que essas informações apareçam, precisaremos utilizar um serviço que disponibilize isso para nós.

Como criar esse serviço e tratar as informações que vem dele através da internet é assunto para o próximo artigo; por hora, criamos nossa interface.

Espero que tenham gostado. Até o próximo!