BindableLayout in Xamarin Cards
12 May 20215 minutes to read
From version 3.5, Xamarin.Forms has introduced a new approach, called BindableLayout, which works with all the layouts that are derived from Layout<T>. By simply setting ItemTemplate and ItemsSource, BindableLayout creates a group of UI (for the given ItemTemplate) for every data in the ItemsSource and add them as children.
Since SfCardLayout
is an extended class of Layout<T>, this approach is also possible for SfCardLayout.
Initialize view model
Define a simple data model that represents data to be populated for SfCardLayout
.
public class Model
{
public IEnumerable<string> Colors { get; set; }
}
Next, create a view model class and initialize a model object as demonstrated in the following code sample.
public class ViewModel
{
public Model Model { get; set; }
public ViewModel()
{
Model = new Model
{
Colors = new string[]
{
"Cyan", "Yellow", "Orange"
}
};
}
}
Set the ViewModel instance as BindingContext of your page to bind properties of ViewModel to SfCardLayout
.
NOTE
Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.
<ContentPage.BindingContext>
<local:ViewModel></local:ViewModel>
</ContentPage.BindingContext>
this.BindingContext = new ViewModel();
Populate CardLayout with data
SfCardLayout
can be populated with data by setting the ItemSource property of BindableLayout to a collection of items that can be used in SfCardView
.
<cards:SfCardLayout BindableLayout.ItemsSource="{Binding Model.Colors}">
…
</cards:SfCardLayout>
SfCardLayout cardLayout = new SfCardLayout();
BindableLayout.SetItemsSource(cardLayout, viewModel.Model.Colors);
Define the appearance of SfCardView
SfCardLayout
accepts only SfCardView
as its child. The appearance of each SfCardView
can be defined by setting the BindableLayout.ItemTemplate property.
<cards:SfCardLayout BindableLayout.ItemsSource="{Binding Model.Colors}" SwipeDirection="Left" VerticalOptions="Center" HeightRequest="300" WidthRequest="300" BackgroundColor="#F0F0F0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<cards:SfCardView BackgroundColor="{Binding}">
<Label Text="{Binding}" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center"/>
</cards:SfCardView>
</DataTemplate>
</BindableLayout.ItemTemplate>
</cards:SfCardLayout>
SfCardLayout cardLayout = new SfCardLayout()
{
SwipeDirection = CardSwipeDirection.Left,
BackgroundColor = Color.FromHex("#F0F0F0"),
VerticalOptions = LayoutOptions.Center,
HeightRequest = 300,
WidthRequest = 300,
};
this.BindingContext = viewModel;
DataTemplate dataTemplate = new DataTemplate(() =>
{
SfCardView cardView = new SfCardView();
cardView.SetBinding(SfCardView.BackgroundColorProperty, new Binding() { Path = "."});
Label label = new Label()
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalTextAlignment = TextAlignment.Center
};
label.SetBinding(Label.TextProperty, new Binding() { Path= "."});
cardView.Content = label;
return cardView;
});
BindableLayout.SetItemTemplate(cardLayout, dataTemplate);
BindableLayout.SetItemsSource(cardLayout, viewModel.Model.Colors);
this.Content = cardLayout;
See also
How to remove cards from card view collection in Xamarin.Forms
How to set shadow effect to the cards in Xamarin.Forms
How to add cards to the ListView in Xamarin.Forms
How to reuse the dismissed cards in Xamarin.Forms SfCardView