Minimizing memory consumption listbox of images (WPF)

Question

I have listbox which bind to ObservableCollection and take filename to display images

My xaml is:

<Window x:Class="ThumbnailsView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="578" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="55"/>
        </Grid.RowDefinitions>

            <ListBox Grid.Row="0" x:Name="ImageListbox"
        ItemsSource="{Binding}" 
        Background="AliceBlue" ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <CheckBox Height="16" VerticalAlignment="Top" Margin="0,10,0,0"/>
                            <Image Margin="10,10,10,0" Height="64" Width="64" VerticalAlignment="Top">
                                <Image.Source>
                                    <BitmapImage DecodePixelWidth="64" UriSource="{Binding Path=Name}"/>
                                </Image.Source>                            
                            </Image>
                    </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>

        <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>

            <Button Grid.Row="1" Content="Get Images" Name="getImageBtn" Click="getImageBtn_Click" Width="100" Height="30"></Button>

    </Grid>
</Window>

The problem is, it loads entire images and will consume a lot of ram if I have a large collection. How to minimize its memory consumption ?

Answer 1

Enable UI Virtualization. Then the UI controls will be recycled and the minimal amount of memory will be used.

You could also load thumbmnails instead of the fully fledged photos.

---

Some resources to read on:

http://www.codeproject.com/Articles/34405/WPF-Data-Virtualization https://stackoverflow.com/questions/14456075/how-to-enable-ui-virtualization-in-standard-wpf-listview WPF ListBox with a ListBox - UI Virtualization and Scrolling http://www.zagstudio.com/blog/497#.UQKxpScqb6U

Answer 2

Once the image is loaded, resize it to a more managable size then release the unused big image. This will still take a long time to load but it will take less memory. To reduce loading time see dutzu's answer and use lazy loading and virtualization.

Answer 3

Use a Virtualizing Stackpanel Look at the link for an example as to how to do it.

http://www.jonathanantoine.com/2011/10/07/wpf-4-5-%E2%80%93-part-11-new-features-for-the-virtualizingpanel/