Introduction

In my last article titled "Data Annotations In Silverlight 3 Applications", we saw how it is very helpful to validate the user input. In this article we will see how Data Input Controls are helpful for Data Validation in Silverlight 3 application.

Crating Silverlight Project

Fire up Visual Studio 2008 and create a Silverlight Application. Name it as DataInputControlsInSL3.

image1.gif

Our main aim of this article is to use the Data Input controls. To do that we need to refer the following assembly (System.Windows.Controls.Data.Input)

image2.gif

The above DLL consists of three controls such as:

  1. Add three properties UserName, EmailID and Age. You can refer my previous article on "Data Annotations In Silverlight 3 Application".

    public class UserInfo
     {
     #region UserName
    private string _UserName;
    [Required(ErrorMessage = "User Name is Required")]
    [StringLength(12, MinimumLength = 6, ErrorMessage = "User Name must be in between 6 to 12 Characters")]
    public string UserName
    {
    get { return _UserName; }
    set
     {
    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "UserName" });
    _UserName = value;
    }
    }
     #endregion

    #region EmailID
    private string _EmailID;
    [Required(ErrorMessage = "Email ID is Required")]
    public string EmailID
    {
    get { return _EmailID; }
    set
     {
    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "EmailID" });
    _EmailID = value;
    }
    }
     #endregion

    #region Age
    private string _Age;
    [Range(18, 40, ErrorMessage = "Age must be 18 ~ 40")]
    public string Age
    {
    get { return _Age; }
    set
     {
    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Age" }
    ;
    _Age = value;
    }
    }
     #endregion
     }

    To make the application look good I am going to design it in Blend 3, don't worry this will be a simple design.

  2. Open the Solution in Blend 3. Add three Label Controls and three TextBoxes.

    image4.gif

    Label Control

    It displays a caption, required field indicator, and validation error indicator for an associated control. This is the way it differs from ordinary TextBlock control.

    You need to refer to the assembly Named "System.Windows.Controls.Data.Input".

    It is typically used together with an input control, such as a TextBox. We will see more about its properties further in our article.
  3. Add three Description Viewer Controls to the design.

    image5.gif

    Description Viewer

    A Description Viewer control displays an information glyph and shows a text description in a tooltip when the mouse pointer is over the glyph. It also tracks validation error states so that you can implement a custom error display a description by itself or be associated with another control.
  4. Now we will add a Validation Summary control to the design.

    image6.gif

    Validation Summary

    It displays a consolidated list of validation errors for a given container. By default it displays both object and property level errors.

    By default, when an error message is selected in the Validation Summary, it attempts to set focus on the control where the error is originated.

    Now design part and adding controls are over we will go back to the Visual Studio 2008.

    Binding Label Controls

    As we discussed Label control is associated to an input control like TextBox to display the Error Indicator.
  5. Add a Target property to this control and bind to the respective TextBox controls. Follow the xaml code below:

    <dataInput:Label Target="{Binding ElementName=txtUserName}" HorizontalAlignment="Right" Margin="0" Grid.Row="2" d:LayoutOverrides="Height" VerticalAlignment="Center" Content="User Name"/>

    <dataInput:Label Target="{Binding ElementName=txtEmailID}" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Center" Grid.Row="3" Content="Email ID"/>
    <    dataInput:Label Target="{Binding ElementName=txtAge}" HorizontalAlignment="Right" Margin="0"
    VerticalAlignment="Center" Grid.Row="4" Content="Age"/>

    Adding Description to Description Viewer Controls

    Description Viewer control contains a property called Description which displays the information.

  6. Add Descriptions to the Description Viewer Controls. Follow the XAML code below:

    <dataInput:DescriptionViewer Description="Enter User Name" HorizontalAlignment="Left" Margin="0" Grid.Column="3" Grid.Row="2" d:LayoutOverrides="Height" VerticalAlignment="Center"/>

    <dataInput:DescriptionViewer Description="Enter Email ID" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Center" Grid.Column="3" Grid.Row="3"/>

    <dataInput:DescriptionViewer Description="Enter Age" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Center" Grid.Column="3" Grid.Row="4"/>

    Binding Text Property of TextBox

    Now we have to bind the properties defined in UserInfo class to the respective TextBoxes.

  7. Bind the Text Property to the UserInfo properties. Follow the XAML code.

    <TextBox x:Name="txtUserName" TextWrapping="Wrap" Margin="0" Grid.Column="2" Grid.Row="2" d:LayoutOverrides="Height" VerticalAlignment="Center" Text="{Binding UserName, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/>

    <TextBox x:Name="txtEmailID" Margin="0" VerticalAlignment="Center" Grid.Column="2" Grid.Row="3" TextWrapping="Wrap" Text="{Binding EmailID, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/>

    <TextBox x:Name="txtAge" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="2" Grid.Row="4" Width="30" TextWrapping="Wrap" Text="{Binding Age, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/>
  8. Last thing to do is to assign the DatContext property of the LayoutRoot to the instance of UserInfo class.

    UserInfo user = new UserInfo();
    this.LayoutRoot.DataContext = user;

    That's it go ahead and run your application.

    As we made binding the Labels with the TextBoxes the required field Labels are made Bold.

    image7.gif

    When you mouse over to the Description Viewer Glyph it will give you the messages you have already inserted.

    image8.gif

    When you input wrong the Label and the Validation Summary gets activated.

    image9.gif

    You can see the UserName Label has become Red.

    Similarly you will get more than one error in our Validation Summary window.

    image10.gif

That's it play more with these Data Input control to know more about it.

Enjoy Coding.