.Net MAUI - Shell Navigation Back Button Title (iOS)

3.1k views Asked by At

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 the back button. But it shows the page's title text.

Update 02/02/2023

  • The main issue is if the title of the page is short then it will show the same with the back button and if the title is long enough then it will work fine.

  • The same issue was reported on the MAUI git repo as well. https://github.com/dotnet/maui/issues/11691

2

There are 2 answers

8
Zack On

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

2
DevenCC On
  • 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.