Exibindo Feeds com o controle ListBox no Windows Phone 7

Em algumas situações disponibilizar uma lista de itens em nossas aplicações pode ser muito importante ou simplesmente a melhor opção para exibir os dados necessários. No Silverlight para Windows Phone 7 temos o controle ListBox, que parecido com o asp.net, podemos exibir os dados em lista. Além de um bom desempenho, a visualização dos dados pode ser personalizada.

Segue abaixo algumas das propriedades desse controle:

Figura 1. Algumas propriedades do controle ListBox.

 

Um controle ListBox, contém um conjunto de controles chamado de ListBoxItem. Um ListBoxItem, é um controle do tipo ContentControl, que significa que pode armazenar outros controles para a exibição dos dados. Porém, cada ListBoxItem pode conter apenas um controle de cada tipo. Podemos preencher os controles armazenados através da propriedade Binding, que veremos ainda em outro artigo.

Segue abaixo um exemplo do ListBox com alguns ListBoxItems:

Figura 2. Exemplo de ListBoxItems no ListBox.

 

Algumas vezes precisaremos preencher os itens adicionados no ListBox, com dados de uma lista objetos por exemplo, e o Silverlight oferece uma grande flexibilidade para a apresentação desses dados. Se quisermos mostrar mais de um valor por vez devemos personalizar no controle ListBox  a propriedade ItemTemplate onde podemos incluir um StackPannel para armazenar esses controles.  Essa propriedade é usada para armazenar o objeto DataTemplate  que especifica a representação visual  dos dados.

Funciona assim:

  1. ListBox solicita a propriedade ItensConteinerGenerator para criar um container para cada item de dados.

Figura 3. ListBox chamando a propriedade ItensConteinerGenerator.

 

   2.  No Listbox, o contêiner é o ListBoxItem

Figura 4. ListBoxItems de um controle ListBox.

 

3.  As solicitações são feitas para a propriedade ItemsControl preparar o container

Figura 5. Conteiner de um ListBox.

 

   4.  Parte desse processo é copiar o ItemTemplate do ListBox, para ser o ContentTemplate do ListBoxItem. O ContentTemplate define o modelo de dados usados para exibir o conteúdo dos controles,que  em nosso caso é o DataTemplate.
   5.  Quando esse modelo é criado dentro do ContentTemplate cria-se um ContentPresent que irá exibir o conteúdo dos ItemsControls. Esse objeto estará dentro do ContentTemplate.
   6.  Você deve estar se perguntando, mas pra que tudo isso? Para preencher o DataTemplate, que será o responsável por preencher os nossos controles como TextBox, TextBlocks com o dados. Esses mesmos controles estarão armazenados  em um ListBoxItem.

   7.  Em outros posts iremos aprofundar mais no assunto. Após todo esse processo, é que os dados serão exibidos em nossos controles.

 

Figura 6. Estrutura de dados do controle ListBox.

 

Agora, vamos fazer um pequeno exemplo onde iremos visualizar Feeds através de um controle ListBox. Para isso iremos utilizar alguns desses conceitos explicados acima.

  1. Crie um novo projeto ou abra um já existente no Visual Studio.
  2. Abra o arquivo MainPage.xaml.
  3. Localize no elemento TitlePannel, os elementos ApplicationTitle e PageTitle, e altere-os como mostra a imagem a seguir:

Figura 7. Alterando as o título da página e da aplicação.

 

4. Agora localize o elemento ContentPannel, para adicionar os controles que exibirão os feeds. O            primeiro passo é adicionar o SteckPanel com o controle ListBox:

Figura 8. Inserindo controles no primeiro StackPanel.

 

5.  Adicione logo abaixo o segundo Stack Panel que irá conter os controles para você informar o              endereço do RSS.

 

Figura 9. Inserindo controles no segundo StackPanel.

 

Essa será a interface da nossa app:

Figura 10. Visualizando os controles adicionados.

 

Dê um clique duplo no botão Ok para adicionar o código C#:

Figura 11. Evento clique do Botão.

 

Em seguida adicione a classe

 

Figura 12. Classe Itens do Feed

 

E por fim o evento que irá preencher a lista de objetos:

 

Figura 13. Evento BaixarRss 

 

Agora podemos compilar o projeto, F5:

Figura 14. Aplicação compilada

 

Informe o endereço do seu RSS e clique em OK, uma dica caso você não queira ficar digitando o endereço do site, você pode fazer uma substituição no evento clique do Botão:

 

Figura 15. Código alternativo para a variável EnderecoSiteRss

 

Assim, caso você não informe algum endereço no textbox o listBox irá exibir os feeds do site que você informou, por padrão.

Essa é a aplicação funcionando:

Figura 16. Aplicação funcionando

 

Com isso finalizamos nosso exemplo. Teste o código e tente modifica-lo de modo que assim você possa entender ainda mais o mesmo.

 

Aprofunde seus conhecimentos sobre este tema visitando a comunidade

 

=)

 

Exibições: 433

Comentar

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

Entrar em DevBrasil

Comentário de Márcio Abrantes em 25 dezembro 2011 às 14:07

cara... estou com um pro nesse ListBox... quando eu clico em um Item ele muda de cor... gostaria de saber como posso deixa a mesma com dos items que não estão selecionados... 

deis de já agradeço...

Comentário de Fabrício Martins Pedroso em 19 abril 2011 às 22:15
Muito bom o artigo, explicação teórica com um exemplo rápido de executar. Excelente!
Comentário de Thiago Oliveira em 18 abril 2011 às 10:06

Obrigado.

=)

Comentário de Kauê Pereira em 17 abril 2011 às 15:47

Ótima matéria cara!

Muito útil!

© 2019   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço