Uno Material Win UI NavigationBar Back Button Issue

[jbtdevgit]

Hi everyone, need some help with using Material UI on UNO, seems like the NavigationBar Back Button doesn't show up on Android, and on WinUI (the whole navbar doesn't show up) right after navigating to 2nd page.
This is just a simple app, and can be replicated in any new projects using
Uno.Material.WinUi (2.4.1), Uno.ToolKit.WinUI.Material (2.4.2)

MainPage.xaml

  <Grid>
      <TextBlock Text="Hello, world!" Margin="20" FontSize="30" />
      <Button x:Name="btnNavigate" Click="{x:Bind navigateClick}"/>
   </Grid> 

Code behind MainPage.xaml.cs

private void navigateClick()
{
    Frame frame = App.Current._window.Content as Frame;
    if(frame != null)
    {
        frame.Navigate(typeof(MainPage2));
    }
} 

That navigates to 2nd Page with content below:

<Grid>
        <utu:NavigationBar Content="Update" MainCommandMode="Back">
        </utu:NavigationBar>
</Grid> 

I tried adding a normal button that can do a back navigation and it works, this means that my navigation stack is not empty and is able to navigate.
Do I need to set something else to make the back button show up after navigating? Helps are very much appreciated

[kazo0]

Hi @jbtamaresgit!

The NavigationBar's Back button should definitely be visible on the 2nd page by default for Android. So there is an issue somewhere that we'll need to identify.

Would you be able to attach a .zip of your application so I can take a look? Also, are the Material and Toolkit resources properly initialized in your App.xaml, following the guidance from the docs: https://platform.uno/docs/articles/external/uno.toolkit.ui/doc/getting-started.html?

[jbtdevgit]

Hi @kazo0 ,

Unbelievable, I do not think I have to attach the application, I missed
<ToolkitResources xmlns="using:Uno.Toolkit.UI" /> <MaterialToolkitResources xmlns="using:Uno.Toolkit.UI.Material" /> to include in my App.Xaml.cs seems like these are needed to make use of Uno.Toolkit.Ui fully -- which is kinda weird since I can make use of the navbar and it shows up.

It was such a blunder on my end. Thanks!

[kazo0]

Glad we could figure it out! Make sure to accept my comment as the accepted answer so it will be more visible to other people who may be searching for the same solution :).

Yeah on Android the NavigationBar will still end up magically rendering the native Android Toolbar even if a style isn't provided or hasn't been initialized.

Also, you may notice that there is no Back icon present in the NavigationBar when you are running on non-mobile platforms. So on Windows you will not have a default Back icon, you would need to either define a MainCommandStyle that sets the Icon property or define the MainCommand directly inside the NavigationBar like what's done here.

But this is only required for non-Android and non-iOS platforms. I'm looking into fixing this so it will work out of the box for all platforms but that is the limitation right now.

Feel free to ping me again if you have more questions!