How to Change Image/Icon Color in the TabBar Based on App Theme?

[Craig Fischberg]

I am using icons throughout my app and change their color based on the App Theme using IconTintColorBehavior from the Maui Community Toolkit. I want to add icons to the tab bar in my SFTabView and change their color in a similar way. Is there a way to do this without creating icon image files of different colors?

Example of how I change icon colors throughout my app currently...

<Image Source="gliding_skier.png" VerticalOptions="Center" HeightRequest="25">

        <Image.Behaviors>

                <mct:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Primary},Dark={StaticResource White}}"/>

        </Image.Behaviors>

</Image>

Ideally, I'd like to be able to use standard Maui Layouts in the tab bar.

Thank you.

[Shivani Ramakrishnan]

Hi Craig,

 

Query: Change Image/Icon Color in the TabBar Based on App Theme

 

Based on your requirements, we have prepared the sample using HeaderItemTemplate to set the Image behaviour using MAUI Community Toolkit. Here is the code snippet:

 

<tabView:SfTabView x:Name="tabView" TabBarHeight="80" ItemsSource="{Binding Models}">
  <tabView:SfTabView.HeaderItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" Padding="10">
                        <Label Text="{Binding Title}" VerticalOptions="Center" Padding="5"/>
                        <Image Source="skiing_2.png" HeightRequest="25" VerticalOptions="Center">
                            <Image.Behaviors>
                                <mct:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Primary},Dark={StaticResource White}}"/>
                            </Image.Behaviors>
                        </Image>
                    </StackLayout>
                </DataTemplate>
            </tabView:SfTabView.HeaderItemTemplate>
</tabView:SfTabView>

 

We have attached the sample for further reference,  please let us know if you need any other details.

 

Regards,
Shivani

Attachment: MauiApp1_3bb8f920.zip