search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.83k stars 1.67k forks source link

Custom Shell FlyoutIcon is all white #20682

Open JonPetitta opened 4 months ago

JonPetitta commented 4 months ago

Description

When setting a custom FlyoutIcon it gets converted to all white. When using the builtin hamburger its color properly reflects what is set by the styling.

If you have a white background color set, then the icon, when set, is all white as well, making it invisible. doesn't matter if you use a png or a svg for the icon.

I understand that all svgs are converted to png during the build process. It seems when FlyoutIcon is set, it just whites out the image. Not sure how this is meant to work with styling since you can change the color via an attribute/property.

Though this seems to work as expected when using the default/built in hamburger icon.

I would think that to properly support styling for icons (as is with the default hamburger), you need to support the svg file format and not convert them to png's.

Steps to Reproduce

1: Create new Maui App 2: Get any png or svg, like from icons8 or something, add image to Resources/Images 3: set Shell.FlyoutBehavior to 'Flyout' in AppShell.xaml 4: comment out the Shell section in Styles.xaml (which I hope gets fixed someday) 5: Create FlyoutItem entry in AppShell.xaml set its Icon property to the file from step 2 6: Add Image element to mainpage.xmal and set to file from step 2

Run app on android, notice FlyoutItem icon shows as expected, as well as the xaml image

Stop app

6: Set shell FlyoutIcon to file from step 2

Run app on android, notice the Flyout icon is all white and the FlyoutItem icon is also all white, xmal image shows as expected

Link to public reproduction project repository

https://github.com/JonPetitta/MauiApp2

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 14

Did you find any workaround?

No response

Relevant log output

No response

ghost commented 4 months ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

XamlTest commented 3 months ago

Verified this on VS 17.10.0 Preview 2.0(8.0.14). Repro on Android 14.0-API34, not repro on Windows 11, iOS 17.2 and MacCatalyst with below Project: MauiApp2.zip

image