How can I remove item form ListView in Xamarin Cross Platform Forms MVVM

0
votes

How can I remove item form ListView in Xamarin Cross Platform Forms 

<ViewCell.ContextActions>
        <MenuItem Text="Delete" IsDestructive="True" Command="Binding DleteItemCommand}" />
</ViewCell.ContextActions>

But I want user code complies with MVVM pattern.

3
xamarinxamarin.forms

3 Answers

1
votes

So, View model is just for presentation layer, you need interact with your cell instead of viewmodel. Follow the next steps:

1.Create a Observable collection of ViewModels for Cells. 2. Add this collection to ItemSource of ListView. 3. Then for command add callback method

                    <ListView x:Name="citiesListView" ItemTapped="OnSelection">
                    <ListView.ItemTemplate>
                            <DataTemplate>
                        <ViewCell>
                            <ViewCell.ContextActions>
                                <MenuItem Clicked="DeleteAction" Text="Delete" IsDestructive="true" CommandParameter="{Binding .}" />
                            </ViewCell.ContextActions>
                            <StackLayout Padding="15,0">
                                  <Label 
                                    Text="{Binding .}"
                                    FontSize="30"
                                    VerticalTextAlignment="Center"
                                    HorizontalTextAlignment="Center"/>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>

Then in code:

    public partial class YourPage : ContentPage
{
    public ObservableCollection<string> YourCollection { get; set; }

    public YourPage()
    {
        InitializeComponent();
        // initialize at this point
        YourCollection = new ObservaleCollection(<Some collection of view models>);
        citiesListView.ItemsSource = YourCollection;

    }


    private void DeleteAction(object sender, System.EventArgs e)
    {
        var menuItem = ((MenuItem)sender);
        var yourViewModel = (YourViewModelType) menuItem.CommandParameter;

       YourCollection.Remove(yourViewModel);
     }
0
votes

You can add ObservableCollection<YourType> and in command delete element from collection.

var collection = new ObservableCollection<YourType>();

yourList.ItemSource = collection;

// in Command
public void OnDelete (object sender, EventArgs e) 
{
    // getting reference on menu item
    var menuItem = ((MenuItem)sender).CommandParameter;    
    // cast to underlying viewModel
    var yourObject = (YourType)menuItem;
    collection.Remove(yourObject);
}
0
votes

Yes, it is compatible with MVVM pattern. So, you have a Cell in ListView and it is a single representation of viewModel. And using it is approach you have the next relationship: "model - viewModel - view". ObservableCollection has a references on ViewModels that you display in ListView's Cells, and you now can easily delete cells that you want. See improvements above in code