Windows Phone MVVM: Button Command Can Execute and Command Paramtere

Question

I want to implement MVVM patter to a registeration page like this:

The Page has text boxes for username, email and password.

I want to bind the Register Button to a command using ICommand and DelegateCommand pattern.

The problem is that I want the button to be disabled if the textboxes are empty and enabled if they have text.

My Model is:

public class User
    {
        public string UserName { get; set; }
        public string Email { get; set; }
        public string Password { get; set; }
    }

My ViewModel:

public class UserViewModel:INotifyPropertyChanged
    {
        private User user;
        public UserViewModel()
        {
            user = new User();
        }
#region Properties
.
.
.
#endregion
public ICommand RegisterCommand
        {
            get
            {
                return new DelegateCommand(Register,CanRegister);
            }
        }

        private void Register(object parameter)
        {
            //TODO call the web service
        }

        private bool CanRegister(object parameter)
        {
            return (!string.IsNullOrEmpty(UserName) && !string.IsNullOrEmpty(Password));
        }
}

My DelegateCommand Implementation:

public class DelegateCommand:ICommand
    {
        //Delegate to the action that the command executes
        private Action<object> _executeAction;
        //Delegate to the function that check if the command can be executed or not
        private Func<object, bool> _canExecute;

        public bool canExecuteCache;

        public DelegateCommand(Action<object> executeAction):this(executeAction,null)
        {

        }

        public DelegateCommand(Action<object> action, Func<object, bool> canExecute)
        {
            this._executeAction = action;
            this._canExecute = canExecute;
        }

        //interface method, called when CanExecuteChanged event handler is fired
        public bool CanExecute(object parameter)
        {
            //true by default (in case _canExecute is null)
            bool result = true;
            Func<object, bool> canExecuteHandler = this._canExecute;
            if (canExecuteHandler != null)
            {
                result = canExecuteHandler(parameter);
            }

            return result;
        }

        //Event handler that the controld subscribe to 
        public event EventHandler CanExecuteChanged;


        //interface method
        public void Execute(object parameter)
        {
            _executeAction(parameter);
        }


        //rause the CanExecuteChanged event handler manually
        public void RaiseCanExecuteChanged()
        {
            EventHandler handler = this.CanExecuteChanged;
            if (handler != null)
            {
                handler(this, EventArgs.Empty);
            }

        }



    }

and My View:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Text="Username:"/>
            <TextBox Grid.Row="1" Name="txtUserName" Text="{Binding UserName, Mode=TwoWay}" HorizontalAlignment="Stretch"/>
            <TextBlock Grid.Row="2" Text="Password:" HorizontalAlignment="Stretch" />
            <TextBox Grid.Row="3" Name="txtPassword" Text="{Binding Password, Mode=TwoWay}"/>
            <Button Grid.Row="4" Content="Register" Command="{Binding RegisterCommand }"   />
        </Grid>

What I want to achieve is to make the button disabled untill the user enters information in each TextBox

how can this be done ?

Thanks

Answer 1

One thing first: Returning a new DelegateCommand every time the property is accessed will limit your ability to call the RaiseCanExecuteChanged() method as you won't have a reference to the same command as is bound.

So change your ViewModel to be something like this:

public class UserViewModel : INotifyPropertyChanged
{
   private User user;
   public UserViewModel()
   {
      user = new User();
      RegisterCommand = new DelegateCommand(Register,CanRegister);
   }

   public DelegateCommand RegisterCommand {get; private set;}

   private void Register(object parameter)
   {
      //TODO call the web service
   }

   private bool CanRegister(object parameter)
   {
      return (!string.IsNullOrEmpty(UserName) && 
              !string.IsNullOrEmpty(Password));
   }
}

The reason you can have the RegisterCommand property as private set with no PropertyChanged call as it will be instantiated before the binding occurs and doesn't need to change.

Assuming the form of the properties UserName and Password trigger the PropertyChanged event, you can just call the RaiseCanExecuteChanged() method on the RegisterCommand when they change.

Eg.

private string _userName;
public string UserName
{
    get { return _userName; }
    set
    {
        if(_userName == value)
            return;

        _userName = value;
        RaisePropertyChanged("UserName");

        RegisterCommand.RaiseCanExecuteChanged();
    }
}

this will force the CanExecute method to re-evaluated.