A change in observable collection does not update the UI.

GovindBhonsleGovindBhonsle USMember ✭✭
edited September 2018 in Xamarin.Forms

My aim is to update the label(Quantity) count by clicking on the + button. Here is my code.

BaseViewModel.cs
    public class BaseViewModel: INotifyPropertyChanged
        {
     public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
            {
                if (PropertyChanged == null) return;
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
    }



    MyCartViewModel.cs
    public class MyCartViewModel : BaseViewModel
                        {
                       private BaseResponseModel baseResponseModel;

                           private ObservableCollection<Product> _ProductsArray;
                               public ObservableCollection<Product> ProductsArray
                               {
                                   get { return _ProductsArray; }
                                   set
                                   {
                                       _ProductsArray = value;
                                       OnPropertyChanged("ProductsArray");
                                   }
                               }


                       private Command<Product> plusCommandTapped;
                           public Command<Product> PlusCommandTapped
                           {
                               get
                               {
                                   return plusCommandTapped ?? (plusCommandTapped = new Command<Product>(oModel =>
                              {
                                  var item = ProductsArray.FirstOrDefault(i => i.Sku == oModel.Sku);
                                  if (item != null)
                                  {
                                      item.Quantity++;
                                       OnPropertyChanged("ProductsArray");

                                  }
                              }));
                               }
                           }

                       public MyCartViewModel()
                       {
                           CallMyCartAPI();
                           baseResponseModel = new BaseResponseModel();

                       }    

               public async void CallMyCartAPI() => await CallAPIAsync();

                       private async System.Threading.Tasks.Task CallAPIAsync()
                       {
                           await ServiceRequest.GetInstance.GetMyCartList(this, baseResponseModel);
                       }

               void IService.SuccessResponseAsync(object json, RequestTypeEnum requestType)
                       {
                           if (json.GetType().Name.Equals("BaseResponseModel"))
                           {
                               if (json is BaseResponseModel responseObject && responseObject.StatusCode == 200)
                               {
                                   if (requestType == RequestTypeEnum.GetCartItems)
                                   {
                                       if (responseObject.Data.Items != null)
                                       {
                                           ProductsArray = new ObservableCollection<Product>(responseObject.Data.Items);
                                       }
                                   }
                    }
                }
               }

         }        

MyCartPage.xaml

     <controls:CustomListView x:Name="listview" ItemsSource="{Binding ProductsArray}" Margin="15,20,15,0" BackgroundColor="#EFEFEF" HasUnevenRows="true" SelectionMode="Single" SeparatorColor="#EFEFEF" SeparatorVisibility="Default">
                        <controls:CustomListView.ItemTemplate>
                            <DataTemplate>
                                <controls:CustomViewCell>
                                    <AbsoluteLayout Padding="0,10,0,10" Margin="0" BackgroundColor="White">

                                                <Grid BackgroundColor="White" HorizontalOptions="FillAndExpand" ColumnSpacing="10" VerticalOptions="FillAndExpand" Padding="0,0,0,0">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="5*" />
                                                        <ColumnDefinition Width="5*" />
                                                    </Grid.ColumnDefinitions>
                                                    <Grid Grid.Row="0" Grid.Column="0" Margin="0" Padding="0" RowSpacing="0" VerticalOptions="FillAndExpand" ColumnSpacing="5" HorizontalOptions="FillAndExpand" BackgroundColor="White">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="Auto" />
                                                        </Grid.RowDefinitions>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="3*" />
                                                            <ColumnDefinition Width="3*" />
                                                            <ColumnDefinition Width="3*" />
                                                        </Grid.ColumnDefinitions>
                                                        <Button Grid.Row="0" Margin="0" Grid.Column="0" VerticalOptions="FillAndExpand" Command="{Binding Source={x:Reference MyCartPage}, Path=BindingContext.MinusCommandTapped}" CommandParameter="{Binding}" HorizontalOptions="FillAndExpand" Image="minus" BackgroundColor="White" />
                                                        <Label Grid.Row="0" Margin="0" Grid.Column="1" BackgroundColor="White" Font="Bold" Text="{Binding Quantity,Mode=TwoWay}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" TextColor="#DB555E"
                                                            FontSize="Large" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontFamily="Roboto-Regular" />
                                                        <Button Grid.Row="0" Margin="0" Grid.Column="2" Image="plus" Command="{Binding Source={x:Reference MyCartPage}, Path=BindingContext.PlusCommandTapped}" CommandParameter="{Binding}" BackgroundColor="White" />
                                                    </Grid>
                                                    <Button Grid.Row="0" Grid.Column="1" BackgroundColor="White" TextColor="#603F46" FontSize="Default" FontFamily="Roboto-Regular" ClassId="{Binding ItemId}" Clicked="Delete_Clicked" Text="Delete" BorderColor="#603F46"
                                                        BorderWidth="1" Margin="0" />
                                                </Grid>
                                            </StackLayout>
                                        </Grid>
                                    </AbsoluteLayout>
                                </controls:CustomViewCell>
                            </DataTemplate>
                        </controls:CustomListView.ItemTemplate>
                    </controls:CustomListView>

I have Bound the property Quantity for the label & I am able to display the quantity of the product. However, I want to increase the count on clicking of the plusbutton.

I am unable to update the UI and the count despite trying several ways used begininvoke on main thread but all of them failed. I need some help in resolving this serious issue.

Best Answer

Answers

Sign In or Register to comment.