XML Data Binding in Windows Store App using C#

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<WrapGrid MaximumRowsOrColumns="3" VerticalChildrenAlignment="Top"

HorizontalChildrenAlignment="Left" Margin="0,0,0,0"/>

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Vertical">

<Image Source="{Binding ImageUrl}" Width="300" Height="300" Grid.Column="0" Stretch="UniformToFill" />

<TextBlock Text="{Binding Title}" Width="200" Height="14" FontSize="12" />

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

</Grid>

</Page>

Step 4 Add a new Class in your app.



Here is the code

public class flipimage

{

private string title;

public string Title

{

get { return title; }

set { title = value; }

}

private string imageurl;

public string ImageUrl

{

get { return imageurl; }

set { imageurl = value; }

}

public flipimage(string s, string sa)

{

title = s;

imageurl = sa;

}
}

Step 5 The MainPage.xaml.cs file is as in the following code. It contains the code to retrieve the XML data through LINQ and bind it with the grid view.

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

using System.Xml.Linq;

using Windows.Data.Xml.Dom;

namespace App18

{

/// <summary>

/// An empty page that can be used on its own or navigated to within a Frame.

/// </summary>

public sealed partial class BlankPage1 : Page

{

private string Mediaurl;

private string title;

public BlankPage1()

{

this.InitializeComponent();

}

/// <summary>

/// Invoked when this page is about to be displayed in a Frame.

/// </summary>

/// <param name="e">Event data that describes how this page was reached. The Parameter

/// property is typically used to configure the page.</param>

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

private void xmlbutton_Click(object sender, RoutedEventArgs e)

{

XDocument xdoc = XDocument.Load("XMLFile1.xml");

IEnumerable<flipimage> images = from img in xdoc.Descendants("Image") select new flipimage (img.Element("ImageTitle").Value,img.Element("ImageUrl").Value);

PhotoGrid.DataContext = images;

}

}
}

In the above code we use LINQ to fetch the nodes from the XML file and create objects of flipimage class that are defined above from these value. We stored these created objects in a IEnumerable Generic list and then, make the list DataContext of the grid.

Step 6 Check out the Output of the App.

When you click on the Create Photo Album button. A grid view is shown with multiple images from the XML.