How to handle the back button on WP 8.1 using MVVM light?

3
votes

I'm searching for the appropiate way to handle the back button pressed event on Windows Phone 8.1 WinRT using the NavigationService available on MVVM light 5.

So far I think the best place to do it is inside the ViewModelLocator by registering the GoBack method of the NavigationService while creating it following the approach outlined in NavigationService in MVVM Light V5

This is an effective approach. However, I can't handle validation before navigating back so I was wondering if there is a more suitable way to handle this event.

public class ViewModelLocator
{
    public ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
        // Register NavigationService
        SimpleIoc.Default.Register(CreateNavigationService);
        // Register ViewModels here
    }

    private INavigationService CreateNavigationService()
    {
        var navigationService = new NavigationService();
        // Register pages here
        navigationService.Configure("Details", typeof(DetailsPage));
        // Handle back button
        HardwareButtons.BackPressed += (sender, args) => {
            navigationService.GoBack();
            args.Handled = true;
        }; 
        return navigationService;
    }
}
3
c#mvvmwindows-phone-8.1winrt-xamlmvvm-light
What kind of validation would you like to perform? Is the result just a simple bool telling the NavigationService whether it can navigate or not or? – Igor Ralic
Yes, I expect some sort of CanNavigate boolean returning method but the logic will be ViewModel dependent probably – Camilo Martinez
mytoolkit.codeplex.com has an implementation of Frame, Page, and Navigation that acts like WP8 SL did. More on the subject: stackoverflow.com/questions/11539755/… – Derek Beattie

3 Answers

3
votes

If you take a look at how Marco is enabling OnNavigatedTo and OnNavigatedFrom calls to propagate to ViewModel in the blog post

Calling ViewModel methods in response to Page navigation events using MVVM Light in WinRT

you'll notice he uses INavigable interface and Activate and Deactivate methods. You could extend that INavigable interface with AllowGoingBack method, like this:

public interface INavigable
{
    void Activate(object parameter);
    void Deactivate(object parameter);
    bool AllowGoingBack();
}

Each page-related ViewModel can then have its own implementation of AllowGoingBack method depending on the context. Then, in the code behind of the View (which is OK, because View can know about the ViewModel) you can override OnNavigatingFrom and check if going back should be allowed:

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    var navigableViewModel = this.DataContext as INavigable;

    if (navigableViewModel != null)
    {
        if (e.NavigationMode == NavigationMode.Back && !navigableViewModel.AllowGoBack())
        {
            e.Cancel = true;
        }
    }
}

Your ViewModel would then implement INavigable, so you would define the validation code inside AllowGoingBack(), and return true if going back is OK, and false if it's not.

0
votes

Based on the answer by igrali, and following the instructions in Calling ViewModel methods in response to Page navigation events using MVVM Light in WinRT, what I did in the "BindablePage.cs" class, in the OnNavigatedTo method was to add add the following:

            HardwareButtons.BackPressed += HardwareButtons_BackPressed;

and in the OnNavigatedFrom:

            HardwareButtons.BackPressed -= HardwareButtons_BackPressed;

Then add the event handler:

        void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
        {
            var navigableViewModel = this.DataContext as INavigable;
            if (navigableViewModel != null)
                navigableViewModel.BackButonPressed(e);
        }

Next, in the INavigable interface add

void BackButonPressed(Windows.Phone.UI.Input.BackPressedEventArgs e);

And finally, on each view model:

public void BackButonPressed(Windows.Phone.UI.Input.BackPressedEventArgs e)
{
    // You can modify this code to show a confirmation dialog, etc...
    e.Handled = true;
    navigationService.GoBack(); 
}

If this is a universal app, then don't forget to surround these new pieces of code with #if WINDOWS_PHONE_APP ... #endif

0
votes

I found an interesting article about your question: http://blog.falafel.com/windows-phone-and-mvvm-light-navigationservice-and-cangoback/

This is the idea:

public AboutPage()
{
   this.InitializeComponent();
   HardwareButtons.BackPressed += HardwareButtons_BackPressed;
}

private void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
{
   var frame = Window.Current.Content as Frame;
   if (frame.CanGoBack)
   {
      var navigation = ServiceLocator.Current.GetInstance<INavigationService>();
            navigation.GoBack();
            e.Handled = true;
   }
 }