在C＃wpf中在TextBox周围添加弹出边框动画

Question

I am currently developing a WPF application. When the user submits the form I have a method which checks to ensure that the fields are filled in and what I want to do is, if they are not, display a red to white gradient going around the box as a fade in animation.

Is this possible?

Answer 1

Use validation in your binding, and then assign a validation error template to the TextBox. Here's one that does a red rectangle:

<ControlTemplate x:Key="errorTemplate">
    <Canvas Width="{Binding Path=AdornedElement.ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Adorner}}}" 
            Height="{Binding Path=AdornedElement.ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Adorner}}}">
        <Border BorderBrush="Red" BorderThickness="1" >
            <AdornedElementPlaceholder/>
        </Border>
    </Canvas>
</ControlTemplate>

Add this to the binding: Validation.ErrorTemplate="{StaticResource errorTemplate}

Answer 2

You can use a style and use data trigger to achieve this. This way, when your textbox is empty, you will see a red border and light red background. See the sample code below:

<Style x:Key="RequiredField" TargetType="{x:Type TextBox}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">               
            <Setter Property="TextBox.BorderBrush" Value="{StaticResource MySolidBrush}" />            
            <Setter Property="TextBox.Background" Value="{StaticResource MyInnerBrush}"/>               
            <Setter Property="TextBox.ToolTip" Value="This Field is Mandatory"/>
        </DataTrigger>
    </Style.Triggers>
</Style>