Introducing the New .NET MAUI Numeric Entry Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (174).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (215)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (133)JavaScript  (221)Microsoft  (119)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (915)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (159)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (131)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (628)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (507)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (387)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (592)What's new  (332)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI Numeric Entry Control

Introducing the New .NET MAUI Numeric Entry Control

In Syncfusion’s Essential Studio 2023 Volume 2 release, we introduced a new Numeric Entry control for the .NET MAUI platform.

The Numeric Entry control provides a user-friendly and advanced input experience for numeric values. It supports a wide range of numeric formats, including currency, percentages, and decimals. Numeric Entry provides an enhanced user experience and facilitates input validation.

In this article, we will see the key features of the new .NET MAUI Numeric Entry control and the steps to get started with it.

Key features

The .NET MAUI Numeric Entry supports many user-friendly features. The highlights are:

Input validation

The Numeric Entry control performs input validation when an input field loses focus or the Enter key is pressed. This ensures that the entered value is in the expected numerical format and falls within the acceptable range or any other defined conditions.

Input Validation in .NET MAUI Numeric Entry Control
Input Validation in .NET MAUI Numeric Entry Control

Custom formatting

You can customize the format of the numeric values. You can choose the number of decimal digits and even add prefixes and suffixes, thus supporting a highly customized data entry process.

Custom Formatting in .NET MAUI Numeric Entry Control
Custom Formatting in .NET MAUI Numeric Entry Control

Value restriction

The Numeric Entry control allows you to impose various restrictions on the input values:

  • Limit the number range: Easily restrict users from entering input values outside a range set with minimum and maximum values.
  • Disable editing: Restrict a user’s ability to edit values in the control.
  • Prevent empty editor: Prevent users from entering empty or null input values.

Refer to the following images.

Limiting the Number Range in .NET MAUI Numeric Entry Control
Limiting the Number Range in .NET MAUI Numeric Entry Control
Disabling Editing in .NET MAUI Numeric Entry Control
Disabling Editing in .NET MAUI Numeric Entry Control
Preventing Null Input Values in .NET MAUI Numeric Entry Control
Preventing Null Input Values in .NET MAUI Numeric Entry Control

Placeholders

The placeholder feature allows you to provide hints for data entry fields in the Numeric Entry control. This guides the user with the required format of the input values and keeps them from entering a null value.

Placeholder Support in .NET MAUI Numeric Entry Control
Placeholder Support in .NET MAUI Numeric Entry Control

Localization

The Numeric Entry control automatically formats the input values based on the regional or cultural settings, ensuring that your app is localized and supports different cultural preferences.

Localization in .NET MAUI Numeric Entry Control
Localization in .NET MAUI Numeric Entry Control

Note: Refer to the .NET MAUI Numeric Entry control documentation to explore the other features.

Getting started with the .NET MAUI Numeric Entry control

We have seen the key features of the .NET MAUI Numeric Entry control. Let’s learn how to integrate it into your .NET MAUI app and utilize its features:

Step 1: First, create a .NET MAUI app.

Step 2: The Syncfusion .NET MAUI controls are available on NuGet Gallery. To add the .NET MAUI Numeric Entry control to your project, open the NuGet package manager in Visual Studio. Search for Syncfusion.Maui.Inputs, and then install it.

Step 3: Now, register the handler for the Syncfusion core in the MauiProgram.cs file.

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 NumericEntrySample
{
  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();
     }
  }
}

Step 4: Add the Syncfusion.Maui.Inputs namespace in your XAML page.

Xmlns:inputs=”clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs”

Step 5: Finally, initialize the Syncfusion .NET MAUI Numeric Entry control. Refer to the following code example.

<inputs:SfNumericEntry x:Name=”numericEntry”
                      WidthRequest=”300”
                      CustomFormat=”C2”
                      Value=”100” />

Refer to the following output image.

Integrating the Numeric Entry Control in a .NET MAUI Application
Integrating the Numeric Entry Control in a .NET MAUI Application

GitHub reference

Check out the .NET MAUI Numeric Entry control GitHub demo.

Conclusion

Thanks for reading! Overall, the new Syncfusion .NET MAUI Numeric Entry control is a great fit for developers building cross-platform mobile apps. This control is available in our 2023 Volume 2 release. Check out our Release Notes and What’s New pages to see the other updates in this release, and leave your feedback in the comments section below!

Download Essential Studio for .NET MAUI to start evaluating its controls immediately.

If you have questions, please contact us through our support forumsupport portal, or feedback portal. We are always happy to help you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed