How mark green IDataErrorInfo isvalid true in WPF

Question

I have ViewModel IDataErrorInfo

I have a property with data annotation:

[Required(ErrorMessage = "Login field should be filled in")]
[RegularExpression(@"\w+(@)[a-zA-z]+(\.)[a-zA-z]+", ErrorMessage = ("Use the right email format"))]
public string Email
{
    get => authRequstModel.Email;
    set => Set(ref authRequstModel.Email, value);
}

In XAML I have a text box:

<TextBox x:Name="email" Style="{StaticResource emaliStyle}" Grid.Column="2" Grid.Row="2">
    <TextBox.Text>
        <Binding  Mode="TwoWay" Path="Email"  UpdateSourceTrigger="PropertyChanged">
            <Binding.ValidationRules>
                <DataErrorValidationRule ValidatesOnTargetUpdated="False"/>
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
</TextBox>

With resource:

<Style TargetType="TextBox" x:Key="emaliStyle">
        <Setter Property="Width" Value="204"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Padding" Value="5,2,1,0"/>
        <Setter Property="SelectionBrush" Value="Red"/>
        <Setter x:Name="LoginValidation" Property="Validation.ErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <DockPanel LastChildFill="True">
                        <TextBlock DockPanel.Dock="Bottom" Foreground="Maroon" FontSize="8pt"
                                           Text="{Binding ElementName=email, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                        </TextBlock>
                        <Border BorderBrush="DarkRed" BorderThickness="2" CornerRadius="10">
                            <AdornedElementPlaceholder Name="email" />
                        </Border>
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

If it's invalid, it's marked red, but how to mark it green if it's valid?

Answer 1

You could extend your Style with a create a custom ControlTemplate:

<Style TargetType="TextBox" x:Key="emaliStyle">
    <Setter Property="Width" Value="204"/>
    <Setter Property="Height" Value="30"/>
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="Padding" Value="5,2,1,0"/>
    <Setter Property="SelectionBrush" Value="Red"/>
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="BorderBrush" Value="Green" />
    <Setter x:Name="LoginValidation" Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <DockPanel LastChildFill="True">
                    <TextBlock DockPanel.Dock="Bottom" Foreground="Maroon" FontSize="8pt"
                                       Text="{Binding ElementName=Email, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                    </TextBlock>
                    <AdornedElementPlaceholder Name="email" />
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}" 
                                CornerRadius="10"
                                SnapsToDevicePixels="True">
                    <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
            <Setter Property="BorderBrush" Value="DarkRed" />
        </Trigger>
    </Style.Triggers>
</Style>