[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，它使用<CODE>Binding [0].ErrorContent</CODE>顯示Validation中Errors附加屬性（是一個ReadOnlyObservableCollection<ValidationError>類型的集合）中第一條內容（也能夠作成一個顯示全部錯誤的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

原文出處：https://www.cnblogs.com/dino623/p/Validation_ErrorTemplate.html