I am working on a .NET MAUI app where I need to display a dynamic number of checkboxes (between 1 and 4) in a section of my page. The number of checkboxes and their descriptions come from a database.

For example, if I receive data like:

var items = new List<CheckBoxItem>
{
    new CheckBoxItem { Id = 1, Description = "Option 1" },
    new CheckBoxItem { Id = 2, Description = "Option 2" }
};

Then, I should display two checkboxes with their respective descriptions.

Requirements: The checkboxes should be dynamically generated based on the received data. There will always be between 1 and 4 checkboxes. Each checkbox should display its corresponding description. What I've Tried: I attempted to use a StackLayout and bind it to an ObservableCollection, but I am not sure how to properly generate and update the UI dynamically when the data changes as doing this is showing blank in UI.

How can I achieve this in MAUI? Is there a recommended way to bind this dynamically in XAML or code-behind?

I am working on a .NET MAUI app where I need to display a dynamic number of checkboxes (between 1 and 4) in a section of my page. The number of checkboxes and their descriptions come from a database.

For example, if I receive data like:

var items = new List<CheckBoxItem>
{
    new CheckBoxItem { Id = 1, Description = "Option 1" },
    new CheckBoxItem { Id = 2, Description = "Option 2" }
};

Then, I should display two checkboxes with their respective descriptions.

Requirements: The checkboxes should be dynamically generated based on the received data. There will always be between 1 and 4 checkboxes. Each checkbox should display its corresponding description. What I've Tried: I attempted to use a StackLayout and bind it to an ObservableCollection, but I am not sure how to properly generate and update the UI dynamically when the data changes as doing this is showing blank in UI.

How can I achieve this in MAUI? Is there a recommended way to bind this dynamically in XAML or code-behind?

• windows
• xaml
• maui

• please show us what you've tried and explain the specific problems you are having – Jason Commented Feb 3 at 15:06

2 Answers 2

To dynamically generate and display a variable number of CheckBoxes (between 1 and 4) in a .NET MAUI app based on data from a database, you can achieve this using data binding with an ObservableCollection. Since you're seeing a blank UI, it’s likely due to incorrect binding or UI updates not being triggered properly.

Here's a step-by-step approach to solving this:

Approach: Using ItemsLayout (e.g., CollectionView) for Dynamic Binding Instead of manually adding CheckBoxes to a StackLayout, using CollectionView or ListView with data binding is the recommended way in MAUI, as it handles dynamic updates and data changes efficiently.

Define the Model (CheckBoxItem.cs)

 public class CheckBoxItem
    {
        public int Id { get; set; }
        public string Description { get; set; }
        public bool IsChecked { get; set; }  // To track the checkbox state
    }

XAML Layout(MainPage.xaml)

    <VerticalStackLayout Padding="20">
        <Label Text="Select Options:" FontSize="24" />

        <!-- CollectionView to bind CheckBoxes -->
        <CollectionView ItemsSource="{Binding CheckBoxItems}"
                        x:Name="CheckBoxCollection"
                        SelectionMode="None">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" Padding="5">
                        <CheckBox IsChecked="{Binding IsChecked}" />
                        <Label Text="{Binding Description}" VerticalOptions="Center" Margin="10,0,0,0"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <!-- Button to Load Data -->
        <Button Text="Load CheckBoxes" Clicked="OnLoadCheckBoxesClicked" />
    </VerticalStackLayout>
</ContentPage>

Code-Behind (MainPage.xaml.cs)

using System.Collections.ObjectModel;
namespace YourNamespace;

public partial class MainPage : ContentPage
{
    // ObservableCollection to bind to the CollectionView
    public ObservableCollection<CheckBoxItem> CheckBoxItems { get; set; } = new ObservableCollection<CheckBoxItem>();

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;  // Set the BindingContext to the current page
    }

    // Simulating data retrieval and populating the CheckBoxItems
    private void OnLoadCheckBoxesClicked(object sender, EventArgs e)
    {
        // Simulate getting data from a database
        var itemsFromDatabase = new List<CheckBoxItem>
        {
            new CheckBoxItem { Id = 1, Description = "Option 1" },
            new CheckBoxItem { Id = 2, Description = "Option 2" },
            new CheckBoxItem { Id = 3, Description = "Option 3" },
            // Add more items as needed, up to 4
        };

        // Clear existing items and add new data
        CheckBoxItems.Clear();

        foreach (var item in itemsFromDatabase.Take(4))  // Limit to 4 items
        {
            CheckBoxItems.Add(item);
        }
    }
}

You can use the BindableLayout in .NET MAUI to dynamically generate and display checkboxes based on the received data. First, you need to create a viewmodel like this:

public class MainViewModel
{
    public ObservableCollection<CheckboxItem> Checkboxes { get; set; }

    public MainViewModel()
    {
        Checkboxes = new ObservableCollection<CheckboxItem>
        {
            new CheckboxItem { IsChecked = false, Label = "Option 1" },
            new CheckboxItem { IsChecked = false, Label = "Option 2" },
            new CheckboxItem { IsChecked = false, Label = "Option 3" },
            new CheckboxItem { IsChecked = false, Label = "Option 4" }
        };
    }
}

public class CheckboxItem
{
    public bool IsChecked { get; set; }
    public string Label { get; set; }
}

Second, you need to use BindableLayout to bind the checkboxes.

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

    <StackLayout>
        <StackLayout BindableLayout.ItemsSource="{Binding Checkboxes}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Label}" />
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </StackLayout>

Last, you need to write a method to update the checkbox.

public void UpdateCheckboxes(List<CheckboxItem> newCheckboxes)
{
    Checkboxes.Clear();
    foreach (var checkbox in newCheckboxes)
    {
        Checkboxes.Add(checkbox);
    }
}

With this setup, the BindableLayout will dynamically generate the checkboxes based on the data in the Checkboxes collection. You can update this collection as needed, and the UI will reflect the changes. Besides, more information about BindableLayout