Layout in DevExpress Data Form for .NET MAUI

• Dec 14, 2021
• 3 minutes to read

When a data form is generated based on a bound object’s properties, it arbitrarily positions editors vertically, and displays the corresponding property name next to the input box. You can change the form’s default layout. To adjust layout settings for individual editors, use attributes or data form item properties. The DataFormView class has a set of properties for layout customization at the form level.

Reorder Editor

You can locate multiple editors in a single row and specify editor order. To do this, use the following parameters of the DataFormItemPosition attribute or properties of the DataFormItem descendant object:

• RowOrder—a row where the editor is located.
• ItemOrderInRow—the editor position within a row.

If two items have the same RowOrder value, they are located in the same row in the order specified by their ItemOrderInRow values. The DataFormView.EditorHorizontalSpacing and DataFormGroup.EditorHorizontalSpacing properties specify the distance between editors in a row for an entire form or a specific group.

Items with unspecified RowOrder are displayed at the bottom of the data form.

Manage Labels

The data form can display strings or icons as editor labels. To specify an editor label and its position, use the following parameters of the DataFormDisplayOptions attribute or properties of the DataFormItem descendant object:

• LabelText—label text.
• LabelIcon—the label icon.
• LabelPosition—the label position relative to the editor.
• LabelIndent—the distance between the label and the editor.
• IsLabelVisible—label visibility.

You can also use the following properties of the DataFormView object to specify layout settings for all editor labels on the form:

• EditorLabelPosition
• EditorLabelIndent
• IsEditorLabelVisible

Change Editor and Label Width

To change the width of editors and their labels, use the following parameters of the DataFormDisplayOptions attribute or properties of the DataFormItem descendant object:

• EditorWidth, EditorMinWidth, EditorMaxWidth
• LabelWidth, LabelMinWidth, LabelMaxWidth

You can also use the following properties of the DataFormView to set the width for all editors and labels on the data form:

• EditorWidth, EditorMinWidth, EditorMaxWidth
• EditorLabelWidth, EditorLabelMinWidth, EditorLabelMaxWidth

These properties allow you to define absolute or proportional (*) width values.

Group Editors

You can organize editors into groups. To place an editor in a group, assign the group name to the GroupName property of the DataFormDisplayOptions attribute or data form item object. Editors with an undefined GroupName are placed in a default group that is displayed at the top of the form without a header.

The data form stores groups in the Groups collection. When you specify the GroupName parameter for an editor, a group with this name is added to this collection. You can also add items to the collection directly.

An individual item of the Groups collection is a DataFormGroup object that stores group settings:

• HeaderBackgroundColor / HeaderTextColor—specify group header colors.
• HeaderFontSize/HeaderFontFamily/HeaderFontAttributes—adjust group header font settings.
• IsHeaderVisible—shows or hides a group header.
• IsCollapsed, AllowCollapse—collapses or expands a group and prevents a user from collapsing a group.

The DataFormView class also has corresponding properties to specify similar settings for all groups on the form.