ShellContent Title Does Not Update at Runtime

[devanathan-vaithiyanathan]

Description

The issue occurs when the title of ShellContent does not update dynamically at runtime. Even after modifying the Title property of ShellContent via button click, the title remains unchanged in the UI.

Steps to Reproduce

Create a TabBar with nested ShellContent items.
Add a button that changes the Title of the ShellContent when clicked.
Run the app.
Click the "Change Title" button.

AppShell.xaml

<TabBar AutomationId="TabBar">
    <Tab Title="Nested Tabs" AutomationId="tabbar">
        <ShellContent x:Name="tab" Title="Home">
            <ContentPage>
                <StackLayout HorizontalOptions="Center" Spacing="30">
                    <Button Text="Change Title" AutomationId="ChangeShellContentTitle" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="100" HeightRequest="40" Clicked="OnButtonClicked"/>
                </StackLayout>
            </ContentPage>
        </ShellContent>

        <ShellContent Title="Settings">
            <ContentPage>
                <Label Text="This is Settings page"/>
            </ContentPage>
        </ShellContent>
    </Tab>
</TabBar>

AppShell.xaml.cs

private void OnButtonClicked(object sender, EventArgs e)
{
    tab.Title = "New Title";
}

Expected Behavior: The title of the ShellContent (tab) should change to "New Title" when the button is clicked.

Actual Behavior: The title remains as "Home" and does not update when the button is clicked.

Link to public reproduction project repository

ShellContentTitleIssue

Version with bug

9.0.10 SR1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 18.0, mac 15.1

Did you find any workaround?

Not yet.

Relevant log output

[similar-issues-ai]

We've found some similar issues:

• ShellContent Title doesn't observe changes to bound properties #7453 , similarity score: 83%

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.

[Ying-6]

I want to confirm with you: I see that your repro step is not consistent with the project content you provided, and I did not use your project to repro your issue. Could you help confirm whether the project you provided is correct?

[devanathan-vaithiyanathan]

I want to confirm with you: I see that your repro step is not consistent with the project content you provided, and I did not use your project to repro your issue. Could you help confirm whether the project you provided is correct?

Hi @Ying-6 ,
Yes, I have provided the correct sample. Even if it contains any issues, please use this project for reproducing the issue.
ShellContentTitleIssue.zip

[Ying-6]

This issue has been verified using Visual Studio 17.13 Preview 1 and VSCode (9.0.10 & 9.0.0 & 8.0.100). Not repro this issue on iOS and MacOS platform.

[devanathan-vaithiyanathan]

@Ying-6 ,
The ContentPage title is not set for the ShellContent, causing the ShellContent title to appear in both places. However, if we set the ContentPage title, the ShellContent title does not update at runtime. This behavior is working correctly on the Android platform.

Use this code in AppShell.xaml,

<TabBar AutomationId="TabBar">
        <Tab Title="Nested Tabs" AutomationId="tabbar">
            <ShellContent x:Name="tab"  Title="Hello">
                <ContentPage Title="TabView">
                    <StackLayout HorizontalOptions="Center" Spacing="30">
                        <HorizontalStackLayout>
                            <Label Text="Current Shell Title : " FontAttributes="Bold"/>
                            <Label Text="{Binding Source={x:Reference tab}, Path=Title}" AutomationId="LabelId" />
                        </HorizontalStackLayout>
                        <Button Text="Change Title" AutomationId="ChangeShellContentTitle" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="100" HeightRequest="40" Clicked="OnButtonClicked"/>
                    </StackLayout>
                </ContentPage>
            </ShellContent>

            <ShellContent Title="Settings">
                <ContentPage Title="TabView" >
                    <Label Text="This is Settings page"/>
                </ContentPage>
            </ShellContent>
        </Tab>
    </TabBar>

Android Behavior(should be expected in iOS)

Android-WithShellContentContentPageTitle.mov

[Ying-6]

This issue has been verified using Visual Studio 17.13 Preview 1 and VSCode (9.0.10 & 9.0.0 & 8.0.100). With the detailed information provided by the user, can repro this issue on iOS and macOS platforms.