Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Windows Universal Apps, Cimbalino and the App Back Button

One of the things you can add to a Desktop variant of a Universal Windows App is a back button that a developer can add to their app; this back button appears in the top left corner of the app. In order to use the back button, the developer needs to tell it to appear, as well as potentially wire up to the back button’s pressed event, but that’s not the Cimbalino way.

The Solution

In point of fact, the Cimbalino way for handling this is as simple as just use the NavigationService that comes with the Cimbalino toolkit. If this is something you use already, you get the back button’s visibility handled for you. Not only that, but with the standard Windows SDK, the phone’s back button pressed event and the Desktop back button’s pressed event are two different events, with two different arguments passed into them. So much for sharing code, right? Well this is where the Cimbalino way is better, because it takes care of all that for you and presents to you the same back key pressed event whether your app is running on the phone, or the desktop.

In the sample project, I’ve declared the NavigationService as a static object on App, but this will work if you’re injecting the NavigationService into your ViewModels in an MVVM environment.

BackKeyPressed

As mentioned, Cimbalino’s NavigationService allows you to have one event that you can use for both phone and desktop, so if we look at the code behind for Page2.xaml, we can see that in there, I’ve hooked up the BackKeyPressed event

        public Page2()
        {
            this.InitializeComponent();

            App.NavigationService.BackKeyPressed += NavigationServiceOnBackKeyPressed;
        }

        private void NavigationServiceOnBackKeyPressed(object sender, NavigationServiceBackKeyPressedEventArgs e)
        {
            e.Behavior = NavigationServiceBackKeyPressedBehavior.GoBack;
        }

This makes it very handy for sharing code and not having to worry about multiple event handlers for what is essentially the same thing.

Removal From Backstack

I hear you, what if you remove something from the backstack using the NavigationService’s RemoveEntry() method, well, if that removal causes the frame to no longer be able to go back, then the button is hidden, again, everything being taken care of for you.

Pfft, I’ll Do It Myself

So what about if you actually want to handle all this yourself? Well, this is easily configured too. When your app starts, just set the following:

Cimbalino.Toolkit.Services.NavigationService.HandleBackButtonVisibility = false;

By default, this is set to true, so it will automatically happen for you, you have to opt out of it.

Resources

Currently Cimbalino for UWP is not available via nuget, but it will be as soon as nuget figure out how this is all going to work. In the mean time, there is a branch on GitHub with Win10 support. Or if you want the precompiled dlls, you can find them in the sample app (just make sure you reference the Blend SDK in your project!).

SL

Advertisements

4 responses to “Windows Universal Apps, Cimbalino and the App Back Button

  1. Jerry Nixon July 2, 2015 at 00:55

    I might point you to this: https://github.com/Windows-XAML/Template10/blob/master/Template10Library/Controls/BackButton.cs as the logic of when to show the on-canvas back button is pretty complex.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: