Search code examples
data-bindingbindingmauicollectionview

YA - MAUI CollectionView is not updated when viewmodel collection is changed


I wrote the code similar to the below one:

MainPage XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MainPage"
             xmlns:models = "clr-namespace:myProject.Models"
             xmlns:controls ="clr-namespace:myProject.Views"
             BackgroundColor= "{StaticResource Primary}"
             Shell.NavBarIsVisible="false">
    <Grid>
        <controls:CategoryView DataSource="{Binding Categories}" />
    </Grid>
</ContentPage>

MainPage C#

...
    public MainView()
    {
        InitializeComponent();
        this.BindingContext = new MainPageViewModel();
    }
...

CategoryView XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CategoryView">
    <CollectionView x:Name="pnCenter" 
                        ItemsSource="{Binding DataSource}"
                        SelectionMode="Single"
                        Header="Choose category:">
        <CollectionView.ItemsLayout>
            <GridItemsLayout 
                    x:Name="wCatItems"
                    Orientation="Vertical"
                    Span="4"
                    VerticalItemSpacing="4"
                    HorizontalItemSpacing="4"  />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                    <Grid Style="{StaticResource xgGrid}"
                            RowDefinitions="20,*,30">
                        <Label Grid.Row="2"   
                                       Text="{Binding [Name]}"
                                       FontAttributes="Bold"
                                       FontSize="Medium"
                                       HorizontalTextAlignment="Center"
                                       />
                        <Label Grid.Row="0"   
                                       Text="{Binding [CategoryId]}"
                                       FontAttributes="Bold"
                                       HorizontalTextAlignment="End"
                                        BackgroundColor="DarkRed"
                                       />
                    </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentView>

CategoryView C#

public partial class CategoryView: ContentView
{
    public static readonly BindableProperty DataSourceProperty
                                    = BindableProperty.Create(nameof(DataSource),
                                        typeof(object),
                                        typeof(ObservalbleCollection<myCategory>));
    public object DataSource
    {
        get => (object)GetValue(DataSourceProperty);
        set => SetValue(DataSourceProperty, value);
    }
    public CategoryView()
    {
        InitializeComponent();
        Content.BindingContext = this;
    }
}

MainPageViewModel C#

...
    public partial class MainPageViewModel : ObservableObject
    {
        [ObservableProperty]
        private ObservableCollection<myCategory> categories;

...

MyCategory class implements INotifyChanged interface and is a subset of DynamicObject class.

When I add/remove/clear items from MainPageViewModel Category collection, the CollectionView is not updating.

Any help/idea?

I followed suggestion that myCategory class implements INotifyChnaged interface and also check if CollectionView fires CollectionChanged event.


Solution

  • I found the problem:

    builder.Services.AddTransient<MainPageViewModel>();
    

    should be changed to:

    builder.Services.AddSingleton<MainPageViewModel>();