Post
Ask Question

Retrieving Data From An XML File In Windows Store Apps Using Data Binding

Steps to create

  1. Create a new project.
  2. Design Graphical User Interface
  3. Add xml file, define root element Child elements & content
  4. Create a class
  5. Load the xml file into MainPage.xaml (Backend Code)
  6. Deploy the project
Create a project(VS 2013)
 
To create a new project go to file-->new project-->select windows Apps-->Blank App.Xaml

Interface Design

Open mainpage.xaml from solution explorer and write the code below
  1. <Grid>  
  2.     <!--<Grid.Background><ImageBrush Stretch="Fill" ImageSource="Assets/2ae6e11d03704fbf868e6204e6425356.jpg"/></Grid.Background>-->  
  3.     <TextBlock x:Name="tb1" HorizontalAlignment="Left" Margin="50,54,0,0" TextWrapping="Wrap" Text="My App" VerticalAlignment="Top" Height="55" Width="609" FontSize="36"/>  
  4.     <Grid Background="Transparent" HorizontalAlignment="Left" Margin="50,162,0,0" VerticalAlignment="Top" Width="274" Height="565">  
  5.         <ScrollViewer Height="565" Width="274" HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto">  
  6.             <StackPanel Height="2000" Width="274">  
  7.                 <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="62" Click="Button_Click" Background="Green"/>  
  8.                 <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="62" Click="b1_Click" Background="Purple"/>  
  9.                 <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="59" Background="BlueViolet" Click="Button_Click_1"/>  
  10.                 <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="59" Background="Orange" Click="Button_Click_2"/>  
  11.                 <Button Content="Button" Background="BlueViolet" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="62" Click="Button_Click_3"/>  
  12.             </StackPanel>  
  13.         </ScrollViewer>  
  14.     </Grid>  
  15.     <ListView x:Name="l1" Height="680" Width="900" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="429,77,0,0">  
  16.         <ListView.ItemTemplate>  
  17.             <DataTemplate>  
  18.                 <Grid Background="{Binding Color}">  
  19.                     <TextBlock Text="{Binding Con}" TextWrapping="Wrap" TextAlignment="Justify" FontFamily="Segoe UI Light" FontSize="20" Margin="10,0,10,0" Width="860" Height="auto"/>  
  20.                 </Grid>  
  21.             </DataTemplate>  
  22.         </ListView.ItemTemplate>  
  23.     </ListView>  
  24. </Grid>    

Adding xml file

To add an xml file follow the procedure:
 
Right Click On project name-->Click On Add-->New Item-->xml file-->Click Ok
 
Now add the folloing code in xml file. 
  1. <items>  
  2.   <item1>  
  3.     <Con>  
  4.     This Is Item 1  
  5.     </Con>  
  6.     <Color>  
  7.       Green  
  8.     </Color>  
  9.   </item1>  
  10.   <item2>  
  11.     <Con>  
  12.       This Is Item 2  
  13.     </Con>  
  14.     <Color>  
  15.     Purple  
  16.     </Color>  
  17.   </item2>  
  18.   <item3>  
  19.     <Con>  
  20.       This Is Item 3  
  21.     </Con>  
  22.     <Color>  
  23.     BlueViolet  
  24.     </Color>  
  25.   </item3>  
  26.   <item4>  
  27.     <Con>  
  28.       This Is Item 4  
  29.     </Con>  
  30.     <Color>  
  31.      Orange  
  32.     </Color>  
  33.   </item4>  
  34.   <item5>  
  35.     <Con>  
  36.       This is an Additional item  
  37.     </Con>  
  38.     <Color>  
  39.       BlueViolet  
  40.     </Color>  
  41.   </item5>  
  42. </items>  

Creating a class

To add a class again:
 
Right Click On Project Name-->Add-->New Class -->click ok 
 
Add the following code in Class:
  1. public class Class1  
  2.     {  
  3.        public string Con { get; set; }  
  4.        public string Color { get; set; }  
  5.        public Class1(string c,string col)  
  6.        {  
  7.            Con = c;  
  8.            Color = col;  
  9.        }  
All is done now we need to load the data of an xml file into the grid view to do this add the following code to mainpage.xaml.cs
 
Before that you need to include these references
  1. using System.Xml.Linq;  
  2. using System.Xml; 
Now add the following code:
  1. private void Button_Click(object sender, RoutedEventArgs e)   
  2. {  
  3.     XDocument Xdoc = XDocument.Load("XMLFile1.xml");  
  4.     IEnumerable < Class1 > items = from item1 in Xdoc.Descendants("item1")  
  5.     select new Class1(  
  6.     item1.Element("Con").Value,  
  7.     item1.Element("Color").Value);  
  8.     l1.ItemsSource = items;  
  9.   
  10. }  
  11.   
  12. private void b1_Click(object sender, RoutedEventArgs e)   
  13. {  
  14.   
  15.     XDocument Xdoc = XDocument.Load("XMLFile1.xml");  
  16.     IEnumerable < Class1 > items = from item2 in Xdoc.Descendants("item2")  
  17.     select new Class1(  
  18.     item2.Element("Con").Value,  
  19.     item2.Element("Color").Value);  
  20.     l1.ItemsSource = items;  
  21.   
  22. }  
  23.   
  24. private void Button_Click_1(object sender, RoutedEventArgs e)   
  25. {  
  26.     XDocument Xdoc = XDocument.Load("XMLFile1.xml");  
  27.     IEnumerable < Class1 > items = from item3 in Xdoc.Descendants("item3")  
  28.     select new Class1(  
  29.     item3.Element("Con").Value,  
  30.     item3.Element("Color").Value);  
  31.     l1.ItemsSource = items;  
  32. }  
  33.   
  34. private void Button_Click_2(object sender, RoutedEventArgs e)   
  35. {  
  36.     XDocument Xdoc = XDocument.Load("XMLFile1.xml");  
  37.     IEnumerable < Class1 > items = from item4 in Xdoc.Descendants("item4")  
  38.     select new Class1(  
  39.     item4.Element("Con").Value,  
  40.     item4.Element("Color").Value);  
  41.     l1.ItemsSource = items;  
  42. }  
  43.   
  44. private void Button_Click_3(object sender, RoutedEventArgs e)   
  45. {  
  46.     XDocument Xdoc = XDocument.Load("XMLFile1.xml");  
  47.     IEnumerable < Class1 > items = from item5 in Xdoc.Descendants("item5")  
  48.     select new Class1(  
  49.     item5.Element("Con").Value,  
  50.     item5.Element("Color").Value);  
  51.     l1.ItemsSource = items;  
  52. }  
All is Done now run your App And check it!!