How to get selected items from a GridView - xaml

Question

I am making a library management software. This is the XAML:
<CommandBar Grid.Row="0">
<AppBarButton Icon="Add"
Label="New Book"
Click="NewBook_Click"/>
<AppBarButton Icon="Delete"
Label="Remove a Book"
Click="DeleteBook_Click"/>
</CommandBar>
<GridView x:Name="AllBooks_GridView"
ItemsSource="{x:Bind Path=ViewModel.Books, Mode=OneWay}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.HorizontalScrollMode="Disabled"
Grid.Row="1"
SelectionMode="Multiple">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Book">
<StackPanel Margin="10" HorizontalAlignment="Center">
<Image Width="200" Height="200" Source="{x:Bind Path=CoverImageLocation, Mode=OneWay}" />
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock FontSize="16"
Text="{x:Bind Path=Title, Mode=OneWay}"
TextTrimming="WordEllipsis"/>
<TextBlock FontSize="10"
Text="{x:Bind Path=Author, Mode=OneWay}"
Margin="0, 3, 0, 0"
TextTrimming="WordEllipsis"/>
</StackPanel>
<TextBlock FontSize="20"
Text="{x:Bind Path=Quantity, Mode=OneWay}"
Grid.Column="1"
VerticalAlignment="Bottom"
Margin="20, 0, 0, 0"
HorizontalAlignment="Left"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I want to select multiple bar and delete them when the second app bar button is pressed. This is the DeleteBook_Click function:
private void DeleteBook_Click(object sender, RoutedEventArgs e)
{
var books = AllBooks_GridView.SelectedItems;
foreach (var b in books)
{
var book = b as Book;
DataAccess.DeleteBook(book.Title);
ViewModel.Books.Remove(book);
}
}
This is the screenshot of my app:
When I click the delete icon, only the first book is deleted. Although both of them are selected. What am I doing wrong?

Answer 1

You are changing the collection while you iterating through its items.
AllBooks_GridView.SelectedItems is the collection, and when you are iterating through it in the foreach loop, you change it by calling
ViewModel.Books.Remove(book);
After this call, the GridView is refreshed to reflect the change you make to the ViewModel, and the items in the SelectedItems collection becomes less. And in the next iteration, the SelectedItems no longer contains two books as you may have expected, it contains only one. And since the code is trying to remove the 2nd book from the collection in the next iteration, so nothing happens and the loop terminates.
Here is a fix:
//Now the books collection is no longer bound to the SelecteItems of the GridView,
//it is 'immutable' in the foreach loop
List<Book> books = new List<Book>();
foreach (var item in AllBooks_GridView.SelectedItems)
books.Add(item as Book);
foreach (var book in books)
{
DataAccess.DeleteBook(book.Title);
ViewModel.Books.Remove(book);
}

Answer 2

When you remove a book from the Books collection, ObservableCollection will notify the data binding about the change which will, in turn, modify the SelectedItems collection.
Usually, this throws an exception but in this case, doesn't as it gets "masked" by the fact that removing the first item just moves the second item in its place (lowering the size of the collection) and enumerating forward just checks if the next index exists, and because it does not, the loop doesn't continue. You can confirm this by selecting three items - the first one will get deleted, the second one will get skipped, but third will be deleted again.
The simplest solution is to make sure to iterate over a different collection than the SelectedItems property. The cheapest way to achieve that is to use the LINQ ToArray extension on the first line.
var books = AllBooks_GridView.SelectedItems.ToArray();
This will create a new array which contains all the books that were selected and when you then remove from ViewModel.Books and it updates SelectedItems, it will no longer matter, as our books variable is a different instance.

Answer 3

The reason is given in Kennyzx's answer.
To make it work correctly, do something like this:
private void DeleteBook_Click(object sender, RoutedEventArgs e)
{
var books = AllBooks_GridView.SelectedItems.ToList(); // this will create a new list
foreach (var b in books)
{
var book = b as Book;
DataAccess.DeleteBook(book.Title);
ViewModel.Books.Remove(book);
}
}