Correct NavigationView navigation for each NavigationViewItem using MVUX

[GuyMicciche]

Basically what I have at currently is this screen and the navigation on the left works. Each item will show a different page on the left. But, now that is hooked up I am not sure now to make the button work and pushing to another on the left. I'm not that experienced with advanced navigation to know. Right now I am calling

await _navigator.NavigateViewModelAsync<NavigationRootPage>(this);

to show this page (not a viewmodel) and then

rootFrame.Navigate(pageType, args, navigationTransitionInfo);

to show the MainPage on the right. But, my current setup doesn't bind the MainViewModel.cs. Unless I am doing the initial navigation setup incorrectly. The functionality I want is when the user clicks on the "Go to Second Page" button, the second page should load in it's own navigation stack. Then, if the user selects an entirely different item (from the left) it should load a new stack for navigating.

https://github.com/GuyMicciche/UnoApp3

I believe I either 1.) did my initial navigation wrong, or 2.) mixed 2 different forms of navigation.

Each NavigationViewItem that loads from the left, should have its own navigation hierarchy, if that makes sense. Any help with this navigation would be helpful. I want to stick to good practices and standards. Thanks to anyone for any further direction!

[agneszitte]

cc @nickrandolph in case you have any additional feedback to share for this discussion

[francoistanguay]

@GuyMicciche Have you had a chance to look at the various samples I shared on Discord and at our Navigation docs?

A few pointers:

When using Uno Navigation Extensions, if you want to Navigate with a ViewModel, you need to define the View/ViewModel mappings in the app bootstrapping: https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-NavigateInCode.html#3-navigate-to-a-viewmodel

And if you're using Uno Navigation Extensions, you shouldnt have to call the frame.Navigate directly, this is what the navigation abstraction is for.

I would strongly advise on going back to basics with our samples, ignore/remove NavigationView to start with and see how navigation works between two pages with Frame, View/ViewModel mappings defined and NavigationViewModelAsync...

Here's another good example:

The Navigation call in the ViewModel: https://github.com/unoplatform/Uno.Samples/blob/abf8042e9cf5eb9057ca7a4fa4476a7a657e70fd/reference/TubePlayer/TubePlayer/Presentation/ShellModel.cs#L16

The Mapping:
https://github.com/unoplatform/Uno.Samples/blob/abf8042e9cf5eb9057ca7a4fa4476a7a657e70fd/reference/TubePlayer/TubePlayer/App.cs#L66

The Navigation-Specific page in the TubePlayer workshop (but it's worth doing the whole workshop):
https://platform.uno/docs/articles/external/workshops/tube-player/modules/07-Navigation/README.html

Will still try to have the team look at your sample but thought I'd share in the meantime.

[francoistanguay]

I'm also getting an error when downloading that a Virus was detected. Can you please make sure to re-upload with solely the proper source code. Thank you.

[GuyMicciche]

My apologies I believe it's a false alarm from the browser. I just uploaded the project:

https://github.com/GuyMicciche/UnoApp3

[kazo0]

Hello again @GuyMicciche! :)

Looking at the app a bit, it does seem like we have multiple forms of navigation mixed together. You shouldn't need to worry about manual Frame-based navigation if you want to use the Navigation Extensions.

A few extra resources you can take a look at:

• Our Commerce sample app is using the Navigation Extensions + MVUX + a NavigationView, the NavigationView usage is here

• There is also a guide on using NavigationView with Navigation Extensions that you can take a look at.