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