WP开发笔记-图片后台下载+缓存+占位符效果

实现类似新浪微博WP客户端的头像效果：先用默认图片占位，然后后台下载头像图片。下载完成之后，替换占位图片。同时增加缓存。 

内容比较长。

原理：注册image url依赖属性，赋值之后，后台创建webrequest下载图片，下载完成之后，替换占位图片。

1. 添加UserControl，使用默认图片：

<UserControl ...>
    <Grid x:Name="Grid">
        <Image x:Name="PngImage" Source="/Images/dark/cat.png" Stretch="Fill" />
    </Grid>
</UserControl>

2. 添加依赖属性：

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

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

3. 依赖属性的回调：

private static void OnImageSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as ImageContainer).ShowImage();
        }

        private void ShowImage()
        {
            if (!string.IsNullOrEmpty(ImageUrl))
                ImageCacheService.SetImageStream(ImageUrl, SetImageSource);
        }

4. 添加ImageCacheService类，对外只公开SetImageStream方法（ 这个cache类在下一篇文章里详解）：

public static void SetImageStream(string imageUrl, Action<byte[]> callBack)

5. 图片下载完成之后，显示：

private void SetImageSource(byte[] data)
{
    Deployment.Current.Dispatcher.BeginInvoke(
        () =>
        {
            if (data == null)
                return;
            try
            {
                using (var memStream = new MemoryStream(data))
                {
                    memStream.Position = 0;
                    var bitmapImage = new BitmapImage();
                    bitmapImage.SetSource(memStream);
                    this.PngImage.Source = bitmapImage;
                }
            }
            catch
            {//not jpeg/png image:
            }
        });
}

截图效果（来自Chicken4WP）：

这里查看示例代码：GitHub>>

示例代码说明：注意，示例代码仅作为演示用。如果需要了解详情，可以看Chicken4WP的源码。

转载于:https://my.oschina.net/wower/blog/146548