Home > Software design >  .Net MAUI - Shell Navigation Back Button Title (iOS)
.Net MAUI - Shell Navigation Back Button Title (iOS)

Time:01-17

I have noticed one issue in Shell Navigation title. When setting ContentPage's Title property it shows same text with Back button also. Used NavigationPage.BackButtonTitle property as well from xaml still its not working.

For Example:

HomePage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Switch_Bug.HomePage"
             NavigationPage.BackButtonTitle="Back"
             Title="Home Page">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>


Result:

enter image description here

Expected result:

In iOS it should Back Button text as "Back" otherwise just show back button. But it shows page's title text.

CodePudding user response:

  • First of all, I believe BackButtonTitle will only work for iOS since Android does not use "back titles"
  • Second, the BackButtonTitle might be slightly counterintuitive, but it is the title that will be displayed on a further page that navigates back to the page you defined in on. In your case, setting the BackButtonTitle on your HomePage to "back" does not set the back button on the HomePage to "back"; it will set the back button to "back" on any page that has a back navigation to the HomePage. Hope that makes sense.

CodePudding user response:

NavigationPage.BackButtonTitle is applicable to Navigation.PushAsync in NavigationPage, but not in Shell. There is a corresponding method in Shell’s navigation to change the text of the back button. I did a simple test, and you can modify your code as follows:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Switch_Bug.HomePage"
             Title="Home Page">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
    
    <Shell.BackButtonBehavior>
        <BackButtonBehavior TextOverride="Back" />   
    </Shell.BackButtonBehavior>
</ContentPage>

For more details, you can refer to the official documentation:.NET MAUI Shell navigation

  • Related