WPF MVVM button command that gets textbox value

Question

I'm having a great trouble with understanding how button command works. I have something like this

{Binding TxtBox} gets value from model, let's say it's "aaa". I would like click the button and the value should appear in the second textbox (the one with {Binding TxtBox2} ).

This is my xaml:

<TextBox Text="{Binding TxtBox, Source={StaticResource viewModel}}" />
<TextBox Text="{Binding TxtBox2, Source={StaticResource viewModel}}" />
<Button Command="{Binding ClickCommand}"/>

This is my ViewModel:

public class CommandHandler : ICommand
{
    private Action _action;
    private bool _canExecute;
    public CommandHandler(Action action, bool canExecute)
    {
        _action = action;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        _action();
    }
}

Do I really need this CommandHandler class? I copied the code from the net.

public string TxtBox
{
    get { return Model.TxtBoxValue; }
    set { Model.TxtBoxValue = value; }
}
public string TxtBox2 { get; set; }

private ICommand _clickCommand;
public ICommand ClickCommand
{
    get
    {
        return _clickCommand ?? (_clickCommand = new CommandHandler(() => MyAction(), _canExecute)); // I believe that when the button is clicked MyAction() is triggered, right?

    }

}
private bool _canExecute = true;
public void MyAction()
{
    this.TxtBox2 = this.TxtBox; // should something like this work? Because right now it doesn't
}

Answer 1

The second textbox's binding never gets notified that it's bound property is changed. When you set this.TxtBox2 you should fire the propertychanged event for that property so the binding will be updated. See think link for everything on bindings

I don't know if you are using prism as mvvm framework but that comes with the DelegateCommand class. I don't think there is a simple/lightweight implementation in the .net framework. See this link for the mvvm framework and the delegate command

Answer 2

The View reacts to binding changes through PropertyChanged events, of which you have none. Have anything that binds to the View implement INotifyPropertyChanged and then fire events when props change, and you're all set for your bindings to work (one way or two way).

Change your model to look like this and it should work for you.

public class MyViewModel : INotifyPropertyChanged
{
    #region INotifyPropertyChanged Members

    [field: NonSerialized]
    public event PropertyChangedEventHandler PropertyChanged = null;

    protected virtual void RaisePropertyChanged(string propName)
    {
        if(PropertyChanged != null)
        {
            Task.Run(() => PropertyChanged(this, new PropertyChangedEventArgs(propName)));
        }
    }

    #endregion

    public string TxtBox
    {
        get { return Model.TxtBoxValue; }
        set
        {
            Model.TxtBoxValue = value;
            RaisePropertyChanged("TxtBox");
        }
    }

    // presuming TxtBox2Value is in Model...else use a field
    public string TxtBox2
    {
        get { return Model.TxtBox2Value; }
        set
        {
            Model.TxtBox2Value = value;
            RaisePropertyChanged("TxtBox2");
        }
    }

    private ICommand _clickCommand;
    public ICommand ClickCommand
    {
        get
        {
            return _clickCommand ?? (_clickCommand = new CommandHandler(() => MyAction(), _canExecute)); // I believe that when the button is clicked MyAction() is triggered, right?

        }

    }
    private bool _canExecute = true;
    public void MyAction()
    {
        this.TxtBox2 = this.TxtBox; // should something like this work? Because right now it doesn't
    }
}

IMO - it is better to have your Model implement INotifyPropertyChanged and then bind directly to it rather than wrap it in your ViewModel. If Model : INotifyPropertyChanged, then your ViewModel now looks like this:

public class MyViewModel
{

    // fire prop changed event here if this model will be swapped out after the ctor...otherwise don't worry about it
    public Model Model { get; set; }

    private ICommand _clickCommand;
    public ICommand ClickCommand
    {
        get
        {
            return _clickCommand ?? (_clickCommand = new CommandHandler(() => MyAction(), _canExecute)); 

        }

    }
    private bool _canExecute = true;
    public void MyAction()
    {
        Model = new Model();

        Model.TxtBox2 = "Some new value"; 
    }
}

...and your xaml changes to this:

<TextBox Text="{Binding Model.TxtBox, Source={StaticResource viewModel}}" />
<TextBox Text="{Binding Model.TxtBox2, Source={StaticResource viewModel}}" />
<Button Command="{Binding ClickCommand}"/>