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

This section outlines the step-by-step process to change the Tab view header color using the MVVM pattern within a .NET MAUI TabView. By binding the TabBarBackground property to a color field in the ViewModel, you can dynamically alter the header color.

Step 1: Initialize TabView in .NET MAUI Page
Create a new sample in .NET MAUI. Initialize the TabView 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 TabView.

C#

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

Step 3: Define Color Field in ViewModel
Create a new color field within the ViewModel that will bind to the TabBarBackground property of the TabView. 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 TabView 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 sample in GitHub

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

Refer to our .NET MAUI Tab View’s 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 following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!