Skip to content

This repository contains sample about how to set the font size for Xamarin.Forms ListView (SfListView)

Notifications You must be signed in to change notification settings

SyncfusionExamples/font-size-listview-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How to set the font size for Xamarin.Forms ListView (SfListView)

You can set the FontSize for all the elements inside Xamarin.Forms SfListView with size in physical devices of the same size by defining the font size based on the width and height of the page.

You can also refer the following article.

https://www.syncfusion.com/kb/11403/how-to-set-the-font-size-for-xamarin-forms-listview-sflistview

C#

Triggered SizeChanged event of the ContentPage and defined the font size with the Key. Added the key to the Resources.

namespace ListViewXamarin
{
    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 DynamicResource binding to the FontSize property.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
 
  <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <Grid x:Name="grid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
                            <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                <Label LineBreakMode="NoWrap" FontSize="{DynamicResource FontSizeSubtitle}" TextColor="#474747" Text="{Binding ContactName}"/>
                                <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" FontSize="{DynamicResource FontSizeSmall}" Text="{Binding ContactNumber}"/>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Output

FontSizeListView

About

This repository contains sample about how to set the font size for Xamarin.Forms ListView (SfListView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages