In this demonstration,
you will learn how to show the actual error in the ToolTip.
Let's switch to Visual Studio.
When you remove from a customer the first name, the text box gets a red border.
But as a user, you don't see the error message.
Now in this clip, let's show it in a ToolTip.
Let's keep the application running, and let's go to the Solution Explorer.
I expand here the ViewModel folder, and I open the CustomerItemViewModel class.
Here in the setter of the FirstName property,
we add the error Firstname is required.
So this error message should be visible in the ToolTip.
Let's go again to the Solution Explorer, and let's expand here the View folder.
I open here the CustomersView.xaml file, and I scroll down in this file.
Here you can see the TextBox that is bound to that
FirstName property. So on this TextBox, you want to show
the validation error in the ToolTip.
To do this, you have to use a style for this TextBox.
As you know,
we have already created here in the Resources folder of
our project the Styles.xaml file.
Let's open that file.
And as you might remember,
it contains here an implicit style for text box elements,
and that style can be used to show the error in a ToolTip.
When the binding of the TextBox has a validation error on the TextBox,
the attached validation HasError property is set to true.
This means you can create here a Property trigger for that
attached Validation.HasError property.
Let's check with the Property trigger if that property is True.
And if that's the case, you can define here different setters.
I just copy here the Setter for the Background property,
and now let's set here the Value to Red.
This means if we have a validation error,
the text box will have a red background.
Let's bring up the application again to see this.
Yes, as you can see, the Firstname text box is red.
When I type in a name, it is black again.
And as soon as the Firstname is empty, the text box is red.
Now let's go again to the Styles.xaml file.
In this Trigger,
let's create another Setter for the ToolTip Property of our TextBox.
Now here, setting the value is a bit more complicated.
The validation errors are also stored in an attached property on the TextBox.
To correct the error, you need to use here a data binding.
You need the TextBox as a data source.
To do this,
you use the RelativeSource property and you initialize it with the
RelativeSource markup extension with the mode Self.
This gives you the TextBox element as a data source.
Now let's set on that binding markup extension the Path property.
You'll want to grab the attached Validation.Errors property from the TextBox.
And to grab that property in a binding path,
you need to put it into parentheses like you see it here.
Next, let's grab here the first error from that Errors property,
and the error has an ErrorContent property that contains the error message.
Now let's close here the setter, and let's bring up the application again.
Let's hover here the Firstname text box,
and you can see the error message in the ToolTip.
The ToolTip as such is a bit small,
so let's go back to the Styles.xaml file and let's change this.
I create here another implicit Style for the TargetType ToolTip.
In this style, let's create a Setter for the FontSize property,
and let's set it to a value of 20.
Now let's bring up the application again.
Now let's hover here the Firstname text box,
and now you can see here the error message in the ToolTip with a nice font size.
All right, in the next clip,
let me show you how you can display the error message directly here in the user interface.