使用 MVVM 在 WPF 中更改 ObservableCollection 时如何触发转换器？

Question

I have two list like this:

<ListView Name="listView" Height="300" ItemsSource="{Binding Resultados}">
   <ListView.View>
      <GridView>
         <GridViewColumn>
            <GridViewColumn.CellTemplate>
               <DataTemplate>
                  <CheckBox
                     IsChecked="{Binding Path=CommandParameter, RelativeSource={RelativeSource Self}, Converter={StaticResource CheckBoxCeldaConverter}, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
                     Command="{Binding Path=DataContext.SeleccionarCeldaCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" 
                     CommandParameter="{Binding}"/>
               </DataTemplate>
            </GridViewColumn.CellTemplate>
         </GridViewColumn>
         <GridViewColumn Header="EDIFICIO" DisplayMemberBinding="{Binding NIVEL.PASILLO.EDIFICIO.NOMBRE}"/>
         <GridViewColumn Header="PASILLO" DisplayMemberBinding="{Binding NIVEL.PASILLO.NOMBRE}"/>
         <GridViewColumn Header="NIVEL" DisplayMemberBinding="{Binding NIVEL.NOMBRE}"/>
         <GridViewColumn Header="CELDA" DisplayMemberBinding="{Binding CELDA.NOMBRE}"/>
         <GridViewColumn Header="CLASIFICACIÓN" DisplayMemberBinding="{Binding CELDA_CATEGORIA.NOMBRE}"/>
         <GridViewColumn>
            <GridViewColumn.CellTemplate>
               <DataTemplate>
                  <Button
                     Command="{Binding Path=DataContext.MostrarDiasVisitasCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                     CommandParameter="{Binding CELDA.CELDA_DIAS_VISITA}"
                     IsEnabled="{Binding TieneDiasVisita}">
                     <materialDesign:PackIcon Kind="Eye"/>
                  </Button>
               </DataTemplate>
            </GridViewColumn.CellTemplate>
         </GridViewColumn>
      </GridView>
   </ListView.View>
</ListView>
<ListView Name="listView2" Height="300" ItemsSource="{Binding CeldasSeleccionadas}" Grid.Column="1" Margin="20 0 0 0">
   <ListView.View>
      <GridView>
         <GridViewColumn Header="EDIFICIO" DisplayMemberBinding="{Binding NIVEL.PASILLO.EDIFICIO.NOMBRE}"/>
         <GridViewColumn Header="PASILLO" DisplayMemberBinding="{Binding NIVEL.PASILLO.NOMBRE}"/>
         <GridViewColumn Header="NIVEL" DisplayMemberBinding="{Binding NIVEL.NOMBRE}"/>
         <GridViewColumn Header="CELDA" DisplayMemberBinding="{Binding CELDA.NOMBRE}"/>
         <GridViewColumn Header="CLASIFICACIÓN" DisplayMemberBinding="{Binding CELDA_CATEGORIA.NOMBRE}"/>
         <GridViewColumn>
            <GridViewColumn.CellTemplate>
               <DataTemplate>
                  <Button
                     Command="{Binding Path=DataContext.BorrarCeldaCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                     CommandParameter="{Binding}">
                     <materialDesign:PackIcon Kind="Delete"/>
                  </Button>
               </DataTemplate>
            </GridViewColumn.CellTemplate>
         </GridViewColumn>
      </GridView>
   </ListView.View>
</ListView>

In the first list, the elements have a CheckBox, if the CheckBox is pressed, the element is added or removed from the second list that it's ItemSource is binded to CeldasSeleccionadas ObservableCollection in the ViewModel. I have a converter in the binding of the isChecked property of the first list that checks if the element is present in the CeldasSeleccionadas ObservableCollection, if is present, put the isChecked property as true. This is because if the user update the View, the selected values keeps checked.

