【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(1000,5000));
            // 更改图像
            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}" />

 

大概原理就这样，大伙伴们可以下载示例源码自己玩耍。

看看最终的效果，可否满意。

 

示例源代码下载