Lendo Arquivo XML no Silverlight

Olá a todos, hoje veremos como ler um arquivo xml no Silverlight.

Estarei utilizando o Visual Studo 2010 Premium nesse exemplo, mas pode ser feito através do Visual Studo Express. Em caso de dúvidas de uma  olhada nesse post: http://dtomasini.wordpress.com/2010/05/01/o-que-e-silverlight.

Primeiramente vamos criar um novo projeto Silverlight, para isso clique em File => New => Project. Escolha no menu Templates a opção  Silverlight e selecione Silverlight Application. Eu nomeei como ReadXML.

No arquivo MainPage.xaml crie um DataGrid e um Botão, você pode se basear na listagem 1.

<UserControl x:Class="ReadXML.MainPage"
              xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
     <Grid x:Name="LayoutRoot" Background="White">
         <StackPanel Margin="10">
             <Button x:Name="btnRead" Content="Ler XML" Width="100" Height="24" HorizontalAlignment="Left" Click="btnRead_Click" Margin="10"/>
             <sdk:DataGrid x:Name="gridCollection"  AutoGenerateColumns="False" Width="322" HorizontalAlignment="Left" Margin="10" >
                 <sdk:DataGrid.Columns>
                     <sdk:DataGridTemplateColumn Header="Nome" MinWidth="160">
                         <sdk:DataGridTemplateColumn.CellTemplate>
                             <DataTemplate>
                                 <TextBlock Text="{Binding CatalogName}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                             </DataTemplate>
                         </sdk:DataGridTemplateColumn.CellTemplate>
                     </sdk:DataGridTemplateColumn>
                     <sdk:DataGridTemplateColumn Header="Imagem" MinWidth="160">
                         <sdk:DataGridTemplateColumn.CellTemplate>
                             <DataTemplate>
                                 <Image Width="50" Height="50" Source="{Binding ImageUrl}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                             </DataTemplate>
                         </sdk:DataGridTemplateColumn.CellTemplate>
                     </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
             </sdk:DataGrid>
         </StackPanel>
     </Grid>
 </UserControl>

Listagem 1 – MainPage.xaml

Com nossa View pronta, o próximo passo é criar uma nova classe no Projeto ReadXML, da qual eu nomeei como XmlItem. A classe é bem simples, crei duas propriedades strings nela, uma chamada CatalogName e a outra ImageUrl. Conforme listagem 2.

 {
     public class XmlItem
     {
         private string _catalogName;
         public string CatalogName
         {
             get { return this._catalogName; }
             set { this._catalogName = value; }
         }
         private string _imageUrl;
         public string ImageUrl
         {
             get { return this._imageUrl; }
             set { this._imageUrl = value; }
         }
     }
 }

Listagem 2 – Classe XmlItem

O terceiro passo é cria o nosso arquivo xml, para isso crie uma nova pasta no projeto ReadXML chamada Xml e adicione um novo arquivo xml na mesma. Eu nomeei de CatalogAndImage.xml e  vamos criar a seguinte estrutura (listagem 3):

<catalogs>
  <catalog>
    <name>Dellicious</name>
    <image>/ReadXML;component/Images/dellicious.png</image>
  </catalog>
  <catalog>
    <name>Diggs</name>
    <image>/ReadXML;component/Images/digg.png</image>
  </catalog>
  <catalog>
    <name>Reddit</name>
    <image>/ReadXML;component/Images/reddit.png</image>
  </catalog>
  <catalog>
    <name>RSS</name>
    <image>/ReadXML;component/Images/rss.png</image>
  </catalog>
  <catalog>
    <name>Stumble</name>
    <image>/ReadXML;component/Images/stumble.png</image>
  </catalog>
  <catalog>
    <name>Twitter</name>
    <image>/ReadXML;component/Images/twitter.png</image>
  </catalog>
</catalogs>

Listagem 3 – CatalogAndImage.xml

Crie a pasta Images e adicione algumas imagens. No meu caso são 6 images como vocês já notaram pelo arquivo xml. Renomeias conforme o seu arquivo xml.

Agora partiremos para a finalização do nosso projeto. Vamos editar o evento de click do nosso botão na MainPage.xaml.cs. Cole o código da listagem 4.

1. XDocument xdoc = XDocument.Load("/ReadXML;component/Xml/CatalogAndImage.xml");
2.    List<XmlItem> dataList = (from item in xdoc.Descendants("catalog")
3.                              select new XmlItem()
4.                              {
5.                                  CatalogName = item.Element("name").Value,
6.                                  ImageUrl = item.Element("image").Value
7.                               }).ToList();
8.    this.gridCollection.ItemsSource = dataList.ToList();

Listagem 4 – Evento do Click do Botão

O código é bem simples, na linha 1 é instanciado um XDocument, que nada mais é que um documento xml. Carregado o CatalogAndImage.xml, na linha 2 nós declaramos uma lista de XmlItem e utilizando o Linq to Xml filtramos e carregamos a mesma. Na linha 8 apenas informamos que o ItemsSource da nossa grid é a List<XmlItem>, no caso dataList. O resultado pode ser visto na figura 1.

Figura 1 – Resultado

Conclusão

Como podemos notar é algo muito simples de ser feito e bastante prático no dia a dia.

PS: Para aqueles que não conhecem LINQ, estou desenvolvendo um post sobre o assunto.