MVVM How to set datacontext when viewmodel uses async

Question

After hours of searching I am still without answer to this question. I have read this nice writing about async MVVM and made my viewmodel to use factory method.

public class MainViewModel
{
    // sic - public, contrary to the pattern in the article I cite
    // so I can create it in the Xaml as below
    public MainViewModel() 
    {
    }

    private async Task InitializeAsync()
    {
        await DoSomethingAsync();
    }

    public static async Task<MainViewModel> CreateAsync()
    {
        var ret = new MainViewModel();
        await ret.InitializeAsync();
        return ret;
    }
}

This is clear for me, but I can't understand how to make instance of MainViewModel and set it to datacontext in MainPage. I can't simply write

<Page.DataContext>
    <viewModel:MainViewModel/>
</Page.DataContext>

because I should use MainViewModel.CreateAsync()-method. And I can't do it on code-behind, which I even want to do, because code-behind -constructor is normal method, not an async-method. So which is proper way to continue?

WP8.1 != WPF. More's the pity. Here's looking forward to the day when we can get them synced up. — , Jun 08 '15 at 16:13

score 8 · Accepted Answer · answered Jun 07 '15 at 23:05

made my viewmodel to use factory method

I'm normally a fan of that approach - it's my favorite way to work around the "no async constructors" limitation. However, it doesn't work well in the MVVM pattern.

This is because VMs are your UI, logically speaking. And when a user navigates to a screen in an app, the app needs to respond immediately (synchronously). It doesn't necessarily have to display anything useful, but it does need to display something. For this reason, VM construction must be synchronous.

So, instead of trying to asynchronously construct your VM, first decide what you want your "loading" or "incomplete" UI to look like. Your (synchronous) VM constructor should initialize to that state, and it can kick off some asynchronous work that updates the VM when it completes.

This is not too hard to do by hand, or you can use the NotifyTaskCompletion approach that I described in an MSDN article on async MVVM data binding to drive the state transition using data bindings.

score 3 · Answer 2 · edited Nov 07 '15 at 05:04

3

You have to initalize the viewmodel before the window is open. Go to your App.xaml file and remove the part: StartupUri="MainWindow.xaml". Then you go to the App.xaml.cs and add this:

protected async override void OnStartup(StartupEventArgs e)
{
    base.OnStartup(e);
    var mainWindow = new MainWindow { DataContext = await CreateAsync() };
    mainWindow.Show();
}

edited Nov 07 '15 at 05:04

Ruben Bartelink

59,778
26
187
249

answered Jun 06 '15 at 10:47

Snicker

957
10
16

Thank you, looks nice. But my app is for wp 8.1, so it doesn't have StartupUri-property on my App.xaml. Which part of App.xaml.cs should I modify and how? – Paulus Limma Jun 07 '15 at 12:23

score 2 · Answer 3 · edited Nov 07 '15 at 04:05

Firstly, you should make default constructor as private to avoid misusing your class (the article you cite does this - the constructor is private).

The approach you are using to set DataContext is not suitable for MVVM pattern (the View shouldn't create its ViewModel itself). You should create your View and ViewModel in the higher level layer and have that layer bind them. Says if the Page is your main View you should create them in App.xaml.cs by overriding OnStartup, something like this:

var page = new Page();
var dataService = new YourDataService(); // iff Create or the ctor require arguments
var viewModel = await MainViewModel.CreateAsync(dataService);
page.DataContext = viewModel;
page.Show();

h.alex · Answer 4 · 2015-06-06T10:57:24.280

I would re-factor. Make the MainViewModel construction / instantiation lightweight. Then create a Load or Initialize method on your VM. From the code-behind create an instance, set it to the DataContext, then invoke the init method and let it run.

E.g.

/// <summary>Interaction logic for MainWindow.xaml</summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        var dc = new MainViewModel();
        dc.Initialize("Hello", " ", "world");
        this.DataContext = dc;
    }
}

public class MainViewModel
{
    /// <summary>Simple constructor</summary>
    public MainViewModel() { }

    public void Initialize(params object[] arguments)
    {
        //use the task to properly start a new thread as per:
        //http://stackoverflow.com/a/14904107/1144090 and
        //https://msdn.microsoft.com/en-us/library/hh965065.aspx
        //(what would happen if we simply invoke init async here?)
        this.InitializeAsync(arguments)
            .ContinueWith(result =>
            {
                if (!result.IsFaulted)
                    return;

                MessageBox.Show("Unexpected error: " + Environment.NewLine + result.Exception.ToString());
            });
    }

    private async Task InitializeAsync(params object[] arguments)
    {
        await Task.Delay(2333);

        MessageBox.Show(String.Concat(arguments));
    }
}

Note that this is the quick-and-dirty solution, the other two answers (paired with a dependency injection framework) will give you proper high-level structure for your solution.

Windows should not initialize ViewModels. You end up with very brittle code and its difficult to cleanly manage what should happen if the intialization fails (i.e., showing a message box like this is not realistic in the general case). I'd strongly suggest considering approaches in the other answers first. — Ruben Bartelink, Nov 07 '15 at 04:09
@RubenBartelink it's really the IOC container that should manage the app startup. Yes, overriding app startup like in the other examples is more "proper". More proper place to put your IOC container init. — h.alex, Nov 21 '15 at 10:32

MVVM How to set datacontext when viewmodel uses async

4 Answers4