在 WPF 中使用样式的边框粗细

Question

I am making a little project, in which I am using data validation. Now I am trying to make styling for TextBox , when the input is not correct. I want to make a red border around the TextBox and a ToolTip with error message, which I return from C# code.

I started with making the red border. I wrote this in XAML:

<Window.Resources>
   <Style x:Key="ErrorTemplate" TargetType="TextBox">
      <Style.Triggers>
         <Trigger Property="Validation.HasError" Value="True">
            <Setter Property="BorderBrush" Value="Red"></Setter>
            <Setter Property="BorderThickness" Value="5"></Setter>
         </Trigger>
      </Style.Triggers>
   </Style>
</Window.Resources> 

But if I write it like this, BorderThickness property is changing inner border thickness of the TextBox . With the code above, I get this:

Is there a way, to avoid this, and get something like this?

And in a way, that I can add that ToolTip , using the same Style .

---

EDIT: Code of TextBox :

<TextBox 
   Grid.Row="1"
   Grid.Column="3"
   Margin="10px"
   FontSize="14pt"
   VerticalAlignment="Center"
   Padding="5px"
   Text="{Binding Path=Name, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
   Style="{StaticResource ErrorTemplate}">
   <TextBox.DataContext>
      <local:Data/>
   </TextBox.DataContext>
</TextBox>

Answer 1

The blue border that you see is the border of the TextBox itself, which is light blue by default in its keyboard focused state. The border is 5 dips thick, because you explicitly set it in your provided ErrorTemplate style. The red line around it is the default error template of the TextBox .

In order to meet your requirements, create a style like below.

• Set a general Margin of 5 dips to account for the border that is displayed on error, it could otherwise be cut off outside the container since it is just an overlay over the original TextBox and it is not resized.
• Set an optional default tool tip for the non-error state.
• Set an ErrorTemplate , which is a special template dedicated to the error state, where AdornedElementPlaceholder represents the original TextBox in the template.
• Set a trigger that changes the tool tip text to the validation error in error state.

<Style x:Key="MyTextBoxValidationStyle" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
   <Setter Property="Margin" Value="5"/>
   <Setter Property="ToolTip" Value="There is no error."/>
   <Setter Property="Validation.ErrorTemplate">
      <Setter.Value>
         <ControlTemplate>
            <StackPanel>
               <Border BorderBrush="Red" BorderThickness="5">
                  <AdornedElementPlaceholder/>
               </Border>
            </StackPanel>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <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>

Apply the style to your TextBox using the Style property.

<TextBox Style="{StaticResource MyTextBoxValidationStyle}" ...>

Here is a sample screenshot of the result.