0

I'm new to MVVM. I have three textboxes and a button in my view. I want that button to be enabled when all those three textboxes are filled. My view is as below:

<StackPanel Margin="1,1,1,1" Grid.Row="0"> <!--<Label Margin="2,2,2,2" Content="ID:"/> <dxe:TextEdit Margin="2,2,2,2" Text="{Binding ElementName=StudentGrid, Path=SelectedItem.Id}"/>--> <Label Margin="2,2,2,2" Content="Name:"/> <dxe:TextEdit Margin="2,2,2,2" x:Name="Name" Text="{Binding Path=Name}" /> <Label Margin="2,2,2,2" Content="Last Name:"/> <dxe:TextEdit Margin="2,2,2,2" x:Name="LastName" Text="{Binding Path=LastName}" /> <Label Margin="2,2,2,2" Content="Age:"/> <dxe:TextEdit Margin="2,2,2,2" x:Name="Age" Text="{Binding Path=Age}" /> </StackPanel> <ListView Name="StudentGrid" Grid.Row="1" Margin="1,1,1,1" ItemsSource="{Binding studentList}"> <ListView.View> <GridView> <GridViewColumn Header="ID" Width="50" DisplayMemberBinding="{DXBinding Id}"/> <GridViewColumn Header="Name" Width="80" DisplayMemberBinding="{DXBinding Name}"/> <GridViewColumn Header="Last Name" Width="80" DisplayMemberBinding="{DXBinding LastName}"/> <GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{DXBinding Age}"/> </GridView> </ListView.View> </ListView> <StackPanel Grid.Row="2" Margin="1,2,1,1"> <dx:SimpleButton x:Name="applybtn" Content="Insert" Width="60" HorizontalAlignment="Left" Margin="5,0,0,0" Command="{Binding Path=_myCommand}"/> </StackPanel>

InserCommand code is:

 public class InsertCommand : ICommand { public StudentListViewModel _viewModel { get; set; } public InsertCommand(StudentListViewModel viewModel) { _viewModel = viewModel; } public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; } public void Execute(object parameter) { _viewModel.InsertStudent(); } }

StudentListViewModel code is:

