Creating MCN Employee Record Form and Adding Validation to it in Expression Blend

Creating MCN Employee Record Form in Expression Blend

Hi guys in this article I will demonstrate how to create forms in Expression Blend. This article also shows how to implement validation to fields.

It is quite easy here as compared to that in asp.net so hope you will enjoy creating the application in Expression Blend.

You have to follow the following steps :

Step 1 : First of all create a WPF application and name it as "MCN Employee Record Form ".

Step 2 : Now add a label to show the instruction for directing the user to goto to next form for adding record. Type the following text to the label "Enter MCN Employee Record"

Step 3 : Now add a button to create an event for next form navigation. Type "Click here" on the content of the button.

Step 4 : Now to generate event on button click. Select the button and goto event palette and on Click event type the name of the event, here I have used Form_Load " as a name for the click event. Press enter.

Step 5 : As soon as you press Enter, the code behind window opens up just write the following lines in the event method.

private void form_load(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
MainWindow MainWindow = new MainWindow();
MainWindow.Show();
this.Visibility = System.Windows.Visibility.Hidden;
}

Also dont forget to add the namespace below as this provides form to form navigation:

using System.Windows.Navigation ;

The XAML code for the start window is :

Step 6 : Now create a new window for this goto File--> Add new item. and add a new window named "MainWindow" (note this is the same name as you have written in the code lines above).

Now in the new window add labels and textboxes. Labels to type the name of the field and textboxes to receive user input. Also use combobox for the State field to show a list of items to the user. Here I have used following fields :

Full Name
Gender
Nationality
Address
State
E-mail
Zip

Step 7 : Also add a button named "Submit" to generate an event for checking the validation of the input fields.

Step 8 : To implement validation Property in the form you have to add Labels as much in number as much fields you wish to validate. Here I have used Five labels to validate the following fields:

Nationality
Address
State
E-mail
Zip

Now since you have added all the validating labels, give them a name like "* Field cannot be lift blank" etc and also change the font to red so that it appears like a real error message. Then select all the labels and goto the appearance property and set the visibility of all the labels to false.

Step 9 : Now we have to generate an event to check the validation, for this select the button control and on the Click event type the name of event (here I have named it as "validate") and hit enter. Now in the method write the following line of code :

private void validate(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
bool errorFlag = false;
if( tbnation.Text =="")
{
v1.Visibility =System.Windows.Visibility.Visible;
errorFlag =true;
}
else
{
v1.Visibility =System.Windows.Visibility.Hidden;
}
if( tbadd.Text =="")
{
v2.Visibility =System.Windows.Visibility.Visible;
errorFlag =true;
}
else
{
v2.Visibility =System.Windows.Visibility.Hidden;
}
if( cbstate.Text =="")
{
v3.Visibility =System.Windows.Visibility.Visible;
errorFlag =true;
}
else
{
v3.Visibility =System.Windows.Visibility.Hidden;
}
if( tbmail.Text =="")
{
v4.Visibility =System.Windows.Visibility.Visible;
errorFlag =true;
}
else
{
v4.Visibility =System.Windows.Visibility.Hidden;
}
if( tbzip.Text =="")
{
v5.Visibility =System.Windows.Visibility.Visible;
errorFlag =true;
}
else
{
v5.Visibility =System.Windows.Visibility.Hidden;
}
if(errorFlag)
return;
}

Meaning of terms in the code code above:

tbnation--- textbox for Nationality input
tbadd------ textbox for address input
cbstate---- combobox for state input
tbmail----- textbox for E-mail input
tbzip------ textbox for zip code entry
v1--------- validation for tbnation
v2--------- validation for tbadd
v3--------- validation for cbstate
v4--------- validation for tbmail
v5--------- validation for tbzip

The XAML code for the start window is :

Now just hit F5 and the following output screen flashes in:

This output shows how the validation errors pops in as sson as the submit button is clicked with the required fields left blank. At the same time if all the fields are filled there is no validation error.