Articles in this section
Category / Section

How to change the foreground and background of the selected WInRT TabItem's header?

2 mins read

In SfTabControl, Foreground and Background of selected tab item can be changed as follows:

Setting the SelectionStyle, SelectedForeground and Background properties

Set SelectionStyle=HeaderText for SfTabControl and SelectedForeground and Background properties for SfTabItem.

MainPage.xaml

<Page
    x:Class="TabControlWRT_Selectionstyle.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TabControlWRT_Selectionstyle"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 mc:Ignorable="d" xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation">
<Grid> <Grid.Resources>
  <Style TargetType="navigation:SfTabItem" x:Key="TabItemStyle">
     <Setter Property="Background" Value="Red"/>
     <Setter Property="SelectedForeground" Value="Green" />
   </Style>
 </Grid.Resources>
 <Grid.DataContext>
    <local:ViewModel/>
 <Grid.DataContext>
  <navigation:SfTabControl SelctionStyle="HeaderText" ItemContainerStyle="{StaticResource TabItemStyle}" ItemsSource="{Binding TabCollection}" >
      <navigation:SfTabControl.HeaderTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding TitleName}"  />
        </DataTemplate>
      </navigation:SfTabControl.HeaderTemplate>
      <navigation:SfTabControl.ContentTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding Content}"  />
        </DataTemplate>
      </navigation:SfTabControl.ContentTemplate>
  </navigation:SfTabControl>
 </Grid>
</Page>

 

MainPage.xaml.cs

public class Model
    {
        private string header;
        public string TitleName
        {
            get { return header; }
            set { header = value; }
        }
        private string content;
        public string Content
        {
            get { return content; }
            set { content = value; }
        }
    }
    public class ViewModel
    {
        private List<Model> itemCollection;
        public List<Model> TabCollection
        {
            get { return itemCollection; }
            set { itemCollection = value; }
        }
        public ViewModel()
        {
            itemCollection = new List<Model>();
            itemCollection.Add(new Model() { TitleName = "Item 1" ,Content = "Content 1" });
            itemCollection.Add(new Model() { TitleName = "Item 2" ,Content = "Content 2});
            itemCollection.Add(new Model() { TitleName = "Item 3" ,Content = "Content 3});
            itemCollection.Add(new Model() { TitleName = "Item 4" ,Content = "Content 4});
            itemCollection.Add(new Model() { TitleName = "Item 5" ,Content = "Content 5});
        }
    }

The output of the above code example is as follows.

 

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