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=https://www.cnblogs.com/dino623/p/"{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=https://www.cnblogs.com/dino623/p/"M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z"
Fill="#FFDC000C"
Margin="1,3,0,0" />
然后在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=https://www.cnblogs.com/dino623/p/"True" />
最后是處理Tooltip的Template，它使用Binding [0].ErrorContent顯示Validation中Errors附加屬性（是一個ReadOnlyObservableCollectionOpen和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.uj5u.com/net/4483.html
標籤：WPF