Sunday, February 28, 2010

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

No comments:

Post a Comment