How to set the font size for .NET MAUI SfListView?
You can set the font size for all the elements inside .NET MAUI ListView across different device sizes by defining the font size based on the width and height of the page.
C#
Trigger the SizeChanged event of the ContentPage and define the font size with the Key. Add the key to the Resources.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.SizeChanged += MainPage_SizeChanged;
}
private void MainPage_SizeChanged(object sender, EventArgs e)
{
DefineFontSize("FontSizeLarge", 38, 30);
DefineFontSize("FontSizeBody", 48, 42);
DefineFontSize("FontSizeSmall", 52, 48);
}
private void DefineFontSize(string resourceKey, int charsInLine, int linesInPage)
{
var size1 = Math.Round(Width / charsInLine) * 2;
var size2 = Math.Round(Height / linesInPage);
App.Current.Resources[resourceKey] = Math.Min(size1, size2);
}
}
XAML
Use the DynamicResources binding to the font size property.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:ListView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
xmlns:local="clr-namespace:ListViewMaui"
x:Class="ListViewMaui.MainPage"
BackgroundColor="{DynamicResource SecondaryColor}">
<ContentPage.Content>
<ListView:SfListView x:Name="listView"
ItemSize="70" GroupHeaderSize="50"
SelectionMode="Single"
IsStickyGroupHeader="True"
ItemsSource="{Binding ContactsInfo}"
AllowGroupExpandCollapse="True"
>
<ListView:SfListView.BindingContext>
<local:ViewModel />
</ListView:SfListView.BindingContext>
<ListView:SfListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid RowSpacing="0"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Source="{Binding ContactImage}"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="50"
WidthRequest="50" />
<Grid Grid.Row="0"
Grid.Column="1"
RowSpacing="2"
Padding="10,0,0,0"
VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label LineBreakMode="NoWrap"
Grid.Row="0"
TextColor="#DE000000"
Text="{Binding ContactName}"
FontFamily="Roboto"
VerticalOptions="End"
VerticalTextAlignment="End"
FontSize="{DynamicResource FontSizeLarge}" />
<Label Grid.Row="1"
Grid.Column="0"
TextColor="#99000000"
FontFamily="Roboto"
LineBreakMode="NoWrap"
VerticalOptions="Start"
VerticalTextAlignment="Start"
Text="{Binding ContactNumber}"
FontSize="{DynamicResource FontSizeBody}" />
</Grid>
<Grid Grid.Row="0"
Grid.Column="2"
RowSpacing="0"
HorizontalOptions="End"
VerticalOptions="Start"
Padding="0,10,10,0">
<Label LineBreakMode="NoWrap"
WidthRequest="70"
TextColor="#99000000"
FontFamily="Roboto"
VerticalOptions="Start"
HorizontalOptions="EndAndExpand"
HorizontalTextAlignment="End"
Text="{Binding ContactType}"
FontSize="{DynamicResource FontSizeSmall}"/>
</Grid>
</Grid>
<StackLayout Grid.Row="1"
BackgroundColor="#E4E4E4"
HeightRequest="1" />
</Grid>
</DataTemplate>
</ListView:SfListView.ItemTemplate>
</ListView:SfListView>
</ContentPage.Content>
</ContentPage>
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to set the font size in .NET MAUI ListView.
You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.
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!
