Xamarin Forms - IOS - Hamburger Menu Header color differs from Status Bar

Question

I have added a hamburger menu in a Xamarin Forms App. The problem is that for the IOS device, when the menu is clicked the Status Bar Color does not change according to the Menu Header Color as it does for Android. Below you have the images to see the difference.

This is the masterpage:

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MyProject.UI.Pages.Menu.MainPage"
                 xmlns:pages="clr-namespace:MyProject.UI.Pages.Menu"
                 xmlns:calendar="clr-namespace:MyProject.UI.Pages.Calendar;assembly=MyProject"
                 Title="Main">
        <MasterDetailPage.Master>
            <pages:HamburgerMenu x:Name="MasterPage" />
        </MasterDetailPage.Master>
        <MasterDetailPage.Detail>
            <NavigationPage>
                <x:Arguments>
                    <calendar:CalendarPage />
                </x:Arguments>
            </NavigationPage>
        </MasterDetailPage.Detail>
    </MasterDetailPage>

IOS Hamburger menu, Android Hamburger menu

MShah MShah · Accepted Answer · 2018-04-23T12:33:24

For android its a default color for Statusbar thatsy its showing by default,you can find that like <item name="colorPrimaryDark">#4286f4</item> in your Styles.xml file under Resources Folder.

You can change Statusbar color manually for iOS:
Write this code in your AppDelegate.cs file before LoadApplication

var statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
    if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
    {
        statusBar.BackgroundColor = UIColor.FromRGB(66, 134, 244);
        statusBar.TintColor = UIColor.White;
    }

Hope this will solve your issue.

Xamarin Forms - IOS - Hamburger Menu Header color differs from Status Bar

1 Answers