We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add cards to the ListView in Xamarin.Forms

Platform: Xamarin.Forms |
Control: SfCardLayout

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


2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile