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.

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

  • C#
  • 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