How to change the tab bar background color from a content page in MAUI

1 day ago 1
ARTICLE AD BOX

I am implementing the possibility to change the color of buttons in an MAUI app in C#. I would like to simultaneously change the tab bar background color when I update the color of the buttons.

I use <TabBar> in the "AppShell.xaml" and have several content pages.

I have a bindable proporty named "buttoncolor" In the "AppShell.xaml". How can I change it from a content page in the AppShell <TabBar>?

AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?> <Shell x:Class="SleepDiary.AppShell" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SleepDiary" Shell.FlyoutBehavior="Disabled" Shell.TabBarTitleColor="{Binding buttontextcolor}" Shell.TabBarUnselectedColor="LightGray" Shell.TabBarBackgroundColor="{Binding buttoncolor}">

First alternative

In my content page I have tried to call:

AppShell.SetTabBarBackgroundColor(this, Colors.Purple);

I am not a good programmer, but I understand that I should not use "this" in the line above. However, I do not know how to define a "BindableObject" which is connected to AppShell.

Second alternative

I have also tried to create a procedure in AppShell which could be called from the content page. I here encounter two problems, either I make it "static". But then I cannot use "buttoncolor" in AppShell.

public static void SetTabBarColor(Color color) { buttoncolor = color; }

I can set "buttoncolor" if I remove "static", but then on the other hand, I am not able to call "SetTabBarColor" from the content page.

public void SetTabBarColor(Color color) { buttoncolor = color; }

I get an error when trying to call the procedure in the content page with the line below:

AppShell.SetTabBarColor(Colors.Purple);

I also have an idea to use the code below, but I face the same difficulties as above with static/non-static:

public void SetTabBarColor(Color color) { AppShell.SetTabBarBackgroundColor(this, color); }

Grateful if anyone has an idea to solve this problem!

I do not have a view model and I am not a very good programmer. I have looked at implementing a view model but I think it is to complicated for my skills.
Therefore I would prefer if there is a solution which do not require a view model.

Thanks in advance!

/Niklas

Read Entire Article