WPF converter for real-time updating the text color of the text field when changing text

Question

I have two text fields for the first name and second username, and I created a converter to change the background color of the text field when the text is equal to a specific line. The problem I am facing is that the text field will only be updated at runtime and not updated when I change the text to text field.

XAML:

<TextBox x:Name="forenameTextBox" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="3" Grid.Row="1" Background="{Binding Staff,Converter ={StaticResource StaffNameToBackgroundColourConverter1}}" Text="{Binding Staff.Forename, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="120"/> <Label Content="Surname:" Grid.Column="0" HorizontalAlignment="Left" Margin="3" Grid.Row="2" VerticalAlignment="Center"/> <TextBox x:Name="surnameTextBox" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="3" Grid.Row="2" Background="{Binding Staff,Converter={StaticResource StaffNameToBackgroundColourConverter1}}" Text="{Binding Staff.Surname, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="120"/> 

Converter Code:

 public class StaffNameToBackgroundColourConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var staff = (Staff) value; if (staff.Forename == "Donald" && staff.Surname == "Duck") { return "Yellow"; } else { return "White"; } } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } } 

Correct text entry:

Incorrect text input - no change:

Answer 1

You need to add UpdateSourceTrigger=PropertyChanged to your Binding :

 <TextBox x:Name="forenameTextBox" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="3" Grid.Row="1" Background="{Binding Staff, UpdateSourceTrigger=PropertyChanged, Converter ={StaticResource StaffNameToBackgroundColourConverter1}}" Text="{Binding Staff.Forename, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="120"/> <TextBox x:Name="surnameTextBox" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="3" Grid.Row="2" Background="{Binding Staff, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource StaffNameToBackgroundColourConverter1}}" Text="{Binding Staff.Surname, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="120"/> 

This will update the binding source as the user enters each letter. You can find out more at the Binding.UpdateSourceTrigger Property page on MSDN.

Answer 2

First you added UpdateSourceTrigger=PropertyChanged to the wrong binding. You must add it to the binding of the Text property.

Secondly, you bound the Text property to Staff.Forename , but from Background to Staff . The Background property does not know that Staff has changed when it is written to Staff.Forename . You should raise the PropertyChanged event for the Staff property when you write in the Staff.Forename property. The same goes for Staff.Surname .

Answer 3

You should return some brush object than background colors, as shown below

 public class StaffNameToBackgroundColourConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var staff = (Staff)value; if (staff.Forename == "Donald" && staff.Surname == "Duck") { return new SolidColorBrush(Colors.Yellow); } else { return new SolidColorBrush(Colors.White); } } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } }