WP8: LongListSelector with ContextMenu to delete an item

Question

I thought my question would be very simple, but I still didn't find a solution.
I have a LongListSelector and a ContextMenu in each item. When I longclick the item of the LongListSelector, the ContextMenu would be popped up with a delete option. I want to delete the selected LongListSelector item. My code:

XAML:

<phone:PhoneApplicationPage
....
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
>

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0">

        <phone:LongListSelector 
            Name="TestList"
            >
            <phone:LongListSelector.ItemTemplate
                >
                <DataTemplate>
                    <TextBlock Text="{Binding}">
                    <toolkit:ContextMenuService.ContextMenu>
                        <toolkit:ContextMenu Name="ContextMenu" >
                            <toolkit:MenuItem 
                                Name="Delete"  
                                Header="Delete" 
                                Click="Delete_Click"/>
                        </toolkit:ContextMenu>
                    </toolkit:ContextMenuService.ContextMenu>
                    </TextBlock>
                </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>

    </Grid>

</Grid>

C#:

namespace TestContextMenu
{
    public partial class MainPage : PhoneApplicationPage
    {
        public List<string> Items = new List<string>
        {
            "Item1",
            "Item2",
            "Item3",
            "Item4",
            "Item5",
        };

        public MainPage()
        {
            InitializeComponent();
            TestList.ItemsSource = Items;
        }


        private void Delete_Click(object sender, RoutedEventArgs e)
        {
            Items.RemoveAt(0);
            //var item = (sender as MenuItem).DataContext;
            //TestList.ItemsSource.Remove(item);
        }
    }
}

When I click Delete, the item in the LongListSelector can't be deleted visually, although the data has been removed.

I read this, but the solution is not work for my situation. Anyone know what's wrong in my code pls let me know, thank you!

Answer 1

Try to replace List<string> with ObservableCollection<string>. Because ObservableCollection is designed to react to the changes in the collection.