CanExecute() not enabling button when condition is met

Question

I have a very simple application with a TextBox and a Button. When the text entered into the TextBox exceeds 5 characters in length, the button will be enabled. Here is the code for my ViewModel:

private string _text { get; set; }
public string Text
{
    get { return _text; }
    set
    {
        _text = value;
        OnPropertyChanged("Text");
    }
}

private ICommand _buttonCommand;
public ICommand ButtonCommand
{
    get
    {
        if (_buttonCommand == null)
        {
            _buttonCommand = new RelayCommand(
                param => this.ButtonCommandExecute(), 
                param => this.ButtonCommandCanExecute()
            );
        }
        return _buttonCommand;
    }
}

private bool ButtonCommandCanExecute()
{
    if (this.Text.Length < 5)
    {
        return false;
    }
    else
    {
        return true;
    }
}

private void ButtonCommandExecute()
{
    this.Text = "Text changed";
}

public MainWindowViewModel()
{
    //
}

The TextBox and Button are bound using this XAML:

<Button Content="Button" HorizontalAlignment="Left" 
                Margin="185,132,0,0" VerticalAlignment="Top" Width="120"
                Command="{Binding Path=ButtonCommand}" />

<TextBox HorizontalAlignment="Left" Height="23" 
         Margin="185,109,0,0" TextWrapping="Wrap" 
         Text="{Binding Path=Text, Mode=TwoWay}" VerticalAlignment="Top" Width="120"/>

The DataContext appears to be set correctly, but here it is just because I am a WPF beginner:

private MainWindowViewModel view_model;

public MainWindow()
{
    InitializeComponent();

    view_model = new MainWindowViewModel();

    this.DataContext = view_model;
}

When I type into the TextBox, the Button never enables.

Answer 1

Some implementations of ICommand interface have special method to notify whether "CanExecute" has changed. RelayCommand class (MVVM Light) has such method.

private string _text;
public string Text
{
    get { return _text; }
    set
    {
        _text = value;
        OnPropertyChanged("Text");

        // There is a special RelayCommand method to notify "CanExecute" changed.
        // After this call, the "CanExecute" state is "re-evaluated" automatically by binding using CanExecute Func passed into RelayCommand constructor.
        _buttonCommand.RaiseCanExecuteChanged();
    }
}

private RelayCommand _buttonCommand;
public ICommand ButtonCommand
{
    get
    {
        if (_buttonCommand == null)
        {
            _buttonCommand = new RelayCommand(
                param => this.ButtonCommandExecute(), 
                param => this.ButtonCommandCanExecute()
            );
        }
        return _buttonCommand;
    }
}

This question can be useful: What is CanExecuteChanged for?

Answer 2

Actually you have to make Bool Property to bind to the IsEnabled property of the Button Control. And set this property to true when your text in Textbox is more than five character - you have to do this in Setter of Text property Because this is what being called when you type in your TextBox.

Basic About Commands :- These are basically to Report the e.g Clicks events to the C# code say your Viewmodel/Page.cs . So that you can perform some Tasks. It is not related to anything about Enabling and disabling of button.

Follow the Code :-

private string _text { get; set; }
public string Text
{
    get { return _text; }
    set
    {
        _text = value;

        if(_text.Length  > 5)
        // Enable button here
        // and command does not enable Buttons they are basically report the clicks events.
        IsButtonEnabled = true;

        OnPropertyChanged("Text");
    }
}

For Enabling Button Create Bool type property Called IsButtonEnabled and bind this property to your Button in Xaml.

private bool _IsButtonEnabled { get; set; }
public bool IsButtonEnabled
{
    get { return _IsButtonEnabled ; }
    set
    {
        _IsButtonEnabled = value;
        OnPropertyChanged("IsButtonEnabled");
    }
}

In Xaml :-

<Button Content="Button" HorizontalAlignment="Left" 

             IsEnabled="{Binding IsButtonEnabled}"

            Margin="185,132,0,0" VerticalAlignment="Top" Width="120"
            Command="{Binding Path=ButtonCommand}" />