Modify-the-header-image-color-in-the-MAUI-Tab-View

This sample demonstrates how to modify the header image color in the MAUI Tab View control within a .NET MAUI application.

Sample

    <tabView:SfTabView ItemsSource="{Binding TabItems}" SelectionChanged="OnSelectionChanged">
        <tabView:SfTabView.HeaderItemTemplate>
            <DataTemplate>
                <HorizontalStackLayout Margin="20,10,20,0">
                    <Image Source="{Binding ImageName}" Aspect="AspectFit" HorizontalOptions="Center"
                HeightRequest="30" WidthRequest="30">
                        <Image.Behaviors>
                            <toolkit:IconTintColorBehavior TintColor="{Binding SelectedColor}" />
                        </Image.Behaviors>
                    </Image>
                </HorizontalStackLayout>
            </DataTemplate>
        </tabView:SfTabView.HeaderItemTemplate>

        <tabView:SfTabView.ContentItemTemplate>
            <DataTemplate>
                <ListView RowHeight="60">
                    <ListView.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>James</x:String>
                            <x:String>Richard</x:String>
                            <x:String>Michael</x:String>
                            <x:String>Alex</x:String>
                            <x:String>Clara</x:String>
                        </x:Array>
                    </ListView.ItemsSource>
                </ListView>
            </DataTemplate>
        </tabView:SfTabView.ContentItemTemplate>
    </tabView:SfTabView>

Requirements to run the demo

To run the demo, refer to System Requirements for .NET MAUI

Troubleshooting:

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.