0

I want to develop a mobile application and the first page should be a Login page. When de user has been logged, I want to show a FlyoutPage with differents options, but my problem is when I use NavigationPage to change from the login page to the FlyoutPage the system hides the FlyoutPage menu options and shows the back button.

This is the login page.

This is the login page.

.

And this this the HomePage using FlyoutPage with the back button

And this the page that I wish to get enter image description here

Francisco Lopez
  • 79
  • 7
  • 1
    set the app's `MainPage` to the login page. After login, reassign `MainPage` to the FlyoutPage – Jason Feb 06 '23 at 20:32
  • I did it but I couldn't. How can I reassign the MainPage in a page using C#. In App.xalm I assign the longin page but I do not know how to reasign in the login page the new MainPage. – Francisco Lopez Feb 06 '23 at 21:12
  • 2
    `Application.Current.MainPage = someNewPage;` – Jason Feb 06 '23 at 21:16

1 Answers1

0

You can use AppShell. Try this:

AppShell.xaml

<Shell x:Class="mycompany.AppShell"
    xmlns:pages="clr-namespace:mycompany.Pages"
    xmlns:mycompany="clr-namespace:mycompany"
    x:DataType="mycompany:AppShell"
    FlyoutBehavior="Flyout">

    <FlyoutItem Title="HOME">
        <Tab Title="tab1">
           <ShellContent ContentTemplate="{DataTemplate pages:AboutPage}"/>
        </Tab>

        <Tab Title="tab2">
            <ShellContent ContentTemplate="{DataTemplate pages:HomePage}"/>
        </Tab>

    </FlyoutItem>

    <FlyoutItem Title="item1">
        <ShellContent ContentTemplate="{DataTemplate pages:ItemPage}"/>
    </FlyoutItem>

    <FlyoutItem Title="ABOUT">
        <ShellContent ContentTemplate="{DataTemplate pages:AboutPage}"/>
    </FlyoutItem>

</Shell>

At AppShell.xaml.cs

public AppShell()
{
    InitializeComponent();
    
    //goto login if you want
    Navigation.PushAsync(new LoginPage());
}

At LoginPage.xaml.cs

public StartPage()
{
    InitializeComponent();
    
    //hide bottom tabs
    Shell.SetTabBarIsVisible(this, false);
}

At LoginPage.xaml hide the top navigation:

<ContentPage Shell.NavBarIsVisible="false">

</ContentPage>

The final step is to navigate back to the Shell tab page, the best place would be at the ViewModel of your LoginPage, you have to complete the login process and go to your main screen.

Task.Run(async () =>
{
  //go to our main shell page with tabs and flyout menu
  await Shell.Current.Navigation.PopToRootAsync();
});

Hope that helps.

Isidoros Moulas
  • 520
  • 3
  • 10
  • Sorry, I have a doubt, How Can I come back to the LoginPage from a FlyoutItem , and, Why in windows shows the back icon a menu icon in the login page? – Francisco Lopez Feb 07 '23 at 09:20
  • I suppose that at Flyout you need a menu Login, so in that case if you just add at AppShell.xaml the will do the work. – Isidoros Moulas Feb 09 '23 at 16:49
  • As per back icon check the article https://stackoverflow.com/questions/71806578/maui-how-to-remove-the-title-bar-and-fix-the-window-size I dont use windows to help you more. – Isidoros Moulas Feb 09 '23 at 16:50