Search code examples
c#uwp

BitmapIcon forecolor in UWP

When I try to set a custom icon in NavigationViewItem using <BitmapIcon> it shows the icon only in white or black, even the png with color. is there a way to fix that?

Here is my code:

<NavigationViewItem Content="Local">
    <NavigationViewItem.Icon>
        <BitmapIcon UriSource="ms-appx:///Items/MediaOptions/local_icon.png"   Height="40" Width="40"/>
    </NavigationViewItem.Icon>
</NavigationViewItem>

Here the image

enter image description here

Here how it looks

enter image description here

Solution

  • According the document BitmapIcon,

    All color info is stripped from the bitmap when the BitmapIcon is rendered. The remaining non-transparent colors are combined to produce an image that's entirely the foreground color as set by the Foreground property (this typically comes from styles or templates, such as the default template resolving to a theme resource). You can override this behavior by setting the ShowAsMonochrome property.

    You can set BitmapIcon.ShowAsMonochrome Property to false to get full color.

    <BitmapIcon UriSource="Assets\local_icon.png"  ShowAsMonochrome ="False"  Height="40" Width="40"/>