【UWP】ListView通过按钮删除指定的项目

刚学UWP没多久，一个ListView的使用场景困扰了我半天，最后终于在网络的帮助下发现这是一个简单的不能再简单的问题~~~终究是我的C#基础太差了啊。。。

定义一个Model，用作数据源。把他叫做DataSource吧：

class DataSource
{
    public int Id { get; set; }
    public string Content { get; set; }
}

再把View层的东西写出来：

    <StackPanel>
            <ListView ItemsSource="{x:Bind View.DataSources}">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:DataSource">
                        <StackPanel>
                            <TextBlock Text="{x:Bind Id}"/>
                            <TextBlock Text="{x:Bind Content}"/>
                            <StackPanel Orientation="Horizontal">
                                <Button x:Name="DeleteButton" Content="删除" Click="View.DeleteClick"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>    

为了获取到ListViewItem上绑定的相应数据，我们不能直接通过数据名称进行访问，而是要通过事件的sender，将其转换为相应的控件（比如本例中的Button），再通过DataContext，来转换为自己定义的数据类型，才能访问数据源中绑定的数据。

以下是ViewModel:

class MainViewModel
    {
        public ObservableCollection<DataSource> DataSources { get; set; }
        public MainViewModel()
        {
            DataSources = new ObservableCollection<DataSource>()
            {
                new DataSource()
                {
                    Id = 1,
                    Content = "sfjsldjf"
                },
                new DataSource()
                {
                    Id = 2,
                    Content = "fsdlfjsdl"
                }
            };
        }

        public void DeleteClick(object sender, RoutedEventArgs e)
        {
            DataSource dataSource = ((Button)sender).DataContext as DataSource;//将事件的sender参数转换为相应的控件，
                                                                               //再用DataContext获得绑定的数据（不能通过静态的名称访问ListViewItem的绑定数据项）
            DataSources.Remove(dataSource);
        }
    }

最后再把主页的xaml文件的代码里添加访问MainViewModel的方式：

namespace 定制listview
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            View = new MainViewModel();
            this.InitializeComponent();
        }

        private MainViewModel View { get; set; }

        
    }
}