Windows Phone 8.1: Poor performance in ListView

First of all, thank you for this library! 😃

Currently, I’m building a search function into our WP 8.1 app and want to use FFImageLoading for caching the images of the results. Unfortunately, there is a major problem with the performance while scrolling the list of results.

Setup & Basic Information:

Library : Latest available version of FFImageLoading.Windows (2.1.0-rc1)

XAML: A simple page with a search field at the top and a ListView to display results below. The ListView initally displays around 100 results.

<Grid x:Name="LayoutRoot"
          Background="White"
          Margin="0">
        <!--Content should be placed within the following grid-->
        <Grid Grid.Row="0"
              x:Name="ContentRoot"
              Margin="20,0,20,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0" 
                  x:Name="SearchGrid" 
                  Margin="0,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBox Grid.Row="0" 
                         Grid.Column="0" 
                         PlaceholderText="enter search term..." />
                <Button Content="cancel" 
                         Grid.Row="0" 
                         Grid.Column="1" 
                         Foreground="Black" />
            </Grid>
            <ListView x:Name="SearchResultListView"
                      Margin="0,0,0,10"
                      IsRightTapEnabled="False" 
                      IsHoldingEnabled="False" 
                      IsDoubleTapEnabled="False" 
                      Grid.Row="1"
                      Loaded="SearchResultListView_Loaded">
                <ListView.ItemTemplate>
                    <StaticResource ResourceKey="SearchResultCell"/>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </Grid>

Template for a SearchResultCell: Each result has a icon on the left, which should be loaded via FFImageLoading. It uses databinding to get the iconUrl of the result object, which is a string value of a web url to the relevant icon. Different search result entries share the same icon (the icon is basically an icon depending of the category of a search result).

<DataTemplate x:Key="SearchResultCell">
        <Grid x:Name="SearchResultCellContentGrid" 
									  Height="50"
									  Width="Auto" 
									  Margin="0,10,0,0">

            <ff:FFImage x:Name="image" 
									   Height="45"
									   Width="45"
									   Source="{Binding icon.iconUrl}" 
									   HorizontalAlignment="Left" 
									   Margin="0" 
									   VerticalAlignment="Top"
                                       TransformPlaceholders="False"
                                       LoadingPlaceholder="service-icons/service-default.png"
                                       ErrorPlaceholder="service-icons/service-default.png"
                                       CacheDuration="1"
                                       RetryCount="3"
                                       RetryDelay="250"
                                       DownsampleToViewSize="True"
                                       DownsampleMode="Default"
                            FadeAnimationEnabled="False"/>
            <TextBlock x:Name="titleTextBlock" 
									   HorizontalAlignment="Left" 
									   Margin="55,0,10,0" 
									   TextWrapping="NoWrap" 
									   Text="{Binding detail.title}"
									   VerticalAlignment="Top" 
									   Height="25" Width="Auto" 
									   FontSize="18" 
									   Foreground="#FD000000" 
									   IsTapEnabled="True" 
									   IsRightTapEnabled="False" 
									   IsHoldingEnabled="False" 
									   IsDoubleTapEnabled="False"
                                       TextTrimming="CharacterEllipsis"/>
            <TextBlock x:Name="subtitleTextBlock" 
									   HorizontalAlignment="Left" 
									   Margin="55,0,15,4" 
									   TextWrapping="NoWrap" 
									   Text="{Binding container}"
									   VerticalAlignment="Bottom" 
									   Height="22" Width="Auto" 
									   FontSize="16" 
									   Foreground="#FF929292" 
									   IsTapEnabled="True" 
									   IsRightTapEnabled="False" 
									   IsHoldingEnabled="False" 
									   IsDoubleTapEnabled="False"
                                       TextTrimming="CharacterEllipsis"/>
        </Grid>
    </DataTemplate>

The Problem:

After loading all the data, scrolling the list is not smooth at all. It lags badly and you either see no entries at first or a black rectangle instead of results. I’m using a low-end Lumia Windows Phone to test and the emulator. Other lists in the app work fine though.

What I already tried:

I’ve already tried all the suggestions I could find browsing the internet, stackoverflow.com and the issues in this repo. This includes pausing image downloading while scrolling.

The only thing that immediately fixed all the problems was to replace the actual iconUrl with an path to an image in the app bundle (I tried using the service-icons/service-default.png placeholder pic for that).

So, maybe the performance loss is caused by loading the same images over and over again from the hard disk of the phone? But shouldn’t the loaded images be kept in the memory until I leave the page?

Is there anything I am missing? I really want to use FFImageLoading for this task and I hope there is some solution for my problem (maybe I’m using it wrong? Or is there any other approach which would be better in this case?)

Thank you!

[daniel-luberda]

The best and only good solution is to modify FFImageLoading memory cache implementation to use LRUCache<string, WriteableBitmap> instead Dictionary<string, WeakReference<WriteableBitmap>>: https://github.com/luberda-molinet/FFImageLoading/blob/master/source/FFImageLoading.Windows/Cache/ImageCache.cs#L19

It’s important that LRUCache must have max size specified, so old entries are removed, otherwise OOM guaranteed. I can do that, but when I’ll have some free time. If you can do it, I could also merge it.

Ready LRU implementation is here:

• https://github.com/luberda-molinet/FFImageLoading/blob/7d124c4368665bf59fd5fc864e20f88fe8f4f3ef/source/FFImageLoading.Droid/Collections/LRUCache.cs
• https://github.com/luberda-molinet/FFImageLoading/blob/7d124c4368665bf59fd5fc864e20f88fe8f4f3ef/source/FFImageLoading.Droid/Collections/ByteBoundStrongLruCache.cs

[daniel-luberda]

If it’s a low end device the problem might be just “low-on-ram” issue. FFImageLoading caches all the bitmaps on Windows as weak references, I guess that on low end devices, OS is just more aggressive on disposing them. Maybe we should implement some LRUCache for Windows too, so we would cache strong references, but that can lead to OutOfMemory exceptions.