实现类似新浪微博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的源码。