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.