Issue with ObservableCollection in .net MAUI

Question

When I open the app it reads the sqlite database and populates the ListView however when I add a new entry to the address book (by going to the "new address page") it doesn't refresh the ListView until I exit the app and come back in.

MainPage XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"  
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                 x:Class="MVVMAddressBook.Views.MainPage"  
                 xmlns:nav="clr-namespace:MVVMAddressBook.ViewModels"  
                 Title="MainPage">  
        <Grid>  
            <Grid.RowDefinitions>  
                <RowDefinition Height=".9*"></RowDefinition>  
                <RowDefinition Height=".1*"></RowDefinition>  
            </Grid.RowDefinitions>  
            <VerticalStackLayout Grid.Row="0">  
                <Label Text="Address Book"   
                   HorizontalOptions="Center">  
                </Label>  
                <ListView x:Name="listx"   
                          ItemsSource="{Binding AddressList}"  
                          VerticalScrollBarVisibility="Always"  
                          Grid.Row="0">  
                    <ListView.ItemTemplate>  
                        <DataTemplate>  
                            <ViewCell>  
                                <Grid Margin="10,0,10,0">  
                                    <Grid.RowDefinitions>  
                                        <RowDefinition Height="Auto" />  
                                    </Grid.RowDefinitions>  
                                    <Grid.ColumnDefinitions>  
                                        <ColumnDefinition Width="30*" />  
                                        <ColumnDefinition Width="30*" />  
                                        <ColumnDefinition Width="30*" />  
                                    </Grid.ColumnDefinitions>  
                                    <Label  Grid.Column="0" Text="{Binding ID}"/>  
                                    <Label  Grid.Column="1" Text="{Binding FirstName}"/>  
                                    <Label Grid.Column="2" Text="{Binding LastName}"/>  
                                </Grid>  
                            </ViewCell>  
                        </DataTemplate>  
                    </ListView.ItemTemplate>  
                </ListView>  
            </VerticalStackLayout>  
            <Button Text="Add New Address"  
                    HeightRequest="40"  
                    Grid.Row="1"   
                    Command="{Binding newAddressComand}"  
                    HorizontalOptions="Center">  
            </Button>  
        </Grid>  
    </ContentPage>  

MainPage code behind

using MVVMAddressBook.Models;  
using MVVMAddressBook.ViewModels;  
  
namespace MVVMAddressBook.Views;  
  
public partial class MainPage : ContentPage  
{  
 public MainPage()  
 {  
 InitializeComponent();                 
       BindingContext = new MainPageViewModel(Navigation);  
    }  
  
}  
  

ViewModel Page

namespace MVVMAddressBook.ViewModels  
{  
    [AddINotifyPropertyChangedInterface]  
    public class MainPageViewModel  
    {  
        public ICommand newAddressComand => new Command(() => GetCommand());  
        public INavigation Navigation { get; set; }  
  
        SQLiteConnection _connection;  
                  
        private ObservableCollection<Addresses> addressList;  
  
        public ObservableCollection<Addresses> AddressList  
        {  
            get { return addressList; }  
            set { addressList = value; }  
        }  
  
  
        public MainPageViewModel(INavigation navigation)  
        {            
            this.Navigation = navigation;  
            PopulateList();  
        }  
          
        // Go to new address page  
        public async void GetCommand()  
        {  
            await Navigation.PushAsync(new NewAddress());  
        }  
  
        public void PopulateList()  
        {  
            try  
            {                  
                var dbPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "address.db");  
                _connection = new SQLiteConnection(dbPath);  
                var result = _connection.CreateTable<Addresses>();  
            }  
            catch (Exception ex)  
            {  
                Debug.WriteLine("Error = " + ex.Message);  
            }  
            AddressList = new ObservableCollection<Addresses>(_connection.Table<Addresses>().ToList());    
        }  
    }  
}  

after I add an address to the AddressList it doesn't show up in the ListView. Here is the code for the NewAddressViewModel.

Thank you :-)

namespace MVVMAddressBook.ViewModels  
{  
    [AddINotifyPropertyChangedInterface]  
    public class NewAddressViewModel : IContractAddresses  
    {  
        public ICommand saveCommand => new Command(() => GetSaveCommand());  
        public ICommand cancelCommand => new Command(() => GetCancelCommand());  
  
        public string FirstNameEntry { get; set; }    
        public string LastNameEntry { get; set; }  
        public string PhoneNumberEntry { get; set; }  
        public string AddressEntry { get; set; }  
        public string CityEntry { get; set; }  
        public string GenderEntry { get; set; }  
  
