Labels in DevExpress Data Form for .NET MAUI

• Mar 13, 2024
• 3 minutes to read

A label describes the purpose of the input field and guides users to enter relevant information. You can specify and configure the following labels:

• a regular label outside the editor (LabelText)
• a floating label within the editor (InplaceLabelText)
• an assistive label below the editor (HelpText)
• affixed labels within the editor (Prefix and Suffix).

Regular Labels

The data form can display strings or icons as labels next to the editor.

The following code snippet displays and configures labels that appear above editors:

XAML

<ContentPage ...
             xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors" >
    <dxdf:DataFormView x:Name="dataForm">
        <dxdf:DataFormTextItem FieldName="LastName" 
                        LabelIcon="Person"
                        ... />
        <dxdf:DataFormDateItem FieldName="BirthDate" 
                        IsLabelVisible="True"
                        LabelText="Birth Date" 
                        LabelFontSize="18"
                        LabelFontAttributes="Italic"
                        LabelFontFamily="Times New Roman"
                        LabelIndent="15"
                        LabelColor="Green"
                        LabelPosition="Top"
                        LabelHorizontalAlignment="Start"
                        LabelWidth="90"
                        LabelMinWidth="20"
                        LabelMaxWidth="150"
                        ... />
    </dxdf:DataFormView>
</ContentPage>

Floating Labels

A floating label is a caption that informs users about the editor’s purpose.

Use the InplaceLabelText property to specify the floating label text.

When an editor does not have input focus, the label is used as a placeholder. Once the editor gets focus, the label floats above the input field. If you want to disable the floating label effect, set the IsInplaceLabelFloating property to false.

The following code snippet displays a floating label:

XAML

<ContentPage ...
             xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors" >
    <dxdf:DataFormView x:Name="dataForm">
        <dxdf:DataFormTextItem FieldName="LastName" 
                        InplaceLabelText="First Name"
                        IsInplaceLabelFloating="True"
                        ... />
    </dxdf:DataFormView>
</ContentPage>

Assistive Labels

You can specify and configure assistive labels that appear below the editor.

The following code snippet displays and configures an assistive message:

XAML

<ContentPage ...
             xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors" >
    <dxdf:DataFormView x:Name="dataForm">
        <dxdf:DataFormDateItem FieldName="BirthDate" 
                        HelpText="Select your birth date"
                        HelpTextColor="Green"
                        BottomTextFontSize="18"
                        BottomTextFontAttributes="Italic"
                        BottomTextFontFamily="Times New Roman"
                        ... />
    </dxdf:DataFormView>
</ContentPage>

Use the HelpText property to specify the help message.

If HelpText is not set, an error message may shift page content down when it appears. To prevent this behavior, set the ReserveBottomTextLine property to true.

To specify the color of the error message, error icon, editor’s borders, and in-place label in the error state, use the ErrorColor property.

Refer to the following topic for more information: Validate User Input in Data Form for .NET MAUI.

Affixed Labels

You can specify labels displayed before and after the input string within an editor. For this purpose, use Prefix and Suffix properties.

The following code snippet displays affixed labels:

XAML

<ContentPage ...
             xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors" >
    <dxdf:DataFormView x:Name="dataForm">
        <dxdf:DataFormTextItem FieldName="Email" 
                        Suffix="@dx-email.com"
                        ... />
        <dxdf:DataFormNumericItem FieldName="Email" 
                        Prefix="$"
                        ... />
    </dxdf:DataFormView>
</ContentPage>

Common Label Settings

The DataFormView control includes APIs that allow you to change label appearance for all editors on the form:

XAML

<ContentPage ...
             xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors">
    <dxdf:DataFormView x:Name="dataForm" ...
                    IsEditorLabelVisible="True"
                    EditorLabelFontSize="18"
                    EditorLabelFontAttributes="Italic"
                    EditorLabelFontFamily="Times New Roman"
                    EditorLabelColor="Green"
                    EditorLabelPosition="Top"
                    EditorLabelHorizontalAlignment="Start"
                    EditorLabelIndent="15"
                    EditorLabelWidth="30"
                    EditorLabelMinWidth="20"
                    EditorLabelMaxWidth="60" 
                    ... />
</ContentPage>

Label Attributes

You can use parameters of the DataFormDisplayOptions attribute to configure labels for an individual editor:

XAML

<ContentPage ...
             xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors">
    <dxdf:DataFormView x:Name="dataForm" ... />
</ContentPage>

C#

namespace DataFormExample {
    public class PersonalInfo {
        [DataFormDisplayOptions(
            LabelIcon = "Person",
            ...
        )]
        public string FirstName { get; set; }
        public string LastName { get; set; }

        [DataFormDisplayOptions(
            IsLabelVisible = true,
            LabelText = "Birth Date",
            LabelIndent = 15,
            LabelWidth = 30,
            LabelMinWidth = 20,
            LabelMaxWidth = 60,
            LabelPosition = "Top",
            LabelHorizontalAlignment = "Start"
        )]
        public DateTime BirthDate { get; set; }

        public virtual Gender Gender { get; set; }
        public string Password { get; set; }
        ...
    }
    public enum Gender { Female, Male, RatherNotSay }
}