Как лениво загрузить изображение байта [] в WPF-изображение?

Question

Чтобы научить себя основам OData и MVVM, я написал небольшое приложение WPF для запроса сущности Employee в службе OData Northwind по адресу http://services.odata.org/Northwind/Northwind.svc/

Код модели, который я написал для запроса сущности Employeeниже:

    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());
    }

Возвращает данные в ViewModel как объект Employee, который затем привязывается к представлению WPF, содержащему ListBox с TextBlocks и элемент управления Image.

Практически всеработает, как и ожидалось, и я узнал кучу, однако при запуске приложения требуется некоторое время для загрузки, потому что размер ответа OData, когда объект Photo (данные byte []) включены в результаты, составляет ~ 260 КБ, где, как и безданные байта [], ответ которых составляет 7 КБ

Так что мой вопрос в том, что было бы лучшим способом ленивой (асинхронной) загрузки изображений, чтобы сначала возвращались данные, а затем изображения продолжали загружаться, как они естьскачал.

Один из способов, о котором я подумал, это загрузить фото, используя отдельную веткуd записать данные байта [] в файлы изображений во временном местоположении, а затем задать источник изображения с путем к местоположению временного файла.

У кого-нибудь есть идеи получше?

Answer 1

Начните с изменения способа заполнения свойств вашей модели, чтобы сделать изображение отдельно от трех других свойств.Переместите загрузку данных в отдельный поток из пользовательского интерфейса, например фоновый поток.

Затем измените привязку на фотографии на Приоритетную привязку, это позволит интерфейсу отображать сообщение вместоизображение во время загрузки изображения.

<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>