Databinding doesn't work for list in xamarin

Question

I'm currently working on building views with data binding in my Xamarin app. However, I've encountered an issue where the list, specifically the "ChecklistSections," doesn't get updated when I modify its values. Strangely, when I attempt to update the text for buttons, the data binding works perfectly fine. But for some reason, it's not working as expected for the list.

I'm looking for a solution to ensure that the "ChecklistSections" list gets updated properly through data binding, just like the buttons' text. Any insights or suggestions on how to resolve this data binding issue for the list would be greatly appreciated!

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:xxx.xxx.ExternalDisplay.App.ViewModels"
             xmlns:converters="clr-namespace:xxx.xxx.ExternalDisplay.App.Converters"
             xmlns:model="clr-namespace:xxx.xxx.ExternalDisplay.Core.Models;assembly=xxx.xxx.ExternalDisplay.Core"
             x:Class="xxx.xxx.ExternalDisplay.App.Views.Checklist"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:DataType="viewModels:ChecklistViewModel"
             NavigationPage.HasNavigationBar="False"
             BackgroundColor="Black">

<ContentPage.Resources>
    <ResourceDictionary>
        <xct:InvertedBoolConverter x:Key="InvertedBoolConverter" />
        <converters:CheckedColorConverter x:Key="CheckedColorConverter" />
        <converters:InverseBooleanConverter x:Key="InverseBooleanConverter" />
        
    </ResourceDictionary>
</ContentPage.Resources>

<StackLayout Padding="10">
    <Label Text="Checklist Items" FontSize="Large" TextColor="White" HorizontalOptions="Center" VerticalOptions="StartAndExpand" Margin="0,20,0,0" />
    <Grid>
        <ListView ItemsSource="{Binding ChecklistSections}" HasUnevenRows="True"
                  HorizontalOptions="FillAndExpand"
                  VerticalOptions="FillAndExpand"
                  Margin="0,10,0,0">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="model:ChecklistSection">
                    <ViewCell>
                        <StackLayout Padding="10">
                            <!-- Add padding to the StackLayout to create free space on all sides -->
                            <Label Text="{Binding ChecklistCategory.Name}" FontAttributes="Bold" Padding="5,0,0,0" FontSize="Header" TextColor="White" />

                            <StackLayout BindableLayout.ItemsSource="{Binding ChecklistItems}">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate x:DataType="model:ChecklistItem">
                                        <StackLayout Padding="15" Orientation="Vertical" BackgroundColor="Purple">
                                            <StackLayout Orientation="Horizontal">
                                                <Label Text="{Binding ItemText}" FontSize="Large" TextColor="White" VerticalOptions="Center"/>
                                                <StackLayout HorizontalOptions="End" Orientation="Horizontal" VerticalOptions="End" >
                                                    <CheckBox IsChecked="{Binding Value}" Color="Green" WidthRequest="40" HeightRequest="40"
                                                              CheckedChanged="GreenCheckBox_CheckedChanged"   />
                                                    <CheckBox IsChecked="{Binding Value, Converter={StaticResource InverseBooleanConverter}}" Color="Red" WidthRequest="40" HeightRequest="80" MinimumHeightRequest="50"
                                                              CheckedChanged="RedCheckBox_CheckedChanged" />
                                                    <BoxView Color="{Binding Value, Converter={StaticResource CheckedColorConverter}}" 
                                                             HeightRequest="20" 
                                                             WidthRequest="20" 
                                                             VerticalOptions="Center"
                                                             HorizontalOptions="CenterAndExpand"
                                                             Margin="5,0,0,0">

                                                        <BoxView.GestureRecognizers>
                                                            <TapGestureRecognizer Tapped="BoxView_Tapped" />
                                                        </BoxView.GestureRecognizers>

                                                    </BoxView>
                                                </StackLayout>
                                            </StackLayout>
                                            <Editor  HorizontalOptions="FillAndExpand" TextColor="White"/>
                                        </StackLayout>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
    <Button Text="{Binding ButtonText}" Command="{Binding SubmitCommand}" BackgroundColor="{StaticResource PrimaryAccentColor}" BorderRadius="10" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" VerticalOptions="EndAndExpand" Margin="0,20" />
</StackLayout>

This is how I update the Checklist sections:

var a = ChecklistSections;

        foreach (var section in a)
        {
            var itemToUpdate = section.ChecklistItems.FirstOrDefault(item => item.Id == checklistItem.Id);
            if (itemToUpdate != null)
            {
                itemToUpdate.Value = value;

                // next two lines just for testing databinding
                ButtonText = itemToUpdate.ItemText;
                a[0].ChecklistCategory.Name = "hi hi hi";
                break; // Exit the loop after updating the item
            }
        }

        ChecklistSections = a;

checklistsections:

   private ObservableCollection<ChecklistSection> _checklistSections;
        public ObservableCollection<ChecklistSection> ChecklistSections
        {
            get => _checklistSections;
            set
            {
                {
                    _checklistSections = value;
                    OnPropertyChanged(nameof(ChecklistSections));
                }
            }
        

Answer 1

If you want the UI refresh automatically once changing the value of the bind property (e.g. ItemText), please recheck if you have implemented interface INotifyPropertyChanged for your model.

For example:

public class YourItemModel: INotifyPropertyChanged
    {            

        private string _itemText ;
        public string ItemText 
        {
            get => _itemText;
            set
            {
                SetProperty(ref _itemText, value);
            }
        }


        bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Object.Equals(storage, value))
                return false;
            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;

    }

Note:

1. From document ObservableCollection Class,we could find that:

ObservableCollection<T> represents a dynamic data collection that provides notifications when items get added or removed, or when the whole list is refreshed.

So, if you want to the UI refresh automatically once changing the value of the item model, it is useless to use code ObservableCollection<ChecklistSection> ChecklistSections.

2.It is recommended that you modify the value of the child element attribute directly on variable ChecklistSections instead of using intermediate variable a.

   //var a = ChecklistSections;

    foreach (var section in ChecklistSections)
    {
        //....
    }

    //ChecklistSections = a;

3.From you code, I find that you want to change the value of ButtonText and the value of property Name of ChecklistCategory, then you also need to implement interface INotifyPropertyChanged for your corresponding model.

      if (itemToUpdate != null)
        {
            itemToUpdate.Value = value;

            // next two lines just for testing databinding
            ButtonText = itemToUpdate.ItemText;
            a[0].ChecklistCategory.Name = "hi hi hi";
            break; // Exit the loop after updating the item
        }