CODEWITHSUNDEEP
c#xamlmvvmmaui
r-m85
r-m85

Reputation: 196

OnPropertyChanged in the ViewModel does not update the View (.NET MAUI)

I'm building a .NET MAUI App and I'm using the MVVM design pattern. The problem is that the 'OnPropertyChanged' event is not updating a certain view after the first click (on a button) but only after the second click.

So I have a .XAML page (the view) with the following control on it:

 <ce:CustomBindablePicker Grid.Row="12" x:Name="prj" IsEnabled="{Binding CurrentProjectTimer.Editable}" ItemsSource="{Binding Path=Projects, Mode=TwoWay}" DisplayMemberPath="PickerText" SelectedValuePath="ID" SelectedValue="{Binding Path=CurrentProjectTimer.ProjectID}" />

.. and I have a ViewModel with the following property:

 private List<QtimeUniversal.BusinessEntities.Project> _Projects;
     
 public List<QtimeUniversal.BusinessEntities.Project> Projects
 {
     get { return _Projects; }
     set { _Projects = value; 
         OnPropertyChanged("Projects");
             }
 }

This property binds to the ItemSource of the Picker Control in the view. When the page opens I bind the ViewModel to the View like this:

   this.BindingContext = vmProjectTimer;

On the .XAML Page is a button with a textbox with which you can filter the Project collection. You can enter a value in the textbox and then when you press a button the Project list is filtered based on the entered value.

The XAML of the button is as followed:

 <ImageButton Grid.Row="0" Grid.Column="1"  x:Name="BtnFilterProjects" HeightRequest="30" WidthRequest="30" IsEnabled="{Binding CurrentProjectTimer.Editable}" Command="{Binding SetProjectFilterCommand}" HorizontalOptions="Fill" Margin="3,0,0,0"
              Source="searchblack.png">
</ImageButton>

In the SetProjectFilterCommand (in the ViewModel) I do the following:

 public RelayCommand<string> SetProjectFilterCommand { get; set; }

 public void OnSetProjectFilter(object parameter)
 {
    
.............
             this.Projects = filteredProjects;
  ....................   
     }

 }

I set the projects property of the ViewModel which is binded to the page. This should then update the view, but this is only the case after the second click on the button. Does anybody have an idea why this is not working as expected? I want to update the view after the first click on the button. The weird thing is that this worked fine in Xamarin.Forms but in MAUI the view is only updated after the second click.

I have tried the following to solve it:

Does anybody have an idea of what goes wrong here?

Upvotes: 0

Views: 814

Answers (1)

r-m85
r-m85

Reputation: 196

Than you for the answer! The repo is much appreciated. I like your solution but I 'prefer' to use a button to apply the 'freetext' project search/filter.

I have used some elements of your code and I got it working now although it is not exactly how it is supposed to be (technically).

I have added a FilteredProjects ObservableCollection property to the ViewModel:

 private ObservableCollection<QtimeUniversal.BusinessEntities.Project> _FilteredProjects;

 public ObservableCollection<QtimeUniversal.BusinessEntities.Project> FilteredProjects
 {
     get { return _FilteredProjects; }
     set
     {
         _FilteredProjects = value;
         OnPropertyChanged("FilteredProjects");
     }
 }

In the SetProjectFilterCommand (in the ViewModel) I now do the following:

public RelayCommand<string> SetProjectFilterCommand { get; set; }

 public void OnSetProjectFilter(object parameter)
 {
    
.............
               this.FilteredProjects = filteredProjects.ToObservableCollection<Project>(); 
               this.FilteredProjects = filteredProjects.ToObservableCollection<Project>(); 
  ....................   
     }

 }

I set the ObservableCollection property twice. This solves the issue that I have to click twice on the button to see the filtered Projects in the view. It now works on the first click although this is still not a 'structural' solution. By the way: the usage of an ObservableCollection instead of a list was also needed to make this work. If I did the double binding with the use of a List this didn't work.

Anybody has an idea why I have to bind two times to update the projects picker ItemSource in the view? What goes wrong here?

Upvotes: 0

Related Questions