Silverlight listbox doesn't refresh list - xaml

Question

I'm trying to load a listbox with a list of items being pulled from an OData web service. The data fetch is working well and I'm getting the list of items. The listbox actually works and displays the items, just not every time I start the application... Due to the requirement for the data to be pulled asynchronously sometimes the listbox loads up before the data has returned. When it does I feed it a list with a single 'empty' item to indicate that the data is still loading. Seconds later the data has loaded and I raise a PropertyChanged event for the list. My breakpoint in the list property triggers and when I check the list contains the correct items. But the listbox doesn't display the new items, only the old 'empty' item. It seems exceptionally odd to me that the xaml is clearly requesting the list but then doesn't refresh the layout for the new items.
First the code initialising the ViewModel. ModelReferenceMap implements INotifyPropertyChanged and so should be updating the view when OnPropertyChanged("Areas"); is called (this triggers a fetch of the list from the property but doesn't update the view).
public ModelReferenceMap(Uri serviceURI)
{
// Try initialising these lists to a non null but empty list
// in the hope it will stop the lists breaking when the service
// is a little bit slow...
areas = new List<ModelReferenceItem> { new ModelReferenceItem(null) };
// This is a ServiceReference entity context which will retrieve the data from the OData service
context = new LiveEntities(serviceURI);
// SendingRequest adds credentials for the web service
context.SendingRequest += context_SendingRequest;
// The query to retrieve the items
var areaQuery = from i in context.MigrationItems where i.FusionPTID == 0 && i.Type == "AreaType" orderby i.Name select i;
// On completion this asynccallback is called
AsyncCallback ac = iasyncResult =>
{
// Populates the List with the data items
areas = (from i in ((DataServiceQuery<MigrationItem>) areaQuery).EndExecute(iasyncResult)
select new ModelReferenceItem(i)).ToList();
foreach (ModelReferenceItem area in areas)
{
if (selectedArea == null)
selectedArea = area;
area.PropertyChanged += referenceItem_PropertyChanged;
}
// The Xaml Listbox has its ItemsSource bound to the Areas property. This should trigger a refresh of the listbox contents shouldn't it?
OnPropertyChanged("Areas");
OnPropertyChanged("SelectedArea");
};
// Start the query
((DataServiceQuery<MigrationItem>)areaQuery).BeginExecute(ac, null);
}
Now the XAML. Note that the DataContext of the listbox is ReferenceMap (a property on my main ViewModel which exposes a singleton instance of ModelReferenceMap). I've then bound the ItemsSource to Areas.
<ListBox Grid.Row="0" DataContext="{Binding ReferenceMap}" ItemsSource="{Binding Areas}" SelectedItem="{Binding SelectedArea, Mode=TwoWay}" HorizontalAlignment="Stretch" Margin="3" Name="listBoxFusionAreas" VerticalAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="{Binding CompleteStatusColour}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock FontSize="12" Text="{Binding Name}" />
<TextBlock Grid.Column="1" FontSize="12" Text="{Binding Count}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The Areas property is triggering correctly indicating the binding is working. When Areas is only requested AFTER the service data has been retrieved (ie only once) the list works perfectly. If however the Areas property is triggered prior to the service data returning (ie with the single 'empty' item) it triggers again during the OnPropertyChanged("Areas"); call with the full set of items, only this time the list still just shows the original 'empty' item.
What am I doing wrong?

Answer 1

Whenever you are binding to a collection in your ViewModel you need to make sure whether the items in your collection are gonna change?? In your case you need to implement
ObservableCollection<ModelReferenceItem> areas ;
Instead of
List<ModelReferenceItem> area;
ObservableCollection implements INoifyCollectionChanged event that notifies your view about the changes in the collection (Add/Remove)