CODEWITHSUNDEEP
c#iosblazormauimaui-blazor
sfernandez131
sfernandez131

Reputation: 1

Changing the bottom bar background color on iOS in MAUI Blazory Hybrid

I'm working on changing the background color of the bottom home bar for iOS and Android. So far I've got Android updating the color just fine. iOS on the other hand will not change the color. I should be clear that I am not trying to change the color of the status bar on the top. Only the bottom bar.

I've got it working on Android using this in the MainActivity.cs:

protected override void OnCreate(Bundle savedInstanceState)
{
    var statusBarColor = Color.FromArgb("#f7f7f7");
    var androidStatusBarColor = ColorHelper.ToAndroidColor(statusBarColor);
    Window.SetNavigationBarColor(androidStatusBarColor);
    base.OnCreate(savedInstanceState);
}

Android bottom bar

I just can't seem to get it to change in iOS. What I have now in AppDeligate.cs is:

public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
{
    NavigationPage.SetIconColor(new NavigationPage(new MainPage()), Color.FromArgb("#f7f7f7"));
    return base.FinishedLaunching(application, launchOptions);
}

iOS bottom bar

Upvotes: 0

Views: 2716

Answers (2)

FreakyAli
FreakyAli

Reputation: 16449

If you are using Maui doesn't matter if you have Blazor or not on iOS it's pretty simple just set the ContentPage's background color and it will do it for you:

<ContentPage
    x:Class="Samples.InputViews.InputViews"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:freakyControls="clr-namespace:Maui.FreakyControls;assembly=Maui.FreakyControls"
    xmlns:inputViews="clr-namespace:Samples.InputViews"
    Title="InputViews"
    BackgroundColor="Green"
    x:DataType="inputViews:InputViewModel">

Check the below screenshot:

enter image description here

On Android go to your MainActivity and add the below line to your OnCreate

protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        this.Window.SetNavigationBarColor(Color.Black); //Native android color
    }

Upvotes: 0

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10058

The bottom bar on iOS is related with Safe Area.

To change the background color of the bottom home bar on iOS in MAUI Blazor, you need to set ios:Page.UseSafeArea="True" and then set the BackgroundColor of the ContentPage which is the background color of the bottom home bar. However, this will affect the color of the top status bar as you said. To eliminate the effect, you may need to change the StatusBarColor using CommunityToolkit.

You can refer to the sample code below:

<ContentPage ...
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             ios:Page.UseSafeArea="True"
             BackgroundColor="#32a88b"
              >

     <ContentPage.Behaviors> 
           <toolkit:StatusBarBehavior StatusBarColor="White" StatusBarStyle="LightContent"/> 
           
     </ContentPage.Behaviors>

    <BlazorWebView>
        ...
    </BlazorWebView>
</ContentPage>

Output:

enter image description here

Upvotes: 3

Related Questions