如何将图像byte []延迟加载到WPF图像控件中? [英] How to lazy load image byte[] into a WPF image control?

问题描述

为了教给我一些OData和MVVM的基础知识，我编写了一个小WPF应用程序来查询Northwind OData服务上的Employee实体，该实体位于

In order to teach myself some basics of OData and MVVM I wrote a little WPF application to query the Employee entity on the Northwind OData service at http://services.odata.org/Northwind/Northwind.svc/

我编写的用于查询Employee实体的模型代码如下:

The Model code I wrote to query the Employee entity is below:

    public static ObservableCollection<Employee> GetEmployeesFromNW()
    {
        NorthwindEntities nwEntities = new NorthwindEntities(
        new Uri("http://services.odata.org/Northwind/Northwind.svc/"));

        var emp = from e in nwEntities.Employees
                  select new Employee
                  {
                      FirstName = e.FirstName,
                      LastName = e.LastName,
                      BirthDate = e.BirthDate,
                      Photo = e.Photo
                  };

        // Cast the resuts to an observable collection.
        return new ObservableCollection<Employee>(emp.AsEnumerable());
    }

这会将数据作为Employee对象返回到ViewModel，然后将其绑定到WPF视图，该视图包含带有TextBlocks的ListBox和Image控件.

This returns the data to the ViewModel as an Employee object which is then bound to a WPF View that contains a ListBox with TextBlocks and an Image control.

基本上一切都按预期工作，并且我学到了很多东西，但是，当我运行该应用程序时，需要花费一些时间来加载，因为结果中包含Photo对象(byte []数据)时OData响应的大小为〜260KB，如果没有byte []数据，响应为7KB

Basically everything works as expected and I learned a bunch, However when I run the app it takes a little while to load because the size of the OData response when the Photo object (byte[] data) is included in the results is ~260KB where as without the byte[] data the response is 7KB

所以我的问题是什么是延迟(异步)加载图像的最佳方法，以便首先返回数据，然后在下载图像时继续加载图像.

So my question is what would be the best method to lazy (asynchronously) load the images so that the data is returned first and then the images continue to load as they are downloaded.

我想到的一种方法是使用单独的线程下载Photo，并将byte []数据写入临时位置的图像文件，然后将Image源设置为临时文件位置的路径.

One method I thought about was downloading the Photo using a separate thread and writing the byte[] data to image files in a temp location, then set the Image source with a path to the temp file location.

有人有更好的主意吗?

Anyone have any better ideas?

推荐答案

从更改填充模型属性的方式开始，以独立于其他三个属性来制作图像. 将数据加载移至UI之外的单独线程上，例如后台线程.

Start by changing the way you are populating your model properties to do the image separately from the other three properties. Move the loading of the data on to a separate thread from the UI such as a background thread.

然后将照片上的绑定更改为优先绑定，这将允许UI在加载图像时在图像上显示一条消息.

Then change the binding on the Photo to a Priority Binding, this will allow the UI to display a message in place of the image while the image is loading.

<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
  <TextBlock.Text>
    <PriorityBinding>
      <Binding ElementName="MainWindow" Path="Slow" IsAsync="True" />
      <Binding ElementName="MainWindow" Path="Medium" IsAsync="True" />
      <Binding ElementName="MainWindow" Path="Fast" />
    </PriorityBinding>
  </TextBlock.Text>
</TextBlock>

这篇关于如何将图像byte []延迟加载到WPF图像控件中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！