{"id":9626,"date":"2022-10-23T14:20:50","date_gmt":"2022-10-23T14:20:50","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=9626"},"modified":"2022-10-23T14:20:50","modified_gmt":"2022-10-23T14:20:50","slug":"change-the-statusbar-using-maui","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/change-the-statusbar-using-maui\/","title":{"rendered":"Change the statusbar using MAUI"},"content":{"rendered":"

The status bar is the top most bar which shows things such as the battery, wifi etc. indicators. Now I got a little way to achieving this but then hit a snag – so shout out to Change Status Bar Color for Android and iOS in .NET MAUI<\/a> where Gerald Versluis demonstrates the MAUI Cummunity Toolkit behaviour for solving this problem.<\/p>\n

First off install the CommunityToolkit.Maui Nuget package 1.3.0 or above.<\/p>\n

In MauiProgram.cs add the following to the builder.<\/p>\n

\r\n.UseMauiCommunityToolkit();\r\n<\/pre>\n
In the MainPage.xaml we can set up our behaviour like this<\/p>\n
\r\n<!-- You'll need the following -->\r\nxmlns:behaviors="http:\/\/schemas.microsoft.com\/dotnet\/2022\/maui\/toolkit"\r\n\r\n<!-- Then within the ContentPage put the following -->\r\n<ContentPage.Behaviors>\r\n   <behaviors:StatusBarBehavior StatusBarColor="#FF013558" StatusBarStyle="LightContent" \/>\r\n<\/ContentPage.Behaviors>\r\n<\/pre>\n
The statusbar colour is whatever you’re setting for you apps. base colour. The status bar style refers to the text\/icons. Obviously for a dark theme\/colour, such as above, you’ll want to set the style to light content. If you go for a lighter background\/theme you’ll tend to set the style to DarkContent.<\/p>\n
These fields are ofcourse bindable, so you can change as you wish.<\/p>\n
And that’s it! <\/p>\n
Wait, before we end this discussion, you’ll notices things don’t quite work for iOS. We do not see the colour changes to the status bar. In this case we need to edit the info.plist (best to use an XML\/text editor as the option is not supported in the Visual Studio UI for this) and add<\/p>\n
\r\n<key>UIViewControllerBasedStatusBarAppearance<\/key>\r\n<false \/>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
The status bar is the top most bar which shows things such as the battery, wifi etc. indicators. Now I got a little way to achieving this but then hit a snag – so shout out to Change Status Bar Color for Android and iOS in .NET MAUI where Gerald Versluis demonstrates the MAUI Cummunity […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[330],"tags":[],"class_list":["post-9626","post","type-post","status-publish","format-standard","hentry","category-maui"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=9626"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9626\/revisions"}],"predecessor-version":[{"id":9634,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9626\/revisions\/9634"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=9626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=9626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=9626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}