Unable to set toolbar overflow menu color if not using shell.

chrisg32 commented 1 month ago

Description

If you are using Shell you can change the toolbar overflow icon on Android to match the Shell foreground color. This feature seems to be fixed with #15612 but that fix only applies to Shell. If you are not using Shell and are using a NavigationPage there does not seem to be a way to apply the color.

Shell (working):

NavigationPage (not working):

Steps to Reproduce

1) Add a toolbar to a MAUI page with overflow (secondary) items.

<ContentPage.ToolbarItems>
    <ToolbarItem IconImageSource="dotnet_bot.png" Priority="0" />
    <ToolbarItem Text="Some text" Priority="1" />
    <ToolbarItem Text="Menu option 1" Priority="2" Order="Secondary" />
    <ToolbarItem Text="Menu option 2" Priority="3" Order="Secondary" />
    <ToolbarItem Text="Menu option 3" Priority="4" Order="Secondary" />
</ContentPage.ToolbarItems>

2) Change the colors of the toolbar icons and text.

<Style TargetType="Shell" ApplyToDerivedTypes="True">
    <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
    <Setter Property="Shell.ForegroundColor" Value="Purple" />
    <Setter Property="Shell.TitleColor" Value="Orange" />
    <Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
    <Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray200}}" />
    <Setter Property="Shell.NavBarHasShadow" Value="False" />
    <Setter Property="Shell.TabBarBackgroundColor" Value="CornflowerBlue" />
    <Setter Property="Shell.TabBarForegroundColor" Value="Orange" />
    <Setter Property="Shell.TabBarTitleColor" Value="Orange" />
    <Setter Property="Shell.TabBarUnselectedColor" Value="DarkOrange" />
</Style>

<Style TargetType="NavigationPage">
    <Setter Property="BarBackgroundColor" Value="CornflowerBlue" />
    <Setter Property="BarTextColor" Value="Orange" />
    <Setter Property="IconColor" Value="Orange" />
</Style>

3) If you are using Shell, the overflow icon will change color.

if you are not using Shell, the overflow icon will not change color.

(If you are using the reproduction repository you can switch between Shell and no-Shell in App.xaml.cs.

Link to public reproduction project repository

https://github.com/chrisg32/MAUI-Bug-Toolbar-Overflow-Icon-Color

Version with bug

8.0.70 SR7

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 13 - API 33

Did you find any workaround?

We have not found a work around to this issue. Using shell would require an entire refactor of our application.

Relevant log output

No response

github-actions[bot] commented 1 month ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

[Android] ToolbarItem shows incorrect image on different pages on initial load when used in Shell (#19950), similarity score: 0.79

Closed similar issues:

ToolbarItem Icon Coloring inconsistent (#9240), similarity score: 0.81
[Android] Secondary ToolbarItem Icon Color not correct (#20070), similarity score: 0.80
Unable to change color of BackButton icon in Shell (#11127), similarity score: 0.80
Toolbar Icons not Showing on Android via Appshell (#5454), similarity score: 0.79

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

chrisg32 commented 1 month ago

Fix #15612 sets the overflow icon color based on Shell.ForegroundColor. Since this isn't applicable if you aren't using shell, it should perhaps be based on NavigationPage.IconColor?

ninachen03 commented 1 month ago

This issue has been verified using Visual Studio 17.11.0 Preview 3 (8.0.70 & 8.0.61). Can repro it.

uhbtl commented 2 weeks ago

Fix #15612 sets the overflow icon color based on Shell.ForegroundColor. Since this isn't applicable if you aren't using shell, it should perhaps be based on NavigationPage.IconColor?

Has anyone a good workaround when you are not using shell?

Update: I just found a way to fix this: https://github.com/dotnet/maui/issues/8756#issuecomment-1242370867

dotnet / maui