Search code examples
c#xamluwpuwp-xamlwindows-community-toolkit

UWP Community Tookit, SlidableListView remove list item


I'm using UWP Community Toolkit's SlidableListItem control. I've some static list contents in the list view. Now in the UWP Community Toolkit sample app, I find only XAML of the control but not the code file where I can find the event handler of the remove button in the control. I want to write an event in the code file for RightCommandRequested="SlidableListItem_RightCommandActivated" so that I can delete those static items in the list view.

The normal code for removing list items in the ListView is not working here. Please does anyone know about the code for the event-handler?


Solution

  • Now in the UWP Community Toolkit sample app, I find only XAML of the control but not the code file where I can find the event handler of the remove button in the control.

    It is right here:

    enter image description here

    In the official sample, it uses ObservableCollection for the item source of ListView, not a static List, the advantage of using this is that this is a dynamic data collection which provides notifications when items get added, removed, or when the entire list is refreshed. So, in this sample, it only bind a delegateCommand named DeleteItem for RightCommand of SlidableListItem like this:

    RightCommand="{Binding DeleteItem, ElementName=Page, Mode=OneWay}"
    

    In code behind:

    private DelegateCommand<Item> _deleteItem = default(DelegateCommand<Item>);
    
    public DelegateCommand<Item> DeleteItem => _deleteItem ?? (_deleteItem = new DelegateCommand<Item>(ExecuteDeleteItemCommand, CanExecuteDeleteItemCommand));
    
    ...
    private bool CanExecuteDeleteItemCommand(Item item)
    {
        return true;
    }
    
    private void ExecuteDeleteItemCommand(Item item)
    {
        _items.Remove(item);
    }
    

    As you can see here, it only removes items from the ObservableCollection, the relevant SlidableListItem of the ListView will also be removed.

    Now comes to your problem, if you want to use RightCommandRequested="SlidableListItem_RightCommandActivated", it's OK, the SlidableListItem_RightCommandActivated will be fired when your swipe from right to left. Problem is your item source, it's a static list, to ensure your ListView can get notified when the list is changed, you can either:

    1. Copy your static list into a ObservableCollection and bind this ObservableCollection to the ItemsSource of ListView, in your SlidableListItem_RightCommandActivated event remove the item both in the static list and the ObservableCollection.

    2. Implement the INotifyPropertyCanged interface for your static list.

    By the way, you can get the swiped item in the SlidableListItem_RightCommandActivated for example like this:

    private void SlidableListItem_RightCommandRequested(object sender, System.EventArgs e)
    {
        var slidableitem = sender as SlidableListItem;
        var item = slidableitem.DataContext as Item;
    }
    

    If you want a demo, you can leave a comment.