Out of Memory Exception when Populating ListView with Images (Windows Phone 8.1)

Question

So I am able to display images from my custom folder in the Pictures Library to my ListView in the app. However, when that custom folder has 3 or more images, it's either Out of Memory Exception occurs or the app just crashes and Visual Studio doesn't even realize that the app have crashed. My question is how can I make this work?

Here are my codes...

In the xaml.cs file:

List<StorageFile> FileList = (await temp.GetFilesAsync()).ToList();

List<ImageItem> ImageList = new List<ImageItem>();
for (int i = 0; i < FileList.Count; i++)
    {
        using (IRandomAccessStream FileStream = await FileList[i].OpenAsync(FileAccessMode.Read))
            {
                using(StorageItemThumbnail thumbnail = await file.GetThumbnailAsync(ThumbnailMode.PicturesView))
                    {
                        if (thumbnail != null && thumbnail.Type == ThumbnailType.Image)
                        {
                            BitmapImage bitmap = new BitmapImage();
                            await bitmap.SetSourceAsync(FileStream);
                            ImageList.Add(new ImageItem() { ImageData = bitmap });
                        }
                    }
             }
    }
    this.PhotoListView.DataContext = ImageList;

Here is my Helper Class :

public class ImageItem
    {
        public BitmapImage ImageData { get; set; }
    }

Here is my xaml ListView code:

<ListView Grid.Column="1"
          Grid.Row="0"
          x:Name="PhotoListView"
          Grid.RowSpan="1"
          ItemsSource="{Binding}">

          <ListView.ItemTemplate>
              <DataTemplate>
                  <Image Source="{Binding ImageData}"
                         Margin="10"/>
              </DataTemplate>
          </ListView.ItemTemplate>

          <ListView.ItemsPanel>
              <ItemsPanelTemplate>
                  <StackPanel />
              </ItemsPanelTemplate>
          </ListView.ItemsPanel>
</ListView>

Answer 1

The problem with your code is that when you use BitmapImage you didn't specify the DecodePixelHeight and DecodePixelWidth , you can solve the issue in 2 ways: the first is to specify the DecodePixelHeight and DecodePixelWidth , the second is to pass the path of the image to the list view using this code:

List<StorageFile> FileList = (await temp.GetFilesAsync()).ToList();

List<string> ImageList = new List<string>();

foreach(var file in FileList)
{
    ImageList.Add(file.Path);
}  

this.PhotoListView.DataContext = ImageList;

the Image control is able to do all the stuff for you, and takes care of the memory management as well.

Answer 2

I think your main problem is settings the ItemsPanelTemplate to Stackpanel . This kills virtualization. There is no reason for you to override the default item panel.

Also as frenk91 mentions, adding DecodePixelHeight and DecodePixelWidth to your XAML may be useful.