1

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

Divyesh
  • 2,085
  • 20
  • 35
  • Please show the definition of the Shell Content, e.g. from `AppShell.xaml`. What's the hierarchy of your Shell navigation elements? – Julian Jan 16 '23 at 18:41

2 Answers2

3

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

Zack
  • 1,255
  • 1
  • 2
  • 5
  • It does work but if we also use IconOverride than it only shows icon and not text in iOS. In Android it doesn't show anything. – Divyesh Jan 17 '23 at 17:14
  • Both `IconOverride` and `TextOverride` are for the back button, and only one can be changed. I tested the android emulator in vs for mac 17.4.1, it works fine and is the same as iOS. – Zack Jan 18 '23 at 06:42
  • But have you noticed that if the Title of the page is longer than it shows both Icon and Back text in iOS? Please check. – Divyesh Jan 18 '23 at 09:52
  • I did a test in iOS and set the page title very long, `TextOverride="Back"`. There is no abnormality in it. The long title in the title bar cannot be fully displayed, and the ellipsis is displayed. It has no effect on the back button and the page. I use vs for mac, and the ios simulator is iPhone14 (ios16.2) for testing. – Zack Jan 30 '23 at 02:19
  • You did not understand the actual problem. The issue is not with long text, it's with short text. Please read the question properly again. – Divyesh Jan 31 '23 at 17:38
  • You said: "if the Title of the page is longer than it", I tested that the title is longer than the back button, and there is no problem. Why do you say it is a short text problem? Can you give me an example? – Zack Feb 02 '23 at 05:48
  • Check this you will get what I'm saying: https://github.com/dotnet/maui/issues/11691 – Divyesh Feb 02 '23 at 06:48
  • This problem seems to have been fixed, I tried it on Mac and everything works fine, I am using vs for mac v17.5 preview, XCode14.1 iPhone14 (iOS16.2). What version did you try and encounter this problem? – Zack Feb 02 '23 at 09:25
0
  • 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.
DevenCC
  • 441
  • 4
  • 9
  • I have mentioned that it only occurs in iOS. And the thing is it should not take a text written in Title. – Divyesh Jan 16 '23 at 17:25
  • I can only assume you have 2 separate "HomePage"s given that the currently displayed HomePage backs to yet another "HomePage". The back button title displayed on the screenshot you are sharing - and the assumed HomePage.xaml you are also sharing - however will be populated directly from the preceding "HomePage", not the one you are displaying (be it through it's title or it's BackButtonTitle"). Unless you are using the same .xaml file to generate both pages, in that case, that might be a Xamarin issue. – DevenCC Jan 16 '23 at 19:23