专栏首页dino.c的专栏[WPF 自定义控件]自定义一个“传统”的 Validation.ErrorTemplate

[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,看个人喜好吧)。接下来再在OpenClosed两个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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [UWP]用Shape做动画(2):使用与扩展PointAnimation

    上一篇几乎都在说DoubleAnimation的应用,这篇说说PointAnimation。

    dino.c
  • [UWP]XAML中的响应式布局技术

    响应式布局的概念是一个页面适配多个终端及不同分辨率。在针对特定屏幕宽度优化应用 UI 时,我们将此称为创建响应式设计。WPF设计之初响应式设计的概念并不流行,那...

    dino.c
  • [UWP]使用Win2D的BorderEffect实现图片的平铺功能

    在WPF中只要将ImageSource的TileMode属性设置为Tile即可实现图片的平铺,具体可见WPF的这些文档:

    dino.c
  • hive | 解决character '​' not supported here

    今天在处理数据入库时出现了character '​' not supported here的bug

    week
  • 谷歌发布支付新应用 Hands Free:真正的刷脸付款!

    镁客网
  • [MSDN]通过避免下列 10 个常见 ASP.NET 缺陷使网站平稳运行

    ASP.NET 成功的其中一个原因在于它降低了 Web 开发人员的门槛。即便您不是计算机科学博士也可以编写 ASP.NET 代码。我在工作中遇到的许多 ASP...

    菩提树下的杨过
  • Supermarket超市(贪心算法 优先队列)- POJ 1456

    A supermarket has a set Prod of products on sale. It earns a profit px for each ...

    ACM算法日常
  • 面试题: 了解OO的SOLID原则吗

    一个类只应承担一种责任。换句话说,让一个类只做一件事。如果需要承担更多的工作,那么分解这个类。

    用户1263954
  • tomcat 新手上路

    前提:本机先安装好JDK,保证常规java环境已经具备 1、下载Tomcat 7.0 现在官网上好象已经没有安装程序版了,只有免解压zip版本(现在最新的版本是...

    菩提树下的杨过
  • Python基础篇 strings 03

    找出子字符串出现频次和出现的索引位置核查是否存在字符串并找出其索引位置查找所有字符的出现次数和索引

    披头

扫码关注云+社区

领取腾讯云代金券