The BitmapIcon control makes it simple to add icons in UWP and Uno Platform apps. By default, the icons are monochromatic and adapt to light and dark theme automatically. However, Fluent Design System is now getting more and more colorful so it makes sense to add a splash of color to some iconography in your app as well. It turns out this is very easy to do!
You can use the ShowAsMonochrome property, which by default set to true. Setting it to false disables this behavior and keeps your bitmap colors intact.
For the following simple sample:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <StackPanel Orientation="Horizontal"> | |
| <BitmapIcon UriSource="ms-appx:///Assets/windows.png" /> | |
| <BitmapIcon UriSource="ms-appx:///Assets/windows.png" ShowAsMonochrome="False" /> | |
| </StackPanel> |
We get:
And of course the same across all Uno Platform targets! Let’s see WebAssembly for example:
If you want to try out this sample on your devices, check out the sample on GitHub!
