Custom ValidationSummary with Data Form - Silverlight 4

• Download source - 2.09 MB

Introduction

Thanks to all members.

I have found many solutions for my issues from the CodeProject community and it's time for me to contribute!

In this article, I'm explaining how we can implement custom Validation Summary by hiding default validation summary of data form.

Background

Following are the solutions I'm focusing on:

1. MVVM implementation with OOD principles
2. Domain layer design clues
3. Custom Validation Summary
4. Validation error's consistency

Using the Code

User Interface

The sample example has three fields to display name, address and age. Following is my UI, which is a data form. A very simple UI.

View Model Implementation

Following is the class diagram of my View Model implementation.

Here is the source code for MyViewModel class.

MyViewModel.cs

using System;
using System.ComponentModel.DataAnnotations;

namespace CustomValidationWithDataForm
{
    public class MyViewModel : ViewModelBase<person />
    {
        public MyViewModel()
            : base()
        {
            if (null == Data)
                this.Data = Activator.CreateInstance(typeof(Person)) as Person;
        }
        [Required(ErrorMessage="Name should not be empty!")]
        public string Name
        {
            get
            {
                return this.Data.Name;
            }
            set
            {
                ValidateProperty(value, "Name");
                this.Data.Name = value;
            }
        }

        [Required(ErrorMessage = "Address should not be empty!")]
        public string Address
        {
            get
            {
                return this.Data.Address;
            }
            set
            {
                ValidateProperty(value, "Address");
                this.Data.Address = value;
            }
        }
        [Range(20,50,ErrorMessage="Age should be between 20 and 50!")]
        [CustomValidation(typeof(AgeValidater),"ValidateAge")]
        public int Age
        {
            get
            {
                return this.Data.Age;
            }
            set
            {
                ValidateProperty(value, "Age");
                this.Data.Age = value;
            }
        }
    }
}

Validations

Following are the validations rules I followed in this example:

• Name and Address should not be empty.
• Age should be between 20 and 50 and not equal to 35(Custom Validation).
• You can see the validation attributes in the above code snippet.

Points of Interest

Custom ValidationSummary

I have collapsed the data form specific ValidationSummary by using ValidationSummaryStyle.

See MainPage.xaml below:

<UserControl x:Class="CustomValidationWithDataForm.MainPage"
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:toolkit="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Data.DataForm.Toolkit"
xmlns:input="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Data.Input"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<Style x:Key="CustomValidationSummaryStyle" TargetType="input:ValidationSummary">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</Grid.Resources>
<input:ValidationSummary x:Name="CustomValidationSummary"/>
<toolkit:DataForm x:Name="myDf" Width="400" Height="400" 
HorizontalAlignment="Center" 
Header="My Details" AutoCommit="False" AutoEdit="True" 
ValidationSummaryStyle="{StaticResource CustomValidationSummaryStyle}" >

<StackPanel>
<toolkit:DataField Label="Name:">
<TextBox x:Name="txtName" Text="{Binding Name,Mode=TwoWay}"/>
</toolkit:DataField>
<toolkit:DataField Label="Address:">
<TextBox x:Name="txtAddress" Text="{Binding Address,Mode=TwoWay}"/>
</toolkit:DataField>
<toolkit:DataField Label="Age:">
<TextBox x:Name="txtAge" Text="{Binding Age,Mode=TwoWay}"/>
</toolkit:DataField> 
</StackPanel>
</toolkit:DataForm>
</Grid>
</UserControl>

History

• 13^th September, 2010: Initial post