How to set specific item in a ListView using MVVM? - wpf

Question

I have a ListView of Button elements like this:
<ListView ItemsSource="{Binding DummyModelList}" SelectedItem="{Binding SelectedItem}">
<ListViewItem >
<Button Name="test" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4" VerticalAlignment="Center" Background="Transparent" Command="{Binding DataContext.TestCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}">
<Button.Template>
<ControlTemplate>
<Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
<Image Source="{Binding DataContext.SlidOnOffImg , RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</ListViewItem >
In my ViewModel:
public class MyViewModel:BindableBase
{
private ObservableCollection<Slide> dummyModelList;
public ObservableCollection<Slide> DummyModelList
{
get { return dummyModelList; }
set
{
dummyModelList = value;
OnPropertyChanged(() => DummyModelList);
}
}
public string SlidOnOffImg { get; set; }
private int selectedItem;
public int SelectedItem //this property stores currently selected item from thumbnails list
{
get { return selectedItem; }
set
{
selectedItem = value;
OnPropertyChanged(() => SelectedItem);
}
public CompositeCommand TestCommand { get; set; }
public MyViewModel(IRegionManager regionManager, IEventAggregator eventAggregator) //constructor
{
dummyModelList = new ObservableCollection<ISlide>() { new Slide(), new Slide(), new Slide()};
TestCommand = new CompositeCommand();
TestCommand.RegisterCommand(new DelegateCommand(ChangeImage));
}
private void ChangeImage()
{
if (dummyModelList.ElementAt(selectedItem).SlideExcluded)
dummyModelList.ElementAt(selectedItem).SlideExcluded = false;
else
dummyModelList.ElementAt(selectedItem).SlideExcluded = true;
SlidOnOffImg = dummyModelList.ElementAt(selectedItem).SlideONOFFImgPath;
OnPropertyChanged(() => SlidOnOffImg);
}
}
In my model:
public class Slide : ISlide
{
public bool SlideExcluded { get; set; }
public string SlideONOFFImgPath
{
get
{
if(SlideExcluded)
return "/Assets/Visible_OFF.png";
else
return "/Assets/Visible_ON.png";
}
}
}
My goal is to have button's image to toggle between two image paths on button click. It works, but the problem is that all the buttons in the list change the image path on some button click. I want only the one that is clicked to change the image path.
How to solve this?

Answer 1

You need to be binding to SelectedIndex instead of SelectedItem in your XAML. SelectedIndex holds a reference to the index for the item in the list, SelectedItem holds a reference to the object in the list. Either that, or change your view model to work with the actual object rather than the index.