Question

I have a ListBox containing a large number of Image controls. The Source of each Image is set to a URI on a remote server. About 20 images are visible at a time (the panel is a VirtualizingStackPanel), and each time the ListBox is scrolled it takes a few seconds to render the images, resulting in extremely sluggish scrolling. The images are small (5-7K each) and no resizing is involved.

When the Source is a local URI, performance is fine.
The images are being served by a nginx server, and render almost instantly in a browser.

My question is:

1. Is there a better way to display these images in WPF?
2. If this is the best way, how should I begin tracking down the bottleneck?

EDIT:

The ListBox is populated by binding to a collection. This is the XAML of the DataTemplate set as the ListBox’s ItemTemplate:

<ListBoxItem>
    <StackPanel>
        <TextBlock Text="{Binding Path=Title}" />
        <Image Width="50" Margin="0">
            <Image.Source>
                <BitmapImage UriSource="{Binding Path=ImageUri}" DecodePixelWidth="50" />
            </Image.Source>
        </Image>                            
    </StackPanel>
</ListBoxItem>

Answer 1

Try binding the images from ObservableCollection which will return the ImageSource collection to a Image inside a ItemTemplate.

HTH