How to change Tab Bar color in .net maui using AppShell

February 11, 2024

I am new in .net maui and recently I have added the AppShell in my .net maui application. Now I want to change the color of the tab bar and tab icon color.

I have tried to add the Tab bar in my AppShell file and here is the code which I have written so far to implement the Tabbar in AppShell.xaml file.

Here’s my AppShell code

<?xml version="1.0" encoding="UTF-8" ?>
<Shell x:Class="ECommerceApp.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ECommerceApp"
       xmlns:pages="clr-namespace:ECommerceApp.Pages"
       Shell.FlyoutBehavior="Disabled">


    <TabBar>
        <Tab Title="Home"
             Icon="home">
            <ShellContent ContentTemplate="{DataTemplate pages:HomePage}" />
        </Tab>
        <Tab Title="Cart"
             Icon="cart">
            <ShellContent ContentTemplate="{DataTemplate pages:CartPage}" />
        </Tab>
        <Tab Title="Favorites"
             Icon="faqvorite">
            <ShellContent ContentTemplate="{DataTemplate pages:FavoritesPage}" />
        </Tab>
        <Tab Title="Settings"
             Icon="settings">
            <ShellContent ContentTemplate="{DataTemplate pages:SettingsPage}" />
        </Tab>
    </TabBar>

</Shell>

>Solution :

To change the color of the tab bar and tab icon color in your .NET MAUI application, you can utilize the properties available in the Shell class.

       Shell.TabBarBackgroundColor="Black"
       Shell.TabBarTitleColor="White"
       Shell.TabBarUnselectedColor="FloralWhite"

Here’s how you can modify your AppShell.xaml file to achieve this:

<Shell x:Class="ECommerceApp.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ECommerceApp"
       xmlns:pages="clr-namespace:ECommerceApp.Pages"
       Shell.FlyoutBehavior="Disabled"
       Shell.TabBarBackgroundColor="Black"
       Shell.TabBarTitleColor="White"
       Shell.TabBarUnselectedColor="FloralWhite">

By setting these properties directly in the Shell element, you can customize the appearance of the tab bar and tab icons without needing to define additional styles.