        SQLiteConnection _connection;  
        public INavigation Navigation { get; set; }  
        //Constructor  
        public NewAddressViewModel(INavigation navigation )  
        {  
            this.Navigation = navigation;  
            try  
            {  
                //Initialize database and create table  
                var dbPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "address.db");  
                _connection = new SQLiteConnection(dbPath);  
                var result = _connection.CreateTable<Addresses>();  
            }  
            catch (Exception ex)  
            {  
                Debug.WriteLine("Error1 = " + ex.Message);  
            }  
        }  
  
        // Write to Database  
        public void GetSaveCommand()  
        {  
            Addresses addresses = new Addresses()  
            {  
                FirstName = FirstNameEntry,  
                LastName = LastNameEntry,  
                PhoneNumber = PhoneNumberEntry,  
                Address = AddressEntry,  
                City = CityEntry,  
                Gender = GenderEntry  
            };  
            try  
            {  
                var result = addresses;  
                var res = AddContact(addresses);  
                var res1 = _connection.Table<Addresses>().Count();  
                  
                var resk = GetContact(0);                  
            }  
            catch(Exception ex)  
            {  
                Debug.WriteLine("Error: " + ex.Message);   
            }  
        }  
  
  
        public void GetCancelCommand()  
        {  
            Debug.WriteLine("Cancel");  
            _connection.DropTable<Addresses>();  
            Navigation.PopAsync();  
        }  
          
  
        public Task<IEnumerable<Addresses>> GetContactsAsync()  
        {  
            throw new NotImplementedException();  
        }  
  
        public Addresses GetContact(int id)  
        {  
            try  
            {  
                var resu = _connection.Table<Addresses>().ToList();                  
            }  
            catch(Exception ex)  
            {  
                Debug.WriteLine("Get contact error = " + ex.Message);  
            }             
            return null;              
        }  
  
        public int AddContact(Addresses address)         
        {  
            try  
            {  
               int ret = _connection.Insert(address);  
                Debug.WriteLine("Insert error = " );  
                MainPageViewModel mainPageViewModel = new MainPageViewModel(null);  
                mainPageViewModel.PopulateList();  
            }  
            catch(Exception ex)  
            {       
                Debug.WriteLine("Insert error = " + ex.Message);                  
            }  
            return 0;  
        }  
  
        public Task UpdateContact(Addresses address)  
        {  
            throw new NotImplementedException();  
        }  
  
        public Task DeleteContact(Addresses address)  
        {  
            throw new NotImplementedException();  
        }  
          
    }  
}  

Address Model

public class Addresses  
    {  
        [PrimaryKey, AutoIncrement]  
        public int ID { get; set; }  
        public string FirstName { get; set; }  
        public string LastName { get; set; }  
        public string PhoneNumber { get; set; }  
        public string Address { get; set; }  
        public string City { get; set; }  
        public string Gender { get; set; }  
    }  

Thank you in advance
Heinz

Answer 1

Hello,​

If you want to update the Listview when you navigated back to the MainPage. You need to add EventToCommandBehavior in your MainPage(Note: before use it, you need to install CommunityToolkit.Maui nuget package). When MainPage Appearing event is executed, then you can execute a command to get new data again in your MainPageViewModel.

Here are steps to achieve it.

Firstly, search CommunityToolkit.Maui in your Nuget Package manager (click Tools->Nuget Package manager->Manage nuget packages for solution). Install it, then open you MauiProgram.cs, add following code on CreateMauiApp method in order to initialize CommunityToolkit.Maui

   builder.UseMauiApp<App>().UseMauiCommunityToolkit();  

Then We can add EventToCommandBehavior in MainPage. Add xmlns:behaviors prefix and ContentPage.Behaviors

   <ContentPage   
   ....  
                xmlns:behaviors="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"  
   ....  
      >  
   <ContentPage.Behaviors>  
           <behaviors:EventToCommandBehavior EventName="Appearing" Command="{Binding PageAppearingCommand}">  
           </behaviors:EventToCommandBehavior>         
       </ContentPage.Behaviors>  

In the end, achieve PageAppearingCommand method: clear AddressList, get the latest data from SQLite DB and populate the latest data to AddressList in MainPageViewModel.cs.

   public ICommand PageAppearingCommand => new Command(() => GetPopulateList());  
     
       private void GetPopulateList()  
       {  
           List<Addresses>  addresses= _connection.Table<Addresses>().ToList();  
           AddressList.Clear();  
           foreach (Addresses address in addresses)  
           {  
               AddressList.Add(address);  
           }  
       }  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I don't know if this will help, but in your model you need to make the fields bindable as well even when using community toolkit.
