Adicionando e navegando entre páginas no Windows Phone 7

No artigo de hoje vamos ver uma necessidade bastante comum no desenvolvimento de aplicações para WP7. É você adicionar páginas em sua aplicação para proporcionar uma distribuição de conteúdo ou mesmo por necessidade da app. No nosso exemplo vamos adicionar páginas, navegar entre elas, e conhecer um pouco o controle Grid.

Vamos começar.

  1. Abra o Visual Studio 2010 Express for Windows Phone ou a versão do VS2010 que você tiver instalado.

    2. No menu File clique em New Project.

Figura 1. Menu File | New Project


Será aberta a janela New Project. No lado Esquerdo da tela vemos os templates, e na parte central da janela, vemos os tipos de aplicação que podemos criar.

  1. Nos templates instalados clique em Silverlight for Windows Phone.
  2. Nos tipos de aplicações clique em Windows Phone Aplication
  3. Nomeie app como NavegacaoApp e clique em OK.

Figura 2. Janela New Project.

 

Nosso projeto será criado.

 

Figura 3. Projeto criado.

 

Nossa app, terá um menu na tela inicial, que permitira a navegação para as páginas. Nas páginas secundárias teremos uma imagem seguida de uma texto.=)

Vamos adicionar os botões do menu. Para isso abra o arquivo MainPage.xaml, ele é nossa tela inicial.

O arquivo MainPage.xaml, é divido em duas áreas, TitlePanel e ContentPanel. Os controles serão adicionados no ContentPanel, que na verdade é um controle Grid.

A essa altura você deve estar pensando mas o que é um Grid? Bom.. ele é um controle que te permite fazer uma organização/renderização de conteúdo. Como assim? Funciona como se fosse uma tabela, onde podemos posicionar nossos objetos em linhas e colunas.

Bom, adicione os botões em no ContentPanel como mostra o código a seguir: 

Figura 4. Código xaml dos botões.

 

A disposição desses botões em na página ficará da seguinte forma:

Figura 5. Botões adicionados.

 

Agora, no arquivo MainPage.xaml,  no TitlePanel localize os elementos ApplicationTitle e PageTitle. São eles que definem o Titulo da aplicação e da página. Altere suas propriedades Text como mostra a imagem a seguir:

Figura 6. Alterando os títulos.

 

Como vamos exibir outras páginas,é hora de adicioná-las, na janela Solution Explorer, caso não esteja aberta use a combinação CTRL + W+ S  ;).

  1. Clique com o botão direito no nome do projeto.
  2. Selecione Add >> New Folder.

Figura 7. Adicionando uma pasta.

 

Vamos adicionar as páginas em uma pasta. Nomeie ela como Páginas.

Agora, clique com o botão direito nessa pasta que acabamos de adicionar. Selecione Add | New Item.

Figura 8. Adicionando uma página.

 

Vamos adicionar uma nova página nesta pasta.

 

Será aberta a janela Add New Item. Do lado esquerdo podemos visualizar os templates instalados e na parte central da janela podemos ver os itens que podemos incluir em nosso projeto.

Figura 9. Janela Add New Item.

 

Selecione o item Windows Phone Portrait Page. Nomeie essa página e clique em ok.

Adicione mais outras duas páginas desse tipo na mesma pasta que criamos.

Agora que temos nossas páginas, podemos incluir nossas imagens. Pra isso, vamos adicionar uma outra pasta. Dessa vez, nomeie como Imagens. Para adicionar,  imagens nessa pasta faça o seguinte:

Clique com o botão direito na pasta Imagens.

Selecione Add >> Existing Item..

Será aberta uma janela onde você poderá procurar e adicionar suas imagens. Adicione 3 imagens e clique em Add.

Agora abra uma de suas páginas, que podemos chamar de secundárias, e adicione um controle Image um TextBlock.

Vamos adicionar uma das imagens seguida de um pequeno texto. A seguir o código XAML mostra como eles serão exibidos:

Figura 10. Código XAML dos controles da página secundária.

 

Como havia dito anteriormente o controle Grid, é como se fosse uma tabela, com linhas e colunas. Perceba que nosso Grid, possui duas linhas, elas estão definidas pelas propriedades RowDefinition. Veja que nosso TextBlock está com a propriedade Grid.Row = “1”; ele irá ser exibido na segunda linha de nosso Grid.

Agora, assim como mostra a imagem 6 localize os campos ApplicationTitle e TitlePage, e adicione um título à página. O titulo da aplicação sugiro o seguinte : #2 #wp7 dev Brasil.

Repita esse mesmo processo para todas as páginas secundárias. Não se esqueça de alterar o endereço da imagem e o seu respectivo texto.

Feito isso podemos então adicionar nosso código nos botões, da página principal. Abra o arquivo MainPage.xaml, e adicione o evento clique de cada botão como mostra a imagem a seguir:

Figura 11. Evento click dos botões.

 

Agora podemos compilar nosso projeto, F5.

Essa é nossa página inicial, com os botões que irão chamar cada uma das páginas.

Figura 12. Página inicial da aplicação.

 

Agora clicando em um dos botões será exibida uma das páginas.

Figura 13. Página secundária.

 

Lembrando que para voltar a página iniciar use o botão voltar no menu padrão do Winows Phone.

Com isso terminamos nossa app. Vimos como adicionar outras páginas a nossa aplicação navegar entre elas, adicionar imagens e um pouco o controle Grid. 

 

=)

 

Aprofunde seus conhecimentos sobre o tema visitando o grupo Windows...

 

 

 

 

Exibições: 1116

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

Comentário de Flávio André em 5 abril 2011 às 13:31

Legal Guilherme,

 

é assim mesmo chamadas assíncronas são complicadas mesmo, não desanime !

Comentário de Guilherme Ferreira em 5 abril 2011 às 13:26

Flávio,

 

O Windows Phone 7 está show de bola! Combinando o Expression Blend com o Visual Studio 2010 está muito bom de criar interfaces. A única coisa que eu ainda não tenho total controle são as chamadas assíncronas (sempre programei web com chamada síncrona), mas isso já está se tornando fácil :D

Comentário de Flávio André em 5 abril 2011 às 13:18

Parabéns,

 

Trabalhei mais de 5 anos só com desenvolvimento para windows ce e windows pocket pc e acredito que com essa nova versão surgiram grandes oportunidades!

Comentário de Guilherme Ferreira em 5 abril 2011 às 11:42
Boa Garoto! Preciso terminar meu TCC pra voltar aos estudos de #WP7 ...! Parabéns!

© 2019   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço