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.