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
22.24k stars 1.76k forks source link

Different styling between iOS and Android in Flyout menu #14651

Open williambuchanan2 opened 1 year ago

williambuchanan2 commented 1 year ago

Description

In Android, when the flyout menu is showing, the rest of the app dims. See shaded area pointed to below:

image

In ios this doesn't happen. It just stays the same colour as the flyout menu:

image

Steps to Reproduce

Open the app in the repo below In Android, just run the app and tap "Flyout Style problem" Open the flyout menu and observe.

In iOS, navigation doesn't work properly (another bug which I raised a while back but still not fixed) so you need to change the ShellItem in AppShell to load the TabA view on load. Once done you can open the flyout menu and notice the difference in colour.

Link to public reproduction project repository

https://github.com/williambuchanan2/MauiNavigation

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16

Did you find any workaround?

No

Relevant log output

No response

PureWeen commented 1 year ago

@williambuchanan2 have you tried this property?

https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0#flyout-backdrop

To define your own colors?

ghost commented 1 year ago

Hi @williambuchanan2. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

williambuchanan2 commented 1 year ago

Hi @PureWeen, I had played with that, but decided not to use it since you can't seem to specify an opacity (correct me if wrong...). The default behaviour in Android worked well in that it just dims the background of the app. The default behaviour in iOS doesn't seem to work the same way.

cat0363 commented 1 year ago

Specifying the FlyoutBackdrop property in ARGB should solve the problem. For example, to apply a light red overlay,

FlyoutBackdrop="#44FF0000"

Below are the results of the above.

[Android]

Screenshot_1684476445

[iOS]

test_008

About .NET MAUI colors: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/graphics/colors

There is no property called opacity.

williambuchanan2 commented 1 year ago

Hi @cat0363

Yes, specifying an ARGB colour does work. I didn't realise that so thank you.

The only outstanding issue is the different default behaviour between iOS and Android.

XamlTest commented 1 year ago

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Can repro this issue with below Project: MauiNavigation.zip

There are different behaviors between iOS and Android.