[Proposal] StatusBarEffect

StatusBarEffect

• Proposed
• Prototype
• Implementation
  • iOS Support
  • Android Support
  • macOS Support
  • Windows Support
• Unit Tests: Not Started
• Sample
• Documentation

Summary

Set the color and style of the status bar

Detailed Design

StatusBarEffect.shared.cs

public class StatusBarEffect : RoutingEffect
{
  public static readonly BindableProperty ColorProperty;
  public static readonly BindableProperty StyleProperty;
  
  public static Color GetColor(BindableObject bindable);
  public static StatusBarStyle GetStyle(BindableObject bindable);
}

Usage Syntax

XAML Usage

<ContentPage local:StatusBarEffect.Color="Blue">

</ContentPage>

C# Usage

class MyPage : ContentPage
{
  public MyPage()
  {
     StatusBarEffect.SetColor(this, Colors.Black);
  }
}

[EPS-Lac]

Hi @pictos, what’s the state on this one?

I’m a bit confused with the different issues here and in the MAUI project… Are you going to implement it in the CommunityToolkit or will the MAUI team add it directly in MAUI? And has any work on it already started?

I’ll need the feature for a customer project… So if nothing has been implemented yet (nor is in the pipeline to do so shortly), any tips on how to implement it myself? I need to set it dynamically (in case the user switches themes on runtime), currently just for iOS and Android.

Thanks in advance 😃 Any info/help is appreciated!

[KSemenenko]

  public enum StatusBarStyle
  {
    Default,
    LightContent,
    DarkContent,
  }

private DisplayOrientation _lastOrientation;

protected override Window CreateWindow(IActivationState activationState)
{
    Window window = base.CreateWindow(activationState);
    window.Created += (s, e) => { UpdateStatusBarColor(); };
    window.Destroying += (s, e) =>
    {
        NSNotificationCenter.DefaultCenter.RemoveObserver(new NSString("UIDeviceOrientationDidChangeNotification"));
    };
    MAUICallback.OnBackgroundColorChanged += MAUICallbackOnOnBackgroundColorChanged;
    return window;
}

private void UpdateStatusBarColor()
{
    UIView statusBar;
    if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
    {
        int tag = 4567890;
        UIWindow window = UIApplication.SharedApplication.Delegate.GetWindow();
        statusBar = window.ViewWithTag(tag);
        if (statusBar == null || statusBar.Frame != UIApplication.SharedApplication.StatusBarFrame)
        {
            statusBar = statusBar ?? new(UIApplication.SharedApplication.StatusBarFrame);
            statusBar.Frame = UIApplication.SharedApplication.StatusBarFrame;
            statusBar.Tag = tag;
            window.AddSubview(statusBar);
        }
        
        // this is my variable with style
        var uiStyle = MAUICallback.StatusBarStyle switch
        {
            StatusBarStyle.LightContent => UIStatusBarStyle.LightContent,
            StatusBarStyle.DarkContent => UIStatusBarStyle.DarkContent,
            _ => UIStatusBarStyle.Default
        };

        UIApplication.SharedApplication.SetStatusBarStyle(uiStyle, false);
    }
    else
    {
        statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
    }

    if (statusBar != null)
    {
        // TODO Make this color come from somewhere shared
        statusBar.BackgroundColor = Color.FromArgb(MAUICallback.CurrentColor).ToUIColor();
        
    }

    NSNotificationCenter.DefaultCenter.AddObserver(new NSString("UIDeviceOrientationDidChangeNotification"), NotificationCenter =>
    {
        // This gets called multiple times on iOS, let's optimize a little bit
        if (_lastOrientation != DeviceDisplay.MainDisplayInfo.Orientation)
        {
            UpdateStatusBarColor();
            _lastOrientation = DeviceDisplay.MainDisplayInfo.Orientation;
        }
    });
}

than call “UpdateStatusBarColor();” when you need to change color. this code from App.xaml.cs