【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; }

        
    }
}

 

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

 

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

 

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

 

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

上一篇:Pytorch 中 Dataset 类的使用


下一篇:快速创建yii2 RESTful api的小记