[WPF 自定义控件]自定义一个“传统”的 Validation.ErrorTemplate

1. 什么是validaion.errortemplate

数据绑定模型允许您将与您binding的对象相关联validationrules。 如果用户输入的值无效，你可能希望在应用程序 用户界面 (ui) 上提供一些有关错误的反馈。 提供此类反馈的一种方法是设置validation.errortemplate附加到自定义controltemplate的属性。

有关验证的详细讨论, 请参阅中的 "数据验证" 一节。

如果没有设置validation.errortemplate，当控件包含无效数据时，wpf 将在无效控件周围显示如下图所示的红色边框，：

这样用户就能清楚这是一个无效的数据，直到用户输入有效的值这个红色的边框才会消失。可是只有一个红色边框，用户并不清楚具体有什么错误，通常需要用其它手段来通知用户具体的错误信息（例如弹出messagebox）。

2. 如何自定义validaion.errortemplate

一种更好的方式是通过自定义validaion.errortemplate显示更多的信息。validaion.errortemplate的类型是controltemplate，它的默认值如下：

<controltemplate>
    <border borderthickness="1"
            borderbrush="red">
        <adornedelementplaceholder />
    </border>
</controltemplate>

当控件绑定数据无效时默认显示这个controltemplate，其中的adornedelementplaceholder专门用于validaion.errortemplate，它用于提供adornedelement关联的错误控件的定位和尺寸。

通常我会给项目中每一个输入控件都设置validaion.errortemplate用于方便地显示错误信息，而这个validaion.errortemplate的样式来自10年前的silverlight。从silverlight开始，很多控件库都使用了类似的validaion.errortemplate样式，所以才说它是个“传统”的validaion.errortemplate。具体效果如下：

控件的数据出错时显示红色边框，当控件获得焦点通过tooltip显示具体的错误信息，当空间失去焦点关闭tooltip。本来这个tooltip的边框是圆角的，因为我喜欢直角，所以将它改为直角了，其它外观和行为基本和以前silverlight的版本一样。为了方便调用，我把这个errortempalte的主要内容封装进一个自定义控件validationcontent，然后具体调用方式如下：

<controltemplate x:key="errortemplate">
    <adornedelementplaceholder>
        <kino:validationcontent  />
    </adornedelementplaceholder>
</controltemplate>

<style targettype="textbox">
    <setter property="validation.errortemplate"
            value="{staticresource errortemplate}" />
</style>

validationcontent是个没有逻辑代码的控件，它直接继承control：

public class validationcontent : control
{
    public validationcontent()
    {
        defaultstylekey = typeof(validationcontent);
    }
}

controltemplate的部分，使用了一个红色边框，右上角的一点装饰，还有一个用于显示据图错误信息的tooltip：

<border  borderbrush="#ffdb000c"
         borderthickness="1"
         x:name="root">
    <tooltipservice.tooltip>
        <tooltip x:name="validationtooltip"
                 placement="right"
                 placementtarget="{binding relativesource={relativesource templatedparent}}"
                 template="{staticresource validationtooltiptemplate}" />
    </tooltipservice.tooltip>
    <grid background="transparent"
          horizontalalignment="right"
          height="12"
          width="12"
          margin="1,-4,-4,0"
          verticalalignment="top">
        <path data="m 1,0 l6,0 a 2,2 90 0 1 8,2 l8,7 z"
              fill="#ffdc000c"
              margin="1,3,0,0" />
        <path data="m 0,0 l2,0 l 8,6 l8,8"
              fill="#ffffff"
              margin="1,3,0,0" />
    </grid>
</border>

然后在trigger中通过findancestor绑定到祖先元素中的adornedelementplaceholder的adornedelement，判断它是否出错并获得键盘焦点，如果是则打开tooltip：

<controltemplate.triggers>
    <multidatatrigger>
        <multidatatrigger.conditions>
            <condition binding="{binding relativesource={relativesource mode=findancestor,ancestortype={x:type adornedelementplaceholder}}, path= adornedelement.iskeyboardfocuswithin, mode=oneway}"
                       value="true" />
            <condition binding="{binding relativesource={relativesource mode=findancestor,ancestortype={x:type adornedelementplaceholder}}, path= adornedelement.(validation.haserror), mode=oneway}"
                       value="true" />
        </multidatatrigger.conditions>
        <setter targetname="validationtooltip"
                property="isopen"
                value="true" />
    </multidatatrigger>
