[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]Gantt 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]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 1 - Create Layout

Download the basic solution from the DXEditorsTutorial example. It is a draft application connected to a database. Open the RegistrationForm.BaseProject project and follow the steps in this lesson.

The RegistrationForm.Lesson1 project contains the result of this lesson.

Review the Google registration form. There are several rows which consist of input boxes and corresponding descriptions (e.g., First Name and Last Name in the first row of editors).

Open the RegistrationView.xaml file and run the Visual Studio designer.

Use the LayoutControl component to arrange editors similarly. The DevExpress LayoutControl Suite is well-suited for quickly constructing micro layouts. The layout suite provides three major controls.

  • LayoutControl – the root element of a compound or row/column layout.
  • LayoutGroup – a control container for arranging its items side-by-side (either vertically or horizontally) or in tabs. A LayoutGroup can contain LayoutGroup children with independent arrangements. LayoutGroup nesting supports non-linear control layouts.
  • LayoutItem - a control with label and content regions. The content region is a UIElement.

Drag and drop a LayoutControl from the Visual Studio toolbox onto the form.

Right-click the LayoutControl element in the designer and select the Reset Layout | All option. This will reset the position and size attributes on the LayoutControl element and fill the LayoutControl within its parent UserControl.

The LayoutControl supports the adding of layout items directly from its designer. Select the LayoutControl design surface and move the cursor over its center designer button to display three options: Add a new group , Add a new item , and Add a new tabbed group . Click Add a new item to add a simple editor container to the layout.

It is necessary to add six layout items (one for each remaining editor). When a layout item is added to the LayoutControl, the central designer button for the layout item addition is replaced with buttons on the selected LayoutControl element. Adding a layout item from these options positions the new item with respect to the existing element.

Select the original LayoutItem. The "+" buttons are shown at the left, top, right, and bottom edges of the LayoutItem. Hovering over these buttons invokes the familiar options for adding a layout item: Add a new group, Add a new item, and Add a new tabbed group. Add a new LayoutItem under the bottom edge of the existing item.

You can copy and paste existing items to speed up the process of adding the remaining LayoutItems to the design surface using the Ctrl+C and Ctrl+V hotkeys.

To edit the label region of a layout item, open the layout item Smart Tag and set the Label property.

Drag and drop the Last Name item onto the first row, so that First Name and Last Name are displayed in the same row.

Return to the xaml code to add the Register button.

To improve the UI, it is necessary to set bold label text at the top edge of each LayoutItem. Set the LayoutItemLabelPosition.Left property to Top to set proper alignment. Create a style for the LayoutItem.LabelStyle property to manage the FontWeight of the labels. Assign this style to the LayoutGroup.ItemStyle property.

The LayoutItems are spaced too closely. To increase the distance between items, set the LayoutControlBase.ItemSpace property for the LayoutControl and for the first LayoutGroup.

The First Name and Last Name fields share the label. You can remove the Last Name description text by selecting the Last Name LayoutItem and choosing Remove LayoutItem from its context menu. Notice that a LayoutItem would consist solely of a UIElement content region. Now, set the Label property of the First Name layout item to "Name", and set the alignment of the Last Name editor.

You have built the basic layout of the RegistrationView. At the moment, however, each layout item contains the TextEdit control. It is necessary to have an appropriate editor for each data field. DXEditors for WPF provide several editor types to serve these needs.

  • FirstName and Last Name - TextEdit: Both name fields are plain text.
  • Email - TextEdit: Email addresses are formatted with an editor mask.
  • Password and Confirm password - PasswordBoxEdit
  • Birthday - DateEdit
  • Gender - ComboBoxEdit: Supports predefined choices, Male or Female.

To learn more about supported editor types, review the Editor Types documentation topic.

A LayoutItem provides design-time capabilities to easily switch editor types. Select the Create a password LayoutItem in the designer and open its smart tag to choose the PasswordBoxEdit editor type from the Content drop down.

Set the editor types of the remaining fields (Password, Confirm Password, and Gender).

The result is shown below.

Expanded See Also

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