WPF Validation and Style Issue

Question

Hi All,

I have a textbox on screen with ValidationRule for required field validation:

<TextBox Grid.Row="1" Grid.Column="1" Name="txtFirstName" Margin="10,10,5,5" TextChanged="txtFirstName_TextChanged">

<TextBox.Text>

<Binding Path="FirstName" ValidatesOnDataErrors="True" ValidatesOnExceptions="True" UpdateSourceTrigger="PropertyChanged">

    <Binding.ValidationRules>

        <local:RequiredFieldValidation></local:RequiredFieldValidation>

    </Binding.ValidationRules>

</Binding>

</TextBox.Text>

<TextBox.Style>

    <Style TargetType="{x:Type TextBox}">

        <Style.Triggers>

            <Trigger Property="Validation.HasError" Value="True">

                <Setter Property="ToolTip"  Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>

            </Trigger>

        </Style.Triggers>

    </Style>

</TextBox.Style>
```</TextBox>

The above validation is working as expected with tooltip of error message displayed to user. But the dimensions of this textbox has changed(height reduced) as compared to other textboxes which does not have validation. It also has border around it as compared to other textboxes on screen which makes it inconsistent/distinguished on screen. Please advise how can I fix this issue to make it consistent and similar to other textboxes on screen ASAP.

Regards,

Pratham

Answer 1

Hi, @Pratham Jain. Welcome to Microsoft Q&A. 

This change comes from the default Validation.ErrorTemplate. You could set it to empty so that it does not make any changes when an error is reported. Reference code

<Window.Resources>
        <ControlTemplate x:Key="EmptyErrorTemplate" />
</Window.Resources>

<TextBox Grid.Row="1" Grid.Column="1" Name="txtFirstName" Margin="10,10,5,5" TextChanged="txtFirstName_TextChanged" Validation.ErrorTemplate="{StaticResource EmptyErrorTemplate}">
…
</TextBox>

You could also provide your own Template to Validation.ErrorTemplate to update the TextBox when an error occurs. Reference Documentation.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi @Hongrui Yu-MSFT ,

The above issue has been resolved. I have removed the <Textbox.style> and used below ControlTemplate in Textbox Validation.ErrorTemplate which fixed the issue:

<UserControl.Resources>

 <ControlTemplate x:Key="TextErrorTemplate">

     <Grid>

         <Grid.ColumnDefinitions>

             <ColumnDefinition Width="*"></ColumnDefinition>

             <ColumnDefinition Width="auto"></ColumnDefinition>

         </Grid.ColumnDefinitions>

         <AdornedElementPlaceholder x:Name="placeholder"/>

         <TextBlock Grid.Column="1" FontWeight="Bold" Margin="3,0,0,0" VerticalAlignment="Center" FontSize="12" Foreground="Red" Text="*" ToolTip="{Binding Path=/ErrorContent}"></TextBlock>

     </Grid>

 </ControlTemplate>

</UserControl.Resources>

Regards,

Pratham Jain