How to enable compiled binding for Xamarin.Forms ListView (SfListView)

To reduce the CPU cycles Xamarin.Forms has introduced compiled bindings and boost performance when using data binding.

You can enable compiled binding by using the special x:DataType attribute on any VisualElement in Xamarin.Forms SfListView.

You can also refer to the following document regarding compiled bindings in Xamarin.Forms,

https://devblogs.microsoft.com/xamarin/compiled-bindings-xamarin-forms/

You can also refer the following article

https://www.syncfusion.com/kb/11807/how-to-enable-compiled-binding-for-xamarin-forms-listview-sflistview

XAML

Define namespace of the ViewModel and set BindingContext for the ContentPage.

<ContentPage xmlns:viewModel="clr-namespace:ListViewXamarin.ViewModel"
             x:DataType="viewModel:ContactsViewModel">
    <ContentPage.BindingContext>
        <viewModel:ContactsViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

You need to set up complied binding for the DataTemplate by using x:DataTye , if you are using template control like SfListView.

<ContentPage xmlns:model="clr-namespace:ListViewXamarin.Model">
    <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
        <syncfusion:SfListView.ItemTemplate>
            <DataTemplate x:DataType="model:Contacts">
                <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" TextColor="#474747" Text="{Binding ContactName}"/>
                        <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
                    </Grid>
                </Grid>
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
</ContentPage>

For SfListView.GroupHeaderTemplate, BindingContext of GroupHeaderTemplate will be GroupResult which can be accessed from the Syncfusion.DataSource.Extensions of Syncfusion.DataSource.

<ContentPage xmlns:result="clr-namespace:Syncfusion.DataSource.Extensions;assembly=Syncfusion.DataSource.Portable">
    <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
        <syncfusion:SfListView.GroupHeaderTemplate>
            <DataTemplate x:DataType="result:GroupResult">
                <Grid BackgroundColor="#E4E4E4">
                    <Label Text="{Binding Key}" FontSize="18" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Start" Margin="20,0,0,0" />
                </Grid>
            </DataTemplate>
        </syncfusion:SfListView.GroupHeaderTemplate>
    </syncfusion:SfListView>
</ContentPage>

Output