Search code examples
web-servicesdata-bindingwindows-phone-7listboxitems

Binding webService data to the ListBox DataTemplate WP7


I'm trying to read data using web service and display it on a costumized lisBox as below but it didn't work. "When i do the debugging my phone application screen does not show any list"

XAML code:

 <ListBox Height="500" HorizontalAlignment="Left" 
         Margin="8,47,0,0" 
         Name="friendsBox" VerticalAlignment="Top" Width="440">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Height="100" Width="100" 
                       VerticalAlignment="Top" Margin="0,10,8,0"
                       Source="{Binding Photo}"/>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Nom}" FontSize="28" TextWrapping="Wrap" Style="{StaticResource PhoneTextAccentStyle}"/>
                    <TextBlock   />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

C# code:

void friends_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    if (e.Error == null)
    {
        ListBoxItem areaItem = null;
        StringReader stream = new StringReader(e.Result);
        XmlReader reader = XmlReader.Create(stream);

        string Nom = String.Empty;
        string Photo = String.Empty;

        while (reader.Read())
        {
            if (reader.NodeType == XmlNodeType.Element)
            {

                if (reader.Name == "nom")
                {

                    Nom = reader.ReadElementContentAsString();

                    areaItem = new ListBoxItem();
                    areaItem.Content = Nom;
                    friendsBox.Items.Add(Nom);
                }
                if (reader.Name == "photo")
                {

                    Photo = reader.ReadElementContentAsString();

                    areaItem = new ListBoxItem();
                    areaItem.Content = Photo;
                    friendsBox.Items.Add(Photo);
                }
            }
        }
    }
}

Solution

  • The problem is related to the inconsistent way you're managing your data. The data binding syntax in the XAML doesn't match the way you're manually loading items in the codebehind. Without seeing the structure of your XML, I'll make an inference that each of the items you're trying to show in the ListBox has two properties - nom and photo. If that is the case, you can easily fix the problem you're experiencing by replacing the code in your codebehind with the following:

    // create this additional class to hold the binding data
    public class ViewData
    {
        public string Nom { get; set; }
        public string Photo { get; set; }
    }
    
    void friends_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        if (e.Error == null)
        {
          var doc = XDocument.Load(new StringReader(e.Result));
          var items = from item in doc.Element("data").Elements("item")
                      select new ViewData
                      {
                          Nom = item.Element("nom").Value,
                          Photo = item.Element("photo").Value,
                      };
          friendsBox.ItemsSource = items;
      }
    }
    

    You will need to add a reference to System.Xml.Linq and add the appropriate using statement to your code.

    HTH!

    Chris