Silverlight: Difficulty with ListBox and {Binding} syntax

Question

I'm building a test Windows Phone 7 Silverlight app. (I've been following this tutorial.) I'm having a problem binding the list items to item properties.

Get tweets for an entered username:

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        WebClient twitter = new WebClient();
        twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
        twitter.DownloadStringAsync(new Uri(String.Format("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name={0}", username.Text)));
    }

Add those tweets to the listbox:

    struct TwitterItem
    {
        public string UserName { get; set; }
        public string Message { get; set; }
        public string ImageSource { get; set; }
    }

    void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        if (e.Error != null)
        {
            return;
        }

        XElement xmlTweets = XElement.Parse(e.Result);

        IEnumerable<TwitterItem> tweetItems = from tweet in xmlTweets.Descendants("status")
                               select new TwitterItem   
                               {
                                   ImageSource = tweet.Element("user").Element("profile_image_url").Value,
                                   Message = tweet.Element("text").Value,
                                   UserName = tweet.Element("user").Element("screen_name").Value
                               };

        listBox1.ItemsSource = tweetItems;

        PageTitle.Text = tweetItems.First().UserName;
    }

PageTitle.Text reveals that the tweets are being correctly parsed... but they aren't being displayed correctly.

Here is the listbox I'm trying to use:

        <ListBox Height="454" Width="418" HorizontalAlignment="Left" Margin="36,128,0,0" Name="listBox1" VerticalAlignment="Top">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="132">
                        <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0" />
                        <StackPanel Width="370">
                            <TextBlock Text="{Binding UserName}" Foreground="BlanchedAlmond" FontSize="28"/>
                            <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24"/>
                            <TextBlock Text="shows up just fine" TextWrapping="Wrap" FontSize="24"/>
                        </StackPanel>

                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

The third TextBlock shows up just fine, so it's not an issue of having 0 height or width. I suspect that the problem is something with Text={Binding Property}. Or am I doing something else wrong?

Answer 1

You'll need to pass in an ObservableCollection to listBox1.ItemsSource. Then the UI will update when you set it.

ObservableCollection<TwitterItem> o = new ObservableCollection<TwitterItem>();
foreach(TwitterItem t in tweetItems)
{
   o.Add(t);
}
listBox1.ItemsSource = o;

I believe I had the same issue in my app and this fixed it.

Answer 2

I was defining TwitterItem as an inner class of MainPage, when it needed to be a top-level class.