e.g here's an example from some code I used

   namespace TSDZ2Monitor.Models;  
     
   public partial class BluetoothData : ObservableObject  
   {  
     //Heart rate raw data  
     private int hRM;  
     public int HRM  
     {  
       get => hRM;  
       set => SetProperty(ref hRM, value);   //<---this bit is the important idea  
     
     }  
   ...  
   }  

Answer 3

Yes Viorel, after I add an address to the AddressList it doesn't show up in the ListView. Here is the code for the NewAddressViewModel.

Thank you :-)

namespace MVVMAddressBook.ViewModels  
{  
    [AddINotifyPropertyChangedInterface]  
    public class NewAddressViewModel : IContractAddresses  
    {  
        public ICommand saveCommand => new Command(() => GetSaveCommand());  
        public ICommand cancelCommand => new Command(() => GetCancelCommand());  
  
        public string FirstNameEntry { get; set; }    
        public string LastNameEntry { get; set; }  
        public string PhoneNumberEntry { get; set; }  
        public string AddressEntry { get; set; }  
        public string CityEntry { get; set; }  
        public string GenderEntry { get; set; }  
  
        SQLiteConnection _connection;  
        public INavigation Navigation { get; set; }  
        //Constructor  
        public NewAddressViewModel(INavigation navigation )  
        {  
            this.Navigation = navigation;  
            try  
            {  
                //Initialize database and create table  
                var dbPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "address.db");  
                _connection = new SQLiteConnection(dbPath);  
                var result = _connection.CreateTable<Addresses>();  
            }  
            catch (Exception ex)  
            {  
                Debug.WriteLine("Error1 = " + ex.Message);  
            }  
        }  
  
        // Write to Database  
        public void GetSaveCommand()  
        {  
            Addresses addresses = new Addresses()  
            {  
                FirstName = FirstNameEntry,  
                LastName = LastNameEntry,  
                PhoneNumber = PhoneNumberEntry,  
                Address = AddressEntry,  
                City = CityEntry,  
                Gender = GenderEntry  
            };  
            try  
            {  
                var result = addresses;  
                var res = AddContact(addresses);  
                var res1 = _connection.Table<Addresses>().Count();  
                  
                var resk = GetContact(0);                  
            }  
            catch(Exception ex)  
            {  
                Debug.WriteLine("Error: " + ex.Message);   
            }  
        }  
  
  
        public void GetCancelCommand()  
        {  
            Debug.WriteLine("Cancel");  
            _connection.DropTable<Addresses>();  
            Navigation.PopAsync();  
        }  
          
  
        public Task<IEnumerable<Addresses>> GetContactsAsync()  
        {  
            throw new NotImplementedException();  
        }  
  
        public Addresses GetContact(int id)  
        {  
            try  
            {  
                var resu = _connection.Table<Addresses>().ToList();                  
            }  
            catch(Exception ex)  
            {  
                Debug.WriteLine("Get contact error = " + ex.Message);  
            }             
            return null;              
        }  
  
        public int AddContact(Addresses address)         
        {  
            try  
            {  
               int ret = _connection.Insert(address);  
                Debug.WriteLine("Insert error = " );  
                MainPageViewModel mainPageViewModel = new MainPageViewModel(null);  
                mainPageViewModel.PopulateList();  
            }  
            catch(Exception ex)  
            {       
                Debug.WriteLine("Insert error = " + ex.Message);                  
            }  
            return 0;  
        }  
  
        public Task UpdateContact(Addresses address)  
        {  
            throw new NotImplementedException();  
        }  
  
        public Task DeleteContact(Addresses address)  
        {  
            throw new NotImplementedException();  
        }  
          
    }  
}  

Address Model

public class Addresses  
    {  
        [PrimaryKey, AutoIncrement]  
        public int ID { get; set; }  
        public string FirstName { get; set; }  
        public string LastName { get; set; }  
        public string PhoneNumber { get; set; }  
        public string Address { get; set; }  
        public string City { get; set; }  
        public string Gender { get; set; }  
    }  

Answer 4

I've having this issue with MAUI and I solved reassign the list in the command, for example:

    public ICommand EditCommand => new Command<MyClass>(Edit);
    private void Edit(MyClass detail)
    {
        if (detail != null)
        {
            this.prop1= 10; //change the value
            this.prop2=10; //change the value

           var det = Detail;
           Detail = null;
           Detail = det;  //here is the magic
        }
    }

For some reason, the list (ObservableCollection in my case, I tried using a simple List but it doesn't refresh in all the cases) is updated in the page (View) only if I set it to null and reassign it.

Why? I don't know, in Xamarin Forms I can modify some value in a record and it was refreshed.