UWP app: insert / remove user control MVVM way

Question

I'm learning UWP at the moment in an attempt to port an old Win32 to the new platform. I'm using Template10 and everything runs fine so far, except I'm bit confused on how to implement the problem below.

Problem: In a page, I have to constantly remove and insert user controls depending on a view model property. The user controls are fairly complex and they all look and behave differently. Imagine a wizard with back and next buttons. On every click I have to remove the old content and insert a new one, with completely different view model.

Question: What would be the recommended way of implementing this in a MVVM way?

At the moment, my only idea is to send a message from the page's view model and subscribe for the message in page's code behind where I can create the required component and insert it dynamically in the page (after removing the old one).

In MyPageViewModel:

public IComponentViewModel CurrentComponent {get; set;}
...
public DelegateCommand NextItemCommand = new DelegateCommand(() =>
{
    var evt = App.EventAggregator.GetEvent<ItemChangedMessage>();
    evt.Publish(CurrentComponent);
});

In MyPage.xaml.cs code behind

public MyPage()
{
    InitializeComponent();
    var evt = App.EventAggregator.GetEvent<ItemChangedMessage>();
    evt.Subscribe(OnItemChanged);
}

private void OnItemChanged(IComponentViewModel viewModel)
{
    switch (viewModel.Type)
    {
        case 1:
            // create the new user control and insert it in the container
            var component = new TypeOneComponent();
            component.DataContext = (TypeOneCompoentViewModel)viewModel;
            // ...
        case 2:
            ...
     }
}

Not sure this is the best approach tho.

Answer 1

I've been thinking about a Wizard approach lately myself. It seems to me that a FlipView with re-templated left/right buttons is the easiest approach. My WizardViewModel would have several children view-models; something like Page1ViewModel, Page2ViewModel, and so on. I strongly feel that each page view-model would have a dedicated UserControl so the UI can be unique but not dynamic - I think it makes sense to design against dynamic UI, while embracing an adaptive UI - which is a different concept altogether.

The pseudo code might look like this:

public interface IWizardPage { }

public class Page1ViewModel : ViewModelBase, IWizardPage { }
public class Page2ViewModel : ViewModelBase, IWizardPage { }
public class Page3ViewModel : ViewModelBase, IWizardPage { }

public class MainPageViewModel : ViewModelBase
{
    public IWizardPage CurrentPage { get; set; }
    public IWizardPage Page1ViewModel { get; set; }
    public IWizardPage Page2ViewModel { get; set; }
    public IWizardPage Page3ViewModel { get; set; }
}

And this:

<FlipView Template="{StaticResource WizardFlipView}" 
            SelectedItem="{Binding CurrentPage, Mode=TwoWay}">
    <Page1UserControl DataContext="{Binding Page1ViewModel}" />
    <Page2UserControl DataContext="{Binding Page2ViewModel}" />
    <Page3UserControl DataContext="{Binding Page3ViewModel}" />
</FlipView>

This is just a recommendation. But to answer your question, this would be very amenable to the MVVM pattern. I also think this would allow for you to be very flexible without getting so dynamic that maintenance is affordably time consuming. There are lots of ways to do wizards. I think this would be a fine solution, good with the MVVM pattern and fine with Template 10.

Best of luck.