public class StudentListViewModel : INotifyPropertyChanged { private string _name; private string _lastName; private int _age; public string Name { get => _name; set { _name = value; OnPropertyChanged("Name"); } } public string LastName { get => _lastName; set { _lastName = value; OnPropertyChanged("LastName"); } } public int Age { get => _age; set { _age = value; OnPropertyChanged("Age"); } } public InsertCommand _myCommand { get; set; } private ObservableCollection<Student> _studentList; public StudentListViewModel() { _myCommand = new InsertCommand(this); using (MyContext context = new MyContext()) { _studentList = new ObservableCollection<Student>(context.Students.ToList()); }; } public void InsertStudent() { Student st = new Student() { Name = _name, LastName = _lastName, Age = _age }; using (var context = new MyContext()) { context.Add(st); context.SaveChanges(); _studentList.Add(st); //For Getting instatnt UI update } } public ObservableCollection<Student> studentList { get { return _studentList; } set { _studentList = value; } } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } }
Improve this question
1

3 Answers 3

Reset to default
0

It's not usual to create a new class for each command.

Instead, create a generic command class with action / func parameters to specify each command's logic.

public class RelayCommand : ICommand { private readonly Action _execute; private readonly Func<bool> _canExecute; public RelayCommand(Action execute) : this(execute, () => true) { } public RelayCommand(Action execute, Func<bool> canExecute) { _execute = execute ?? throw new ArgumentNullException(nameof(execute)); _canExecute = canExecute; } public bool CanExecute(object parameter) => _canExecute.Invoke(); public void Execute(object parameter) => _execute.Invoke(); public event EventHandler CanExecuteChanged; public void RaiseCanExecuteChanged() { CanExecuteChanged?.Invoke(this, EventArgs.Empty); } }

Then, create an instance of this class in your ViewModel that you can bind your button to.

public class StudentListViewModel : INotifyPropertyChanged { private string _name; private string _lastName; private int _age; public string Name { get => _name; set { _name = value; OnPropertyChanged("Name"); InsertCommand.RaiseCanExecuteChanged(); } } public string LastName { get => _lastName; set { _lastName = value; OnPropertyChanged("LastName"); InsertCommand.RaiseCanExecuteChanged(); } } public int Age { get => _age; set { _age = value; OnPropertyChanged("Age"); InsertCommand.RaiseCanExecuteChanged(); } } public RelayCommand InsertCommand { get; } public StudentListViewModel() { InsertCommand = new RelayCommand(() => InsertStudent(), () => !string.IsNullOrEmpty(Name) && !string.IsNullOrEmpty(LastName) && Age > 0); ... } public void InsertStudent() { .... } }

For a cleaner way to handle command refresh, so that each property doesn't need to care how it is used, check out my blog post.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

I used your code, but when I fill all those three fields, the button is still disabled.
My mistake - replace _myCommand with InsertCommand in the VM constructor.
Now, it's always enabled even when all those textboxes are empty.
Why did you use perRelayCommand in the constructor while your class name is RelayCommand?
And, please explain what () => means in () => InsertStudent().
|
0

Usually I create Binding Validations so that I can reuse on other textboxes.

Then on the button I create triggers to enable or disable the button based on the validations defined.

<Button Comman="{Binding InsertCommand}" Content="Insert"> <Button.Style> <Style TargetType="{x:Type Button}"> <Setter Property="IsEnabled" Value="False" /> <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding ElementName=Name, Path=(Validation.HasError)}" Value="False"/> <Condition Binding="{Binding ElementName=LastName, Path=(Validation.HasError)}" Value="False"/> <Condition Binding="{Binding ElementName=Age, Path=(Validation.HasError)}" Value="False"/> </MultiDataTrigger.Conditions> <Setter Property="IsEnabled" Value="True" /> </MultiDataTrigger> </Style.Triggers> </Style> </Button.Style> </Button>

For very simple not null validations, Instead of creating validations, I just test against the text property of the textbox

<Button Comman="{Binding InsertCommand}" Content="Insert"> <Button.Style> <Style TargetType="{x:Type Button}"> <Setter Property="IsEnabled" Value="True" /> <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding ElementName=Name, Path=Text}" Value=""/> <Condition Binding="{Binding ElementName=LastName, Path=Text}" Value=""/> <Condition Binding="{Binding ElementName=Age, Path=Text}" Value=""/> </MultiDataTrigger.Conditions> <Setter Property="IsEnabled" Value="False" /> </MultiDataTrigger> </Style.Triggers> </Style> </Button.Style> </Button>
Improve this answer

Comments

0

button to be enabled when all those three textboxes are filled.

Create a new bool property called IsButtonEnabled.

Whenever text changes (two-way binding and update source triggeer in the binding right? -> How-to bind, my answer) to push the current string(s) to the VM's properties in real time.

Those properties in question, their values will be checked in the IsButtonEnabled getter. Then in each of the setters for the strings, add a OnPropertyChanged for IsButtonEnabled. Also bind IsButtonEnabled to the proper button property to achieve your desired affect.

Example

// Doesn't need its own OnPropertyChanged, because that is set // for every keystroke. public bool IsButtonEnabled { get { return !string.IsNullOrEmpty(Name) && !string.IsNullOrEmpty(LastName) && !string.IsNullOrEmpty(Age); }} public string Name { get => _name; set { _name = value; OnPropertyChanged("Name"); OnPropertyChanged("IsButtonEnabled"); InsertCommand.RaiseCanExecuteChanged(); } } public string LastName ... set { _lastName = value; OnPropertyChanged("LastName"); OnPropertyChanged("IsButtonEnabled"); ... public string Age ... set { _age= value; OnPropertyChanged("Age"); OnPropertyChanged("IsButtonEnabled"); ....

Xaml

<dx:SimpleButton x:Name="applybtn" IsEnabled="{Binding IsButtonEnabled}" ...

Similar answer given

Improve this answer

Comments