Delayed Update of Navbar Title and TabBar Background Color in .NET MAUI on Android When Switching Tabs

Question

I'm working on a Xamarin Forms migration to .NET MAUI project where I'm encountering an issue with delayed updates to the Navbar title and Navbar background color when switching tabs on an Android device.

its working as expected in the Xamarin Forms

I have three tabs, and when I switch between them, the Navbar title and Navbar background color don't update immediately. For example:

• When I click on Tab 2, the TabBar background color changes to the color assigned for Tab 2, but the Navbar title and Navbar background color still show the values from Tab 1.
• When I then click on Tab 3, the Navbar title and Navbar background color update to what was supposed to be for Tab 2, rather than updating to the values for Tab 3.

To further clarify the issue, I have created a sample project that you can refer to: Sample Project - GitHub.

I have attached an image illustrating this delayed update issue.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:prism="http://prismlibrary.com"
            prism:ViewModelLocator.AutowireViewModel="Forced"
            BarBackgroundColor="{StaticResource DemoColor}"
            x:Class="Demo.Views.HomeScreen"
            BackgroundColor="White"
            Title="Demo Project">
    <TabbedPage.Children>
    </TabbedPage.Children>
</TabbedPage>

public HomeScreen()
{
 InitializeComponent();
 CurrentPageChanged += HomeScreen_CurrentPageChanged;
}

 private void HomeScreen_CurrentPageChanged(object sender, EventArgs e)
{
     ChangeTabColor();
}

public void ChangeTabColor()
{
    try
    {
        if (CurrentPage != null)
        {
            if (CurrentPage is Tab.Tab1)
            {
                ((NavigationPage)Parent).Title = Title = Constant.Tab1;
                ((NavigationPage)Parent).BarBackgroundColor =(Color)Application.Current.Resources["demoColor"];
                BarBackgroundColor = DeviceInfo.Platform == DevicePlatform.iOS ? Colors.White : (Color)Application.Current.Resources["demoColor"];
            }
            else if (CurrentPage is Tab.tab2)
            {
                ((NavigationPage)Parent).Title = Title = Constant.Tab2;                 ((NavigationPage)Parent).BarBackgroundColor =(Color)Application.Current.Resources["demoColor2"];                            BarBackgroundColor = DeviceInfo.Platform == DevicePlatform.iOS ? Colors.White : (Color)Application.Current.Resources["demoColor2"];
            }
            else
            {
				((NavigationPage)Parent).Title = Title = Constant.Tab3;                			  ((NavigationPage)Parent).BarBackgroundColor = (Color)Application.Current.Resources["demoColor3"];                             BarBackgroundColor = DeviceInfo.Platform == DevicePlatform.iOS ? Colors.White :  (Color)Application.Current.Resources["demoColor3"];
            }
}

Answer 1

Hello,

Thanks for your feedback.

With the information you provided, I was able to reproduce the issue where this code behaves differently in Xamarin and Maui. Obviously on Maui, this lagging update is not as expected.

Similar feedback from the community has been reported to the development team about this issue in NavigationPage: BarBackgroundColor, BarTextColor and Title not updating #19859. You could keep track of this issue, so that you don't miss a fix notification from the development team.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.