Question

I am playing around with creating a Windows Phone application. I have been watching this tutorial, but I am having some issues that the view is not updated with the data (the template is simply empty).

I have made sure that the items collection is actually set with data, but I suspect that it is the NotifyPropertyChanged event which is not fired correctly.

What might I be missing?

My MainViewModel looks like this:

public class MainViewModel : INotifyPropertyChanged
{
    private ServiceAgent _serviceAgent;
    public MainViewModel()
    {
        this.Items = new ObservableCollection<SocialListItemViewModel>();
        if (_serviceAgent == null)
        {
            _serviceAgent = new ServiceAgent();
        }
    }

    /// <summary>
    /// A collection for ItemViewModel objects.
    /// </summary>
    public ObservableCollection<SocialListItemViewModel> Items { get; private set; }

    public bool IsDataLoaded
    {
        get;
        private set;
    }

    /// <summary>
    /// Creates and adds a few ItemViewModel objects into the Items collection.
    /// </summary>
    public void LoadData()
    {
        _serviceAgent.GetSocialItems();
        _serviceAgent.SocialItemsLoaded += new ServiceAgent.SocialListItemsLoadedEventHandler(_serviceAgent_SocialItemsLoaded);

        //// Sample data; replace with real data
        //this.Items.Add(new SocialListItemViewModel() { ContentShort = "Facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu", ImageUrl = "http://profile.ak.fbcdn.net/hprofile-ak-ash2/50215_277666338969761_534345200_t.jpg" });
        //this.Items.Add(new SocialListItemViewModel() { ContentShort = "Habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent", ImageUrl = "http://profile.ak.fbcdn.net/hprofile-ak-ash2/50215_277666338969761_534345200_t.jpg" });
        //this.Items.Add(new SocialListItemViewModel() { ContentShort = "Ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos", ImageUrl = "http://profile.ak.fbcdn.net/hprofile-ak-ash2/50215_277666338969761_534345200_t.jpg" });
        //this.Items.Add(new SocialListItemViewModel() { ContentShort = "Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur", ImageUrl = "http://profile.ak.fbcdn.net/hprofile-ak-ash2/50215_277666338969761_534345200_t.jpg" });

        this.IsDataLoaded = true;
    }

