How does one "disable" a button in WPF using the MVVM pattern?

Question

I'm trying to get a grasp on WPF and MVVM and have been making good progress. The WPF and MVVM side of things are going well.

However, the XAML and data binding side is a whole other story :)

How would I go about "disabling" a button?

For example, I have a CanClose property in my view model that determines whether or not the application can currently be closed. If a worker thread is off doing something, then this property is set to false and I'd like to either grey out the button or somehow visually disable the Close button via some sort of binding.

How would I go about doing this?

Thanks!

Edit -

Too bad I can only accept one answer.

These two answers helped me tremendously. In Kent's post, he went a step further by explaining why you should implement a command infrastructure in your application instead of disabling a button in the way that I had asked:

How does one "disable" a button in WPF using the MVVM pattern?

And the answer to my original question:

How does one "disable" a button in WPF using the MVVM pattern?

Answer 1

A lot of the answers on here are old and I'm not sure they are current any more. Here is how I did it using RelayCommand. I have a save Save button in .xaml tied to an instance of a relay command class in the viewmodel. The relay command also accepts an argument that can be bound to in the xaml to pass a reference to the view object. When a property in the viewmodel changes I call SaveCommand.RaiseCanExecuteChanged(); to ge the button to execute it's CanSave longic.

Here is the viewmodel:

namespace Projectname.viewmodels
{
    internal class addressPointVM : INotifyPropertyChanged, IDataErrorInfo
    {
       public addressPointVM() {
            SaveCommand = new RelayCommand<object>((parms) => DoSave(parms), parms => CanISave()); 
        }

        private bool CanISave()
        {
            return CanSave;
        }

        private void DoSave(object parms)
        {
             //ProWindow is my view that is calling the command
            (parms as ProWindow).DialogResult = true;
            (parms as ProWindow).Close(); ;
         }

        public RelayCommand<object> SaveCommand { get; private set; 
        private bool _canSave = false;
        //other elements alter this property and then call SaveCommand.RaiseCanExecuteChanged()
        public bool CanSave 
        {
            get
            {
                return _canSave;
            } 
            set
            {
                if (_canSave == value) return;
                _canSave = value;
            }
         }
    }
}

Here is the relaycommand class

    public class RelayCommand<T> : ICommand
{
    Action<T> _TargetExecuteMethod;
    Func<T, bool> _TargetCanExecuteMethod;

    public RelayCommand(Action<T> executeMethod, Func<T, bool> canExecuteMethod)
    {
        _TargetExecuteMethod = executeMethod;
        _TargetCanExecuteMethod = canExecuteMethod;
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged(this, EventArgs.Empty);
    }
    

    bool ICommand.CanExecute(object parameter)
    {
        if (_TargetCanExecuteMethod != null)
        {
            T tparm = (T)parameter;
            return _TargetCanExecuteMethod(tparm);
        }
        if (_TargetExecuteMethod != null)
        {
            return true;
        }
        return false;
    }

    public event EventHandler CanExecuteChanged = delegate { };

    void ICommand.Execute(object parameter)
    {
        if (_TargetExecuteMethod != null)
        {
            _TargetExecuteMethod((T)parameter);
        }
    }
    
}

And Finally here is the xaml:

<Button Command="{Binding SaveCommand}" Style="{DynamicResource Esri_Button}" CommandParameter="{Binding ElementName=AddAddressPointWin}" Content="Save" Margin="5"/>

Answer 2

By way of using the command pattern. In your view model:

public class MyViewModel : ViewModel
{
    private readonly ICommand someCommand;

    public MyViewModel()
    {
        this.someCommand = new DelegateCommand(this.DoSomething, this.CanDoSomething);
    }

    public ICommand SomeCommand
    {
        get { return this.someCommand; }
    }

    private void DoSomething(object state)
    {
        // do something here
    }

    private bool CanDoSomething(object state)
    {
        // return true/false here is enabled/disable button
    }
}

In your XAML:

<Button Command="{Binding SomeCommand}">Do Something</Button>

Read this post to find out more about the DelegateCommand.

Answer 3

Change in ViewModel file:

public bool IsButtonEnabled { get { return _isButtonEnabled; }

set
{
    if (_isButtonEnabled == value)
    {
        return;
    }

    _isButtonEnabled = value;
    OnPropertyChanged("IsButtonEnabled");
}
}

public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

Changes in the XAML file for Button: IsEnabled="{Binding IsButtonEnabled}"

Answer 4

This works too:

View:

        <Button>
            <Button.Style>
                <Style>
                    <Setter Property="Content" Value="Scream" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding btnEnabled}" Value="True">
                            <Setter Property="IsEnabled" Value="True" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

ViewModel:

    private bool _btnEnabled;
    public bool btnEnabled
    {
        get { return _btnEnabled; }
        set
        {
            if (_btnEnabled != value)
            {
                _btnEnabled = value;
                OnPropertyChanged();
            }
        }
    }

Answer 5

If you return CanExecute of ICommand a value of false, then Button will be disabled. So whatever command your button is bound to, see if you can return CanExecute a value of false when you want to disable it.

Answer 6

Just bind the IsEnabled property of the Button to CanClose:

<Button IsEnabled="{Binding CanClose}"/>