[Bug] Xamarin Forms 4.0 Shell Flyout Menu Top part (Status bar) background color setting

[ltin071]

(My first bug report, pardon me if anything wrong. Thanks!)

Description

As mentioned in this SO question, I was using Xamarin Forms 4 Shell and trying to config the background of iOS status bar to black in color while the background color of the Flyout is white. I am not sure if that is possible.

Steps to Reproduce

1. Download my sample source code from GitHub
2. Run in iOS simulators / devices
3. Open the flyout

Expected Behavior

The status bar should be black in color and the clock will be in white color. (Just like when the flyout is closed.

Actual Behavior

The status bar is covered with white color which I believe is the background color of the flyout.

Basic Information

• Version with issue: Xamarin.Forms 4.0.0.497661
• Last known good version: N/A
• IDE: Microsoft Visual Studio Enterprise 2017 Version 15.9.12
• Platform Target Frameworks:
  • iOS: 12.4.0.64 (9c8d8e0)
  • Android: N/A
  • UWP: N/A
• Android Support Library Version: N/A
• Nuget Packages: Xamarin.Forms 4.0.0.497661
• Affected Devices: iOS device / simulator with notch e.g. iPhone XR

Screenshots

Reproduction Link

My sample on GitHub

Thanks in advance!

[StephaneDelcroix]

(My first bug report, pardon me if anything wrong. Thanks!)

you did great ! that's a really good first issue

[jpveldtman]

Is there any update on this? Or is there a workaround? This would finish off a flyout menu

[zndinc]

I was able to work around this by creating a FlyoutBackgroundImage in which the top section is the same color as my header, and the rest of it is white and applying it on iOS. Not the most elegant but it works.

[RedChops]

Just noticed that I'm running in to this as well still in Xamarin.Forms 4.5-pre3. From some light tests, it would appear that the very top of the Flyout Header is inheriting whatever is getting set for FlyoutBackgroundColor. This leads me to believe that while the flyout itself is allowed to extend in to the iOS "safe area", the header specifically is not, at least not by default.

This does not seem to be affected in any way with the use of On<iOS>().SetUseSafeArea(true);, but I can seem to work around it by setting a negative top margin on whatever layout I stick in <Shell.FlyoutHeaderTemplate>

[RedChops]

Seems like all that's really necessary to get the FlyoutHeader up in to the safe area is a top margin of -1. Not too bad, but I'm still probably going to wrap it in a runtime platform switch so it doesn't move it in Android

[RedChops]

I got a workaround that I'm pretty happy with actually. First a couple things I had to keep in mind: by setting the negative margin, the flyout header was actually pushed up. This meant that all my content started partially under the notch, or at least smooshed up. I had to set a top padding to push the actual contents down, meaning I had to add some additional height to make up for this. The second consideration is that the whole thing works totally fine in Android.

My workaround ends up looking like this:

    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="{DynamicResource Primary}">
                <StackLayout.Margin>
                    <OnPlatform x:TypeArguments="Thickness">
                        <On Platform="iOS" Value="0,-1,0,0" />
                    </OnPlatform>
                </StackLayout.Margin>
                <StackLayout.Padding>
                    <OnPlatform x:TypeArguments="Thickness">
                        <On Platform="iOS" Value="0,20,0,0" />
                    </OnPlatform>
                </StackLayout.Padding>
                <StackLayout.HeightRequest>
                    <OnPlatform x:TypeArguments="x:Double">
                        <On Platform="iOS" Value="220" />
                        <On Platform="Android" Value="200" />
                    </OnPlatform>
                </StackLayout.HeightRequest>
                
                <ContentHere>...</ContentHere>

            </StackLayout>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>

It ends up looking pretty much identical between all platforms, from what I can tell at least.