How to change text color of .net maui menubar item using shell

Question

I am trying to use a MenuBar in .NET MAUI but the text of the MenuBarItem's are showing as white and I can't seem to change them. Anyone know why they are white or how to change them?

XAML below:

<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>  

The screenshot below shows the toplevel items white (these are the MenuBarItem's). The drop down items are black text though (these are MenuFlyoutItem's)? Weird and can't seem to change the top level ones text color.

Thanks,
CFos

Answer 1

Hi @CFos

Add the following style resource to your AppShell.xaml (just put it before your <Shell.BindingContext>). Of course, if you've already defined <Shell.Resources> for other resources, just copy and paste the nested <Style ... </Style> to your resources.

<Shell.Resources>  
    <Style x:Key="MyPageStyle" TargetType="Element">  
        <Setter Property="Shell.BackgroundColor" Value="Purple" />  
        <Setter Property="Shell.TitleColor" Value="Yellow" />  
    </Style>  
</Shell.Resources>  

In your XAML code for the ShellContent element, add the following (for example, before or after Line #31)) :

Style="{StaticResource MyPageStyle}"

In the style definition, I simply picked random colors of Purple for the menu bar (or toolbar) and Yellow for text, and of course, you can change this as you like. Good luck.