MVVM

Команды в MVVM: ICommand, BindableCommand и привязка к событиям через Interaction.Triggers

Привязка команд, ICommand

Мы реализовали архитектуру MVVM и привязку данных, однако сейчас вся наша программа реализована вообще без кнопок и каких-либо действий. Да и не то, чтобы мы могли их сделать, так как в xaml.cs мы уже больше не пишем.

Давайте создадим кнопку для добавления и научимся создавать команды из кода и привязывать их к объектам.

Я использую старый проект, который мы разработали в предыдущей лекции. Пример этого проекта вы можете скачать в предыдущей лекции по ссылке внизу.

Создам кнопку для добавления записи. Заметьте, что я никак её не назову.

VS XAML с MainWindow: DataGrid, текстовые поля и кнопка «Добавить элемент»

Затем мне нужно сделать внутри ViewModel метод, который будет что-то добавлять. Именно его мы должны будем как-то привязать к кнопке. Добавить мы можем следующее:

Либо добавить какую-то заглушку напрямую, но в этом особого смысла нет, так как лучше чтобы пользователь вводил значения из текстовых полей с интерфейса:

Метод AddItems с Colours.Add(new Colour(«заглушка», «FFFFFF»)) и рукописная подпись «метод с добавлением элемента»

Либо вспомнить что за свойства мы привязали. Зайдем в XAML и увидим, что к текстовым полям у нас привязана переменная Selected, внутри которой одно текстовое поле идет в Name, а другое — в Hexademical:

XAML с TextBox Text Binding Selected.Name и Selected.Hexademical — подчёркнуто

Это значит, что все введенные значения у меня хранятся в свойстве Selected внутри ViewModel.

И если я хочу в свою коллекцию элементов добавить значения из текстовых полей, мне нужно просто добавить туда переменную Selected:

1
public void AddItems()
2
{
3
    Colours.Add(Selected);
4
}

Но чтобы быть точно уверенным, что значение внутри Selected не будет пустым, присвою новый экземпляр класса для приватной переменной. Для этого сделаю еще один пустой конструктор и после selected напишу new Colour():

Класс Colour с двумя свойствами, конструктором (string name, string hex) и рукописной подписью «новый пустой конструктор»

Поле private Colour selected = new Colour() — подчёркнуто

BindableCommand на основе ICommand

Однако теперь перед нами стоит вопрос — как привязать этот метод к кнопке?

Для этого нам нужно создать свойство-команду, которую мы а) привяжем к кнопке и б) используем как коробочку для метода.

Однако, чтобы такое провернуть, нам нужно сделать класс, который мы будем использовать для создания команды. Назову его, например, BindableCommand. Размещу его в папке Helpers.

Обозреватель решений с BindableCommand.cs в ViewModel/Helpers рядом с BindingHelper.cs

Внутрь я напишу следующее:

BindableCommand с _execute, _canExecute, CanExecuteChanged, конструктором, CanExecute и Execute — рукописные подписи 1, 2, 3 к каждой части

1
using System;
2
using System.Windows.Input;
3

4
namespace vipief.ViewModel.Helpers
5
{
6
    internal class BindableCommand : ICommand
7
    {
8
        private Action<object> _execute;
9
        private Func<object, bool> _canExecute;
10

11
        public event EventHandler CanExecuteChanged
12
        {
13
            add { CommandManager.RequerySuggested += value; }
14
            remove { CommandManager.RequerySuggested -= value; }
15
        }
16

17
        public BindableCommand(Action<object> execute, Func<object, bool> canExecute = null)
18
        {
19
            _execute = execute;
20
            _canExecute = canExecute;
21
        }
22

23
        public bool CanExecute(object parameter)
24
        {
25
            return _canExecute == null || _canExecute(parameter);
26
        }
27

28
        public void Execute(object parameter)
29
        {
30
            _execute(parameter);
31
        }
32
    }
33
}

Для создания команды я, внутри ViewModel, создам новый регион с командами и создам новое свойство, где внутрь я помещу метод, который я хочу чтобы выполнялся. В моём случае — метод с добавлением. Команду я назову AddCommand:

1
#region Команды
2

3
public BindableCommand AddCommand { get; set; }
4

5
#endregion

Внутри конструктора я укажу, какой метод должна выполнять команда. Заметьте структуру написания — new BindableCommand(_ => Метод());.

Внутрь этого метода также можно передавать параметры.

1
public MainViewModel()
2
{
3
    AddCommand = new BindableCommand(_ => AddItems());
4
}

Саму команду я привяжу к кнопке при помощи свойства Command:

XAML кнопки с Command Binding AddCommand — подчёркнуто

И теперь, при нажатии на кнопку, будет срабатывать именно тот метод, который мы привязали к команде. Опять же заметьте, что внутри ViewModel мы ни разу не трогали интерфейс напрямую. По правилам MVVM этого и не нужно делать, все проблемы решаются через привязки.

Окно приложения: датагрид с двумя цветами, текстовые поля и кнопка «Добавить элемент»

