WPF listbox image binding

Question

Good morning,
I already implemented a application that loads images from a directory to a listbox. All ok but the loading takes about 5 seconds to display around 20-30 images. Is there a way to decrease the time needed for the images to be loaded. Or is it correct to
display an loading image in front of the UI so the user knows images are loading? Thank you in advance for the help. Below is my xaml code for the listbox.
<ListBox Name="Images" ListBox.SelectionChanged="lstImagesChange_Click" Grid.Column="1"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" VirtualizingStackPanel.IsVirtualizing="false"
VirtualizingStackPanel.VirtualizationMode="Recycling" ScrollViewer.IsDeferredScrollingEnabled="True">
<ListBox.Resources>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="20"/>
<Setter Property="Height" Value="Auto" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" FlowDirection="LeftToRight" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="#bb62d8" Background="Black" Width="200" Height="200" Margin="5,5,10,5" CornerRadius="10">
<Image Source="{Binding Path=Path, Converter={StaticResource UriToBitmapConverter}}" Tag="{Binding ImageID}" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and below is the code loading the images
if (!(images == null))
Images.ItemsSource = images;

Answer 1

Hmm, so are your images really 150x150 or are they larger than that?
Anyway, here's one solution to show a "loading" image and not block the UI while all images are loading. You seem to already have some class with a Path property which you use as image Source. Let's say ImageItem
public class ImageItem : INotifyPropertyChanged
private static ImageSource loadingImage;
private ImageSource image;
private Task loadingTask;
private string path;
public string Path
get { return path; }
set { path = value; }
public ImageSource Image {
get {
if (image == null) {
if (loadingTask == null) {
                    if (loadingImage == null)
                        loadingImage = new BitmapImage(new Uri("loading.png", UriKind.Relative));
                     image = loadingImage;
loadingTask = Task.Run<BitmapImage>(() => {
var bi = new BitmapImage();
bi.BeginInit();
bi.DecodePixelWidth = 64;
bi.CacheOption = BitmapCacheOption.OnLoad;
bi.UriSource = new Uri(path);
bi.EndInit();
bi.Freeze();
return bi;
}).ContinueWith(t => {
Image = t.Result;
loadingTask = null;
}, TaskScheduler.FromCurrentSynchronizationContext());
return image;
private set {
if (image == value)
return;
image = value;
OnPropertyChanged("Image");
private void OnPropertyChanged(string propertyName)
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
public event PropertyChangedEventHandler PropertyChanged;
In summary:
there's a new Image property, bind Image.Source to that instead of Path
when the Image property is read for the first time it will start a task which loads the actual image and return loadingImage instead of the real image
when the loading task completes it will set the Image property to the loaded image. This will raise a property changed notification that will update the Image control in the UI.
of course, the converter is no longer needed
"loading.png" must be part of the project and in the same folder as the XAML file
Caveats:
This works well for a relatively small number of images like 20-30. For more images you'd really need a WrapPanel that supports virtualization, that would allow images to be loaded as the user scrolls through the list. Without virtualization all images will
be loaded and even if the UI doesn't lock up you'll saturate the CPU for a long time with so many tasks.