0

This image is from when the device is in Dark Mode

This image is what it looks like when the device is on light mode

image 1 is when the device is on dark mode.

image 2 is when the device is on light mode.

I can still click it and access the toolbarItems that I have defined but the icon is not visible.

Any idea on why this is happening?

is it a style problem? Here is the styles i got, I am using shells

    <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>
Jean
  • 25
  • 3

1 Answers1

0

In your .xaml(take MainPage.xaml as an example), add this:

...
<ContentPage.ToolbarItems>        
      <ToolbarItem Text="Example Item"                 
                   Order="Secondary"                 
                   Priority="0" />    
</ContentPage.ToolbarItems>
...

For more information, you can refer to Xamarin.Forms ToolbarItem.

Jianwei Sun - MSFT
  • 2,289
  • 1
  • 3
  • 7
  • Thanks for replying, I added the suggested change but the issue is still happening. Here is the code snippet: ` ` – Jean Jan 13 '23 at 21:20
  • @Jean Can't three dots still be displayed, when the device is on light mode? I tested the code you provided, and it works well. Or you can create a new project to run my code. – Jianwei Sun - MSFT Jan 16 '23 at 01:37