Building a layout dynamically based on a collection

A bindable layout is a technique that allows you to generate similar UI elements without repeating XAML code blocks. Let’s imagine you need to display a list of actions, and this list is dynamically retrieved from a web API service. A possible solution for this task is to add buttons to your view in C#, but .NET MAUI provides a more convenient way with the BindableLayout.ItemsSource property. Let’s see how to utilize it.

Getting ready

To follow the steps described in this recipe, we just need to create a blank .NET MAUI application. The default template includes sample code in the MainPage.xaml and MainPage.xaml.cs files, but you can remove it and leave only a blank ContentPage in XAML and a constructor with the InitializeComponent method in CS. When copying code snippets with namespaces, don’t forget to replace them with the namespaces in your project.

The code for this recipe is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter01/c1-BindableLayout.

How to do it…

Let’s generate buttons with a predefined template, using VerticalStackLayout and the BindableLayout class. We will generate buttons from a collection of custom non-visual objects. Let’s name the class containing information about these objects ActionInfo:

1. Create a MyViewModel class and define a collection of items that will store information about your buttons:

   MyViewModel.cs

   public class MyViewModel {
       public ObservableCollection<ActionInfo> DynamicActions { 
         get; set; }
       public MyViewModel() {
           DynamicActions = new ObservableCollection<ActionInfo> {
               new ActionInfo() { Caption = "Action1" },
               new ActionInfo() { Caption = "Action2" },
               new ActionInfo() { Caption = "Action3" }
           };
       }
   }
   public class ActionInfo {
       public string Caption { get; set; }
   }

2. Assign the view model to the page’s BindableContext:

   <ContentPage.BindingContext>
       <local:MyViewModel/>
   </ContentPage.BindingContext>

3. Set the BindableLayout.ItemsSource and BindableLayout.ItemTemplate properties at the VerticalStackLayout level:

   <VerticalStackLayout BindableLayout.ItemsSource="{Binding DynamicActions}" Spacing="5">
       <BindableLayout.ItemTemplate>
           <DataTemplate x:DataType="{x:Type local:ActionInfo}">
               <Button Text="{Binding Caption}"/>
           </DataTemplate>
       </BindableLayout.ItemTemplate>
   </VerticalStackLayout>

Once you run the code, you should see the following output:

Figure 1.7 – A bindable layout

How it works…

BindableLayout generates elements from a collection and adds them to the panel to which it’s attached. It can work with all elements that implement the IBindableLayout interface. This interface is implemented in the layout abstract class, which is a base class for all layouts – StackLayout, HorizontalStackLayout, Grid, FlexLayout, and AbsoluteLayout.

BindableLayout takes each item in the ItemsSource collection and generates the UI for it, which is defined in ItemTemplate. To allow you to easily bind to properties in your model, BindableLayout assigns your model to BindingContext of ItemTemplate. That’s why you can bind the button’s Text property to Caption, defined in the ActionInfo class.

Here is a code snippet that demonstrates how BindableLayout generates items:

View CreateItemView(object item, DataTemplate dataTemplate)
{
    if (dataTemplate != null)
    {
        var view = (View)dataTemplate.CreateContent();
        view.BindingContext = item;
        return view;
    }
    else
    {
        return new Label
        {
            Text = item?.ToString(),
            HorizontalTextAlignment = TextAlignment.Center
        };
    }
}

As you can see, if DataTemplate is not defined, it simply creates a label with a string representation of your object.

There’s more…

Here are a couple of additional tips you may find useful when using BindableLayout:

• Define the BindableLayout.EmptyViewTemplate template to show a message to a user when the source collection is empty:

  <BindableLayout.EmptyViewTemplate>
      <DataTemplate>
          <Label Text="There are no actions"/>
      </DataTemplate>
  </BindableLayout.EmptyViewTemplate>

• When generated elements exceed the space available on the screen, these elements will be cut. As such, if you need to enable scrolling, you need to wrap a panel that is used with BindableLayout within ScrollView. Typically, an even better solution is to use CollectionView. When you need to customize the way items are arranged in it, you can use the ItemsLayout property. For example, to generate items and show them in two columns, use GridItemsLayout as follows:

   <CollectionView ItemsSource="{Binding Tiles}">
      <CollectionView.ItemsLayout>
         <GridItemsLayout Orientation="Vertical"
                          Span="2" />
      </CollectionView.ItemsLayout>
  </CollectionView>

  CollectionView uses a virtualization mechanism, which means that it reuses visual elements as you scroll. This prevents performance issues when dealing with a long list of items.