Images leaking

[Vitalii]

I had already mentioned, that it would be nice to have a Telerik image cacher.
Today i returned back to this image problem: after a some time of usage, application starts to works extremely slow (especially on Lumia 800).

Googling shows 2 possible solutions:
1. Set image's source as isostore link. That way, phone would not cache it.
2. Set all image's source to null, when leaving the page.

More details (with screenshots):
http://stackoverflow.com/questions/18127027/memory-consumption-of-bitmapimage-image-control-in-windows-phone-8
http://stackoverflow.com/questions/13816569/windows-phone-listbox-with-images-out-of-memory?lq=1
http://stackoverflow.com/questions/13355496/cannot-find-the-memory-leak?lq=1

Okay. first solution sounds good, but needs lot of refactoring. So, i'd like to start with the second one.
I'm using RadDataBoundListBox with VirtualizingDataCollection, set in automated mode.

So, question is: what is the proper way to force all item's images sources to be empty? I'm going to set it like here:

private void DisposeImage(BitmapImage image)
{
    if (image != null)
    {
        try
        {
            using (var ms = new MemoryStream(new byte[] { 0x0 }))
            {
                image.SetSource(ms);
            }
        }
        catch (Exception)
        {
        }
    }
}

Should i iterate through VirtualizingDataCollection or RadDataBoundListBox? Or, maybe, there's better way in general?

[Vitalii]

Tried to use this one:

public class SafePicture : System.Windows.Controls.ContentControl
{
    public SafePicture()
    {
        this.Unloaded += this.SafePictureUnloaded;
    }

    private void SafePictureUnloaded(object sender, System.Windows.RoutedEventArgs e)
    {
        var image = this.Content as System.Windows.Controls.Image;

        if (image != null)
        {
            image.Source = null;
        }
    }
}

//Then, just wrap all your pictures in that control:

<my:SafePicture>
    <Image Source="{Binding Path=path}" />
</my:SafePicture>

However, it is not working with visualization: if to scroll list down, and then return to the top, images would be empty (fair enough). Tried to add OnLoaded event, it seems to work, but images are mixed up randomly.

public class SafePicture : System.Windows.Controls.ContentControl
    {
        private ImageSource imageSource;

        public SafePicture()
        {
            Loaded += OnLoaded;
            Unloaded += SafePictureUnloaded;
        }

        private void OnLoaded(object _sender, RoutedEventArgs _routedEventArgs)
        {
            var image = Content as System.Windows.Controls.Image;
            if (imageSource != null && image != null)
                    image.Source = imageSource;
        }

        private void SafePictureUnloaded(object sender, System.Windows.RoutedEventArgs e)
        {
            var image = Content as System.Windows.Controls.Image;

            if (image != null)
            {
                imageSource = image.Source;
                image.Source = null;
            }
        }
    }

[Deyan]

Hi Vitalii,

Thanks for writing.

I am not quite sure that I correctly understand the scenario you have. Are you displaying images from the Isolated Storage? If yes - indeed, there are known issues with memory consumption in this scenario on Windows Phone. What would a theoretical Image Cache do in that case?

There are a couple of solutions for the Isolated Storage memory problem discussed on the Internet one of which is setting the stream of the image to an empty stream. This should be working. You can simply iterate over all items in your collection and do this for each one of them.

Using the first SafePicture approach, you need to introduce a new DependencyProperty on your SafePicture class and bind to it in your DataTemlpate, not to the Source property of the image element directly. Then, once loaded you explicitly set the SafePicture's property to the Source property of the IMageElement. When unloaded you reset the Image's Source property to null.

Is it possible for you to send us a sample of your scenario so that we can take a look and see how we can help?

Regards,
Deyan
Telerik

[Vitalii]

Core idea is to have a cacher, which would download and store images, and show them from iso store second time page is loaded.
Okay, lets set this thread as closed for now, on this weekend i'll finish demo with previous DatBoundListBox issues and this image issue.

[Deyan]

Hi Vitalii,

Thanks for writing back.

We can consider this approach but it will require some research to identify the potential problems it will resolve. Normally the Image element caches what has been downloaded and does not download it again when the same source URI is provided. This is implemented on core HTTP level on Windows Phone.

Anyway, feel free to get back to us as soon as you have the sample project.

Regards,
Deyan
Telerik

[Vitalii]

I was considering approach: download picture to isostorage and then to bind it to Image element, so HTTP cacher would be fooled.
At first, i'll try to play with DependencyProperty - i feel, that it can solve a problem with memory leak.

Making sample project is quite time-consuming, but it would be quite large, including DataBoundListBox issues i mentioned before (unless i'll get, how to fix them during the creation of sample project :).

[Deyan]

Hello Vitalii,

In case you experience memory leaks when loading images from the IsoStore in DataBoundListBox being us who download them and store them in a theoretical caching mechanism will pose pretty much the same issues. I think there is a much more simple solution to the problem: resetting the source of the image elements so that the bitmap resources are freed. All other caching will be done by the Image element and the HTTP protocol - we do not need to fool it as it already works good.

If you experience any other issues related to DataBoundListBox, please make sure to open a new support thread so that we can correctly track them.

We will consider this thread closed for now. Do not hesitate to re-open it or open another one if you need so.

Regards,
Deyan
Telerik

[Vitalii]

Well, actually, it is not working good: after restarting app, images would be downloaded again.

And by meaning your control, i mean auto-resetting source (dealing with memory leak), saving to isostorage and running some animation during downloading (also, probably, fading effect). I assume, that would be useful for almost every customer.

[Vitalii]

Ok, now it works. Here is the sample: https://simca.codeplex.com/

[Deyan]

Hello Vitalii,

Thanks for writing back.

We will review your code and will consider implementing similar mechanism for one of our next major releases. As of now, I cannot give an exact timeframe when this will happen.

We will consider this thread closed.

Let us know if you have further questions or need assistance.

Regards,
Deyan
Telerik