Skip to main content

DataFormNumericItem Class

Stores settings of the data form’s number editor.

Namespace: DevExpress.Maui.DataForm

Assembly: DevExpress.Maui.Editors.dll

NuGet Package: DevExpress.Maui.Editors

Declaration

public class DataFormNumericItem :
    DataFormTextItemWithAffixBase

Remarks

The DataFormView component automatically creates a DataFormNumericItem for the bound data object’s properties of numeric[1] data types. You can also add a numeric editor and modify its properties manually in XAML or C# code.

The image below shows a Data Form with a numeric editor:

DevExpress Data Form for MAUI -- Numeric Editor

For a list with all supported editors in the DataFormView, refer to the following topic: Data Form – Editors.

Get Started

The following help topic describes how to create your first app with the DevExpress Data Form component for MAUI:

Read Tutorial: Get Started with Data Form

Define Numeric Editor Settings in XAML

Specify the DataFormView.DataObject property to define an object whose properties are to be edited in the DataFormView.

To show a numeric property editor in a DataFormView, add a DataFormNumericItem object to the DataFormView.Items collection.

Use the item’s FieldName property to specify the name of the property to be edited in the Data Form.

Note: The DataFormView.Items property is a content property. You can skip the <Items> tag in your markup.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors"
             x:Class="DataFormSample.MainPage"
             xmlns:local="clr-namespace:DataFormSample">
    <ScrollView>
        <StackLayout>
            <dxdf:DataFormView x:Name="dataForm" 
                               CommitMode="Input" 
                               IsAutoGenerationEnabled="False">
                <dxdf:DataFormView.DataObject>
                    <local:OrderInfo/>
                </dxdf:DataFormView.DataObject>
                <dxdf:DataFormNumericItem FieldName="Count" 
                                          EditorWidth="300" 
                                          HelpText="Specify the number of items."
                                          LabelText="Count"
                                          RowOrder="0" 
                                          ClearIconVisibility="Always" 
                                          ReturnType="Next"
                                          AllowLooping="False"
                                          AllowNullValue="True"
                                          IsUpDownIconVisible="True"
                                          MinValue="1"
                                          MaxValue="100"
                                          StepValue="1"/>
            </dxdf:DataFormView>
        </StackLayout>
    </ScrollView>
</ContentPage>
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace DataFormSample {
    public class OrderInfo : INotifyPropertyChanged {
        //...
        int count;
        public int Count {
            get { return this.count; }
            set {
                if (value != this.count) {
                    this.count = value;
                    NotifyPropertyChanged();
                }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public partial class MainPage : ContentPage {

        public MainPage() {
            InitializeComponent();
        }
    }
}

Use Attributes to Generate the Editor

You can apply the DataFormNumericEditorAttribute to the Data Object’s property whose value you want to edit in a numeric editor in the DataFormView.

Additionally, you can use the DataFormDisplayOptionsAttribute and DataFormItemPositionAttribute to configure display settings for the text editor:

using DevExpress.Maui.Core;
using DevExpress.Maui.DataForm;
using DevExpress.Maui.Editors;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace DataFormSample {
    public class OrderInfo : INotifyPropertyChanged {
        //...
        int count;
        [DataFormDisplayOptions(EditorWidth = "300", HelpText = "Specify the number of items.", 
            LabelText = "Count")]
        [DataFormItemPosition(RowOrder = 0)]
        [DataFormNumericEditor(ClearIconVisibility = IconVisibility.Always, ReturnType = ReturnType.Next,
            AllowLooping = false, AllowNullValue = true, IsUpDownIconVisible = true, 
            MinValue = 1, MaxValue = 100, StepValue = 1)]
        public int Count {
            get { return this.count; }
            set {
                if (value != this.count) {
                    this.count = value;
                    NotifyPropertyChanged();
                }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public partial class MainPage : ContentPage {
        public MainPage() {
            InitializeComponent();
            dataForm.DataObject = new OrderInfo();
        }
    }
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors"
             x:Class="DataFormSample.MainPage"
             xmlns:local="clr-namespace:DataFormSample">
    <ScrollView>
        <StackLayout>
            <dxdf:DataFormView x:Name="dataForm" 
                               CommitMode="Input"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

Validate Input

You can use the following techniques to validate user input values:

For more information about input data validation, refer to the following help topic: Validate User Input in Data Form.

Manage the Display Item Value

You can use the following methods to specify or obtain the editor value or display text:

Specify Layout

Refer to the following help topic for more information on how to position editors in a DataFormView:

Read Tutorial: Layout in Data Form

The following featured scenario shows how you can use the DataFormNumericItem class:

Contact Edit Form Search Bar Featured Scenario

Implements

Microsoft.Maui.IFrameworkElement
Microsoft.Maui.Controls.ITabStopElement
See Also