[Silverlight] ValidationSummary與DescriptionViewer控制項

2011-01-13

4418
0

上一篇文章講到了Silverlight資料驗證，這一篇則來介紹兩個相關的控制項: ValidationSummary跟DescriptionViewer，範例則延續上一篇的。

ValidationSummary控制項可以讓我們把頁面上的錯誤訊息集合起來顯示，使用方式也很簡單，只要在頁面上放置ValidationSummary控制項不需要做其他屬性設定，它就會自動的集合起來頁面上所有的驗證錯誤訊息，而且ValidationSummary可以像ListBox一樣每個錯誤訊息都可以被選擇，而當選中ValidationSummary上的錯誤訊息時，引發錯誤的那欄位就會成為Focus狀態，下圖就是ValidationSummary控制項跟選中裡面錯誤時的情形

另外要介紹的一個是DescriptionViewer控制項，這個控制項可以放在一些TextBox輸入方塊的後面，當使用者滑鼠移上去時會顯示幫助的資訊讓使用者更了解此欄位格式該如何輸入或說明這個欄位等等，在這裡的範例我名字與年齡欄位分別用不同的方式來說明DescriptionViewer用法上的差異

首先先用上一篇提過的DataAnnotations方式來定義類別(Class)，不過這裡我在DataAnnotations上多了一個Display(Description="輸入姓名")，這裡的Description等一下就會出現在DescriptionViewer顯示的訊息上，另外一個Age屬性因為要示範DescriptionViewer另一種比較的用法所以這裡就不做設定

	using System;
using System.ComponentModel.DataAnnotations;

namespace ValidationSample
{
    public class MemberClass
    {
        private string _Name;
        [Required(ErrorMessage = "沒有名字"),Display(Description="輸入姓名")]
        public string Name
        {
            set
            {
                Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Name" });
                _Name = value;
            }
            get { return _Name; }
        }

        private int _Age;
        [Range(0, 150, ErrorMessage = "年齡錯誤")]
        public int Age
        {
            set
            {
                Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Age" });
                _Age = value;
            }
            get { return _Age; }
        }
    }
}

接著頁面上對應名字的DescriptionViewer，我利用Data Binding讓DescriptionViewer的Target屬性與NameTextBox做綁定，而另外一個年齡的DescriptionViewer則是直接指定要顯示的訊息到Description這屬性，這個並沒有做相關的資料繫結。

這裡說明一下這兩個方式的差異，名字的DescriptionViewer因為有做Data Binding，所以我並不用指定Description屬性，而它顯示的訊息就是我們剛剛在類別中DataAnnotations有個Display(Description="輸入姓名")這裡所定義，另一個年齡的DescriptionViewer因為沒有做Data Binding，所以我直接指定Description屬性來顯示需要的訊息，在頁面上兩種方法顯示的效果都是一樣的，不過有做Data Binding的DescriptionViewer差別是在程式部分可以利用IsValid屬性來知道目前對應的這個欄位驗證結果為何，沒有做Data Binding的話，IsValid就會一直是True，因為它並不知道對應的是哪個欄位以及它的驗證結果。

另外這裡要注意的是，要讓Data Binding的DescriptionViewer能夠接收到驗證錯誤必須要把Target所指到控制項的Binding中的 ValidatesOnExceptions 和 NotifyOnValidationError 兩個屬性設定為 True

另外在這裡的頁面上我多加了一個Button來測試這兩種DescriptionViewer，在Button的Click事件裡判斷如果目前對應欄位的驗證不成功則把負責指示說明的DescriptionViewer給隱藏起來，而由這事件可以看出當名字與年齡兩個欄位都驗證失敗時，只有第一個名字的DescriptionViewer會隱藏，因為只有第一個有做Data Binding。

	private void DescriptionTestButton_Click(object sender, RoutedEventArgs e)
        {
            //因為NameDescription此控制項的Target屬性有做Data Binding，
            //所以IsValid屬性才能知道驗證有沒有成功
            if (!NameDescription.IsValid)
                NameDescription.Visibility = Visibility.Collapsed;
            else
                NameDescription.Visibility = Visibility.Visible;
            //AgeDescription因為是直接指定Description屬性，沒有做Data Binding
            //所以IsValid屬性不論驗證結果都為True
            if (!AgeDescription.IsValid)
                AgeDescription.Visibility = Visibility.Collapsed;
            else
                AgeDescription.Visibility = Visibility.Visible;
        }

介面XAML代碼

	<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="ValidationSample.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Canvas x:Name="LayoutRoot" Background="White">
        <TextBox Height="40" TextWrapping="Wrap" Text="{Binding Name, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" Width="144" x:Name="NameTextBox" Canvas.Left="116" Canvas.Top="25"/>
        <TextBox Height="40" TextWrapping="Wrap" Text="{Binding Age, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" Width="144" x:Name="AgeTextBox" Canvas.Left="116" Canvas.Top="77"/>
		<TextBlock Height="29" TextWrapping="Wrap" Text="名字" Width="70" Canvas.Left="42" Canvas.Top="36"/>
		<TextBlock Height="29" TextWrapping="Wrap" Text="年齡" Width="70" Canvas.Left="42" Canvas.Top="88"/>
        <sdk:ValidationSummary Height="90" Canvas.Left="42" Canvas.Top="128" Width="238" x:Name="ValidateSummary" />
        <sdk:DescriptionViewer Height="40" Canvas.Left="266" Canvas.Top="25" Width="36" x:Name="NameDescription" Target="{Binding ElementName=NameTextBox}" Visibility="Visible" />
        <sdk:DescriptionViewer Canvas.Left="266" Canvas.Top="77" Height="40" Width="36" x:Name="AgeDescription" Description="年齡介於0~150之間" Visibility="Visible" />
        <Button Canvas.Left="136" Canvas.Top="238" Content="DescriptionViewerTest" Height="34" Name="DescriptionTestButton" Width="144" Click="DescriptionTestButton_Click" Visibility="Visible" />
    </Canvas>
</UserControl>

DescriptionViewer會在滑鼠移上去時顯示訊息，提供使用者此欄位相關的說明

兩個欄位都有錯誤，但只有第一個DescriptionViewer會消失

Silverlight

回首頁