Minimizing memory consumption listbox of images (WPF)

Question

I have listbox which bind to ObservableCollection and take filename to display images enter image description here

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 ?

a solution would be a lazy load on scroll behaviour, while at the same time disposing the items that you passed. In short, just load the items you can currently see on the form panel. — Freeman, Jan 25 '13 at 16:20

score 4 · Accepted Answer · edited May 23 '17 at 10:29

4

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

edited May 23 '17 at 10:29

Community

1
1

answered Jan 25 '13 at 16:20

dutzu

3,883
13
19

I'm sorry I'm new to c# & wpf. Could you point me to the sample codes ? – Irwan Jan 25 '13 at 16:22
1

+1, but he cannot virtualize a WrapPanel without [some extra effort](http://www.codeproject.com/Articles/309151/Wrap-Panel-Virtualization). – user7116 Jan 25 '13 at 16:26

score 0 · Answer 2 · answered Jan 25 '13 at 16:24

0

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.

answered Jan 25 '13 at 16:24

Coincoin

27,880
7
55
76

score 0 · Answer 3 · answered Jan 25 '13 at 16:24

0

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/

answered Jan 25 '13 at 16:24

TYY

2,702
1
13
14

Minimizing memory consumption listbox of images (WPF)

3 Answers3

Linked