ToolbarItem icon/image doesn't update on page navigation on Android #19673
Description
Description
In short words:
The icon/image of a ToolbarItem is not beeing updated when navigating to a new page with Navigation.PushAsync()
Description:
Currently I'm migrating my Xamarin app to MAUI and I found a behavior that seems to be a bug. I have a (non-Shell) app with a NavigationPage as main page and inside the NavigationPage there is a TabbedPage with 4 Tabs/ContentPages. At least one of the ContentPages have a ToolbarItem defined which navigates to a sub page. On the sub page there is also a ToolbarItem defined. But when navigating to this sub page via Naviagtion.PushAsync(...) the sub page always shows the icon/image from the previous page except I set a new icon/image to this ToolbarItem.
On iOS everything is working as expected. The Icons are beeing updated correctly.
On Android I have this issue on all platforms (tested on Android 8 simulator, Android 14 simulator, Android 7 device, Android 13 device)
It's also independent of where in the hierarchy the NavigationPage is placed. Even if I set MainPage = new NavigationPage(new Page2()); in my example, which is most simple navigation structure, the problem exists.
It's also independent of if you are using normal images or font icons. The image part of the ToolbarItem is not beeing updated if no image is defined.
Steps to Reproduce
You can see this in my example project I created as a fresh MAUI project. The first page (Page2) defines a ToolbarItem icon. Clicking on this ToolbarItem opens the first sub page (SubPage1). In this sub page there is also a ToolbarITem with a icon and it's beeing updated as expected. Clicking on the button on the sub page opens another sub page (SubPage2). SubPage2 has also a ToolbarItem but only text and no icon defined. It now shows the icon from the previous SubPage1.
Page2.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiToolbarItemIssue.Page2"
Title="Page2">
<ContentPage.ToolbarItems>
<!-- This is the toolbar item with a plus icon -->
<ToolbarItem Text="new" Clicked="ToolbarItem_Clicked" x:Name="Page2Item">
<ToolbarItem.IconImageSource>
<FontImageSource FontFamily="MaterialIcons" Glyph="" Color="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Primary}}"/>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
<VerticalStackLayout>
<Label
Text="Page 2 - Content"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ContentPage>Page2.xaml.cs
public partial class Page2 : ContentPage
{
public Page2()
{
InitializeComponent();
}
private void ToolbarItem_Clicked(object sender, EventArgs e)
{
// We open the first sub page - SubPage1 and the icon in this page will show correctly
Navigation.PushAsync(new SubPage1());
}
}SubPage1.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiToolbarItemIssue.SubPage1"
Title="SubPage1">
<ContentPage.ToolbarItems>
<!-- This is a toolbar item with a lock icon and the icon is displayed correctly -->
<ToolbarItem Text="Do something" x:Name="SubPage1Item">
<ToolbarItem.IconImageSource>
<FontImageSource FontFamily="MaterialIcons" Glyph="" Color="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Primary}}"/>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
<VerticalStackLayout>
<Label
Text="SubPage 1 - Content"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Button Text="Open SubPage 2" Clicked="Button_Clicked" HorizontalOptions="Center"/>
</VerticalStackLayout>
</ContentPage>SubPage1.cs
public partial class SubPage1 : ContentPage
{
public SubPage1()
{
InitializeComponent();
}
private void Button_Clicked(object sender, EventArgs e)
{
// We open the second sub page - SubPage2 and the icon in this sub page is not beeing updated
Navigation.PushAsync(new SubPage2());
}
}SubPage2.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiToolbarItemIssue.SubPage2"
Title="SubPage2">
<ContentPage.ToolbarItems>
<!-- This is a toolbaritem with no icons, only text. When navigating to this page icon from the previous (SubPage1) is shown here -->
<ToolbarItem Text="1/10" x:Name="SubPage2Item">
</ToolbarItem>
</ContentPage.ToolbarItems>
<VerticalStackLayout>
<Label
Text="SubPage 2 - Content"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ContentPage>Link to public reproduction project repository
https://github.com/Schullebernd/MauiToolbarItemUpdateIssue
Version with bug
8.0.3
Is this a regression from previous behavior?
Yes, this used to work in Xamarin.Forms
Last version that worked well
Unknown/Other
Affected platforms
Android
Affected platform versions
Android 7 and up
Did you find any workaround?
The only thing I can do is to insert the ToolbarItems via code inside the page constructor or in the OnAppearing event but this brings some disadvantages with loading and setting styles to the items texts.
Relevant log output
No response