Xamarin Any way to get Toolbaritem icon to display colors and details?

Question

I have a Xamarin Forms app. I would like to get a Toolbaritem icon to display colors and detail.

Just for an example, I am using https://commons.wikimedia.org/wiki/File:Cambodia_road_sign_PW03_W2_07.png as a test.

Here is how it displays on Android using <ToolbarItem IconImageSource="Cambodia_road_sign_PW03_W2_07.png" Order="Primary" Priority="0" />:

Note the lack of color and details. On UWP on the other hand it displays colors and detail like this:

I don't think the resolution is wrong in some way for Android because the same file, used as a FlyoutItem icon, displays correctly:

These images are from the Windows Android emulator but a real Android device gives the same results.

FWIW, I do not have an iOS implementation at this time, so cannot say what happens on iOS.

Any ideas?

Answer 1

I download the icon with 16px to check. The code below works for me.

  <ContentPage.ToolbarItems>
    <ToolbarItem IconImageSource="Cambodia_road_sign__16px.png">         
    </ToolbarItem>
</ContentPage.ToolbarItems>

Use the code below to show the bar.

 MainPage = new NavigationPage(new ShellPage());

Update:

For Shell, you could use the Shell.TitleView. Set it inside all your Flyout ContentPage.

Shell:

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:views="clr-namespace:App2_XF"
   
         x:Class="App2_XF.ShellPage">


<FlyoutItem FlyoutDisplayOptions="AsMultipleItems"    >
    <ShellContent Title="Item1" ContentTemplate="{DataTemplate views:Page1}"></ShellContent>
    <ShellContent Title="Item2" ContentTemplate="{DataTemplate views:Page2}"></ShellContent>
</FlyoutItem>
</Shell>

Page1: Add TitleView for both Page1, Page2

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
         xmlns:android="http://schemas.android.com/apk/res/android"
         x:Class="App2_XF.Page1">
 <Shell.TitleView>
    <StackLayout>
        <Image HorizontalOptions="End" VerticalOptions="End" HeightRequest="40" WidthRequest="40" Source="Cambodia_road_sign__16px.png"></Image>
    </StackLayout>
</Shell.TitleView>
<ContentPage.Content>
   ......
</ContentPage.Content>
</ContentPage>