Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Shell FlyoutIcon is all white #20682

Open
JonPetitta opened this issue Feb 18, 2024 · 2 comments
Open

Custom Shell FlyoutIcon is all white #20682

JonPetitta opened this issue Feb 18, 2024 · 2 comments
Labels
area-controls-shell Shell Navigation, Routes, Tabs, Flyout platform/android 🤖 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Milestone

Comments

@JonPetitta
Copy link

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

@JonPetitta JonPetitta added the t/bug Something isn't working label Feb 18, 2024
@jsuarezruiz jsuarezruiz added area-controls-shell Shell Navigation, Routes, Tabs, Flyout platform/android 🤖 labels Feb 19, 2024
@jsuarezruiz jsuarezruiz added this to the Backlog milestone Feb 19, 2024
@ghost
Copy link

ghost commented Feb 19, 2024

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 XamlTest added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Mar 25, 2024
@XamlTest
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-controls-shell Shell Navigation, Routes, Tabs, Flyout platform/android 🤖 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants