Form Validation confirmation disables submit button until all fields are filled in WPF

Question

Given: WPF 4.0 for desktop applications. Basic input form with two TextBox fields and a submit button.

XAML code:

<Label Content="Username" /> <TextBox x:Name="Form_UserName" /> <Label Content="Password" /> <TextBox x:Name="Form_Password" /> <Button x:Name="Submit" Click="Form_Submit_Button_Click" Content="Submit" /> 

Task: Implement the logic when the submit button is enabled, if and only if two TextBox fields are filled.

The classic way to solve this problem is to use event handlers such as onLostFocus () or something like that, where we can monitor the state of these fields every time the user switches focus from the field.

But since my project is based on WPF, I prefer to use my own way of working with forms - the DataBinding mechanism. I read some articles from this site and MSDN also about form validation, but almost all examples suggest using the MVVM environment, and I would like to implement it without any frameworks.

In addition, I tried to play with IMultiValueConverter, but the result was not received.

Please tell me (code) how to solve this problem with Databinding as simple as possible (I'm just starting with WPF).

Answer 1

This can be easily done using WPF validation mechanisms. First, since you want to follow the WPF architecture, I recommend that you use the WPF Command Model .

Now to implement your functionality you can add CommandBinding to Window / UserControl or Button :

 <Button Content="Save" Command="Save"> <Button.CommandBindings> <CommandBinding Command="Save" Executed="Save_Executed" CanExecute="Save_CanExecute" /> </Button.CommandBindings> </Button> 

You can now subscribe to the CanExecute event to enable or disable your button based on your validation logic. I recommend these readings before continuing:

Validation in Windows Presentation Foundation

Using custom validation rules in WPF

The easiest way to fulfill your requirements:

XAML

 <Window x:Class="GridScroll.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:GridScroll" Title="Window1" Height="300" Width="300"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="200"/> </Grid.ColumnDefinitions> <TextBlock Text="User Name" Grid.Column="0" Grid.Row="0"/> <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Path=UserName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/> <TextBlock Text="Password" Grid.Column="0" Grid.Row="1"/> <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Path=Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/> <Button Content="Save" Grid.Row="2" Grid.ColumnSpan="2" Width="100" HorizontalAlignment="Right" Command="Save"> <Button.CommandBindings> <CommandBinding Command="Save" Executed="Save_Executed" CanExecute="Save_CanExecute"/> </Button.CommandBindings> </Button> </Grid> 

Code behind

 public partial class Window1 : Window,INotifyPropertyChanged { public Window1() { InitializeComponent(); DataContext = this; } private string userName; public string Username { get { return userName; } set { userName = value; OnPropertyChanged("UserName"); } } private string password; public string Password { get { return password; } set { password = value; OnPropertyChanged("Password"); } } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } private void Save_Executed(object sender, ExecutedRoutedEventArgs e) { //Your code } private void Save_CanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = !(string.IsNullOrEmpty(Username) && string.IsNullOrEmpty(Password)); } } 

Hope this helps.