mauimaui-blazor

How to style background color and text color for a ToolbarItem on a Maui Blazor Hybrid App TabbedPage?


I am trying to change the background color and text color of a ToolBarItem on Maui Blazor Hybrid app TabbedPage. I am not using Shell and this project didn't create a default Styles.xaml in Resources folder. Also to note, I am using NavigationPage when I am calling the MainPage.

I tried to style it in App.xaml file but it doesn't reflect that change on any of the devices, windows, ios or android. I also tried to style using CssClass, and setting color there, but that didn't work either.

Code from App.xaml.cs :

var navigationPage = new NavigationPage(new MainPage(nameof(Weather)));
MainPage = navigationPage;

Code snippet from MainPage for TabbedPage :

<NavigationPage.TitleView>
    <Label Text="Sample Title Goes Here!" StyleClass="NavigationTitle"/>
</NavigationPage.TitleView>
<TabbedPage.ToolbarItems>        
    <ToolbarItem Text="ToolbarItem Order1" Priority="1" Order="Primary" />
    <ToolbarItem Text="{Binding LoginText}" Priority="4" Order="Secondary" Command="{Binding LoginCommand} />
<TabbedPage.ToolbarItems>

Code snippet from App.xaml for styling :

<Style TargetType="ToolbarItem">
    <Setter Property="Shell.BackgroundColor" Value="pink"/>
</Style>

NOTE: There is no color properties on ToolbarItem, hence using Shell.BackgroundColor, just to show what I tried. I also tried to set target type as TabbedPage and NavigationPage, none of which worked.

App Screenshot (Windows) : The dropdown in the screenshot should show text "Login", currently it is white and I cant change the color.

App Screenshot


Solution

  • The issue is related with .NET Maui Secondary ToolbarItem Issue on Windows #18258.

    As an alternative workaround, you can change the color of text "Login" by setting BarTextColor in App.xaml on Windows platform:

    <Style TargetType="NavigationPage">
             <Setter Property="BarBackgroundColor" Value="Pink" />
             <Setter Property="BarTextColor" Value="Red" />
    </Style>