How to navigate in a flyout navigation drawer?

[zshall]

Hi all,

I'm new to Uno and mobile app development and am trying to implement some basic navigation in an Uno project and have been having some trouble getting started. I've read the following links:

• https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-NavigateInXAML.html
• https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-NavigateInCode.html
• https://platform.uno/docs/articles/external/uno.toolkit.ui/doc/controls/NavigationBar.html#breadcrumb
• https://platform.uno/docs/articles/guides/silverlight-migration/02-considering-navigation.html#_content
• https://platform.uno/docs/articles/features/native-frame-nav.html#frame

My project is using XAML, MVUX, and targets Android primarily. I defined some routes in App.xaml.cs:

 views.Register(
     new ViewMap(ViewModel: typeof(ShellModel)),
     new ViewMap<MainPage, MainModel>(),
     new ViewMap<SettingsOverviewPage, SettingsOverviewModel>(),
     new ViewMap<SyncPage, SyncModel>()
 );

 routes.Register(
     new RouteMap("", View: views.FindByViewModel<ShellModel>(),
         Nested: new RouteMap[]
         {
             new (Constants.NavigationRoutes.Main, View: views.FindByViewModel<MainModel>(),
             new (Constants.NavigationRoutes.Sync, View: views.FindByViewModel<SyncModel>()),
             new (Constants.NavigationRoutes.Settings, View: views.FindByViewModel<SettingsOverviewModel>()),
         }
     ),
 );

In MainPage.xaml I added a navigation bar that would open the navigation drawer:

<Page x:Class="StarkPhoenix.Presentation.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:StarkPhoenix.Presentation"
      xmlns:uen="using:Uno.Extensions.Navigation.UI"
      xmlns:utu="using:Uno.Toolkit.UI"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      NavigationCacheMode="Required"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

  <Grid utu:SafeArea.Insets="VisibleBounds">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <utu:NavigationBar Content="Main Page" MainCommandMode="Action">
      <utu:NavigationBar.MainCommand>
        <AppBarButton>
          <AppBarButton.Icon>
            <BitmapIcon UriSource="ms-appx:///Assets/Icons/menu.png"/>
          </AppBarButton.Icon>
          <AppBarButton.Flyout>
            <local:NavFlyout />
          </AppBarButton.Flyout>
        </AppBarButton>
      </utu:NavigationBar.MainCommand>
    </utu:NavigationBar>

  </Grid>
</Page>

The flyout page looks like this:

<Flyout
    x:Class="StarkPhoenix.Presentation.NavFlyout"
    xmlns:main="StarkPhoenix.Presentation.MainModel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StarkPhoenix.Presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:themes="using:Uno.Themes"
    xmlns:uen="using:Uno.Extensions.Navigation.UI"
    mc:Ignorable="d"
    Placement="Full"
    FlyoutPresenterStyle="{StaticResource NavFlyoutPresenterStyle}">

  <Grid RowSpacing="12"
          Margin="20,0">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image HorizontalAlignment="Center"
             Width="150"
             Height="150"
             Source="../Assets/Icons/icon_foreground.png"
             Margin="0,16"/>

    <Button Grid.Row="1"
            Content="{Binding LocalizedSettings}"
            Command="{Binding NavigateToSettingsOverviewAsync}"
            FontSize="24"
            HorizontalAlignment="Stretch"
            Foreground="Blue"
            Style="{StaticResource TextButtonStyle}">
      <themes:ControlExtensions.Icon>
        <SymbolIcon Symbol="Setting"/>
      </themes:ControlExtensions.Icon>
    </Button>

    <Button Grid.Row="2"
            Content="{Binding LocalizedSync}"
            Command="{Binding NavigateToSyncAsync}"
            FontSize="24"
            HorizontalAlignment="Stretch"
            Foreground="Blue"
            Style="{StaticResource TextButtonStyle}">
      <themes:ControlExtensions.Icon>
        <SymbolIcon Symbol="Download"/>
      </themes:ControlExtensions.Icon>
    </Button>
  </Grid>
</Flyout>

After adding a few pages I realized that I've needed to include the <utu:NavigationBar> on every page and reimplement the NavigateToXAsync() code on every page as well as resolve localized strings for the menu buttons on each page as well; It seems like I'm doing something fundamentally wrong, as if I'm not careful when I change pages the navigation button text might disappear or the click handlers will stop working if I don't copy code from page to page about navigating to every other page.

I started reading about how XAML can do navigation itself so I replaced my flyout's button code with the following:

<Button Grid.Row="2"
        Content="{Binding LocalizedSync}"
        uen:Navigation.Request="sync"
        FontSize="24"
        HorizontalAlignment="Stretch"
        Foreground="Blue"
        Style="{StaticResource TextButtonStyle}">
  <themes:ControlExtensions.Icon>
    <SymbolIcon Symbol="Download"/>
  </themes:ControlExtensions.Icon>
</Button>

This doesn't fire any events nor does it produce any errors or logging; I double-checked that my routes are named the same but it didn't seem to work.

I next tried using CodeBehind instead but since I'm in a Flyout not a Page the Navigator() instance wasn't accessible:

Is there a way to have a MVUX model with a flyout so that I can use DI and string localization and keep all the navigating code between my pages in one component? I tried making such a class and registering it in App.xaml.cs but it didn't seem to work:

public partial record NavFlyoutModel {
    private readonly INavigator _navigator;
    private readonly IStringLocalizer _stringLocalizer;

    /// <summary>
    /// Resource strings for UI
    /// </summary>
    #region LocalizedStrings
    public string? LocalizedSync { get; set; }
    public string? LocalizedSettings { get; set; }
    #endregion

    public NavFlyoutModel(INavigator navigator, IStringLocalizer stringLocalizer) {
        _navigator = navigator;
        _stringLocalizer = stringLocalizer;
        SetLocalizedStrings();
    }

    /// <summary>
    /// Helper method to set localized strings
    /// </summary>
    private void SetLocalizedStrings() {
        LocalizedSync = _stringLocalizer["Sync"];
        LocalizedSettings = _stringLocalizer["Settings"];
    }

    /// <summary>
    /// Navigate to the Settings Overview Page
    /// </summary>
    /// <returns></returns>
    public async Task NavigateToSettingsOverviewAsync() {
        await _navigator.NavigateViewModelAsync<SettingsOverviewModel>(this);
    }

    /// <summary>
    /// Navigate to the Sync Page
    /// </summary>
    /// <returns></returns>
    public async Task NavigateToSyncAsync() {
        await _navigator.NavigateViewModelAsync<SyncModel>(this);
    }
}

It seems like the Flyout isn't picking up on the model like all the other pages do; I'm left with a menu that doesn't do anything.

So many things I've tried haven't worked the way it seems like they should that I'm thinking I'm taking the wrong approach here; is there a sample app using the latest Uno version that implements a few pages and navigates between them using a flyout?

Thanks for any and all help!

[kazo0]

Hi @zshall thanks for all of the details!

Multiple things here that I will try and cover. First, yes it should absolutely be possible to define a Model and XAML for the content of your Flyout so it can be re-used. The Navigation extensions are smart enough to determine how a specific page should be displayed in the app based on the type of view that you are navigating to. Detailed a bit here. So, what you could do is create a Flyout called NavFlyout and a corresponding Model (called NavFlyoutModel) like you did above. After that, you would need to define a route for that flyout in order to navigate to it.

So you would need something like: new RouteMap("Nav", View: views.FindByViewModel<NavFlyoutModel>()) within your RouteMap collection.

Now you can navigate to open the flyout via the "Nav" route like so:

<Button uen:Navigation.Request="Nav" />

Or in code like:

await _navigator.NavigateViewModelAsync<NavFlyoutModel>(this);

// or...

await _navigator.NaviagateRouteAsync(this, "Nav");

Notice above that I am not using the "!", or the Qualifiers.Dialog, qualifier here. This is because the Navigation Extension is smart enough to realize that the view we are trying to navigate to ("NavFlyout") is of type Flyout so it knows to display it as a Flyout rather than navigate to it as a separate Page.

Now, as for navigating from the flyout. I am assuming you want to be able to click on a button in the Flyout and have it close the Flyout and navigate from the main page of the application? For that, you will need to fiddle with your route definitions a bit. Since the route for the NavFlyout can be seen as being "outside" of the main nav route logic for your MainPage/SyncPage/SettingsOverviewPage, we need to make sure it isn't defined at the same level as those routes.

As an easier way of explaining, I have created a small sample app that I think replicates what you are trying to do. You can find it hosted on my GitHub here: https://github.com/kazo0/NavFlyoutApp

Take a look at the routes that I have defined:

https://github.com/kazo0/NavFlyoutApp/blob/46afcd3a35784d7531587bde83db40703ea9ad95/NavFlyoutApp/App.xaml.cs#L110-L123

You'll see that the Nav route is outside of the Main flow, since it's more of a globally accessible route that can display the Flyout over the rest of the app. Now, anytime you attempt to navigate to a route from within the Flyout, and that route exists at another level, it will close the Flyout and perform the navigation from the context that originally opened the Flyout.

Now we can navigate from within the Flyout and get it to change on the main page:

https://github.com/kazo0/NavFlyoutApp/blob/f22ce77577394df0fd4cd9392126c269301b0aad/NavFlyoutApp/Presentation/NavFlyout.xaml#L14-L20

And you'll notice that the TextBlock I have in the Flyout is properly populated with the text from the NavModel

Recording.2024-07-25.164439.mp4