Search code examples
xamlxamarinmaui

Shell tabbar selected icon color

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:contentViews="clr-namespace:ManagerHelper.Views.ContentViews"
       BackgroundColor="Transparent"
       TabBarBackgroundColor="White"
       TabBarTitleColor="Black"
       TabBarUnselectedColor="Gray"
       x:Class="ManagerHelper.Views.LobbyShell">
    <TabBar>
        <ShellContent Title="Головна"
                          Icon="home_icon_apple.png"
                          ContentTemplate="{DataTemplate contentViews:BaseInformation}" />
        <ShellContent Title="РЦ"
                      Icon="depot_icon2.png"
                      ContentTemplate="{DataTemplate contentViews:Depots}" />
        <ShellContent Title="Реєстрації"
                      Icon="registrations_list_icon.png"
                      ContentTemplate="{DataTemplate contentViews:ActiveRegistrationsList}" />
    </TabBar>
</Shell>

How can I change selected icon color on tabbar? Unselected icons I did gray, but I don't understand how change color seleted items.

Example with default color (iOS):
enter image description here

Solution

  • You can set TabBarForegroundColor to define the selected color (default is like Purple) on TabBar and set TabBarUnselectedColor to define the unselected color (Gray as you defined). For more details, you can refer to Tab appearance.

    <Shell
    x:Class="MauiAppShellApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiAppShellApp"
    BackgroundColor="Transparent"

    TabBarBackgroundColor="White"
   
    TabBarForegroundColor="Green"

    TabBarTitleColor="Black"

    TabBarUnselectedColor="Gray"


<!--Omitted for brevity-->