    void _serviceAgent_SocialItemsLoaded(ObservableCollection<SocialListItemViewModel> socialItems)
    {
        Deployment.Current.Dispatcher.BeginInvoke(() =>
                                                      {

                                                          this.Items = socialItems;

                                                          //this.Items.Add(new SocialListItemViewModel() { ContentShort = "Facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu", ImageUrl = "http://profile.ak.fbcdn.net/hprofile-ak-ash2/50215_277666338969761_534345200_t.jpg" });
                                                          //this.Items.Add(new SocialListItemViewModel() { ContentShort = "Habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent", ImageUrl = "http://profile.ak.fbcdn.net/hprofile-ak-ash2/50215_277666338969761_534345200_t.jpg" });
                                                          //this.Items.Add(new SocialListItemViewModel() { ContentShort = "Ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos", ImageUrl = "http://profile.ak.fbcdn.net/hprofile-ak-ash2/50215_277666338969761_534345200_t.jpg" });
                                                          //this.Items.Add(new SocialListItemViewModel() { ContentShort = "Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur", ImageUrl = "http://profile.ak.fbcdn.net/hprofile-ak-ash2/50215_277666338969761_534345200_t.jpg" });
                                                          NotifyPropertyChanged("ContentShort");
                                                      });
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

The view model looks like this:

[DataContract]
public class SocialListItemViewModel : INotifyPropertyChanged
{

    private string _contentshort;
    /// <summary>
    /// Sample ViewModel property; this property is used in the view to display its value using a Binding.
    /// </summary>
    /// <returns></returns>
    [DataMember]
    public string ContentShort
    {
        get
        {
            return _contentshort;
        }
        set
        {
            if (value != _contentshort)
            {
                _contentshort = value;
                NotifyPropertyChanged("ContentShort");
            }
        }
    }

    private string _imageUrl;
    /// <summary>
    /// Sample ViewModel property; this property is used in the view to display its value using a Binding.
    /// </summary>
    /// <returns></returns>
    [DataMember]
    public string ImageUrl
    {
        get
        {
            return _imageUrl;
        }
        set
        {
            if (value != _imageUrl)
            {
                _imageUrl = value;
                NotifyPropertyChanged("ImageUrl");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

The service agent, which extracts the data looks like this:

public class ServiceAgent
{
    public delegate void SocialListItemsLoadedEventHandler(ObservableCollection<SocialListItemViewModel> socialItems);
    public event SocialListItemsLoadedEventHandler SocialItemsLoaded;

    private ObservableCollection<SocialListItemViewModel> socialListItemViewModels = new ObservableCollection<SocialListItemViewModel>();
    public void GetSocialItems()
    {
        WebClient wcNewsTractor = new WebClient();
        wcNewsTractor.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wcNewsTractor_DownloadStringCompleted);
        wcNewsTractor.DownloadStringAsync(new Uri("URL TO JSON FEED"));

    }

    void wcNewsTractor_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        if (e.Error == null && e.Cancelled == false)
        {
            //ObservableCollection<SocialListItemViewModel> socialListItemViewModels = new ObservableCollection<SocialListItemViewModel>();

            ThreadPool.QueueUserWorkItem((s) =>
            {
            socialListItemViewModels = ReadToObject(e.Result);
            Deployment.Current.Dispatcher.BeginInvoke(() =>
                                                          {
                                                              SocialItemsLoaded(socialListItemViewModels);
                                                          });

            });

        }
    }

    // Deserialize a JSON stream to a User object.
    public static ObservableCollection<SocialListItemViewModel> ReadToObject(string json)
    {
        ObservableCollection<SocialListItemViewModel> res = new ObservableCollection<SocialListItemViewModel>();
        List<SocialListItemViewModel> deserializedItems = new List<SocialListItemViewModel>();
        MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(json));
        DataContractJsonSerializer ser = new DataContractJsonSerializer(deserializedItems.GetType());
        deserializedItems = ser.ReadObject(ms) as List<SocialListItemViewModel>;
        ms.Close();
        return new ObservableCollection<SocialListItemViewModel>(deserializedItems);
    }
}

In my MainPage the constructor looks like this:

public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            // Set the data context of the listbox control to the sample data
            DataContext = new SocialListItemViewModel(); //App.ViewModel;
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

The MainPage.xaml where the template is added looks like this:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                  <StackPanel Margin="0,0,0,17" Width="432" Height="225" d:DataContext="{d:DesignData /SampleData/SocialListItemViewModelSampleData1.xaml}">
                      <Image  Height="125" Width="125" Margin="0" Source="http://myimage.com/myimage.jpg" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                      <TextBlock x:Name="ContentShort" Text="{Binding ContentShort}" TextWrapping="Wrap" Margin="0,-125,0,0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Foreground="#99FFFFFF" Width="279" RenderTransformOrigin="0.459,0.513" VerticalAlignment="Center" Height="160"/>
                      <Button Name="btnVote" Height="72" HorizontalAlignment="Center" Width="225" Margin="0,-10,-130,0" VerticalAlignment="Center" BorderThickness="2" Content="Vote" Background="#FF0090A1" />
                  </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

Answer 1

Ok, what I think is probably going on here is that you aren’t firing your notify for the ObservableCollection Items.

In this line:

 Deployment.Current.Dispatcher.BeginInvoke(() =>
                       {
                           this.Items = socialItems;

You are throwing out your old ObservableCollection, and assigning it to the one being returned from your service. The ObservableCollection only sends out notifications on adds/deletes, so when you do this, nothing is getting fired to the view.

You have two ways of fixing this. One is to set up Items with a private backing member variable, and calling NotifyPropertyChanged("Items") in the setter. Alternatively, you can return a generic List<>, and iterate through the contents, adding them to the Items collection, something like this:

 Deployment.Current.Dispatcher.BeginInvoke(() =>
                       {
                           this.Items.Clear();
                           foreach(var item in socialItems)
                           {
                                this.Items.Add(item);
                           }
                       }