CODEWITHSUNDEEP
.netnavigationmaui
Thangneireng Karoung Kom
Thangneireng Karoung Kom

Reputation: 330

.NET MAUI Navigation - Back to mainpage/home page

My goal: Having all necessary pages in Flyout.
enter image description here

When I click "Hlather" page, I want the back navigation button be available in the Title bar and when I click back button I should come back to home page.

I am not able to achieve this as all the pages acts as root page and back button exits the app.

Code:

<!-- MainPage (not shown in flyout) -->
<ShellContent FlyoutIcon="O" Title="Home" Route="MainPage" ContentTemplate="{DataTemplate local:MainPage}" />

<!-- Bible, Hlather, Khutsun Hla shown in flyout -->
<FlyoutItem FlyoutIcon="O" Title="Bible" Route="Bible">
    <ShellContent ContentTemplate="{DataTemplate views:bible}" />
</FlyoutItem>
<FlyoutItem FlyoutIcon="O" Title="Hlather" Route="Hlather">
    <ShellContent ContentTemplate="{DataTemplate views:hlather}" />
</FlyoutItem>
<FlyoutItem FlyoutIcon="O" Title="Khutsun Hla" Route="Khutsun">
    <ShellContent ContentTemplate="{DataTemplate views:khutsun}" />
</FlyoutItem>
<MenuItem Text="Settings" Command="{Binding OpenSettingsCommand}" />
<MenuItem Text="Logout" Command="{Binding LogoutCommand}" />

Apart from that, when I open my app I want to load the login page. I could achieve this partially by using this:

if (isLoggedIn)
{
    MainPage = new AppShell();
    isLoggedIn = false;
}
else
{
    MainPage = new login();
    //MainPage = new NavigationPage(new login());
    //isLoggedIn = false;
}

When I use "MainPage = new login();", the title bar disappear and when I use "MainPage = new NavigationPage(new login());" the title bar is disabled (because of appshell). I don't want the flyout to appear here. The workaround I use for now is

MainPage = new AppShell();
Shell.Current.GoToAsync("vLogin");

I want the login page to be independent of the other pages but only appears as a single page when the user is not login.

Upvotes: 0

Views: 142

Answers (2)

Liyun Zhang - MSFT
Liyun Zhang - MSFT

Reputation: 14434

You can use the Shell.TitleView to show the back button. And handle the button's clicked event to go back to MainPage:

    <Shell.TitleView>
        <Grid ColumnDefinitions="2*,8*">
            <Button Text="Back" Clicked="Button_Clicked" HorizontalOptions="Start" Grid.Column="0"/>
        </Grid>
    </Shell.TitleView>

And in the code behind:

 private void Button_Clicked(object sender, EventArgs e)
 {
     Shell.Current.GoToAsync("///MainPage");
 }

And you can show or hide the button by checking if the current page is rootpage or not.

Upvotes: 0

Riccardo Minato
Riccardo Minato

Reputation: 1807

About the back navigation, I'm afraid there's no a built-in way to perform what you need. That's simply no how Shell works. All the flyout item pages are treated as root pages.

If you want to implement a custom back button behavior, you could override OnBackButtonPressed on your AppShell class and perform there your logic. It will probably involve keeping track of the pages you visited before and understand when to show them (I think this method is called whenever you press the back button, even when you're not on a "root" page).

For what concerns the login page, I managed to handle it remaining in the Shell, disabling every Flyout behavior.

Inside AppShell.xaml.cs

Items.Add(new ShellContent
{
    Title = "Login",
    ContentTemplate = new DataTemplate(typeof(LoginPage)),
    FlyoutItemIsVisible = false,  // Note this
    Route = nameof(LoginPage)
});

and LoginPage.xaml has this header (note the FlyoutBehavior).

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Shell.FlyoutBehavior="Disabled"
             x:Class="...Login.Views.LoginPage">

Upvotes: 0

Related Questions