Окно: в датагриде появилась строка «Новый цвет / 123456» после ввода и нажатия кнопки

Окно: выбрана строка «Насыщенный фиолетовый», текстовые поля справа заполнены этими же значениями

Привязка к определенному событию

Если так подумать, то Command срабатывает только тогда, когда происходит какое-то основное событие с объектом (для кнопки — нажатие, для списков и таблиц — изменение выбора, для дейтпикера — изменение даты). Однако, что если я хочу привязать команду к какому-то экстраординарному событию, например, двойной клик?

Реализуем этот двойной клик у себя в программе. Начнем с того, что нужно хотя бы просто найти это свойство у кнопки.

Свойства Button с событиями MouseDoubleClick, MouseDown

Нашли, называется он MouseDoubleClick, и теперь именно к нему надо привязать команду.

Теперь нам нужно сделать следующее:

Уберём старую команду, она нам больше не понадобится:

1
<Button Grid.Column="1" VerticalAlignment="Bottom" Content="Добавить элемент"/>

Добавим библиотеку для взаимодействия с событиями. Добавлять мы её будем прямо в окно. Назовем её i.
Чтобы эта библиотека заработала, необходимо скачать библиотеку Microsoft.Xaml.Behaviors.Wpf.

1
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

Откроем тэг с кнопкой и внутрь напишем следующее:

XAML Button с Interaction.Triggers, EventTrigger MouseDoubleClick и InvokeCommandAction Binding AddCommand — рукописные подписи «событие, к которому привязываемся» и «команда, которая должна выполниться»

И теперь событие будет происходить по двойному клику по кнопке. Для всех остальных элементов привязка идентичная.

Полный код примера

ViewModel/Helpers/BindableCommand.cs — обёртка над ICommand:

1
using System;
2
using System.Windows.Input;
3

4
namespace vipief.ViewModel.Helpers
5
{
6
    internal class BindableCommand : ICommand
7
    {
8
        private Action<object> _execute;
9
        private Func<object, bool> _canExecute;
10

11
        public event EventHandler CanExecuteChanged
12
        {
13
            add { CommandManager.RequerySuggested += value; }
14
            remove { CommandManager.RequerySuggested -= value; }
15
        }
16

17
        public BindableCommand(Action<object> execute, Func<object, bool> canExecute = null)
18
        {
19
            _execute = execute;
20
            _canExecute = canExecute;
21
        }
22

23
        public bool CanExecute(object parameter)
24
        {
25
            return _canExecute == null || _canExecute(parameter);
26
        }
27

28
        public void Execute(object parameter)
29
        {
30
            _execute(parameter);
31
        }
32
    }
33
}

ViewModel/MainViewModel.cs с командой и методом добавления:

1
using System.Collections.ObjectModel;
2
using vipief.Model;
3
using vipief.ViewModel.Helpers;
4

5
namespace vipief.ViewModel
6
{
7
    internal class MainViewModel : BindingHelper
8
    {
9
        #region Свойства
10

11
        private Colour selected = new Colour();
12
        public Colour Selected
13
        {
14
            get { return selected; }
15
            set
16
            {
17
                selected = value;
18
                OnPropertyChanged();
19
            }
20
        }
21

22
        private ObservableCollection<Colour> colours;
23
        public ObservableCollection<Colour> Colours
24
        {
25
            get { return colours; }
26
            set
27
            {
28
                colours = value;
29
                OnPropertyChanged();
30
            }
31
        }
32

33
        #endregion
34

35
        #region Команды
36

37
        public BindableCommand AddCommand { get; set; }
38

39
        #endregion
40

41
        public MainViewModel()
42
        {
43
            Colours = new ObservableCollection<Colour>()
44
            {
45
                new Colour("Насыщенный фиолетовый", "#53377A"),
46
                new Colour("Сине-зелёный", "#008080")
47
            };
48

49
            AddCommand = new BindableCommand(_ => AddItems());
50
        }
51

52
        public void AddItems()
53
        {
54
            Colours.Add(Selected);
55
        }
56
    }
57
}

View/MainWindow.xaml — кнопка с привязкой к двойному клику через Interaction.Triggers:

1
<Window x:Class="vipief.MainWindow"
2
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
5
        Title="MainWindow" Height="250" Width="500">
6
    <Grid>
7
        <Button Grid.Column="1" VerticalAlignment="Bottom" Content="Добавить элемент">
8
            <i:Interaction.Triggers>
9
                <i:EventTrigger EventName="MouseDoubleClick">
10
                    <i:InvokeCommandAction Command="{Binding AddCommand}"/>
11
                </i:EventTrigger>
12
            </i:Interaction.Triggers>
13
        </Button>
14
    </Grid>
15
</Window>

— просмотров

Привязка команд, ICommand #

BindableCommand на основе ICommand #

Привязка к определенному событию #

Полный код примера #

Привязка команд, ICommand

BindableCommand на основе ICommand

Привязка к определенному событию

Полный код примера