Now, in the second list, the one binded to CeldasSeleccionadas, I have a button to delete the element from CeldasSeleccionadas ObservableCollection. This works fine, the only problem I have is that when I remove the element from CeldasSeleccionadas ObservableCollection the CheckBox in the first list keeps isChecked property as true, the converter is not beign called again and is not checking if the element exist in the CeldasSeleccionadas ObservableCollection.

CeldasSeleccionadas looks like this in the ViewModel:

public ObservableCollection<CeldaModel> CeldasSeleccionadas { get; set; } = new ObservableCollection<CeldaModel>();

This is the Command to add elements to CeldasSeleccionadas:

private ICommand _SeleccionarCeldaCommand;
public ICommand SeleccionarCeldaCommand {
  get {
    if (_SeleccionarCeldaCommand == null) _SeleccionarCeldaCommand = new RelayCommand(param =>SeleccionarCelda((CeldaModel) param));
    return _SeleccionarCeldaCommand;
  }
}
void SeleccionarCelda(CeldaModel celda) {
  if (CeldasSeleccionadas.Contains(celda)) {
    CeldasSeleccionadas.Remove(celda);
  }
  else {
    CeldasSeleccionadas.Add(celda);
  }
}

And this for remove elements:

private ICommand _BorrarCeldaCommand;
public ICommand BorrarCeldaCommand {
  get {
    if (_BorrarCeldaCommand == null) _BorrarCeldaCommand = new RelayCommand(param =>BorrarCelda((CeldaModel) param));
    return _BorrarCeldaCommand;
  }
}
void BorrarCelda(CeldaModel celda) {
  CeldasSeleccionadas.Remove(celda);
}

The Converter looks like this:

public class CheckBoxCeldaConverter : Freezable, IValueConverter
    {
        public CheckBoxCeldaConverter()
        {
            MyCollection = new ObservableCollection<CeldaModel>();
        }

        protected override Freezable CreateInstanceCore()
        {
            return new CheckBoxCeldaConverter();
        }


        public static readonly DependencyProperty MyCollectionProperty =
        DependencyProperty.Register(nameof(MyCollection),
            typeof(ObservableCollection<CeldaModel>), typeof(CheckBoxCeldaConverter),
            new FrameworkPropertyMetadata(null));

        public ObservableCollection<CeldaModel> MyCollection
        {
            get { return GetValue(MyCollectionProperty) as ObservableCollection<CeldaModel>; }
            set { SetValue(MyCollectionProperty, value); }
        }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (MyCollection.Contains(value as CeldaModel))
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

And I call it from my view inside the User.Resources like this:

<UserControl.Resources>
        <local:CheckBoxCeldaConverter MyCollection="{Binding CeldasSeleccionadas}" x:Key="CheckBoxCeldaConverter"/>
</UserControl.Resources>

How can I trigger the converter when a item from the CeldasSeleccionadas ObservableCollection is added or removed?

Answer 1

Read all, it's more intuitive and explained than before.

The code will be much easier if CeldaModel was aware of "I'm selected", letting you bind the checkbox to "Selected" boolean property.

With that you can avoid the converter.

But I think there is a better choice.

You have "Resultados".

Then in you ViewModel creates two more properties ICollectionView

public class MasterViewModel : ViewModelBase //example{

    ObservableCollection<CeldaModel> Resultados{get; set;}

    ICollectionView TodosResultados{get; set;}

    ICollectionView ResultadosSeleccionados {get; set;} //You create ICollectionView and filter it by "Selected" property in CeldaModel

    ...

}

Bind one listview to "TodosResultados" and the other to "ResultadosSeleccionados"

If you have bound everything correctly (checkbox with Selected, ListViews with ICollectionView), you don't have to worry about nothing. Everything will work like a charm. At least in the surface.

No need to create the "Commands" (unless the command make something in the back Model- don't mess up with the ViewModel).

Warning: this work fine if you only want "View", if you want two ObservableCollection is valid too.

PS: should you name "CeldaModel" "CeldaViewModel"? In a pure MVVM, Model classes must not interact in any way with the view, even if you include it in a collection.