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?

Purse

Answer 1

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.

Hypanthium

Nice link, thanks for the info. I'll read the whole thing this afternoon when I get some additional free time. I take it DelegateCommand is your own implementation of the command pattern, or is this something in the .net framework that I'm missing? – Purse

@IanP DelegateCommand is part of Prism which seems to be the de facto way of writing WPF apps these days.... – Lessee

Hmm.. Without knowing what DelegateCommand does, this doesn't help me as much as I had hoped.. lol – Purse

Ah -- Kent has a link to a sample DelegateCommand implementation on his blog. Thanks again! – Purse

Unfortunately, the link is dead which is making this answer useless. – Kablesh

Dead link updated (to an archived version of the article). – Abbreviated

Answer 2

Just bind the IsEnabled property of the Button to CanClose:

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

Beebread

No way, is it really that easy? I have no idea how I could've overlooked that. Let me try it out. – Purse

Thanks, I can't believe I overlooked such an easy answer to the problem. – Purse

Worth to note that if you are going down the MVVM approach and you are using Commands and their CanExecute property, according to the microsoft docs you should not be using the IsEnabled property. It's in the docs and marked as Important: learn.microsoft.com/en-us/xamarin/xamarin-forms/… – Counterirritant

Answer 3

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.

Churchyard

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();
            }
        }
    }

Damask

Answer 5

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"/>

Cordero

Answer 6

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}"

Ethiopia