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.

XAML
C#
<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.

XAML
C#
<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.

XAML
C#
<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;

BindableLayout in Xamarin Cards

Initialize view model

Populate CardLayout with data

Define the appearance of SfCardView

See also