How to perform View navigation using MVVM? Win RT

Question

I've started a Windows Universal project following the MVVM pattern, and came to the situation where I need to navigate to another page with a button click.

Normally I would do this in code behind using the button's click event like the below:

        private void AppBarButton_Click(object sender, RoutedEventArgs e)
        {
            // Navigation Without parameters
            this.Frame.Navigate(typeof(SecondPage));

        }

But since I need to follow the MVVM pattern with this app, I'm wondering how should I set up the navigation to a new View on button click?

I've come across ICommand for this task in WPF solution after a Google search, but not 100% on how it should be implemented for this Windows Universal Framework.

How is "I need to follow the MVVM pattern with this app" exclusive of using code-behind? Your usual approach should work fine. "MVVM" addresses only the data aspects of your program; implicit is the concept of a controller, and there's nothing about the pattern that precludes writing imperative code to effect changes in the state of the UI, particularly when they are to occur as a result of a user-input event. — Peter Duniho
Wiring navigation in code-behind isn't the cleanest way of doing it, as the code-behind should be mainly empty except for view related issues (animations, reusable usercontrols) as any code written in code-behind is tightly coupled to that specific view (which is fine in case of reusable user controls). Here — Tseng
@Tseng tried the behaviours option but getting some errors relating to the behaviours not existing in the name spaces, left a comment on your answer below. — Brian Var

Tseng Tseng · Accepted Answer · 2015-05-09T10:57:07

Basically you got two options

1. use a navigation service

You can define an INavigationService interface and pass it to all your ViewModels in your viewmodel assembly (assuming you are using different assemblies which is important to keep ensure you are not referencing to the view from your viewmodel and hence violate MVVM pattern).

public interface INavigationService
{
    void Navigate(string page, object parameter);
}

In your viewmodels you can simply call it with navigationService.Navigate("UserEditPage", selectedUser.Id);.

Implementation could be as simple as

public class WinRtNavigationService : INavigationService 
{
    public void Navigate(string page, object parameter) 
    {
        Type pageType = Type.GetType(string.Format("YourCompany.YourApp.ViewModels.{0}", page));
        ((Frame)Window.Current.Content).Navigate(pageType, parameter);
    }
}

You use this, if you have the need to navigate from ViewModels.

2. use behaviors

You can use behaviours to add reusable navigation support to XAML directly, hence completely avoiding the code behind.

For this, Blend offers Interactivity Triggers and a NavigateToPageAction behavior.

<Page 
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:c="using:Microsoft.Xaml.Interactions.Core" >
    ....
    <Button Content="Edit">
        <i:Interaction.Behaviors>
            <i:BehaviorCollection>
                <c:EventTriggerBehavior EventName="Tapped">
                    <c:NavigateToPageAction TargetPage="YourCompany.YourApp.ViewModel.UserEditPage" Parameter="{Binding Path=SelectedUser.Id}" />
                </c:EventTriggerBehavior>
            </i:BehaviorCollection>

        </i:Interaction.Behaviors>
    </Button>
    ...
</Page>

Blend Behaviors/Interaction Triggers are generally used to bind navigation functions to Buttons or other UI elements (i.e. click on a picture which doesn't have to be a button), as it doesn't require any code within the Code Behind or ViewModel.

If a navigation is to occur after some validation, i.e. you have a multi-page form for user registration and you have a "Send" Button binded to a RegisterCommand and the RegisterCommand does an online validation and you're required to go back to previous page, you'd want to use the INavigationService.

How to perform View navigation using MVVM? Win RT

1 Answers