【WP8】图片缓存控件
在做图片相关的应用的时候，经常需要用大图片的缓存，默认的Image控件不支持缓存的支持，本文自定义一个支持图片缓存的控件
当图片的地址是网络图片时候
根据Url判断该图片是否存在本地，如果存在，则直接从本地读取，如果不存在，则通过Http请求下载该图片，保存到本地，然后读取到Image控件中
当图片为本地地址的时候，直接从本地读取，设置到Image控件中
1、在定义可缓存图片控件之前，先封装一下文件存储的帮助类
using System; using System.IO; using System.IO.IsolatedStorage; using System.Text; using System.Threading.Tasks; using System.Windows; using Windows.ApplicationModel; using Windows.Storage; using Newtonsoft.Json; using XTuOne.Common.Helpers; namespace XTuOne.Utility.Helpers { public class StorageHelper : IStorageHelper { #region 单例 public static IStorageHelper Instance { get; private set; } public static object LockObject; static StorageHelper() { Instance = new StorageHelper(); LockObject = new object(); } private StorageHelper() { } #endregion #region 同步读写方法 public Stream ReadFile(string filePath) { lock (LockObject) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { if (!sf.FileExists(filePath)) { throw new FileNotFoundException(string.Format("没有找到文件:{0}", filePath)); } using (var fs = sf.OpenFile(filePath, FileMode.Open, FileAccess.Read, FileShare.Read)) { var stream = new MemoryStream(); fs.CopyTo(stream); stream.Seek(0, SeekOrigin.Begin); return stream; } } } } public string CreateFile(Stream stream, string filePath, bool replace = false) { lock (LockObject) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { var directory = Path.GetDirectoryName(filePath); if (directory != null && !sf.DirectoryExists(directory)) { //如果目录不存在，则创建 sf.CreateDirectory(directory); } if (FileExist(filePath)) { if (!replace) { return filePath; } sf.DeleteFile(filePath); } //如果不存在或者存在且替换 using (var fs = sf.CreateFile(filePath)) { stream.CopyTo(fs); } } } return filePath; } public string CreateFile(byte[] data, string filePath, bool replace = false) { lock (LockObject) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { var directory = Path.GetDirectoryName(filePath); if (directory != null && !sf.DirectoryExists(directory)) { //如果目录不存在，则创建 sf.CreateDirectory(directory); } if (FileExist(filePath)) { if (!replace) { return filePath; } sf.DeleteFile(filePath); } //如果不存在或者存在且替换 using (var fs = new IsolatedStorageFileStream(filePath, FileMode.OpenOrCreate, sf)) { fs.Write(data, 0, data.Length); } } } return filePath; } public string ReadAllText(string fileName) { using (var reader = new StreamReader(ReadFile(fileName))) { return reader.ReadToEnd(); } } public string WriteAllText(string fileName, string text, bool replace) { return CreateFile(Encoding.UTF8.GetBytes(text), fileName, replace); } #endregion #region 异步读写方法 public async Task<Stream> ReadFileAsync(string filePath) { var storageFile = await GetStorageFileAsync(filePath); return await storageFile.OpenStreamForReadAsync(); } public async Task<string> CreateFileAsync(Stream stream, string filePath, bool replace = false) { var storageFile = await GetStorageFileAsync(filePath); if (storageFile != null) { if (FileExist(filePath)) { if (replace) { //替换先删除 await storageFile.DeleteAsync(StorageDeleteOption.PermanentDelete); } else { return filePath; } } storageFile = await GetStorageFileAsync(filePath); var destStream = await storageFile.OpenStreamForWriteAsync(); await stream.CopyToAsync(destStream); } return filePath; } public async Task<string> CreateFileAsync(byte[] data, string filePath, bool replace = false) { var storageFile = await GetStorageFileAsync(filePath); if (storageFile != null) { if (FileExist(filePath)) { if (replace) { //替换先删除 await storageFile.DeleteAsync(StorageDeleteOption.PermanentDelete); } else { return filePath; } } storageFile = await GetStorageFileAsync(filePath); var destStream = await storageFile.OpenStreamForWriteAsync(); await destStream.WriteAsync(data, 0, data.Length); } return filePath; } public async Task<string> ReadAllTextAsync(string fileName) { using (var reader = new StreamReader(await ReadFileAsync(fileName))) { return await reader.ReadToEndAsync(); } } public async Task<string> WriteAllTextAsync(string fileName, string text, bool replace) { return await CreateFileAsync(Encoding.UTF8.GetBytes(text), fileName, replace); } #endregion #region 普通方法：判断文件（文件夹）存在，创建（删除）文件夹，获取文件（文件夹） public bool FileExist(string fileName) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { return sf.FileExists(fileName); } } public bool DirectoryExist(string directory) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { return sf.DirectoryExists(directory); } } public void DeleteFile(string fileName) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { if (sf.FileExists(fileName)) { sf.DeleteFile(fileName); } } } public void CreateDirectory(string directory) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { if (sf.DirectoryExists(directory)) { sf.DeleteDirectory(directory); } } } public void DeleteDirectory(string directory, bool isDeleteAll) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { if (sf.DirectoryExists(directory)) { if (isDeleteAll) { var files = GetFiles(directory); foreach (var file in files) { DeleteFile(file); } var directories = GetDirectories(directory); foreach (var s in directories) { DeleteDirectory(s, true); } } sf.DeleteDirectory(directory); } } } public string[] GetFiles(string directory) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { return sf.GetFileNames(directory); } } /// <summary> /// 获取本地文件夹中的文件 /// </summary> public string[] GetDirectories(string directory) { using (var sf = IsolatedStorageFile.GetUserStoreForApplication()) { return sf.GetDirectoryNames(directory); } } #endregion #region 拷贝文件(从安装包到本地) /// <summary> /// 从安装包拷贝文件到本地 /// </summary> public async Task CopyPackageFileToLocalAsync(string source, string target = null, bool replace = false) { using (var stream = GetResourceStream(source)) { await CreateFileAsync(stream, target ?? source, replace); } } /// <summary> /// 从安装包拷贝路径到本地 /// </summary> public async Task CopyPackageFolderToLocalAsync(string source, string target = null, bool replace = false) { target = target ?? source; var packagePath = Package.Current.InstalledLocation; var folder = await GetStorageFolderAsync(packagePath, source); //拷贝文件 var files = await folder.GetFilesAsync(); foreach (var storageFile in files) { var fileName = storageFile.Name; using (var stream = await storageFile.OpenStreamForReadAsync()) { await CreateFileAsync(stream, target + fileName, replace); } } //拷贝子文件夹（递归） var folders = await folder.GetFoldersAsync(); foreach (var storageFolder in folders) { await CopyPackageFolderToLocalAsync(source + storageFolder.Name + "/", target + storageFolder.Name + "/", replace); } } #endregion #region 从安装包（安装路径）中读取（同步） public Stream GetResourceStream(string file) { //引用安装路径的文件的时候不以'/'开头 file = file.TrimStart('/'); return Application.GetResourceStream(new Uri(file, UriKind.Relative)).Stream; } #endregion #region 序列化 public void Serialize<T>(string fileName, T obj, bool replace) { var json = JsonConvert.SerializeObject(obj); WriteAllText(fileName, json, replace); } T IStorageHelper.DeSerialize<T>(string fileName) { var json = ReadAllText(fileName); return JsonConvert.DeserializeObject<T>(json); } public async Task SerializeAsync<T>(string fileName, T obj, bool replace) { var json = JsonConvert.SerializeObject(obj); await WriteAllTextAsync(fileName, json, replace); } public async Task<T> DeSerializeAsync<T>(string fileName) { var json = await ReadAllTextAsync(fileName); return JsonConvert.DeserializeObject<T>(json); } #endregion #region 辅助方法 /// <summary> /// 根据路劲获取StorageFolder /// </summary> private async Task<StorageFolder> GetStorageFolderAsync(StorageFolder folder, string directory) { var directories = directory.Split(new[] { '/' }, StringSplitOptions.RemoveEmptyEntries); foreach (var s in directories) { folder = await folder.CreateFolderAsync(s, CreationCollisionOption.OpenIfExists); } return folder; } /// <summary> /// 根据文件名异步获取本地文件夹StorageFolder（如果路径不存在，则创建路径） /// </summary> private async static Task<StorageFolder> GetStorageFolderAsync(string filePath) { var localFolder = ApplicationData.Current.LocalFolder; var directory = Path.GetDirectoryName(filePath); if (!string.IsNullOrEmpty(directory)) { var directories = directory.Split(new[] {'\\', '/'}, StringSplitOptions.RemoveEmptyEntries); foreach (var s in directories) { localFolder = await localFolder.CreateFolderAsync(s, CreationCollisionOption.OpenIfExists); } } return localFolder; } /// <summary> /// 根据路径得到StoreageFile /// </summary> private async static Task<StorageFile> GetStorageFileAsync(string filePath) { var folder = await GetStorageFolderAsync(filePath); var fileName = Path.GetFileName(filePath); if (fileName != null) { return await folder.CreateFileAsync(fileName, CreationCollisionOption.OpenIfExists); } return null; } #endregion } }
图片的写入和读取都使用了线程锁，在最后说明
注意：上面的异步方法是线程不安全的，在多线程的情况下，当文件被一个线程写入的时候，另一个线程调用读的方法会抛出异常 Access Deny，访问被阻止
实现了StorageHelper，下面是CacheableImage的实现，支持占位图片，加载失败图片，配置保存路径
2、自定义可缓存图片控件的实现
<UserControl x:Class="XTuOne.Controls.CacheableImage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" d:DesignHeight="480" d:DesignWidth="480"> <Grid x:Name="LayoutRoot"> <Image x:Name="Image" Stretch="Fill"></Image> </Grid> </UserControl>
using System; using System.IO; using System.Net; using System.Threading.Tasks; using System.Windows; using System.Windows.Media; using System.Windows.Media.Imaging; using XTuOne.Utility.Helpers; namespace XTuOne.Controls { /// <summary> /// 支持本地缓存的图片空间 /// </summary> public partial class CacheableImage { public CacheableImage() { InitializeComponent(); } public static readonly DependencyProperty CachedDirectoryProperty = DependencyProperty.Register( "CachedDirectory", typeof (string), typeof (CacheableImage), new PropertyMetadata("/ImageCached/")); public static readonly DependencyProperty FaildImageUrlProperty = DependencyProperty.Register( "FaildImageUrl", typeof(Uri), typeof(CacheableImage), new PropertyMetadata(default(string))); public static readonly DependencyProperty LoadingImageUrlProperty = DependencyProperty.Register( "LoadingImageUrl", typeof(Uri), typeof(CacheableImage), new PropertyMetadata(default(string))); public static readonly DependencyProperty StretchProperty = DependencyProperty.Register( "Stretch", typeof (Stretch), typeof (CacheableImage), new PropertyMetadata(default(Stretch), StretchPropertyChangedCallback)); private static void StretchPropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs) { var cachedImage = (CacheableImage)dependencyObject; var stretch = (Stretch)dependencyPropertyChangedEventArgs.NewValue; if (cachedImage.Image != null) { cachedImage.Image.Stretch = stretch; } } public Stretch Stretch { get { return (Stretch) GetValue(StretchProperty); } set { SetValue(StretchProperty, value); } } /// <summary> /// 加载失败的图片 /// </summary> public Uri FaildImageUrl { get { return (Uri)GetValue(FaildImageUrlProperty); } set { SetValue(FaildImageUrlProperty, value); } } /// <summary> /// 加载中显示的图片（需要进行网络请求时） /// </summary> public Uri LoadingImageUrl { get { return (Uri)GetValue(LoadingImageUrlProperty); } set { SetValue(LoadingImageUrlProperty, value); } } /// <summary> /// 缓存到本地的目录 /// </summary> public string CachedDirectory { get { return (string) GetValue(CachedDirectoryProperty); } set { SetValue(CachedDirectoryProperty, value); } } public static readonly DependencyProperty ImageUrlProperty = DependencyProperty.Register( "ImageUrl", typeof (string), typeof (CacheableImage), new PropertyMetadata(default(string), ImageUrlPropertyChangedCallback)); public string ImageUrl { get { return (string)GetValue(ImageUrlProperty); } set { SetValue(ImageUrlProperty, value); } } private static async void ImageUrlPropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs) { var cachedImage = (CacheableImage) dependencyObject; var imageUrl = (string)dependencyPropertyChangedEventArgs.NewValue; if (string.IsNullOrEmpty(imageUrl)) { return; } if (imageUrl.StartsWith("http://") || imageUrl.Equals("https://")) { var fileName = cachedImage.CachedDirectory + Uri.EscapeDataString(imageUrl); //网络图片，判断是否存在 if (!StorageHelper.Instance.FileExist(fileName)) { try { if (cachedImage.LoadingImageUrl != null) { cachedImage.Image.Source = new BitmapImage(cachedImage.LoadingImageUrl); } //请求 var request = WebRequest.CreateHttp(imageUrl); request.AllowReadStreamBuffering = true; var response = await request.GetResponseAsync(); var stream = response.GetResponseStream(); await Task.Delay(1000); //保存到本地 StorageHelper.Instance.CreateFile(stream, fileName); } catch (Exception e) { //请求失败 if (cachedImage.FaildImageUrl != null) { cachedImage.Image.Source = new BitmapImage(cachedImage.FaildImageUrl); } return; } } //读取图片文件 var imageStream = StorageHelper.Instance.ReadFile(fileName); var bitmapImage = new BitmapImage(); bitmapImage.SetSource(imageStream); cachedImage.Image.Source = bitmapImage; } else { //本地图片 var bitmapImage = new BitmapImage(new Uri(imageUrl, UriKind.Relative)); cachedImage.Image.Source = bitmapImage; } } public static readonly DependencyProperty ImageStreamProperty = DependencyProperty.Register( "ImageStream", typeof (Stream), typeof (CacheableImage), new PropertyMetadata(default(Stream), ImageStreamPropertyChangedCallback)); private static void ImageStreamPropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs) { var cachedImage = (CacheableImage) dependencyObject; var imageStream = (Stream) dependencyPropertyChangedEventArgs.NewValue; var bitmapImage = new BitmapImage(); bitmapImage.SetSource(imageStream); cachedImage.Image.Source = bitmapImage; } /// <summary> /// 支持直接传递流进来 /// </summary> public Stream ImageStream { get { return (Stream) GetValue(ImageStreamProperty); } set { SetValue(ImageStreamProperty, value); } } } }
为了保证线程安全，这里图片的保存没有用到异步，因为如果有很多图片进行请求的时候，可能会线程请求异常，像上面说的情况
上面的StorageHelper在读取和写入的时候都加了线程锁（其实不应该在读取文件的时候加锁的），是为了保证，在写入的过程中，读取文件出现无权访问的问题
暂时没有找到方法支持线程安全，如果你有更好的方案，可以给我留言