Getting Started with .NET MAUI NumericEntry

26 Mar 20245 minutes to read

This section explains the steps required to add the .NET MAUI NumericEntry control in the MAUI application and utilize the various functions provided.

To get start quickly with our .NET MAUI Numeric Entry, you can check the below video.

Creating an application with .NET MAUI NumericEntry

This section explains the steps required to work with the SfNumericEntry control for .NET MAUI.

Adding a .NET MAUI Numeric Entry reference

Syncfusion .NET MAUI controls are available in Nuget.org. To add .NET MAUI Numeric Entry to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Inputs, and install it.

Handler registration

In the MauiProgram.cs file, register the handler for the Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace MaskedEntrySample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }      
    }
}

Adding the .NET MAUI Numeric Entry control

Step 1: Add the NuGet to the project as discussed in the above reference section.

Step 2: Add the namespace as shown in the following code sample.

XAML

<xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"/>

C#

using Syncfusion.Maui.Inputs;

Initialize Numeric Entry

Now, add the SfNumericEntry control with a required optimal name using the included namespace.

XAML

<editors:SfNumericEntry x:Name="numericEntry" />

C#

SfNumericEntry sfNumericEntry = new SfNumericEntry();

Editing the value

By default, the NumericEntry control allows you to enter numeric input and restricts the alphabetic input. Once the Enter key is pressed or control focus is lost, the value of the NumericEntry control is validated and updated based on the format applied.

XAML

<editors:SfNumericEntry HorizontalOptions="Center" 
                        VerticalOptions="Center" 
                        CustomFormat="0.000" />

C#

SfNumericEntry sfNumericEntry = new SfNumericEntry();
sfNumericEntry.HorizontalOptions = LayoutOptions.Center;
sfNumericEntry.VerticalOptions = LayoutOptions.Center;
sfNumericEntry.CustomFormat = "0.000";

Change number format

You can change the format in which the value should be displayed using the CustomFormat property. By default, the value of the CustomFormat property is null.

XAML

<editors:SfNumericEntry HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Value="12.5" 
                        CustomFormat="C2" />

C#

SfNumberBox sfNumberBox = new SfNumberBox();
sfNumberBox.HorizontalOptions = LayoutOptions.Center;
sfNumberBox.VerticalOptions = LayoutOptions.Center;
sfNumberBox.Value = 12.5;
sfNumberBox.CustomFormat = "C2";

Accept null value

By default, the NumericEntry control allows a null value. A null value is assigned when the user clicks the clear button or clears the input. You can disable this by setting the value of the AllowNull property as false. When the value of the AllowNull property is set to false, and the input is cleared, the NumericEntry control returns it to 0.

XAML

<editors:SfNumericEntry HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Value="12315"
                        AllowNull="False" />

C#

SfNumericEntry sfNumericEntry = new SfNumericEntry();
sfNumericEntry.Value=12315;
sfNumericEntry.HorizontalOptions = LayoutOptions.Center;
sfNumericEntry.VerticalOptions = LayoutOptions.Center;
sfNumericEntry.AllowNull = false;