UI question for hierarchical navigation within a modal page

TommigunTommigun Member ✭✭

Hi.

I am developing an app that has a main view that is somewhat similar to a Maps app in the sense that it has a 'main' view with very little UI chrome.
One of the buttons in the app invokes a modal page, where a user can create a task of sorts. There are three different sets of information that the user has to fill in in said dialog.

I don't want to make one big cluttered page, so I am wondering what the best UI paradigm that Xamarin supports without a lot of custom controls/renderers would be for this? My initial thought was to use normal hierarchical navigation inside the modal dialog, but modal pages don't support hierarchical navigation, nor am I sure if it'd even been the best user experience.

In other words, the user is presented with a modal page that has three discrete steps of info before it can be 'submitted'. Material UI has the stepper component, https://material-ui.com/components/steppers/, I could of course roll something like that but I'd also like for the app to use standard iOS and Android paradigms.
What would you guys recommend?

Thanks!

Best Answers

  • TommigunTommigun ✭✭
    Accepted Answer

    @LeonLu - thanks to your answer I was able to achieve what I wanted. I was not aware of a content page wrapped in a navigation page being able to hide the navigation bar, so I made my main page wrapped in a navigation bar and hid it via HasNavigationBar. Now If I push a page onto the stack I have the back arrow to the navigation bar less main page. Great stuff and thanks for your help! Is there a way to mark a question as solved?

Answers

  • TommigunTommigun Member ✭✭

    And a follow-up question: If normal hierarchical proves best in the end, how should it be set up in this case? If I push a new navigation state with a new navigation page instead of the modal dialog, it doesn’t have a back button to my ‘main’ page (which is not a navigation page). I’d need the navigation page’s root to have a (standard system) back button. The App Store on iOS does this when you tap a title, the title opens in a navigation page where the back button takes back to the ‘main’ page. I tried hacking it by temporarily wrapping my app’s main page in a navigation page just prior to pushing to the navigation stack, but when doing this the app just shows my main page with an empty navigation bar. Surely this can be done without hacks as it’s such a common pattern?

    Thanks again!

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Do you want to have a HasNavigationBar in the Navigation Page?

    If so, you need the add MainPage =new NavigationPage( new MainPage());, in the app.cs, When you want to navigate the next page. you can use Navigation.PushAsync(new Page1());.

    If you just use Navigation.PushModalAsync, you do not have HasNavigationBar.

  • TommigunTommigun Member ✭✭
    edited January 19

    Thanks for the reply. I do know how the navigation works, it’s just that I can’t find how to achieve this specific scenario.

    I don’t want a navigation bar in the main page, hence the main page is created without a nav page.
    At some point I want to create a page with a nav bar, where the back button takes back to main page. Precisely as tapping a title in Apple App Store works.

    I tired to at that point wrap the main page in a nav page, but it doesn’t work, also sounds like a hack.

  • TommigunTommigun Member ✭✭
    Accepted Answer

    @LeonLu - thanks to your answer I was able to achieve what I wanted. I was not aware of a content page wrapped in a navigation page being able to hide the navigation bar, so I made my main page wrapped in a navigation bar and hid it via HasNavigationBar. Now If I push a page onto the stack I have the back arrow to the navigation bar less main page. Great stuff and thanks for your help! Is there a way to mark a question as solved?

Sign In or Register to comment.