NavigationView layout where NavigationViewItems take the entire screen for responsive UI

[Prabhav]

Currently, when using a NavigationView on smaller screens like a mobile phone you see the NavigationContent first and then through the hamburger menu you can navigate through the items and change page.

I was wondering if there is a way where we see the NavigationItems first? i.e. the NavigationItems take up the entire screen width and height and then clicking on the item navigates to that page.

Take Microsoft Teams for example. On laptops it shows something as a DockLayout with the chat on the left and then navigate to the detailed messages on the right. On a mobile phone tho, the list of chats take the entire screen width and height and clicking on them takes you to that detailed messages.

I was able to get this to work using DockLayout and some other additional code:

- Use onIdiom to get device type.

- Dynamically hide or show parts of dock layout. (for instance hide the right side of the DockLayout and then left takes up the entire space).

- Switch between a ContentView and a ContentPage depending on device and functionality.  On bigger screens with full fledged docklayout, use ContentView. On smaller screens with no docklayout functionality use ContentPage

This does the job but as you can see there are a lot of moving parts and when working on a bigger project this gets hard to manage. 

Can something of this sort be implemented out of the box using Telerik controls or is there already a way to achieve this?

[Didi]

Hello Prabhav,

The Navigation/view behavior is expected on mobile. First the navigation content is displayed. Then when you tap on the hamburger menu, you can see the pane that holds the navigation items. This is a mobile UX. The UX on desktop is different. The NavigationView dynamically adjusts its layout depending on its size. This is controlled with the AutoChangeDisplayMode (bool) property. On desktop its value is true, on mobile false.

You can manage the Navigation Pane behavior by using the different DisplayMode options. They are described here: https://docs.telerik.com/devtools/maui/controls/navigationview/display-mode There are videos, so based on the desired display mode, you can choose what to be the value set.

So on Mobile the default DisplayMode is Minimal, while on Desktop it depends on the size. It could be Compact or Expanded.

I hope the provided information will be of help.

Regards,
Didi
Progress Telerik

[Prabhav]

@Didi I was going more for as a feature request or know if similar feature exists that I don't know of.

Even with the three navigation display mode, it doesn't cover the scenario which I described above. I wanted the behaviour where on mobile devices the navigation pane is displayed first and lets the user choose from the menu to go to the content.

If this is not possible with a NavigationView, is this possible with any other control?

[Didi]

Hello,

You can use the Expanded DisplayMode for mobile and set the ExpandedModeThresholdWidth: https://docs.telerik.com/devtools/maui/controls/navigationview/display-mode#automatically-changing-the-display-mode This is the option I can suggest.

[Prabhav]

@Didi Thanks.

Is there a difference (pros/cons) between using a NavigationView vs a Dockloyout then. Because I imagine the workflow to be the same (something I would like to avoid).

For example, in a navigation view or a docklayout the content will be a ContentView on bigger screens and we switch between those. On a mobile screen tho we can't have a content view and would have to switch to a ContentPage as the content page and the options page are too big to co-exist on same page.

 

Also another thing I saw while testing the navigation view is the lack of customization perhaps?

Currently with a docklayout, I have a RadListView with grouping but I can't have that in a NavigationView?

[Didi]

The NavigationView and DockLayout are two different controls. I am not sure why you compare them. Their usage is different. The NavigationView cannot hosts pages inside but you can navigate to a page using the control.

Regarding to the customization options, all features are described in the documentation: https://docs.telerik.com/devtools/maui/controls/navigationview/overview 

We've actually added NavigationView in our Telerik UI for .NET MAUI Controls Samples app on Desktop, you can check the exact approach in the GitHub repo here: https://github.com/telerik/maui-samples/blob/main/Samples/ControlsSamples/Pages/MainPageDesktop.xaml .