WPF ValidationRule Binding to display the error message - wpf

Question

In the following code, I am using ValidationRule to validate user input on a TextBox. It works fine. If user enters invalid data (any non-alphabet character) it displays a small red ! sign on the left of the textbox, and also if you mouseover the textbox it would display an invalid data message (as shown in the image below).
Question: How can we modify the following code so - instead of tooltip, the invalid data message is displayed just below the textbox?
Remarks: I tried replacing ToolTip with TexBlock in the following line <Setter Property="ToolTip" of the XAML below, and put a textblock below TexBox as follows: <TextBlock Text="{Binding (Validation.Errors)[0].ErrorContent, ElementName=txtTest}"/>. But (as expected) it did not work since TextBlock, of course, is not a property of TextBox
MyDataSource.cs:
public class MyDataSource
{
public MyDataSource()
{
}
public string FirstName { get; set; }
}
AlphabetsOnlyValidationRule:
public class AlphabetsOnlyValidationRule : ValidationRule
{
public override ValidationResult Validate(object value, CultureInfo cultureInfo)
{
string sVal = value as string;
if (string.IsNullOrEmpty(sVal))
{
return new ValidationResult(false, "Please enter some text");
}
if (!sVal.ToList().All(t => char.IsLetter(t)))
{
return new ValidationResult(false, "First Name should contains alphabets only");
}
return new ValidationResult(true, null);
}
}
MainWindow.xaml:
<Window.Resources>
<local:MyDataSource x:Key="Ods"/>
<local:AlphabetsOnlyValidationRule x:Key="AlphabetsOnlyKey"/>
<ControlTemplate x:Key="ValidationTemplate">
<DockPanel>
<TextBlock Foreground="Red" FontSize="20">!</TextBlock>
<AdornedElementPlaceholder/>
</DockPanel>
</ControlTemplate>
<Style x:Key="TextBoxInError" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<TextBox x:Name="txtTest" Margin="48,0,572,388" Style="{StaticResource TextBoxInError}" Validation.ErrorTemplate="{StaticResource ValidationTemplate}">
<TextBox.Text>
<Binding Path="FirstName" Source="{StaticResource Ods}" UpdateSourceTrigger="PropertyChanged" >
<Binding.ValidationRules>
<local:AlphabetsOnlyValidationRule />
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
</Grid>
Screenshot of Validation Message [When user enters non-alphabet character]

Answer 1

Add a TextBlock that binds to the ErrorContent property to the Validation.ErrorTemplate:
<ControlTemplate x:Key="ValidationTemplate">
<DockPanel>
<TextBlock Foreground="Red" FontSize="20" DockPanel.Dock="Left">!</TextBlock>
<TextBlock Text="{Binding [0].ErrorContent}" Foreground="Red" DockPanel.Dock="Bottom"/>
<AdornedElementPlaceholder/>
</DockPanel>
</ControlTemplate>