[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
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [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]Examples
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 2 - Bind Data Editors

In the previous lesson, you created a basic layout for the registration form. In this lesson, you will develop a View Model for it. Open the previous project (if you skipped Lesson 1, open the RegistrationForm.Lesson1 project in the DXEditorsTutorial example).

Open the RegistrationViewModel.cs file and add the following properties to the RegistrationViewModel class.

Since the RegistrationViewModel is a POCO class, all defined properties are bindable.

Notice how the InitializeInRuntime method initializes properties.

The DateTime struct is a value type, so the Birthday field makes use of a Nullable DateTime. With a non-nullable type, the Birthday field would be initialized into a specific value – something you ought to avoid.

The Gender field equals to -1. Since this value is invalid in the database, it should be converted to 0.

The Register button invokes registration logic from a command.

Rebuild the project. Open the designer and bind the First Name editor to a corresponding property in the underlying view model: select the TextEdit element of the First Name layout item, open its Smart Tag, find the BaseEdit.EditValue property and click the Binding button.

Double-click the FirstName property twice to create a binding with the default settings. It is unnecessary to customize binding parameters for this lesson, however you can easily do so by clicking Generate binding. A menu is invoked with several binding customization options, including setting a value converter, binding mode, etc.

Once FirstName binding is created, test data is displayed in the FirstName box.

Bind the remaining editors to their corresponding properties and the Register button to the AddEmployee command. The following XAML is the result of applying these steps.

When you run the application, the empty form is shown.

Expanded See Also

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