Edit

NavigationPage Bar Text Color Mode on iOS

  • Article

Download Sample Download the sample

This platform-specific controls whether the status bar text color on a NavigationPage is adjusted to match the luminosity of the navigation bar. It's consumed in XAML by setting the NavigationPage.StatusBarTextColorMode attached property to a value of the StatusBarTextColorMode enumeration:

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    x:Class="PlatformSpecifics.iOSStatusBarTextColorModePage">
    <FlyoutPage.Flyout>
        <ContentPage Title="Flyout Page Title" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage BarBackgroundColor="Blue" BarTextColor="White"
                        ios:NavigationPage.StatusBarTextColorMode="MatchNavigationBarTextLuminosity">
            <x:Arguments>
                <ContentPage>
                    <Label Text="Slide the master page to see the status bar text color mode change." />
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

Alternatively, it can be consumed from C# using the fluent API:

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
...

IsPresentedChanged += (sender, e) =>
{
    var flyoutPage = sender as FlyoutPage;
    if (flyoutPage.IsPresented)
        ((Xamarin.Forms.NavigationPage)flyoutPage.Detail)
          .On<iOS>()
          .SetStatusBarTextColorMode(StatusBarTextColorMode.DoNotAdjust);
    else
        ((Xamarin.Forms.NavigationPage)flyoutPage.Detail)
          .On<iOS>()
          .SetStatusBarTextColorMode(StatusBarTextColorMode.MatchNavigationBarTextLuminosity);
};

The NavigationPage.On<iOS> method specifies that this platform-specific will only run on iOS. The NavigationPage.SetStatusBarTextColorMode method, in the Xamarin.Forms.PlatformConfiguration.iOSSpecific namespace, controls whether the status bar text color on the NavigationPage is adjusted to match the luminosity of the navigation bar, with the StatusBarTextColorMode enumeration providing two possible values:

In addition, the GetStatusBarTextColorMode method can be used to retrieve the current value of the StatusBarTextColorMode enumeration that's applied to the NavigationPage.

The result is that the status bar text color on a NavigationPage can be adjusted to match the luminosity of the navigation bar. In this example, the status bar text color changes as the user switches between the Flyout and Detail pages of a FlyoutPage:

Status Bar Text Color Mode Platform-Specific