How To Load Xamarin.Forms Sflistview With Background Image?

Sample date Updated on Sep 13, 2025
xamarin xamarin-forms xamarin-listview

This example demonstrates how to load an background image for listview in Xamarin.Forms.

Sample

        <Grid>
            <Image Source="{Binding BackgroundImage}" Aspect="AspectFill"/>
            <syncfusion:SfListView x:Name="listView" SelectionMode="None" Margin="5"
                                   ItemSize="70"
                                   ItemsSource="{Binding contactsinfo}">
                <syncfusion:SfListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Label Text="{Binding Key}" TextColor="White" FontAttributes="Bold" FontSize="24"/>
                        </ViewCell>
                    </DataTemplate>
                </syncfusion:SfListView.GroupHeaderTemplate>

                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid x:Name="grid" RowSpacing="0">

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="1" />
                                    </Grid.RowDefinitions>
                                    <Grid RowSpacing="0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <Grid Grid.Column="1"
                          RowSpacing="1"
                          Padding="10,0,0,0"
                          VerticalOptions="Center">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>

                                            <Label  Text="{Binding ContactName}" TextColor="White" FontSize="18"/>
                                            <Label Grid.Row="1" Grid.Column="0" TextColor="White" FontSize="18"
                                                  Text="{Binding ContactNumber}">

                                            </Label>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>

            </syncfusion:SfListView>
        </Grid>

See How to load Xamarin.Forms SfListView with background image? for more details.

Requirements to run the demo

Troubleshooting

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

Up arrow