{"id":771,"date":"2023-01-22T17:12:13","date_gmt":"2023-01-22T17:12:13","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=771"},"modified":"2023-01-30T15:39:49","modified_gmt":"2023-01-30T15:39:49","slug":"change-statusbar-color-in-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/22\/change-statusbar-color-in-maui\/","title":{"rendered":"How to change StatusBar color in MAUI"},"content":{"rendered":"\n

MAUI<\/strong><\/strong> Community Toolkit<\/strong> provides us StatusBarBehavior<\/strong> to change status bar color and style. So In this article, I\u2019m going to show you how to change StatusBar color in MAUI.<\/p>\n\n\n\n

Let\u2019s Start<\/strong><\/p>\n\n\n\n

In this sample demo we will use CommunityToolkit.Maui<\/a><\/strong> nuget package.<\/p>\n\n\n\n

CommunityToolkit.Maui<\/strong><\/p>\n\n\n\n

CommunityToolkit.Maui is a collection of Converters, Behaviours, Animations, Custom Views, Effects, Helpers etc. It simplifies the developers task when building Android, iOS, macOS and WinUI applications using MAUI.<\/p>\n\n\n\n

1 \u2013 Install CommunityToolkit.Maui nuget package<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Expander<\/figure>\n\n\n\n
<\/div>\n\n\n\n

2 \u2013 In order to use the .NET MAUI Community Toolkit we need to call the extension method in MauiProgram.cs file as follows<\/strong><\/p>\n\n\n\n

using CommunityToolkit.Maui;\nusing Microsoft.Extensions.Logging;\n\nnamespace MAUIiOSStatusBarBehaviorDemo;\n\npublic static class MauiProgram\n{\n    public static MauiApp CreateMauiApp()\n    {\n        var builder = MauiApp.CreateBuilder();\n        builder\n            .UseMauiApp<App>()\n            .UseMauiCommunityToolkit()\n            .ConfigureFonts(fonts =>\n            {\n                fonts.AddFont(\"OpenSans-Regular.ttf\", \"OpenSansRegular\");\n                fonts.AddFont(\"OpenSans-Semibold.ttf\", \"OpenSansSemibold\");\n            });\n\n#if DEBUG\n        builder.Logging.AddDebug();\n#endif\n\n        return builder.Build();\n    }\n}<\/pre>\n\n\n\n
<\/div>\n\n\n\n
3 – iOS Setup<\/strong><\/p>\n\n\n\n
We need to add following key value to the Info.plist<\/strong> file.<\/p>\n\n\n\n
 <key>UIViewControllerBasedStatusBarAppearance<\/key>\n <false\/><\/pre>\n\n\n\n
We don\u2019t require any extra setup for Android<\/strong>.<\/p>\n\n\n\n
4 \u2013 Setting up the UI<\/strong><\/p>\n\n\n\n
4.1 \u2013 Create a MainPage.xaml<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage\n    x:Class=\"MAUIiOSStatusBarBehaviorDemo.MainPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:toolkit=\"http:\/\/schemas.microsoft.com\/dotnet\/2022\/maui\/toolkit\"\n    x:Name=\"MainContainer\">\n\n    <ScrollView>\n        <VerticalStackLayout Padding=\"30,30\" Spacing=\"25\">\n\n            <FlexLayout\n                x:Name=\"StackColorList\"\n                AlignItems=\"Center\"\n                BindableLayout.ItemsSource=\"{Binding Colors}\"\n                Direction=\"Row\"\n                FlexLayout.AlignSelf=\"Center\"\n                HorizontalOptions=\"FillAndExpand\"\n                JustifyContent=\"Center\"\n                Wrap=\"Wrap\">\n                <BindableLayout.ItemTemplate>\n                    <DataTemplate>\n                        <Button\n                            BackgroundColor=\"{Binding Color}\"\n                            BorderColor=\"Transparent\"\n                            BorderWidth=\"2\"\n                            Command=\"{Binding BindingContext.ColorItemClickedCommand, Source={x:Reference MainContainer}}\"\n                            CommandParameter=\"{Binding .}\"\n                            CornerRadius=\"0\"\n                            HeightRequest=\"100\"\n                            WidthRequest=\"100\">\n                            <Button.Triggers>\n                                <DataTrigger\n                                    Binding=\"{Binding IsSelected}\"\n                                    TargetType=\"Button\"\n                                    Value=\"True\">\n                                    <Setter Property=\"BorderColor\" Value=\"Red\" \/>\n                                <\/DataTrigger>\n                            <\/Button.Triggers>\n                        <\/Button>\n                    <\/DataTemplate>\n                <\/BindableLayout.ItemTemplate>\n            <\/FlexLayout>\n\n            <Button\n                x:Name=\"CounterBtn\"\n                Command=\"{Binding ChangeStatusBarColorCommand}\"\n                HorizontalOptions=\"Center\"\n                Text=\"Change StatusBar Color\" \/>\n\n        <\/VerticalStackLayout>\n    <\/ScrollView>\n\n<\/ContentPage><\/pre>\n\n\n\n
<\/div>\n\n\n\n