XML Data Binding in Windows Store App using C#

Gaurav Gupta
Jan 07, 2013
50.7k
0
1
Article

When Microsoft launched Windows 8, it also launched a new applications type called Windows Store apps aka Windows 8 app aka Metro style app.

When Visual Studio 2012 was announced last month, it has a supported project templates to build Windows Store apps and has different technologies to build Windows Store apps. You can choose between a pure Web technologies and .NET track. You can build a Windows Store app using HTML 5 and JavaScript. OR you can build a Windows Store app using XAML and C#/VB.NET.

We can develop five types of Windows 8 Apps: Split app, Grid app, Blank app, Navigation app and Fixed layout app. Microsoft Visual Studio 2012 RC is a collection of tools that you can use to create, code, debug, localize, package, and deploy a Windows Windows 8 Apps. Windows 8 Apps introduce many new controls to make the user interface more attractive.

In this article we are going to learn how to bind the data in the grid view controls using XML. XML was designed to transport and store data. We will create a XML file and then, retrieve the XML data to bind it in the grid view control. We will develop aWindows 8 Apps which helps to preview how to use XML and bind the data in controls using XML.

Here are the steps to be followed to bind the data using XML:

Step 1 First, we will create a new blank Windows 8 Apps.

Open Visual Studio 2012.
File -> New -> Project
Choose Template -> Visual C# -> Windows Store
Select Blank Application
Rename the application.

Step 2 Then, we create a new XML file that contains some nodes.

Here is code of XML file

<?xml version="1.0" encoding="utf-8" ?>

<Image>

<ImageUrl>http://www.hdwallpapers.net/gallery/thumbnails/cars/cars_0006_lightbox.jpg</ImageUrl>

</Image>

<Image>

<ImageTitle>Tulips</ImageTitle>

<ImageUrl>Tulips.jpg</ImageUrl>

</Image>

<Image>

<ImageTitle>Jellyfish</ImageTitle>

<ImageUrl>Jellyfish.jpg</ImageUrl>

</Image>s

<Image>

<ImageTitle>Chrysanthemum</ImageTitle>

<ImageUrl>Chrysanthemum.jpg</ImageUrl>

</Image>

<Image>

<ImageUrl>http://www.hdwallpapers.net/gallery/thumbnails/cars/cars_0006_lightbox.jpg</ImageUrl>

</Image>

<Image>

<ImageTitle>Tulips</ImageTitle>

<ImageUrl>Tulips.jpg</ImageUrl>

</Image>

<Image>

<ImageTitle>Jellyfish</ImageTitle>

<ImageUrl>Jellyfish.jpg</ImageUrl>

</Image>s

<Image>

<ImageTitle>Chrysanthemum</ImageTitle>

<ImageUrl>Chrysanthemum.jpg</ImageUrl>

</Image>

</images>

Step 3 Add a few XAML in MainPage.xaml. In this we define a grid view in which we bind the XML data on a button click.

<Page

x:Class="App18.BlankPage1"

IsTabStop="false"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:App18"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<GridView.ItemsPanel>

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

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

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.ItemTemplate>

</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.