.NET MAUI应用ToolbarItems三点图标仅深色模式可见问题排查

在.NET MAUI应用的Content Page中，代表ToolbarItems的三点图标仅在设备深色模式下显示，浅色模式下肉眼不可见，但点击对应区域仍能访问已定义的ToolbarItems。

效果展示 #

• 深色模式显示效果：
• 浅色模式显示效果：

相关样式代码 #

<Style TargetType="Shell" ApplyToDerivedTypes="True">
    <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
    <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />
    <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}" />
    <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="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
    <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
    <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
    <Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
</Style>

<Style TargetType="NavigationPage">
    <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
    <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
    <Setter Property="IconColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
</Style>

<Style TargetType="TabbedPage">
    <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Gray950}}" />
    <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
    <Setter Property="UnselectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
    <Setter Property="SelectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
</Style>

疑问 #

该问题的原因是什么？是否是样式问题导致的？

这个问题确实是样式配置导致的，核心问题出在Shell的ForegroundColor属性设置上：

• 当前Shell.ForegroundColor仅通过OnPlatform区分平台，没有跟随系统主题切换。在非WinUI平台，默认固定为White；
• 浅色模式下Shell的背景色是Primary（推测为浅色/白色系），导致三点图标颜色和背景色完全一致，肉眼无法分辨，但点击区域并未消失。

修复方法 #

修改Shell的ForegroundColor属性，使用AppThemeBinding实现主题适配，确保浅色模式下图标颜色与背景色形成明显对比：

<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />

你也可以根据实际Primary颜色调整浅色模式下的颜色值，只要保证和背景色有足够对比度即可。

另外，虽然NavigationPage的IconColor已做主题适配，但Shell样式优先级更高，所以优先确保Shell的ForegroundColor配置正确即可解决问题。

内容的提问来源于stack exchange，提问作者Jean