Starting Point

  • 2 minutes to read

Let's create an application that gathers user information and credentials using a custom registration form. This tutorial demonstrates how to create a registration form using DXEditors for WPF.

Concept

The registration form you are going to create is similar to the one Google provides for its mail service (see Google registration form).

gs-editors-101

The resulting registration form will contain the following input boxes and visual elements:

  • First Name
  • Last Name
  • Email. This editor formats its input in the following manner: &lt;sometext&gt;@<sometext>.<sometext>.
  • Password
  • Confirm password
  • Birthday
  • Gender. This editor accepts one of two values: Male, Female.
  • “Register” button. This button invokes registration logic (it is disabled when a field is blank or input data is invalid).

Each input box requires user input. When a user clicks the Register button, the data is being validated and, if validation succeeds, a record is added to the database.

Starting Point

First you need to download the base project. The complete solution with source code is available in the DXEditorsTutorial example. This solution contains several projects - each one is the result of a lesson in the tutorial. The RegistrationForm.BaseProject project is the base solution you will be working on. This project contains three views: MainView, RegistrationView, and RecordsView. This tutorial will show you how to create the RegistrationView. The two other views are already prepared, so you can learn how they are designed. The base project also contains a database and a data model. The database has only one Employee table. Its table scheme is as follows.

gs-editors-102

Result

At the end of this tutorial, you will create a complete application which supports masked input and validation. The resulting application is shown in the screenshot below.

gs-editors-503

See Also