</controltemplate.triggers>

最后是处理tooltip的template，它使用binding [0].errorcontent显示validation中errors附加属性（是一个readonlyobservablecollection类型的集合）中第一条内容（也可以做成一个显示所有错误的itemscontrol，看个人喜好吧）。接下来再在open和closed两个visualstate中处理一下动画，就大功告成了。

<controltemplate x:key="validationtooltiptemplate">
    <border x:name="root"
            margin="5,0,0,0"
            opacity="0"
            padding="0,0,20,20"
            rendertransformorigin="0,0">
        <border.rendertransform>
            <translatetransform x:name="xform"
                                x="-25" />
        </border.rendertransform>
        <visualstatemanager.visualstategroups>
            <visualstategroup x:name="openstates">
                <visualstategroup.transitions>
                    <visualtransition generatedduration="0" />
                    <visualtransition generatedduration="0:0:0.2"
                                      to="open">
                        <storyboard>
                            <doubleanimation duration="0:0:0.2"
                                             to="0"
                                             storyboard.targetproperty="x"
                                             storyboard.targetname="xform">
                                <doubleanimation.easingfunction>
                                    <backease amplitude=".3"
                                              easingmode="easeout" />
                                </doubleanimation.easingfunction>
                            </doubleanimation>
                            <doubleanimation duration="0:0:0.2"
                                             to="1"
                                             storyboard.targetproperty="opacity"
                                             storyboard.targetname="root" />
                        </storyboard>
                    </visualtransition>
                </visualstategroup.transitions>
                <visualstate x:name="closed">
                    <storyboard>
                        <doubleanimation duration="0"
                                         to="0"
                                         storyboard.targetproperty="opacity"
                                         storyboard.targetname="root" />
                    </storyboard>
                </visualstate>
                <visualstate x:name="open">
                    <storyboard>
                        <doubleanimation duration="0"
                                         to="0"
                                         storyboard.targetproperty="x"
                                         storyboard.targetname="xform" />
                        <doubleanimation duration="0"
                                         to="1"
                                         storyboard.targetproperty="opacity"
                                         storyboard.targetname="root" />
                    </storyboard>
                </visualstate>
            </visualstategroup>
        </visualstatemanager.visualstategroups>
        <frameworkelement.effect>
            <dropshadoweffect  blurradius="11"
                               shadowdepth="6"
                               opacity="0.4" />
        </frameworkelement.effect>
        <border background="#ffdc000c"
                borderthickness="1"
                borderbrush="#ffbc000c">
            <textblock foreground="white"
                       maxwidth="250"
                       margin="8,4,8,4"
                       textwrapping="wrap"
                       text="{binding [0].errorcontent}"
                       uselayoutrounding="false" />
        </border>
    </border>
</controltemplate>

3. 其它样式的validation.errortempalte

现在常见的显示错误信息的手段通常是在输入控件下预留足够显示一行错误信息的空间，例如这样：

或者是索性不预留空间，有错误再占用这些空间：

与它们相比，这篇文章介绍的errortempalte最明显的好处是节省空间。由于我常常都在wpf上做所谓的“信息密集型”软件，所以多年来一直都是用silverlight的这个errortemplate，没机会跟风修改它的样式。这篇文章已经讲解了如何自定义validation.errortemplate，有需要的话可以自定义一个合适自己的样式。

4. 结语

validation.error没有办法一次性为所有控件统一设置，只能在全局样式中为所有控件都分别设置一次，例如上面出现的`textbox的style，这会很麻烦，毕竟wpf的控件还不少。

除了我的实现方式，mahapps.metro的实现更加优秀，有兴趣的话也可以参考它的源码：

mahapps.metro_validationerrortemplate.xaml

5. 参考

validation.errortemplate 附加属性 (system.windows.controls) _ microsoft docs

data binding overview - wpf _ microsoft docs

对话框概述 - wpf _ microsoft docs

adornedelementplaceholder 类 (system.windows.controls) _ microsoft docs

6. 源码

kino.toolkit.wpf_validation at master