Как удалять элементы из WPF ListView по нажатию на крестик с помощью MVVM

WPF ListView - это инструмент, который позволяет отображать коллекцию элементов в виде таблицы. Одним из распространенных сценариев использования является возможность удалять элементы из списка по нажатию на иконку крестика. В этой статье мы рассмотрим, как реализовать данную функциональность с помощью MVVM.

Установка необходимого ПО

Для начала работы нам понадобится установить следующие компоненты:

  • Microsoft Visual Studio
  • .NET Framework
  • WPF Toolkit

После установки всех компонентов мы можем приступать к созданию проекта.

Создание проекта

Создадим проект с помощью шаблона WPF Application. Назовем его "ListViewExample".

Создание модели данных

Создадим модель данных - класс "Person". Он будет иметь два свойства: "Name" и "Age".

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Создание ViewModel

Теперь создадим ViewModel - класс "MainViewModel". Он будет содержать коллекцию элементов типа Person, которая будет отображаться в ListView. Кроме того, в ViewModel мы будем хранить команду на удаление элемента из списка.

public class MainViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Person> _peopleList;
    public ObservableCollection<Person> PeopleList
    {
        get { return _peopleList; }
        set
        {
            _peopleList = value;
            OnPropertyChanged(nameof(PeopleList));
        }
    }

    public Command<Person> DeletePersonCommand { get; }

    public MainViewModel()
    {
        //Инициализация списка людей
        PeopleList = new ObservableCollection<Person>()
        {
            new Person() { Name = "Ivan", Age = 25 },
            new Person() { Name = "Olga", Age = 30 },
            new Person() { Name = "Maria", Age = 28 }
        };

        //Команда на удаление элемента
        DeletePersonCommand = new Command<Person>(person =>
        {
            PeopleList.Remove(person);
        });
    }

    #region INotifyPropertyChanged implementation
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    #endregion
}

Здесь мы устанавливаем начальное состояние коллекции PeopleList и создаем команду DeletePersonCommand, которая будет вызываться при нажатии на крестик для удаления соответствующей строки в ListView.

Создание View

Теперь создадим View - класс "MainWindow". Он будет содержать элемент управления ListView, который будет отображать список людей. А также кнопка для добавления новых элементов в список.

<Window x:Class="ListViewExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListViewExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="Add new person" />
        </StackPanel>
        <ListView Grid.Row="1" ItemsSource="{Binding PeopleList}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" Margin="0,0,10,0" />
                        <TextBlock Text="{Binding Age}" Margin="0,0,10,0" />
                        <Button Content="X"
                                Command="{Binding Path=DataContext.DeletePersonCommand, RelativeSource={RelativeSource AncestorType=ListView}}"
                                CommandParameter="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

Здесь мы устанавливаем свойство ItemsSource для ListView, которое связывает его с коллекцией PeopleList из ViewModel. Также в шаблоне элемента, отображающего строку в ListView, мы добавляем кнопку X, которая связывается с командой на удаление DeletePersonCommand из ViewModel.

Запуск приложения

Теперь мы можем запустить наше приложение и убедиться, что при нажатии на кнопку X происходит удаление соответствующего элемента из списка и из таблицы.

Вывод

В этой статье мы рассмотрели, как можно использовать WPF ListView для отображения коллекции элементов и реализовать возможность удаления элементов по нажатию на крестик с помощью MVVM. Кроме того, мы показали, как использовать ObservableCollection и команды в MVVM-приложении.

Смотри также: