Criando um Leitor de RSS utilizando o Blend 2 - Parte II [Final]

Como vimos na parte anterior montamos uma imagem no blend que carrega a imagem de um RSS.


fig.1 - Imagem inserida no Canvas

Agora trabalharemos com um grid de informações que através de um link direto de uma amostra de títulos carregará a descrição de seu item em um TextBlock.
Primeiramente vamos incluir o grid no Canvas। Ele se encontra na parte de Tools do nosso blend como demonstra a figura abaixo:



fig.2 – Inserção do GRID no Canvas
1. Botão para inserção de grid no Canvas
Clique na opção GRID (se caso esta não estiver como padrão) e faça a área dentro no Canvas com um tamanho na qual vc preferir. A figura abaixo demonstra o tamanho que defini, notando-se que também alterei nas opções de tamanho da imagem do RSS.



fig.3 – Grid inserido na aplicação
Como todo e qualquer objeto inserido no Blend, o GRID também possui propriedades específicas para tal. E agora, vamos mexer nessas propriedades para manter o sistema coligado ao RSS que estamos aplicando. Vamos clicar no quadradinho pequeno que se encontra no canto direito na parte Common Properties > DataContext.


fig.4 – área de Propriedades comuns do grid
Uma vez clicado, teremos que criar um novo Data Bind, então aparecerá uma pequena janela aonde você escolherá “Data Binding...” e, dali você fara´o vinculo necessário para montagem completa do grid relacionado ao RSS.


fig.5 – Aplicação de Data Binding... no GRID
Quando clicado no “Data Binding...” Uma janela se abrirá para a criação do Bind. Como nesse tutorial queremos ver principalmente os itens de RSS vamos selecionar. No Box da direita chamada de fields , clique na abertura até encotrar o a tag Item(Array), selecione-o e depois clique no botão Finish.


fig. 6 – Selecionando o Item(Array) para criação do Bind no GRID
Bom, já estamos quase lá, uma vez formado o bind no grid agora vamos colocar um listBox e um TextBlock para mostrar o funcionamento do modelo.









Como demonstra a figura, selecionamos o listBox para colocarmos no Canvas (1) . Note que é extremamente importante que esse listBox fique dentro do grid (2). Se caso qdo criar o objeto ele não constar dentro do grid, você pode arrastá-lo através do layers demonstrados no Objects and Timeline ou, clicando duas vezes no grid para ele ficar selecionado e daí você inserir o objeto dentro (3).


fig. 7 – Criando um listBox
Uma vez criado o listBox devemos seguir quase que os mesmos procedimentos para montar o seu bind. Vamos na parte Common Properties > ItemsSource, Vamos criar um novo “Data Binding...”. Nessa nova janela que se abrirá escolheremos a aba “Explicit Data Content” , lá escolheremos a tag Item(Array) , e a partir dali clicamos no botão Define Data Template.

fig. 8 – Criando um Data Binding no listBox
Dali uma nova janela se abrirá, e você selecionará somente o Box title. Isso indicará que, no listBox aparecerão somente os títulos do RSS. Uma vez montado isso montaremos dentro do grid um TextBlock, vinculando-o ao click da lista diretamente no carregamento de seu conteúdo.


fig. 9 – Criando um Data Template no listBox
Quando clicado em ok, automaticamente os títulos do RSS já estarão carregados, como demonstra abaixo:


fig. 10 – Títulos carregados no listBox
Para concluir vamos criar o TextBlock para exibição do conteúdo. Ele se encontra no Tools do Blend 2. Depois coloque também dentro do grid, da mesma maneira que você fez com o listBox. Uma vez criado o TextBlock (fig. 11) devemos seguir quase que os mesmos procedimentos para montar o seu bind. Vamos na parte Common Properties > Text, Vamos criar um novo “Data Binding...”. Nessa nova janela que se abrirá escolheremos a aba “Explicit Data Content” , lá escolheremos a tag Description , e a partir dali clicamos no botão Define Data Template (fig. 12).


fig. 11 – Criação do TextBlock

E agora a melhor parte, dê F5, e veja o aplicativo que você acabou de criar rodando. Até mais e boa sorte a todos.
Obs.: Todas as imagens utilizadas, tb como a edição HTML desse post foi feito com Microsoft Expression Design e Microsoft Expression Web respectivamente.