How to customize the tabs font in .NET MAUI Tab View?
Using the Visual State Manager, you 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 your project from nuget.org.
Step 3: Register the handler for Syncfusion.Maui.Core assembly a dependency for the .NET MAUI Tab View control, in MauiProgram.cs.
C#
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 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 to add different values for TextColor, FontSize, and FontAttributes properties for the selected and normal states.
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 configure necessary properties, with a ListView 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>
<!-- Additional Tab Items -->
</tabView:SfTabView>Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to customize the tabs font in .NET MAUI Tab View.
You can refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.
You can check out our .NET MAUI components on the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Tab View and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
