Question

I have a UserControl that contains a TextBox. The TextBox.Text property is data-bound and validated. When a Validation.Error occurs, I would like to edit the Validation.ErrorTemplate. Specifically, I would like adorn it with a Polyline.

The end goal is to have a UserControl that has a red squiggly line under the text when it fails a validation. I’m probably going about it all wrong, b/c this is just WAY to hard.

Answer 1

You should just need to set the ErrorTemplate on the TextBox. When validation fails for one of the bindings on the TextBox, the ErrorTemplate will be displayed in an adorner layer. You could draw a squiggly line by doing something like this:

<Validation.ErrorTemplate>
    <ControlTemplate>
        <StackPanel>
            <AdornedElementPlaceholder/>
            <Rectangle Height="7">
                <Rectangle.Fill>
                    <DrawingBrush
                            TileMode="Tile"
                            ViewportUnits="Absolute"
                            Viewport="0 0 4 7"
                            ViewboxUnits="Absolute"
                            Viewbox="0 0 4 7"
                            >
                        <DrawingBrush.Drawing>
                            <GeometryDrawing>
                                <GeometryDrawing.Pen>
                                    <Pen Brush="Red" Thickness="1"/>
                                </GeometryDrawing.Pen>
                                <GeometryDrawing.Geometry>
                                    <PathGeometry Figures="M0,2 L2,5 4,2, 6,5" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Rectangle.Fill>
            </Rectangle>
        </StackPanel>
    </ControlTemplate>
</Validation.ErrorTemplate>