WPF: How to use adorners for validation purposes?

Question

Context:

I'm creating a Login interface using WPF 4 which consists of two Labels, one TextBox (for the username) and one PasswordBox. Both elements use the same style / template.

The username is bound to a Username property in my User model class, which is instantiated in the View's View-Model (which represents its DataContext)

The password updates the model using code-behind events (i.e.: OnPasswordChanged).

I also have two properties in my model which represents the valid state of my username and password, i.e.:

• UsernameIsValid
• PasswordIsValid

Those properties are updated by my View-Model and Service classes.

Question:

How can I create an Adorner for these elements' Style and only display it when the UsernameIsValid or PasswordIsValid properties are true ?

I'd also like, if possible, to pass in parameter the text to be displayed in the adorner (which will be a callout, which displays text, and an icon)

Answer 1

It's late so not providing code but will give you short answer.

1. Setup Data Validation on the properties the text boxes are bound too (ValidationRule interface)
2. Set default style on text box with adorner to what it should be when valid
3. Set a style to what it should be when invalid using the DataError trigger.

Below is how you get the xaml code to flip in the style.

        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="true">
                <Setter Property="BorderBrush" Value="Red"/>
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Foreground" Value="Red" />
                <Setter 
                    Property="ToolTip" 
                    Value="{Binding RelativeSource={x:Static RelativeSource.Self},Path=(Validation.Errors)[0].ErrorContent}" />
            </Trigger>
        </Style.Triggers>