BindableLayout in MAUI Cards

Layout<T> introduces a feature called BindableLayout, which works with all layouts derived from Layout<T>. By simply setting the ItemTemplate and ItemsSource, BindableLayout automatically generates a group of UI elements (based on the provided ItemTemplate) for each data item in the ItemsSource and adds 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.

XAML

<ContentPage.BindingContext>

<local:ViewModel/>

</ContentPage.BindingContext>

C#

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

<cards:SfCardLayout BindableLayout.ItemsSource="{Binding Model.Colors}">
…
</cards:SfCardLayout>

C#

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

<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>

C#

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;