EventTrigger in WPF - wpf

Question

I want to get the SelectedItems from the Listbox where the Checkbox is selected via the InvokeCommandAction and store them in an obsevableCollection SelectedItems , but I am not getting the SelectedItemChangedCommand working(break point does not hit) and not sure how do I populate the Items in the SelectedItems Collection. I tried following, hoping that once the checkbox is checked or unchecked, the SelectedItemChangedCommand would be called and I can have a method getting called on this where I will populate the SelectedItems
Please note I am looking for a way to achieve this without any code behind.
<ListBox Margin="45,7,0,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
ItemsSource="{Binding ListItems}"
SelectionMode="Multiple" Height="146">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<CheckBox Margin="5,2"
IsChecked="{TemplateBinding IsSelected}">
<ContentPresenter />
</CheckBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectedItemChangedCommand}" CommandParameter="{Binding ElementName=myListBox, Path=SelectedItem}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
Updated Xaml File
<Window x:Class="stack.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:stack"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<ListBox x:Name="myListBox" Margin="45,7,0,0" VerticalAlignment="Top"
ItemsSource="{Binding ListItems}"
SelectionMode="Multiple" Height="146">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<CheckBox
Margin="5,2"
IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}"
>
<ContentPresenter />
</CheckBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectedItemChangedCommand}"
CommandParameter="{Binding ElementName=myListBox, Path=SelectedItem}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
</Grid>
</Window>
I am binding the listbox to observableCollection ListItems defined in view model as
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
namespace stack
{
public class MainViewModel : INotifyPropertyChanged
{
public ObservableCollection<string> ListItems { get; set; }
public ObservableCollection<string> SelectedListItems { get; set; }
public RelayCommand SelectedItemChangedCommand { get; set; }
public string _selectedItem;
public string SelectedItem
{
get => _selectedItem;
set
{
_selectedItem = value;
OnPropertyChanged("SelectedItem");
}
}
public bool _isSelected;
public bool IsSelected
{
get => _isSelected;
set
{
_isSelected = value;
OnPropertyChanged("IsSelected");
}
}
public MainViewModel()
{
ListItems = new ObservableCollection<string>();
ListItems.Add("One");
ListItems.Add("Two");
ListItems.Add("three");
ListItems.Add("Four");
ListItems.Add("Five");
SelectedItemChangedCommand = new RelayCommand(this.ExecuteItemChanged);
}
public void ExecuteItemChanged(object parameter)
{
if (IsSelected)
{
SelectedListItems.Add(SelectedItem);
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler _propertyChangedEventHandler = PropertyChanged;
_propertyChangedEventHandler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

Answer 1

TemplateBinding is cheap, but it doesn't do two-way bindings. Thus, the items aren't getting selected. You need a regular binding with a RelativeSource of TemplatedParent:
<CheckBox
Margin="5,2"
IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}"
>
Note that you are binding CheckBox.IsChecked to ListBoxItem.IsSelected. The templated parent is a ListBoxItem, not your main viewmodel.
Second, you want to pass the SelectedItems, plural, property to your command. SelectedItem is singular. It's only one item. It'll be the topmost selected item when many are selected. You have SelectionMode="Multiple" on your listbox, so I assume you want the full selection.
<i:InvokeCommandAction
Command="{Binding SelectedItemChangedCommand}"
CommandParameter="{Binding ElementName=myListBox, Path=SelectedItems}"
/>
And make sure you have x:Name="myListBox" on the ListBox: The CommandParameter binding needs that to find SelectedItems.
Finally: ExecuteItemChanged() is very broken. Your main viewmodel properties IsSelected and SelectedItem are not bound to anything. They're just false and null, always. Every time the selection changes, you execute the command and pass in the first selected item as parameter, and then you ignore it and go look to see if false is still false, which it is. If it weren't, your viewmodel's SelectedItem property would still be null, because you never updated that either.
Here's what you want to do: When the selection changes, pass the entire collection of currently selected items into your command. Replace the viewmodel's entire collection of currently selected items with the current state from the control. You must, must, must bind SelectedItems as the CommandParameter above.
Get rid of SelectedItem and IsSelected on the viewmodel, they serve no purpose.
If possible, don't ever get into this business of maintaining two lists and trying to keep them in sync piecemeal. It's always a mess. And you don't need to do it in this case.
public void ExecuteItemChanged(object parameter)
{
// ListBox.SelectedItems is System.Windows.Controls.SelectedItemCollection,
// a precambrian monster that's declared internal in PresentationFramework.dll.
// However, it does implement non-generic IList, so cast it to that.
if (parameter is System.Collections.IList selectedItems)
{
if (SelectedListItems == null)
{
SelectedListItems = new ObservableCollection<String>();
}
SelectedListItems.Clear();
foreach (string item in selectedItems)
{
SelectedListItems.Add(item);
}
}
}