WPF Error Template - a more pleasing user experience

We have all seen the default error template which is a red border around the element being adorned. In my experience, when a user first sees a screen of red boxes there is a gasp and groan. A sea of red certainly doesn’t inspire the user.



I searched around and didn’t find anything to my liking so I took a cue from Excel and mimicked the method used there. Excel uses a small triangle when a user inserts a comment or when there is a potential formula inconsistency. I thought the subtle visual cue was still effective and didn’t give the user the feeling of dread upon seeing a full dialog box of them.



The code is fairly simple. A Polygon is used to draw and fill the triangle. Here is the code to achieve this effect:

<!-- Template when a validation error exists.  Note that two items sit in the 
same grid which causes them to overlap.  Also note the margin - I felt that an 
offset of 1 had a better look since the triangle sits just inside the edge of the 
control.  You may want to customize the position for ComboBoxes.  -->

<Setter Property="Validation.ErrorTemplate">
    <Setter.Value>
        <ControlTemplate>
 <Grid>
     <Polygon Fill="Red" Stroke="Red" StrokeThickness="1" Points="0,0 5,0 5,5" 
Margin="1,1" HorizontalAlignment="Right" VerticalAlignment="Top"></Polygon>

     <AdornedElementPlaceholder />
 </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

The full code is available here.

Enjoy!
Todd Stephan