How to customize the tabs font in Syncfusion .NET MAUI Tab View?
Using the Visual State Manager, we can customize the tab properties based on selected, normal and disabled states. This section explains how to customize the selected and unselected tabs text color, font size and font attributes in Syncfusion .NET MAUI Tab View.
Step 1: Create a .NET MAUI application project in Visual Studio 2022.
Step 2: Add the Syncfusion.Maui.TabView nuget to the project from nuget.org.
Step 3: Register the handler for Syncfusion.Maui.Core assembly which is a dependent for .NET MAUI Tab View control in the MauiProgram.cs.
C#
Register Handler for Syncfusion.Maui.Core assembly
using Microsoft.Maui;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Hosting;
using Syncfusion.Maui.Core.Hosting;
namespace TabViewCustomizationSample
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureSyncfusionCore()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
}
Step 4: Add the .NET MAUI Tab View control namespace to the MainPage.xaml.
XAML
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TabViewCustomizationSample.MainPage"
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
BackgroundColor="{DynamicResource SecondaryColor}">
Step 5: Create a style and define the Visual State Manager for the SfTabItem and add different values for TextColor and FontAttributes properties for the selected and normal states as shown in the below code snippet.
XAML
<Style TargetType="tabView:SfTabItem"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <VisualStateGroup> <VisualState x:Name="Selected" > <VisualState.Setters> <Setter Property="TextColor" Value="#6200EE" /> <Setter Property="FontAttributes" Value="Bold" /> <Setter Property="FontSize" Value="14" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="TextColor" Value="Black" /> <Setter Property="FontAttributes" Value="Italic" /> <Setter Property="FontSize" Value="12" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style>
Step 6: Define the .NET MAUI Tab View (SfTabView) in the xaml and add necessary properties. In the below code a listview is populated as the content of each tab.
XAML
<tabView:SfTabView x:Name="TabView" TabBarHeight="72">
<tabView:SfTabItem Header="Document" ImageSource="document">
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout >
<Image Source="document"/>
<Label Margin="10,0,0,0" TextColor="Black" Text="{Binding .}"/>
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</tabView:SfTabItem>
<tabView:SfTabItem Header="Excel" ImageSource="excel">
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout >
<Image Source="excel"/>
<Label Margin="10,0,0,0" TextColor="Black" Text="{Binding .}"/>
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</tabView:SfTabItem>
<tabView:SfTabItem Header="PDF" ImageSource="pdf">
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout >
<Image Source="pdf"/>
<Label Margin="10,0,0,0" TextColor="Black" Text="{Binding .}"/>
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</tabView:SfTabItem>
<tabView:SfTabItem Header="PowerPoint" ImageSource="powerpoint">
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout >
<Image Source="powerpoint"/>
<Label Margin="10,0,0,0" TextColor="Black" Text="{Binding .}"/>
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</tabView:SfTabItem>
</tabView:SfTabView>
