[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Collapse]Data Editors
    Included Components
   [Expand]Implementation Details
   [Collapse]Getting Started
    [Collapse]How To: Create a Registration Form
      Starting Point
      Lesson 1 - Create Layout
      Lesson 2 - Bind Data Editors
      Lesson 3 - Customize Editors
      Lesson 4 - Implement Input Validation using ValidationRules
      Lesson 5 - Implement Input Validation using IDataErrorInfo
     How to: Enable Masked Input (Text Editor)
     How to: Create a Functional ButtonEdit
     How to: Create a ComboBoxEdit and Bind it to Data
     How to: Customize a DateEdit
     How to: Create and Customize a ProgressBarEdit
     How to: Create and Customize a RangeTrackBarEdit
     How to: Create and Add Palettes in PopupColorEdit
     How to: Customize a SpinEdit to Display Currency Values
     How to: Create a SearchLookUpEdit and Bind it to Data
   [Expand]Editor Types
   [Expand]Common Features
   [Expand]Range Control
   [Expand]Visual Elements
   [Expand]End-User Capabilities
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Starting Point

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.

Expanded Concept

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

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.

Expanded 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.

Expanded 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.

Expanded See Also

Is this topic helpful?​​​​​​​