【Win 10应用开发】延迟加载图片的另一种方法
上一篇文章中老周给大伙介绍了x:Phase和x:Bind的用法,并演示了一个延迟加载的示例。不过,那个例子会遗留一个问题,就是UI线程被阻塞,所以启动应用较慢。
如果希望图片可以延迟加载,或许我们可以动动其他想法,对了,INotifyPropertyChanged接口可以成为突破口。
大伙伴们都知道,实现这个接口可以让类型支持属性更改通知,当属性的值被更新后,会及时更新用户界面上的显示内容。我的思路就是:在数据对象实例化时,先让其显示一张“占位”图片,即未有图片数据时显示的一张临时图片,然后再去拉取图片资源,当真正的图片资源拿到后再修改相应的属性,这样一来,UI会自动更新,用真正需要的图片替代前面显示的临时图片。
唉,看老周上面说得很神秘的样子,没事,咱们实战一下。
为了好演示,我就定义一个简单的类型,一个字符串类型的Name属性,和一个BitmapImage类型的Image属性,并实现INotifyPropertyChanged接口。
public class ItemInfo : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged([CallerMemberName]string propName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
} #region 私有字段
private string m_name;
private BitmapImage m_image;
private static Random rand =new Random();
#endregion public ItemInfo(string _name, Uri _imageUri)
{
Name = _name;
// 初始图像
Image = new BitmapImage(new Uri("ms-appx:///images/0.png")); Task t = LoadImageAsync(_imageUri);
} public string Name
{
get { return m_name; }
set
{
if (value != m_name)
{
m_name = value;
OnPropertyChanged();
}
}
} public BitmapImage Image
{
get { return m_image; }
set
{
if (m_image != value)
{
m_image = value;
OnPropertyChanged();
}
}
} async Task LoadImageAsync(Uri uri)
{
// 模拟延迟
await Task.Delay(rand.Next(,));
// 更改图像
Image = new BitmapImage(uri);
}
}
在类型的构造函数中,调用LoadImageAsync方法去异步读取图片,读取成功后修改Image属性,这样也会使UI同步更新。
如果在UI上使用Image控件来显示图片,在图片更换一瞬间,由于要重新呈现,Image会发生一次闪烁。为了让这个闪烁能变得友好一些,我就想到把Image控件封装到一个用户控件里,当图片要更改时播放一个短暂的动画,这样一来,使得这个切换过程不那么刺眼。这个用户控件的XAML如下:
<Grid>
<Image x:Name="img" />
<Rectangle x:Name="r" Opacity="0" Fill="LightGray"/>
</Grid>
Rectangle默认把它透明,不会挡住后面的图像,当要切换图像时,用动画让这个Rectangle挡一下后面的图片,这样会有一个瞬间的过度效果。
在代码中为这个用户控件声明一个依赖项属性,并且当属性更新时也更新控件里面的Image对象。
static DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(UcIamgeShow), new PropertyMetadata(null, new PropertyChangedCallback(OnImageSourcePropertyChanged))); private static void OnImageSourcePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
UcIamgeShow obj = d as UcIamgeShow;
obj.std?.Begin();
// 切换图片
obj.img.Source = e.NewValue as ImageSource;
} public ImageSource ImageSource
{
get { return (ImageSource)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
使用这个用户控件时,将ImageSource属性和数据源对象进行绑定即可。比如:
<local:UcIamgeShow Width="150" Height="150" Margin="5" ImageSource="{Binding Image,Mode=OneWay}" />
大概原理就这样,大伙伴们可以下载示例源码自己玩耍。
看看最终的效果,可否满意。
【Win 10应用开发】延迟加载图片的另一种方法的更多相关文章
- 【Win 10 应用开发】文件读写的三种方案
本文老周就跟伙伴们探讨一下关于文件读写的方法.总得来说嘛,有三种方案可以用,而且每种方案都各有特色,也说不上哪种较好.反正你得记住老祖宗留给我们的大智慧——事无定法,灵活运用者为上. OK,咱们开始吧 ...
- 【Win 10应用开发】实现全屏播放的方法
有人会问,以前的MediaElement控件不是有现成的一排操作按钮吗?而且可以直接进入全屏播放.是的,我们知道,以往的Store App都是在全屏模式下运行的,只要MediaElement控件填满整 ...
- iOS开发之动画编程的几种方法
iOS开发之动画编程的几种方法 IOS中的动画总结来说有五种:UIView<block>,CAAnimation<CABasicAnimation,CATransition,CAKe ...
- (OPC Client .NET 开发类库)网上很多网友都有提过,.NET开发OPC Client不外乎下面三种方法
1. 背景 OPC Data Access 规范是基于COM/DCOM定义的,因此大多数的OPC DA Server和client都是基于C++开发的,因为C++对COM/DCOM有最好的支持.现在, ...
- Windows 10 应用创建模糊背景窗口的三种方法
原文 Windows 10 应用创建模糊背景窗口的三种方法 现代的操作系统中创建一张图片的高斯模糊效果非常容易,不过如果要在窗口中获得模糊支持就需要操作系统的原生支持了.iOS/Mac 和 Windo ...
- 【转】c# Image获得图片路径的三种方法 winform
代码如下:c# pictureBox1.Image的获得图片路径的三种方法 winform 1.绝对路径:this.pictureBox2.Image=Image.FromFile("D:\ ...
- IOS开发中数据持久化的几种方法--NSUserDefaults
IOS开发中数据持久化的几种方法--NSUserDefaults IOS 开发中,经常会遇到需要把一些数据保存在本地的情况,那么这个时候我们有以下几种可以选择的方案: 一.使用NSUserDefaul ...
- c# pictureBox1.Image的获得图片路径的三种方法 winform
代码如下:c# pictureBox1.Image的获得图片路径的三种方法 winform 1.绝对路径:this.pictureBox2.Image=Image.FromFile("D:\ ...
- 【Win 10应用开发】Adaptive磁贴模板的XML文档结构
在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板. 同样道理,你依旧可以使用8.1时候的磁贴模板,在win ...
随机推荐
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- Java FtpClient 实现文件上传服务
一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /b ...
- spring applicationContext.xml和hibernate.cfg.xml设置
applicationContext.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans ...
- IteratorPattern(迭代子模式)
/** * 迭代子模式 * @author TMAC-J * 聚合:某一类对象的集合 * 迭代:行为方式,用来处理聚合 * 是一种行为模式,用于将聚合本身和操作聚合的行为分离 * Java中的COLL ...
- 极光推送和友盟推送,ios端和安卓端的后端调试设置
我是最后端的,这两天搞了一个app项目,前端安卓使用友盟很方便,调试比较顺利,然后ios就遇到各种问题了,证书.发送成功推送不成功,测试时用的TestMode(),ios上架之后就必须用product ...
- NSStringCompareOptions
typedefNS_OPTIONS(NSUInteger, NSStringCompareOptions) { NSCaseInsensitiveSearch = 1, //不区分大小写比较 N ...
- GSD_WeiXin(高仿微信)应用源码
高仿微信计划:已经实现功能 1.微信首页(cell侧滑编辑.下拉眼睛动画.下拉拍短视频.点击进入聊天详情界面) 2.通讯录(联系人字母排序.搜索界面) 3.发现(朋友圈) 4.我(界面) 待实现功能( ...
- ubuntu14.04下安装node.js
在网上查了下,起初是下载了一个node-v0.12.7-linux-x64.tar.gz,解压在/home/node路径下,然后在/etc/profile中添加如下命令: export NODE_HO ...
- 《Note --- Unreal 4 --- Sample analyze --- StrategyGame(continue...)》
---------------------------------------------------------------------------------------------------- ...
- 学习笔记 :DrawText
最近在做一个TStringGrid的自绘处理,在画文字处理上遇到了高度的计算问题.后来经过一段时间还是找到了一些方法: 1.使用TLabel 这个方法是有点绕路的,方法倒是简单,就是使用AutoSiz ...