Manage Back Stack and Multi-Page Navigation

UnoFeatures: Navigation (add to <UnoFeatures> in your .csproj)

Clear back stack when navigating

<Button Content="Go to Second Page Clear Stack"
        uen:Navigation.Request="-/Second" />

public async Task GoToSecondPageClearBackStack()
{
    await _navigator.NavigateViewModelAsync<SecondViewModel>(this, qualifier: Qualifiers.ClearBackStack);
}

Use -/ qualifier prefix to clear back stack.

Remove current page when navigating forward

<Button Content="Go to Sample Page"
        uen:Navigation.Request="-Sample" />

public async Task GoToSamplePage()
{
    await _navigator.NavigateViewModelAsync<SampleViewModel>(this, qualifier: Qualifiers.NavigateBack);
}

Navigates forward and removes current page from back stack.

Navigate through multiple pages

await _navigator.NavigateRouteAsync(this, "Second/Sample");

<Button Content="Navigate to Second then Sample"
        uen:Navigation.Request="Second/Sample" />

Navigates to SamplePage with SecondPage in the back stack.

public SecondViewModel? ViewModel => DataContext as SecondViewModel;

• Implement method in SecondViewModel:

    public async Task GoToSamplePage()
    {
        await _navigator.NavigateViewModelAsync<SampleViewModel>(this, qualifier: Qualifiers.NavigateBack);
    }

• Result: SecondPage removed from back stack after navigating to SamplePage.

Navigate to Multiple Pages

Navigate forward and inject additional page into back stack.

• Add button in MainPage.xaml:

  <Button Content="Go to Sample Page"
          Click="{x:Bind ViewModel.GoToSamplePage}" />
  

• Use multi-section route:

  public async Task GoToSamplePage()
  {
      await _navigator.NavigateRouteAsync(this, route: "Second/Sample");
  }
  

• Route "Second/Sample":

  • Navigates to SamplePage
  • Injects SecondPage into back stack
  • SecondPage created only when user navigates back