Image Caching

While the viewmodel saves the result of the WCF service call, which allows the app to restore its state after being tombstoned, downloaded images are not saved in the state dictionary, but rather, the app relies on some custom image caching.

A custom IValueConverter, called ImageCacheConverter, is used to download the image from the specified image URI, as shown in the following excerpt:

Click here to view code image

<Image Source="{Binding Product.LargeImageUri,
        Converter={StaticResource ImageCacheConverter}}" />

By using the ImageCacheConverter, images can be downloaded once and stored in isolated storage for an arbitrary period. When that period has elapsed, the image is downloaded again. This allows the application to work offline (see Listing 3.14).

LISTING 3.14. ImageCacheConverter Class

Click here to view code image

public class ImageCacheConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        if (EnvironmentValues.DesignTime)
        {
            return value;
        }

        string url = value as string;
        if (url != null)
        {
            try
            {
                return ImageCache.GetImage(new BitmapImage(new Uri(url)));
            }
            catch (IsolatedStorageException e)
            {
                Console.WriteLine(e);
                return value;
            }
        }

        BitmapImage bitmapImage = value as BitmapImage;
        if (bitmapImage != null)
        {
            return ImageCache.GetImage(bitmapImage);
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The ImageCacheConverter can be used in conjunction with a URL or a BitMapImage. In the sample code, it is used with a URL, supplied by the product’s SmallImageUri and LargeImageUri properties. The ImageCache class maintains a dictionary of URI keyed cached images. It stores the dictionary in isolated storage, and when an image is requested, it attempts to locate it in the dictionary. If found it checks to ensure that the image has not expired, and then returns the image.

Many thanks to Peter Nowak (http://winphonedev.de/) for his image cache code, which I have adapted, with his permission, for use in the downloadable sample code.

The ImageCache class, in the downloadable sample code, maintains a list of ImageCacheItem objects, which represent cached images. The ImageCache.GetImage method is used to retrieve an image from the cache. If the image is not located in the cache, it is scheduled to be downloaded by the static ImageDownloader class.

The ImageDownloader coordinates an asynchronous download of the image file. It uses an HttpWebRequest to retrieve the image from a remote server, and then stores the downloaded file in isolated storage. Once downloaded, the Source property of the original image is assigned, which means that, if it is present in the UI, the image will appear (see the ImageDownloader class, located in the Data/ImageCache directory of the WPUnleashed project, in the downloadable sample code for details).