uwptemplate10

Creating NavigationService for custom Shell in Template10


I'm porting over an existing UWP app to Template10. The app implements a hamburger menu as a custom shell, which has all of the functionality of the native Template10 hamburger menu template but lots of things specific to my application as well, so I don't want to use the template provided by the library and continue using the existing shell.

Inside the shell there is a Frame object called ContentFrame that should handle all page navigation. Somehow I need to get an INavigationService object for the frame. After some playing around (I didn't find any comprehensive documentation on working with custom shells and NavigationService) I got it working, but I'm not entirely sure why:

public override UIElement CreateRootElement(IActivatedEventArgs e)
{            
     _shell = new Shell();
      NavigationServiceFactory(BackButton.Attach, ExistingContent.Exclude, _shell.ContentFrame);
      return new ModalDialog
      {
          Content = _shell
      };
}

public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)
{
     var navService = _shell.ContentFrame.GetNavigationService();
     navService?.NavigateAsync(typeof(TestPage));
}

If I leave out the call of NavigationServiceFactory() the code doesn't work. So, are you supposed to call it whenever you create a Frame that requires a NavigationService? Does the factory create some kind of global NavigationService that can later be located with GetNavigationService(). Even though my code seems to work, I'd like to have this confirmed before I carry on.


Solution

  • Yes, your approach is correct. As the documentation states:

    Template 10 relies on every XAML frame control to have a companion Template 10 navigation service

    So every Frame which should allow navigation should have a navigation service created.

    Once you create a navigation service for a given frame, it is registered, and the GetNavigationService extension method then retrieves it by the instance (see source code).