如何在Windows Metro应用程序中使用XML解析在Gridview中绑定图像

Question

I'm working on my first Windows 8 app. I'm trying to display a GridView populated with Image and Image description. I want to get my data from an XML file I created. I found the ItemSource property of the GridView and I try to bind my XML file to it but I can't do this.

Please tell me right way to do this task. thanx

Answer 1

You can't bind an XML file directly to GridView.ItemsSource , you need to parse it first into an object. I'd create a class with all data to be displayed in GridView :

public class GridViewItem
{
    public string Description { get; set; }
    public ImageSource Image { get; set; }
}

The next step is to parse the XML file into a list of GridViewItem s:

var xmlString = await FileIO.ReadTextAsync(storageFile);
var xml = XDocument.Parse(xmlString);
var Items = xml.Element("rootNode").Elements("itemNode").Select(i => new GridViewItem
    {
        Description = (string)i.Element("descriptionNode"),
        Image = ParseImage(i.Element("imageNode"))
    }).ToList();

I've assumed the tags in your XML are rootNode , itemNode , descriptionNode and imageNode . Also I don't know how your image data is stored in XML. The logic to convert it to an ImageSource should be in ParseImage() .

The only thing left is to assign the Items list above to a property in your view model serving as you DataContext and bind it to ItemsSource :

<GridView ItemsSource="{Binding Items}" />

This is the basic idea. There's a lot of details missing in my answer but that's best I can do based on your question.