Search code examples
c#uwptemplate10

UWP navigation (Template10), Pivot control, multiple frames

I'm trying to implement the following style of navigation in my UWP app (using Template10) but am struggling how to use the multiple frames as independent history stacks.

Side-by-side

Within each frame of the pivot, I'd want to have an independent frame that has it's own history and back stack. Navigating between the frames would only be possible via the pivot.

I was thinking of using code similar to the below:

<Pivot>
   <PivotItem Header="PageA">
      <Frame x:Name="PageAFrame" />
   </PivotItem>
   <PivotItem Header="PageB">
      <Frame x:Name="PageBFrame" />
   </PivotItem>
   <PivotItem Header="PageC">
      <Frame x:Name="PageCFrame" />
   </PivotItem>
</Pivot>

However, I'm not sure how to actually implement the navigation. I've tried using code similar to the below, but with no luck:

var nav = Template10.Services.NavigationService.NavigationService.GetForFrame(PageAFrame);

but nav is always null.

I've also tried:

PageAFrame.Navigate(typeof(PageA));

But my ViewModels do not get instantiated.

Any ideas?

Note: the reason why I'm not using a hamburger menu is because I need to be able to swap between the pivots but still preserve the independent history stack of each.

Solution

  • Nested frames are fine. Multiple frames are an important use case that are definitely supported by T10, but people recognize that a single frame is supported out of the box and multiple frames requires developer code.

    Conceptually, T10 creates a NavigationService that wraps every frame. The first NavService created is automatically attached to the app back button but this can be reassigned or turned off by the developer using arguments in the NavigationServiceFactory.

    https://github.com/Windows-XAML/Template10/blob/master/Template10%20(Library)/Common/Bootstrapper/BootStrapper.cs#L278

    For every frame you introduce you need to create an associated NavigationService using the factory method. Doing so will register it with T10 and make it work fine. That being said, the workflow in your app is now up to you. Remember, instead of Frame.Navigate() always use NavigationService.Navigate() and access the NavigationService with GetForFrame() just like you indicated.

    Make sense?