|
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.
[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
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
