Question

I am trying to visually show that an item (a BitmapImage in my case) has been added to a collection in a ListBox using WPF/MVVM. To give some background, I’m capturing streaming video with a capture card, and I’m taking still images while the video is streaming. These images are captured by clicking the “Still Image” button on the UI. After capturing an image, I would like for a thumbnail of said image in a separate panel on the UI. I understand what needs to be done to do this, but I can’t seem to get it to work. Right now, my Model does all the data retrieval.

public ObservableCollection<BitmapImage> GetAssetThumbnails()
{
    var imageDir = ImgPath != null ? new DirectoryInfo(ImgPath) : null;
    if(imageDir != null)
    {
        try
        {
            foreach (FileInfo imageFile in imageDir.GetFiles("*.jpg"))
            {
                var uri = new Uri(imageFile.FullName);
                _assetThumbnails.Add(new BitmapImage(uri));
            }

        }
        catch (Exception)
        {
            return null;
        }
    }

    return _assetThumbnails;
}

My ViewModel creates a new instance of the model in its constructor, and then sets the public property AssetCollection equal to _assetModel.GetAssetThumbnails(). The ViewModel has all the standard OnPropertyChanged events and event handling.

private void OnPropertyChanged(string propertyName)
{
    if(PropertyChanged != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

#region Public Properties
public ObservableCollection<BitmapImage> AssetCollection
{
    get { return _assetCollection; }
    set
    {
        if (_assetCollection != value)
        {
            _assetCollection = value;
            OnPropertyChanged("AssetCollection");    
        }
    }
}
#endregion

private void _assetCollection_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    OnPropertyChanged("AssetCollection");
}
public event PropertyChangedEventHandler PropertyChanged;

Then, in my XAML file, I bind the ListBox’s item source to AssetCollection.

<ListBox x:Name="lstBoxAssets" ItemsSource="{Binding AssetCollection}" Grid.Row="1" Background="{DynamicResource GrayColor}" Margin="5,0,0,5" ></ListBox>   

I’ve read that each item in the collection should implement the INotifyPropertyChanged interface. I tried creating a wrapper class for a bitmap image that implemented that, but it didn’t work either. Is there something that I’m missing here? The images show up initially, but don’t refresh after an image has been captured and saved. I have a feeling it’s stemming from the event PropertyChanged not getting called. I noticed through debugging that it is always null when it’s checked, and thus the OnPropetyChanged method is never called. I’m not sure where I should add this event handler though. I only use the code-behind file to add the data context of the view model to the view, and that’s it. That is where I would normally think to add any event handling. Can anyone see something simple that I am missing here?

Answer 1

Are you changing the ObservableCollection when you update the list, or are you changing the items stored inside the collection?

If you’re changing the items inside the collection, you need to find a way to tell WPF that the collection has changed when the individual items change so it knows to redraw it.

Usually the items in the collection implement INotifyPropertyChanged, so it’s easy to attach a PropertyChange notification to the items in the list which tells WPF to raise the CollectionChanged event whenever a property changes.

// Wireup CollectionChanged in Constructor
public MyViewModel()
{
    ListOfSomeItems = new List<SomeItem>();
    AssetCollection.CollectionChanged += AssetCollection_CollectionChanged;
}

// In CollectionChanged event, wire up PropertyChanged event on items
void AssetCollection_CollectionChanged(object sender, CollectionChangedEventArgs e)
{
    if (e.NewItems != null)
    {
        foreach(Asset item in e.NewItems)
            item.PropertyChanged += Asset_PropertyChanged;
    }
    if (e.OldItems != null)
    {
        foreach(Asset item in e.OldItems)
            item.PropertyChanged -= Asset_PropertyChanged;
    }
}

// In PropertyChanged, raise CollectionChanged event
void Asset_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    OnPropertyChanged("AssetCollection");
}

If the items don’t implement INotifyPropertyChanged, you’ll have to manually raise the CollectionChanged event anytime an item in the collection changes.

AssetCollection[0].Thumbnail = new BitmapImage(uri);
OnPropertyChanged("AssetCollection");

If you are changing the ObservableCollection itself by adding/removing items and are not seeing the UI update, then it sounds like it might be a syntax error somewhere we can’t see.

The most common one I see is making changes to the private property and not the public property.

// Will not raise the CollectionChanged notification
_assetCollection = _assetModel.GetAssetThumbnails();

// Will raise the CollectionChanged notification
AssetCollection = _assetModel.GetAssetThumbnails();

Although I also see a lot of people who use a List or custom collection instead of an ObservableCollection as well, which does not raise the CollectionChanged event.