ListView不会删除Xamarin.Forms中的项目。 我已将ObservableCollection分配给ListView itemsource。 MVVM

Question

In my Xamarin.Forms app I have a simple Contact class [Model]. In the UI [View] there exists a ListView that displays the Contacts. In my model view class I have a list of Contacts (_listOfContacts) that is assigned to the itemSource property of the ListView. This list of Contacts is an ObservableCollection. My issue is the when user clicks Delete from ContextActions I can see that the _listOfContacts is updated but the ListView is not. The ListView is only updated when I reassign its itemsource to the _listOfContacts. This should not be needed if _listOfContacts is an ObservableCollection of Contacts. I am new to MVVM so I need to clear these basic MVVM concepts before I go on to learn more advanced techniques. Here is my code:

Model

 class Contact
{
    public String Name { get; set; }
    public String Status { get; set; }
    public String ImageUrl { get; set; }
}

Model View

public partial class ContactListPage : ContentPage
{
    private ObservableCollection<Contact> _listOfContacts;
    public ContactListPage()
    {
        InitializeComponent();

        _listOfContacts = new ObservableCollection<Contact>
        {
           new Contact {Name="Item1", ImageUrl="http://lorempixel.com/100/100/people/1" , Status="Hey"},
            new Contact { Name = "Item2", ImageUrl = "http://lorempixel.com/100/100/people/2", Status="Hey" },
        };

        contactList.ItemsSource = _listOfContacts.ToList();
    }

    private void EditContactClick(object sender, EventArgs e)
    {
        DisplayAlert("Alert", "Clicked Edit", "Cancel");
    }

    private void DeleteContactClick(object sender, EventArgs e)
    {
        var contact = (sender as MenuItem).CommandParameter as Contact;
        _listOfContacts.Remove(contact);
//following line of code should not be needed since _listOfContacts is 
//an ObservableCollection and removing an item should update the bound control automatically
        **contactList.ItemsSource = _listOfContacts.ToList();**
    }
}

View

<ContentPage.Content>
    <StackLayout>
        <ListView x:Name="contactList" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" Padding="10">
                            <Image Source="{Binding ImageUrl}"/>
                            <StackLayout HorizontalOptions="StartAndExpand">
                                <Label Text="{Binding Name}" Margin="0,2,0,2"/>
                                <Label Text="{Binding Status}" Margin="0,2,0,2" />
                            </StackLayout>
                        </StackLayout>
                        <ViewCell.ContextActions>
                            <MenuItem Text="Edit" Clicked="EditContactClick" CommandParameter="{Binding .}"/>
                            <MenuItem Text="Delete" Clicked="DeleteContactClick" IsDestructive="True" CommandParameter="{Binding .}"/>
                        </ViewCell.ContextActions>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </StackLayout>
</ContentPage.Content>

Answer 1

Remove .toList() from contactList.ItemsSource = _listOfContacts.ToList(); and try again.

_listOfContacts is an ObservableCollection which should be used as your ItemsSource directly. Maybe go and check out the ObservableCollection documentation .

Answer 2

I have tested your code, it is just the method ToList() which caused this question:

 contactList.ItemsSource = _listOfContacts.ToList();

At the beginning, the type of _listOfContacts is ObservableCollection, but when you use the method ToList() ,then it will been converted to List again. So just delete the method 'ToList()', your code will work properly, just as follows:

contactList.ItemsSource = _listOfContacts;