Category / Section
How to set custom font for items loaded in .NET MAUI ListView (SfListView) ?
1 min read
The .NET MAUI ListView (SfListView) allows you to customize the items using custom fonts. To use the custom fonts in SfListView, refer to the following steps:
STEP 1: Add the custom fonts in True Type Font (TTF) format in the Resources’ Fonts folder.
STEP 2: Register the fonts by invoking the ConfigureFonts method on the MauiAppBuilder object. Add the required fonts using the AddFont method by passing the font filename as a parameter. You can also specify an optional alias name by passing the second parameter.
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("Lobster-Regular.ttf", "LobsterRegular");
fonts.AddFont("Satisfy-Regular.ttf", "SatisfyRegular");
});
builder.ConfigureSyncfusionListView();
return builder.Build();
}
}
STEP 3: Consume the fonts by referencing its name or alias name to the FontFamily property.
<listView:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="120">
<listView:SfListView.ItemTemplate>
<DataTemplate>
<StackLayout>
<StackLayout Margin="10,0,0,0" VerticalOptions="StartAndExpand">
<Label Text="{Binding BookName}" FontFamily="Lobster-Regular" FontSize="20" VerticalOptions="CenterAndExpand"/>
<Label Text="{Binding BookDescription}" FontFamily="Satisfy-Regular" FontSize="20" VerticalOptions="StartAndExpand"/>
</StackLayout>
<BoxView HeightRequest="1" BackgroundColor="LightGray"/>
</StackLayout>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
Take a moment to peruse the documentation to learn more about view appearance customization in SfListView with code examples.
