[WPF 自定義控制項]自定義一個“傳統”的 Validation.ErrorTemplate

来源:https://www.cnblogs.com/dino623/archive/2020/02/27/Validation_ErrorTemplate.html
-Advertisement-
Play Games

1. 什麼是Validaion.ErrorTemplate 數據綁定模型允許您將與您Binding的對象相關聯ValidationRules。 如果用戶輸入的值無效,你可能希望在應用程式 用戶界面 (UI) 上提供一些有關錯誤的反饋。 提供此類反饋的一種方法是設置 "Validation.Error ...


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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ABP框架 .NetCore3.x版本 1.首先找到xxx.Core 項目,添加引用Microsoft.EntityFrameworkCore.Tools 2.找到xxx.EntityFrameworkCore項目,將原有sqlserver的引用改為mysql引用 3. 找到Host項目中的配置文件 ...
  • 0x01 前言 ASP.NET Core在預設發佈情況下,會啟動預編譯將試圖編譯成 xx.Views.dll ,也許在視圖中打算修改一處很細小的地方我們需要再重新編譯視圖進行發佈。下麵我將從 ASP.NET Core 3 之前版本到 ASP.NET Core 3X 之後版本的一個配置列下下方供大家參 ...
  • static int hHook = 0; public delegate int HookProc(int nCode, int wParam, IntPtr lParam); //LowLevel鍵盤截獲,如果是WH_KEYBOARD=2,並不能對系統鍵盤截取,Acrobat Reader會在你 ...
  • 很多情況下需要用到緩存,合理利用緩存一方面可以提高程式的響應速度,同時可以減少對特定資源訪問的壓力。為了避免每次請求都去訪問後臺的 資源(例如資料庫),一般會考慮將一些更新不是很頻繁的、可以重用的數據,通過一定的方式臨時地保存起來,後續的請求根據情況可以直接訪問這 些保存起來的數據,這種機制就是所謂 ...
  • 為啥寫這篇帖子呢?其實是因為翻微軟的文檔中心偶然翻到的,於是就出於好奇就試試了,看看用著怎麼樣。 以前沒註意圖片,所以我今天發現的時候,顯示EF Core3.1支持standard2.0,於是就想試試UWP用著會不會出問題,之前有的網友說2.1的standard目前UWP用不了。 ef core具體 ...
  • 非同步調用進度條窗體彈出 public partial class LoadProgressBar : Form { int losttime = 0; /// <summary> /// 是否可以關閉窗體 /// </summary> public bool ClosedFlag = false; ...
  • 一、asp.net mvc 通用許可權管理系統(響應佈局)源碼主要以下特點: AngelRM(Asp.net MVC)是基於asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技術,採用bootstrap為前臺開發展示UI,Web Api主要負責前端的邏輯交互, ...
  • 廢話不說,直接上代碼 有了這玩意,似乎打開了一扇窗——前後端真正分離? ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...