Articles in this section
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:

change header color of tabview

 

 

 

 

 

 

 

 

 

 

 

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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied