How to change the Tab View header color using MVVM in .NET MAUI Tab View?

This section provides a guide to changing the Tab View header color using the MVVM pattern within a .NET MAUI Tab View. By binding the TabBarBackground property to a color field in the ViewModel, you can dynamically alter the header color.

Step 1: Initialize Tab View in .NET MAUI Page
Create a new sample in .NET MAUI. Initialize the Tab View control within the content page and set the BindingContext property to associate it with a ViewModel.

XAML:

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>

Step 2: Create Model and ViewModel Classes
In the code-behind file, create the necessary Model and ViewModel classes. Establish an observable collection within the ViewModel to represent the items within the Tab View.

C#

public class Model
{
    public string Name { get; set; }
    public long Number { get; set; }
}

Step 3: Define Color Field in ViewModel
Create a color field within the ViewModel that will bind to the TabBarBackground property of the Tab View. Assign the desired color value to this field and expose it through a public property.

C#

public class ViewModel
{
    public Color TabHeaderColor { get; set; }
    public ObservableCollection<Model> ContactList { get; set; }

    }
    public ViewModel()
    {
        TabHeaderColor  = Colors.Aqua;
        
        ContactList = new ObservableCollection<Model>();
        ContactList.Add(new Model { Name = "Aaron", Number = 7363750 });
        ContactList.Add(new Model { Name = "Adam", Number = 7323250 });
        ContactList.Add(new Model { Name = "Adrian", Number = 7239121 });
        ContactList.Add(new Model { Name = "Alwin", Number = 2329823 });
        ContactList.Add(new Model { Name = "Alex", Number = 8013481 });
        ContactList.Add(new Model { Name = "Alexander", Number = 7872329 });
        ContactList.Add(new Model { Name = "Barry", Number = 7317750 });
    }
}

Step 4: Bind TabBarBackground Property
In the XAML page, bind the TabBarBackground property of the Tab View to the TabHeaderColor property in the ViewModel.

XAML:

<tabView:SfTabView TabBarBackground="{Binding TabHeaderColor, Mode=TwoWay}" >
    <tabView:SfTabItem Header="Calls">
        <tabView:SfTabItem.Content>
            <Grid BackgroundColor="White" x:Name="AllContactsGrid" >
                <ListView x:Name="ContactListView" 
                          ItemsSource="{Binding ContactList}"
                          RowHeight="75">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Vertical" Margin="30,0,0,0">
                                    <Label Text="{Binding Name}"
                                            FontSize="24"/> 
                                    <Label 
                                            Text="{Binding Number}" 
                                            FontSize="20" 
                                            TextColor="LightSlateGray"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
    <tabView:SfTabItem Header="Favorites">
        <tabView:SfTabItem.Content>
            <Grid BackgroundColor="Green" x:Name="FavoritesGrid" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
    <tabView:SfTabItem Header="Contacts">
        <tabView:SfTabItem.Content>
            <Grid BackgroundColor="Red" x:Name="AllContacts" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>
    

Output:

Download the complete sample from GitHub.

Conclusion
I hope you enjoyed learning how to change the Tab View header color using MVVM in .NET MAUI Tab View (SfTabView).

Refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!