Creating a WP8.1 File/Photo Explorer using ReactiveUI

[Thomas Reitmaier]

I’m planning to create a File Explorer for Windows Phone 8.1. One of the main challenges that I foresee is the asynchronous nature through which files and file properties are listed and accessed, so I was wondering if and how the ReactiveUI framework might help me navigate these challenges.

Consider for instance listing the files/photos that are stored in the Phone’s Camera roll:

Photos = await KnownFolder.CameraRoll.GetFilesAsync();

It seems sensible enough initialize this list of Photos upfront and create a XAML binding to display all the Files/Photos’ Names in a ListView:

<ListView ItemSource:”{Binding Photos”>

where we would bind to the Photo/File’s Name in the ListView’s ItemTemplate.

The bigger challenge, however, is that a number of what we would traditionally consider File/Photo properties – file size, image resolution, thumbnail – that we would want to display alongside the File/Photo name, can now only be accessed through asynchronous methods.

var thumbnail = await file.GetThumbnailAsync(ThumbnailMode.ListView);

var properties = await file.GetBasicPropertiesAsync();

The phone’s Camera Roll could potentially contain hundreds of photos, so initializing and caching these properties upfront would be very slow, not to mention inefficient since the phone’s limited screen size would limit it to displaying 5 or so photos at a time. So I was wondering if I could use the ReactiveUI framework to develop an app that initially displays a list of photo names and as the above asynchronous methods return their results (thumbnails and basic properties such as file size) display those along side the name. How should I structure my ViewModel? And how can I bind to these, for lack of a better word, 'asynchronous properties' in my View?

Thanks!

Thomas

[Matt Oswald]

Hi Thomas,

 

Binding to “asynchronous properties” is kind of what XAML is good at. Your primary View would be a virtualizing container of subViews, and these would be UserControls that display individual photo details. Your primary VM would be a list of files (loaded asynchronously), where each file is represented by a subViewModel. These VMs would be the ones that handle thumbnails entering or leaving the cache, as well as loading file properties. Since the primary ViewModel should be in charge of which items are visible, it will be able to tell these subViewModels to refresh their thumbnails.

 

--m

--
You received this message because you are subscribed to the Google Groups "ReactiveUI mailing list" group.
To unsubscribe from this group and stop receiving emails from it, send an email to reactivexaml...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.