Assigning an async result to a data binding proper

Question

Below is a sample implementation that uses metro API and data binding (using MVVM) to populate list of folders in a drop down list.

The View model‘s constructor uses SetFolders method (private async), which calls an awaitable method fileService.GetFoldersAsync() to get list of folders. The folders list is then gets assigned to the property called “FoldersList”. XAML uses this property to populate a drop down list using the data binding.

I wonder is there a better way to set the FoldersList property without having to set it in the constructor as below. I would prefer to call the GetFilesAsync method and set the FilesList property value, when the actual data binding occurs (not during the class init). Since the properties do not support async/await modifiers (as far as I know) I’m struggling to implement a proper solution. Any ideas greatly appreciated.

The code is below.

ViewModel

public class FileViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private readonly IFileService fileService;

    public FileDataViewModel(IFileService fileService)
    {
        this.fileService = fileService;
        SetFolders();
    }

    private async void SetFolders ()
    {
        FoldersList = await fileService.GetFoldersAsync();
    }

    private IEnumerable< IStorageFolder > foldersList;
    public IEnumerable<StorageFolder> FoldersList
    {
        get { return foldersList; }
        private set
        {
            foldersList = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("FoldersList"));
            }
        }
    }
}

IFileService and implementation

public interface IFileService    {
    Task<IEnumerable<IStorageFolder>> GetFilesAsync();
  }

public class FileService : IFileService
{
    public async Task<IEnumerable<IStorageFolder>> GetFoldersAsync()
    {
        var folder = KnownFolders.DocumentsLibrary;
        return await folder.GetFoldersAsync();
    }
}

Answer 1

I would implement it as a lazy property and use ObservableCollection<T> rather than IEnumerable<T>. We are doing it in several projects and it works well. This way you can guarantee that you are loading data only when needed. Furthermore, if you need to prefetch it, you can always call the load method in the constructor or elsewhere.

As a side note, I personnaly wouldn't expose IStorageFolder directly from my ViewModels.

private async Task LoadData()
{
   if(!IsLoading)
  {
    IsLoading = true;
     Folders = new ObservableCollection<Folder>(await fileService.GetFolderAsync());

  }
  IsLoading = false;
}

private ObservableCollection<Folder> _folders;

public  ObservableCollection<Folder> Folders
{
  get
  {
    if(_folders == null)
    {
      LoadData();//Don't await...
    }
    return _folders;

  }
  private set
  {
    SetProperty(ref _folders,value);
  }

}
private bool _isLoading;
public bool IsLoading
{
  get
  {
    return _isLoading;
  }
  private set
  {
    SetProperty(ref _isLoading,value);
  }
}

Note that you can use the IsLoading property to display a progress ring for instance. after that the observable collection is loaded, you will be able to refresh it without recreating it. (_folders.Add, _folders.Remove, _folders.Clear...)