如何将ListView绑定到集合并实时刷新它

Question

I am binding my ListView to my Realm database, but it doesn't refresh it when I add a new item into it. I am adding new items using another page.

I am using here as reference: https://help.syncfusion.com/xamarin/sflistview/mvvm#binding-itemssource

My Model:

public class Category : RealmObject
    {
        [PrimaryKey]
        public string CategoryID { get; set; } = Guid.NewGuid().ToString();

        public string CategoryTitle { get; set; }

        public string CategoryDetails { get; set; }

        [Backlink(nameof(Note.CategoryOfNote))]
        public IQueryable<Note> Notes { get; }

        public string CategoryIcon { get; set; }
        public bool IsExpanded { get; set; }
    }

My XAML file containing ListView

<ContentPage.BindingContext>
        <vm:MainViewModel />
    </ContentPage.BindingContext>
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="NEWCAT" 
                     Clicked="NewCat_Clicked"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Content>

        <ListView x:Name="categoryList"
                  ItemsSource="{Binding Categories}"
                  ItemTapped="ListView_ItemTapped"
                  HasUnevenRows="True">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Vertical" 
                                     HorizontalOptions="FillAndExpand"
                                     Padding="10"
                                     Spacing="10">
                            <Label Text="{Binding Path=CategoryTitle}" 
                                   FontSize="Medium"/>
                            <StackLayout IsVisible="{Binding IsExpanded}" 
                                         Orientation="Horizontal"
                                         HorizontalOptions="CenterAndExpand">
                                <Button Text="Notes"
                                        Clicked="NotesButton_Clicked" />
                                <Button Text="Edit" 
                                        Clicked="EditButton_Clicked"/>
                                <Button Text="Delete"
                                        Clicked="DeleteButton_Clicked"/>
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>

And my ViewModel (DBServices.GetCategories is a static method that returns a collection of categories from Realm DB. And BaseViewModel implements INotifyPropertyChanged)

class MainViewModel : BaseViewModel
    {

        private Category _oldCategory;
        public MainViewModel()
        {
            RefreshCategories();
        }

        private void RefreshCategories()
        {
            Categories = new ObservableCollection<Category>(DBServices.GetCategories());
        }


        private ObservableCollection<Category> _Categories;
        public ObservableCollection<Category> Categories
        {
            get
            {
                return _Categories;
            }
            set
            {
                _Categories = value;
                OnPropertyChanged("Categories");
            }
        }
    }

This is OnPropertyChanged method in BaseViewModel class

protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

When I click to the toolbar button, it pushes a new form page to create a new category. Then it just adds that category to the Realm DB. Afterwards it pops itself. But I see no change in my ListView.

EDIT: I can see new items in ListView when I restarted the app. But I want it to be listed as I add them.

Answer 1

To test the XAML and ViewModel only, try replacing DBServices.GetCategories() with the following in the ViewModel:

public static IEnumerable<Category> TestCategories
{
    get
    {
        yield return new Category { CategoryTitle = "title 1" };
        yield return new Category { CategoryTitle = "title 2" };
    }
}
...
public MainViewModel()
{
    Categories = new ObservableCollection<Category>(TestCategories);
}

DBServices.GetCategories() should also be tested for expected output, not shown here.

Answer 2

You could use the Xamarin Forms MessagingCenter to tell the ListView it needs to update.

On the page where the new category is added to the Realm DB, at some point after the category is added but before the page is popped, you would send a message to tell the ListView page to update. This may look something like:

MessagingCenter.Send(this, "Update listview");

In your MainViewModel you'll need to subscribe to the message and then act upon it. This could be something like:

MessagingCenter.Subscribe<AddCategoryPage>(this, "Update listview", (sender) =>
{
    RefreshCategories();
});

Two items to note when using the MessagingCenter.

1. The message passed must be identical between the sender and subscriber. In this case the message is "Update listview". Because it must be identical, you would probably want to define the message in separate class so it can be referenced by both the sender and subscriber.
2. When subscribing to a message you have to make sure that you unsubscribe. A popular pattern is to subscribe when the page appears and unsubscribe when the page disappears. A different pattern may work better for you though.

On a side note, you shouldn't need the full property definition for Categories . The ObservableCollection will handle the notification when items are added or removed. Just set Categories = new ObservableCollection<Category>(); once and then only add or remove items. You don't need to new it up on every DB call.