Articles in this section
Category / Section

How to add cards to the ListView in Xamarin.Forms

1 min read

It is a common use case to show the cards in a Xamarin.Forms.ListView. So that UI will be clean, and we need not worry about the memory usage, as the ListView by default handles the UI virtualization.  This section describes how to bind a SfCardView instance for each row in the list.

Consider showing a list of social media applications as cards in a Xamarin.Forms application as below.

 

Cards in listview

 

 

 

[XAML]

xmlns:cards="clr-namespace:Syncfusion.XForms.Cards;assembly=Syncfusion.Cards.XForms"
 
..
 
<!--  Binding the View Model  -->
 
    <ContentPage.BindingContext>
        <viewmodel:SocialMediaAppViewModel />
    </ContentPage.BindingContext>
 
<!--  ListView  as parent layout  -->
        <ListView
            x:Name="EventListView"
            ItemsSource="{Binding Items}"
            RowHeight="100"
            SeparatorVisibility="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
 
                        <!--  CardView as its DataTemplate  -->
                        <cards:SfCardView Margin="10">
                            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                <StackLayout Orientation="Horizontal">
                                    <Image
                                        Margin="10,0,0,0"
                                        HeightRequest="40"
                                        Source="{Binding Image}"
                                        WidthRequest="40" />
                                    <Label
                                        Margin="10,0,0,0"
                                        FontAttributes="Bold"
                                        FontSize="16"
                                        HorizontalOptions="Start"
                                        LineBreakMode="NoWrap"
                                        MaxLines="1"
                                        Text="{Binding Title}"
                                        TextColor="Black"
                                        VerticalOptions="Center" />
                                </StackLayout>
                            </Grid>
                        </cards:SfCardView>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

 [C#]

public class SocialMediaAppModel
{
    public string Title {get; set;}
 
    public string Image {get; set;}
}

 [C#]

public class SocialMediaAppViewModel
{
   public IEnumerable< SocialMediaAppModel > Items { get; set; }
 
        public SocialMediaAppViewModel ()
        {
            Items = new SocialMediaAppModel []
            {
                new SocialMediaAppModel (){ Title = "Facebook" , Image = "FacebookFill.png"},
                new SocialMediaAppModel (){ Title = "Gmail" , Image = "GmailFill.png"},
                new SocialMediaAppModel (){ Title = "Instagram" , Image = "InstagramFill.png"},
                new SocialMediaAppModel (){ Title = "WhatsApp" , Image = "WhatsappFill.png"},
            };
        }
}

 

You can get the complete sample from this Gitlab location.

See Also

How to notify the tapped action on cards

How to dismiss the card programmatically

How to dismiss the card while swiping

How to find the visible card index changed


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied