Fix UWP Toolbar icons

[jfversluis]

Description of Change

Change the icons on UWP ToolbarItem to map to AppBarButton.Content and add an Image in there instead of using the AppBarButton.Icon directly because of a bug in UWP.

Issues Resolved

• fixes [Bug] Icons from Toolbaritem are not displayed on UWP if starts on second monitor #7505
• fixes UWP IconImageSource from netstandard 2.0 #6534

API Changes

None

Platforms Affected

• UWP

Behavioral/Visual Changes

The toolbar icons will look a bit different and less "iconized". You can now show full colored icons.

If users are not doing so already, they can create monochromatic images to mimic the old behavior themselves.

Before/After Screenshots

As you can see in the screenshots below there is a slight difference in the look whenever the toolbar item is primary. This change also allows full color icons to be used.

You can also see a black square, that is the full color Xamarin logo. In the old way, this was not supported, in the new way it is. You can see while using the new way for a secondary item the full colored Xamarin logo is (still) a black square. To make an icon still show up when a toolbar item is secondary, we still need to assign it directly to AppBarButton.Icon. I have tested if the bug with the secondary monitor also affects items that are secondary, but from what I can tell it does not.

Original icons used in both screenshots below

Old

New

Testing Procedure

Go to Issue7505 and inspect the toolbar icons. It will take a dual monitor setup (with different resolutions) to test if the icons are not disappearing anymore. To see the old vs new appearance you would have to comment some lines in the Platform.cs file. Or you can compare the looks from the secondary item icons and the primary ones.

PR Checklist

• Targets the correct branch
• Tests are passing (or failures are unrelated)

[hartez]

Just need to deal with the TODO

[jfversluis]

I think if we really want to (in a later stage) there are some APIs available within UWP to make an image monochromatic. Which comes of course at a performance cost. I've looked into making this possible with this change immediately, but using those APIs seemed to take another good but of effort which I'm not sure is worth it at this point.

The other way around is also true: I discovered that there is a property on the icons (that are used now) which lets you make them non-monochromatic. Maybe something we could expose as a platform specific or something.