Xamarin Forms 4.0 Shell Flyout Menu Top part background color setting

Question

I am using Xamarin Forms 4.0 Shell to create an application. But I am unable to customize the very top part of the flyout menu to be black in color. I know setting the flyout background color to be black will solve that but I need to keep the lower part of the flyout to be other color. Is there any other way to achieve this? Please see the below image for reference.

Thanks in advance!

I have tried change UIApplication.SharedApplication.StatusBarStyle from Light to Default, the below screenshot shows that the clock shows with black font color (blue arrow), but the Wifi battery icon disappear (red arrow)

Added sample on Github for review.

RedChops RedChops · Accepted Answer · 2020-02-11T07:08:55

This is a little late, but I just ran across this issue myself. It would appear to be a bug actually. I posted up some of what I found over on your GitHub issue, where hopefully the Xamarin team will make a fix.

In the mean time, I found a workaround that makes the flyout header identical between all platforms without having to any weird other hacks.

For full reference - what I found is that the white bar above your flyout header is actually a part of the flyout content below - the menu items. If you change the background color of the flyout menu, you'll see for yourself. It would appear that the flyout menu is allowed to flow in to the iOS safe area, but the header cannot. What I did was used a negative margin in the layout of the flyout header template, then set some padding to offset the safe area in an onplatform block. Because this then effectively shrinks the content area, I set the height by platform as well. This ends up looking like the code below:

    <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>

I can't believe that I've only seen this issue posted here and in that GitHub link... but hopefully this helps out anybody else that runs in to this until a fix from the Xamarin team can go in to effect!

Xamarin Forms 4.0 Shell Flyout Menu Top part background color setting

3 Answers