How to perform View navigation using MVVM? Win RT

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/30134592/how-to-perform-view-navigation-using-mvvm-win-rt

标签

mvvm

navigation

win-universal-app