Category / Section
How to change TabView header color using MVVM?
2 mins read
How to change TabView header color using MVVM
Step 1: Create a Model and ViewModel classes in Sample.
Step 2: Create the Color property in the ViewModel class, and then set the color value.
Step 3: Bind the Color property into View in the TabHeaderBackgroundColor property.
The following code demonstrates how to change TabView header color using MVVM
Model.cs
public class Model
{
public string Name { get; set; }
public long Number { get; set; }
}
ViewModel.cs
public class ViewModel
{
private Color tabHeaderBackGround= Color.Aqua;
public Color TabHeaderBackGround
{
get { return tabHeaderBackGround; }
set { tabHeaderBackGround = value; }
}
private ObservableCollection<Model> contactList;
public ObservableCollection<Model> ContactList
{
get { return contactList; }
set { contactList = value; }
}
public ViewModel()
{
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 });
}
}
MainPage.Xaml
<ContentPage.BindingContext>
<local:ViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<tabView:SfTabView TabHeaderBackgroundColor="{Binding TabHeaderBackGround, Mode=TwoWay}" >
<tabView:SfTabItem Title="Call">
<tabView:SfTabItem.Content>
<Grid BackgroundColor="White" x:Name="AllContactsGrid" >
<ListView x:Name="ContactListView"
ItemsSource="{Binding ContactList}"
RowHeight="75">
</ListView>
</Grid>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem Title="Favorites">
<tabView:SfTabItem.Content>
<Grid BackgroundColor="Green" x:Name="FavoritesGrid" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem Title="Contacts">
<tabView:SfTabItem.Content>
<Grid BackgroundColor="Red" x:Name="AllContacts" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
</ContentPage.Content>
</ContentPage>
Output:

Sample for changing TabView header color using MVVM: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfTabView_Sample_UWP93969415