1

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/

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

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.

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.

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?

Nigel
  • 93
  • 6
  • I would split this table into two tables: one has only text data while other has image bytes. If no one has a better suggestion I can explain exactly what I mean. – vortexwolf Feb 20 '11 at 16:22
  • Thanks @vorrtex for the suggestion however the data is coming from the Northwind database so the tables are "as is" and besides it is easy to do a linq query to return the data and image bytes separately. What I am looking for is some way to update the Observable Collection in the application from a background thread, I think... – Nigel Feb 20 '11 at 22:19
  • So you can receive objects without images and after that write a foreach loop that send requests to the server for images for each employee. From a background thread use Dispatcher. – vortexwolf Feb 20 '11 at 22:37

1 Answers1

0

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.

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>
benPearce
  • 37,735
  • 14
  • 62
  • 96