Category / Section
How to set the font size for .NET MAUI ListView (SfListView) ?
2 mins read
You can set the font size for all the elements inside .NET MAUI ListView (SfListView) with size in physical devices of the same size by defining the font size based on the width and height of the page.
C#
Triggered SizeChanged event of the ContentPage and defined the font size with the Key. Added 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>
