WPF&MVVM: Активация кнопки при валидных данных

Question

Допустим у нас есть n-ое количество textbox и кнопка "Добавить", которая по умолчанию неактивна и станет активной только тогда, когда все введённые данные будут валидны. Как это реализовать в MVVM?

Провека данных осуществляется при потере фокуса с поля, а следовательно до попытки преобразовать введённые данные в новый экземпляр модели (то есть до обращения к модели). ViewModel по концепции MVVM не имеет права ничего знать о View. Как же тогда быть? Нам нужна возможность получать состояния от всех полей, управлять этими состояниями и состоянием кнопки, а также реагировать на эти состояния сообщениями об ошибках.

Answer 1

Я бы советовал абстрагировать форму ввода как отдельную вьюху (если у вас еще не так). Реализуйте интерфейс IDataErrorInfo вашей вьюмоделью.

Пожалуйста, просмотрите это.

Далее - сделайте простой конвертер NonEmptyStringToBooleanConverter и прибиндите его на Enabled свойство кнопки:

<Button Content="Submit" Enabled="{Binding Error, Converter={StaticResource NonEmptyStringToBooleanConverter}" />

Если не понятна идея с NonEmptyStringToBooleanConverter, могу объяснить подробнее.

---

Как верно заметил @Андрей, можно на кнопку повесить комманду, которая будет изменять "возможноть своего выполнения" (т.е разрешать/запрещать выполнение).

Данное решение использует классы BindableBase и DelegateCommand из библиотеки Prism.Wpf:

public abstract class ValidatableViewModelBase : BindableBase, IDataErrorInfo
{
    private readonly DelegateCommand _submitCommand;
    private string _error;


    public string Error
    {
        get => _error;
        private set
        {
            if (SetProperty(ref _error, value))
            {
                _submitCommand.RaiseCanExecuteChanged();
            }
        }
    }

    public string this[string columnName] => Error = Validate(columnName);


    public ICommand SubmitCommand => _submitCommand;


    protected ValidatableViewModelBase()
    {
        _submitCommand = new DelegateCommand(Submit, () => String.IsNullOrEmpty(Error));
    }


    protected abstract string Validate(string columnName);

    protected abstract void Submit();
}

И тогда вьюха будет выглядеть как:

<TextBox Text="{Binding Text, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />
<TextBlock Text="{Binding Error}" />
<Button Content="Submit" Command="{Binding SubmitCommand}" />

И её вью модель:

public class FormViewModel : ValidatableViewModelBase
{
    private string _text;


    public string Text
    {
        get => _text;
        set => SetProperty(ref _text, value);
    }


    protected override string Validate(string columnName)
    {
        switch (columnName)
        {
            case nameof(Text):
                if (String.IsNullOrEmpty(Text))
                {
                    return "Text can not be empty.";
                }
                break;
            default:
                throw new ArgumentOutOfRangeException(nameof(columnName), columnName, null);
        }

        return String.Empty;
    }

    protected override void Submit()
    {
        Debugger.Break();
    }
}

И по итогу это будет выглядеть так:

Если Submit необязательный, то можно сделать его виртуальным вместо абстрактного.

Answer 2

В XAML разметке вашего textbox при привязывании используйте UpdateSourceTrigger=PropertyChanged, например,

<TextBox Text="{Binding NewUser, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">

А в самом свойстве задайте вызов функции проверки, которая и будет принимать решение о валидности ваших данных

Answer 3

Для таких целей в рамках MVVM используется RelayCommand. Предлагаю, если Вы работаете с MVVM, написать свою маленькую dll где будут хелперы, вроде этой RelayCommand и прочих интересных вещей, например IObservableProperty. У меня у самого есть своя dll где есть набор стилей, хелперов, кастомных контролов и прочих вещей которые помогают при разработке.

    public class RelayCommand : ICommand
    {
        private readonly Action<object> m_command;
        private readonly Func<bool> m_canExecute;  

        public event EventHandler CanExecuteChanged;

        public RelayCommand(Action<object> _command,Func<bool> _canExecute)
        {
            m_command = _command;
            m_canExecute = _canExecute;
        }

        public void RaiseCanExecuteChanged()
        {
            var handler = CanExecuteChanged;
            if(handler == null)
                return;

            handler.Invoke(this,new EventArgs());
        }

        public bool CanExecute(object _entity)
        {
            return m_canExecute == null || m_canExecute(_entity);
        }

        public void Execute(object _entity)
        {
            m_command(_entity);
        }

    }