.NET MAUI中如何将MenuBarItem文本设置为黑色

问题描述 #

在.NET MAUI的Shell容器内使用MenuBar时，顶层MenuBarItem的文本显示为白色且无法直接通过自身属性修改，但下拉的MenuFlyoutItem文本却是正常的黑色。对应的XAML代码如下：

<Shell
x:Class="SnapSignalTel.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SnapSignalTel"
Shell.FlyoutBehavior="Disabled"
Shell.NavBarIsVisible="True"
Title="{Binding TitleText}"
BackgroundColor="#FFF2F2F2"
>
<Shell.BindingContext>
    <local:MainViewModel />
</Shell.BindingContext>
<Shell.BackButtonBehavior>
    <BackButtonBehavior IsVisible="False" />
</Shell.BackButtonBehavior>
<Shell.MenuBarItems>
    <MenuBarItem Text="File" >
        <MenuFlyoutItem Text="Load" />
        <MenuFlyoutItem Text="Save" />
        <MenuFlyoutItem Text="Exit" />
    </MenuBarItem>
    <MenuBarItem Text="Modes">
    </MenuBarItem>
    <MenuBarItem Text="Help">
    </MenuBarItem>
</Shell.MenuBarItems>

<ShellContent
    Title=""
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage" />
</Shell>

原因分析 #

这个问题源于Shell导航栏的样式继承机制：

1. MenuBarItem的文本样式默认继承自Shell导航栏的文本样式，你设置的BackgroundColor="#FFF2F2F2"是浅灰色，而Shell默认的导航栏文本颜色为白色，导致文本与背景对比度极低。
2. MenuFlyoutItem属于弹出菜单控件，使用独立的系统默认样式（黑色文本），不受Shell导航栏样式影响，因此显示正常。

解决方法 #

方法1：修改Shell导航栏文本颜色（同步标题与MenuBarItem） #

直接在Shell标签中添加Shell.ForegroundColor属性，指定目标文本颜色（比如黑色），MenuBarItem会自动继承该颜色，同时Shell的标题文本颜色也会同步修改：

<Shell
    ...
    BackgroundColor="#FFF2F2F2"
    Shell.ForegroundColor="#FF000000"
>

方法2：自定义MenuBarItem专属样式（仅修改MenuBarItem） #

如果不想影响Shell标题的颜色，可以在当前Shell的资源字典或App.xaml中添加针对MenuBarItem的样式：

<Shell.Resources>
    <ResourceDictionary>
        <Style TargetType="MenuBarItem">
            <Setter Property="TextColor" Value="#FF000000" />
            <!-- 可选：添加状态触发器，比如按下时的颜色变化 -->
            <Style.Triggers>
                <Trigger TargetType="MenuBarItem" Property="IsPressed" Value="True">
                    <Setter Property="TextColor" Value="#FF333333" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</Shell.Resources>

方法3：全局统一设置MenuBarItem样式 #

若要让整个应用的MenuBarItem都使用相同颜色，可在App.xaml的<ResourceDictionary>中添加上述样式，所有页面的MenuBarItem都会自动应用该样式。

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