ListView Memory Leak Windows Phone 8.1?

Question

I've got a ListView bound to an ObservableCollection of objects(containing image URI's), When I add more items to the ListView I am seeing a massive spike in memory. I think I have narrowed its down to being a problem with the UserModel's imageUri. see below.

public class UserModel : ObservableObject
{
    ...
     private string _imageUri;
    ...


    ...
    public string ImageUri
    {
        get
        {
            return _imageUri;
        }
        set
        {
            Set(() => ImageUri, ref _imageUri, value);
        }
    } 
}

photo model

public class PhotoModel : ObservableObject
{
    ...
    private UserModel _user;
    private string _imageUri;
    ...

    ...
    public UserModel User
    {
        get
        {
            return _user;
        }
        set
        {
            Set(() => User, ref _user, value);
        }
    }

    public string ImageUri
    {
        get
        {
            return _imageUri;
        }
        set
        {
            Set(() => ImageUri, ref _imageUri, value);
        }
    } 

}

Xaml Binding of ListView

<ListView
      x:Name="MostPopularListView"
      ItemsSource="{Binding PhotosCollection}"
      ItemTemplate="{StaticResource MostPopularDataTemplate}"
      Margin="0,0,0,0"
      IsItemClickEnabled="True"/>

Listview template

       ...
       <Image 
          Source="{Binding ImageUri}"             
          Stretch="Fill" 
          Height="300" />

       ...

       <Ellipse 
            Width="40"
            Height="40" 
            Margin="10,0,0,10">
            <Ellipse.Fill>
                 <ImageBrush>
                     <ImageBrush.ImageSource>
                         <BitmapImage UriSource="{Binding User.ImageUri}" />
                            </ImageBrush.ImageSource>
                      </ImageBrush>
                 </Ellipse.Fill>
            </Ellipse>
            ...

As you can see my ListView data template has two images, one for the actual photo and one for the user. Both are these are showing correctly but when I continue to add more items to the list I am seeing a massive spike in memory.

See image:

However if I don't set UserModel.imageUri (UserModel.imageUri is null then for all PhotoModels) I dont see this spike in memory.

Both profiles are carrying out the same actions loading the same images (total 15). First photo is with user photos and second screenshot is without.

I think the problem is something to do with PhotoModel having a UserModel and doing Set(...). As you can see from the photos below property change event handler has a count of 140.

Most of these are PhotoModels but i only ever have 15 PhotoModels max in the Collection. I do clear and re-add using two extension methods (could thee be causing it).

     public static void Repopulate<T>(this ICollection<T> collection, IEnumerable<T> items)
    {
        collection.Clear();
        foreach (var item in items)
        {
            collection.Add(item);
        }
    }

    public static void AddObjects<T>(this ICollection<T> collection, IEnumerable<T> items)
    {
        foreach (var item in items)
        {
            collection.Add(item);
        }
    }

I'd really appreciate some advice on how to handle the performance better and if this is a memory leak.

Answer 1

The problem is with how ImageBrush decodes the larger image. You need to set the DecodePixelHeight and DecodePixelWidth of the BitmapImage

Credit: http://timheuer.com/blog/archive/2015/05/06/making-circular-images-in-xaml-easily.aspx