[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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...