Local Image Caching with Custom Image Control in WPF

Recently, I needed my WPF application to cache images locally when there’s connectivity issues or data is not updated. I searched the web to find if there’s a standard way to do this, but it seems like you can do whatever you like and then I found a post on StackOverflow, where the same topic was discussed. Based on this, I made a custom control which:

• can download images asynchronously and get them from the cache if image was downloaded
• is thread safe
• has a dependency property to which you can bind to
• update images, providing new names in the initial feed (don’t forget to maintain a cache clean operation, e.g., you can parse your feed and asynchronously delete images with no links in feed)

The class for the custom control is given below:

public class CachedImage : Image
{
    static CachedImage()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CachedImage), 
                 new FrameworkPropertyMetadata(typeof(CachedImage)));
    }

    public readonly static DependencyProperty ImageUrlProperty = DependencyProperty.Register(
      "ImageUrl", typeof(string), typeof(CachedImage), 
      new PropertyMetadata("", ImageUrlPropertyChanged));

    public string ImageUrl
    {
        get
        {
            return (string)GetValue(ImageUrlProperty);
        }
        set
        {
            SetValue(ImageUrlProperty, value);
        }
    }

    private static readonly object SafeCopy = new object();

    private static void ImageUrlPropertyChanged(DependencyObject obj, 
            DependencyPropertyChangedEventArgs e)
    {
        var url = (String)e.NewValue;
        if (String.IsNullOrEmpty(url))
            return;

        var uri = new Uri(url);
        var localFile = String.Format(Path.Combine
                       (Globals.CacheFolder, uri.Segments[uri.Segments.Length - 1]));
        var tempFile = String.Format(Path.Combine(Globals.CacheFolder, Guid.NewGuid().ToString()));

        if (File.Exists(localFile))
        {
            SetSource((CachedImage)obj, localFile);
        }
        else
        {
            var webClient = new WebClient();
            webClient.DownloadFileCompleted += (sender, args) =>
                        {
                            if (args.Error != null)
                            {
                                File.Delete(tempFile);
                                return;
                            }
                            if (File.Exists(localFile))
                                return;
                            lock (SafeCopy)
                            {
                                File.Move(tempFile, localFile);
                            }
                            SetSource((CachedImage)obj, localFile);
                        };

            webClient.DownloadFileAsync(uri, tempFile);
        }
    }

    private static void SetSource(Image inst, String path)
    {
        inst.Source = new BitmapImage(new Uri(path));
    }
}

DownloadFileAsync creates a local file even if the request fails, so I introduced a temporary file which is deleted if an error occurs. Globals.CacheFolder is just a class that holds static properties with paths and creates directories if they don’t exist, so you should replace it with your existing cache folder path.

Now you can use this CachedImage control in XAML, getting benefits from binding:

<Cache:CachedImage ImageUrl="{Binding Icon}"/>