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.