Image object rendering is extremly slow in WPF DataTemplate - wpf

Question

I'm creating a simple file browser with thumbnails. I'm using a ListBox with a custom DataTemplate to display objects in an ObservableCollection.
<DataTemplate>
<StackPanel Margin="5">
<Image Source="{Binding Path=ThumbnailPath}"/>
<Label Background="White" Content="{Binding Path=FileName}"/>
</StackPanel>
</DataTemplate>
The objects (of my custom class File) have just these two string properties: ThumbnailPath and FileName. When user selects a folder, a BackgroundWorker gets a list of files and creates instances of the File class. These instances are dispatched to the UI thread (in groups of 10) using BW's ReportProgress. In the event handler they are added to the ObservableCollection bound to my ListBox.
The problem is when at least 20-30 Files are to be added to my collection; the UI freezes for almost three seconds before the ListBox gets updated. Don't even ask what happens when a folder contains hundreds of files. Everything is propely prepared in the background, so I guess the problem arises when WPF starts to initialize and render empty Image elements. When I comment out the Image from the DataTemplate, it takes a blink of an eye to update the collection and its view.
Is there anything that can be done about this? I know could create the whole View object in the background thread (a new StackPanel, add children new Label and new Image, set values), but the whole point of DataBinding and templating should be to avoid the need to do this... So how do I fill a ListBox with an Image in its DataTemplate without losing responsiveness?
PS: The actual thumbnails are generated by FFmpeg and saved to a file, but this process only starts after all items (with blank image object) are displayed, so they are of no concern in the context of this question.

Answer 1

Try this:
Change ThumbnailPath to the type of BitmapImage;
when setting property use
BitmapImage bi1 = new BitmapImage();
// BitmapImage.UriSource must be in a BeginInit/EndInit block
bi1.BeginInit();
bi1.UriSource = new Uri(#"C:\filepath.jpg");
To save significant application memory, set the DecodePixelWidth or
// DecodePixelHeight of the BitmapImage value of the image source to the desired
// height or width of the rendered image. If you don't do this, the application will
// cache the image as though it were rendered as its normal size rather then just
// the size that is displayed.
// Note: In order to preserve aspect ratio, set DecodePixelWidth
// or DecodePixelHeight but not both.
bi1.DecodePixelWidth = 200;
bi1.EndInit();
bi1.Freeze();
//if you do not Freeze, your app will leak memory.