Shell TabBar as Child Item

Cytoph

I'm currently creating an app with a different kind of login flow. Normally after the login page is closed and the main app pages are shown the login page isn't needed anymore. But in this use-case it should be very easy to change the current user. Also the user should sign in everytime the app starts.

So I want the login page to be on the top of the pages hierarchy and all other pages to be below this, so I can use the back button to easily go back to the login page. My idea is something like this: After the login page I want to get a tabbed view that shows my pages 1 to 3 and at the top of the tabbed view the navigation bar should be shown with a back button with which I can navigate back to the login page. A flyout is neither necessary nor wanted.
This would result in a hierarchy similar to this:

• LoginPage
  • TabBar/TabbedPage/whatever
    • Page 1
    • Page 2
    • Page 3

How do I have to specify this in the AppShell.xaml. I just can't get it to work no matter how I do it.

LeonLu

Do you want to achieve the result like following GIF?

You can use ShellItem to contains your login page.

  <ShellItem Route="login">
    <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</ShellItem>

Then click the login button to the TabbedPage.

   async void Button_Clicked(object sender, EventArgs e)
    {
        await Navigation.PushModalAsync(new NavigationPage(new TabbedPage1()));
    }

Here is another login demo.
https://github.com/davidortinau/ShellLoginSample

Here is my demo.

Cytoph

@LeonLu said:
Do you want to achieve the result like following GIF?

Kind of, but there are two problems with this attempt:
1. The modal page won't get a back button in the navigation bar (at the position were the flyout menu button would normally be), also on iOS - as I see it - I won't be able to go back by myself.
2. PushModalAsync is not part of the Shell Navigation. There's only GoToAsync() and I'm trying to stay with the functions the Shell gives to me. Or wouldn't this be possible?

LeonLu

PushModalAsync is not part of the Shell Navigation. There's only GoToAsync() and I'm trying to stay with the functions the >Shell gives to me. Or wouldn't this be possible?

Of course you can, But when I use GoToAsync navigate to the TabbbedPage, it have render issue.