Seamlessly Integrate Numeric Up-Down UI in Your .NET MAUI App | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (180).NET Core  (28).NET MAUI  (224)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (41)Black Friday Deal  (1)Blazor  (234)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (199)File Formats  (72)Flutter  (135)JavaScript  (226)Microsoft  (121)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (960)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (162)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (10)Business intelligence  (55)Button  (4)C#  (163)Chart  (145)Chart of the week  (57)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (676)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (20)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  (519)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (400)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (624)What's new  (337)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
MAUI Numeric updown control

Seamlessly Integrate Numeric Up-Down UI in Your .NET MAUI App

In the Essential Studio 2023 Volume 2 release, we introduced a new Numeric Entry control for the .NET MAUI platform. This control offers entry and numeric updown behaviors for getting numeric inputs from users.

The numeric up-down behavior provides increment and decrement buttons that greatly enhance the user experience by providing an intuitive way to enter numeric values. These buttons also provide range validation support that permits numeric input only within a specific range.

In this blog, we will explore the numeric up-down button feature in the .NET MAUI Numeric Entry control and see how to begin working with its essential features.

Key features

The numeric up-down buttons support the following key features:

Let’s check them out!

Range validation

You can set lower and upper boundaries for the input value to restrict users from submitting a value outside a particular range. For example, in a ticket reservation system, you can limit travelers to book a maximum of ten tickets at once.

Range Validation Feature with Numeric Up-Down Buttons
Range Validation Feature with Numeric Up-Down Buttons

Step value

You can set the step value for each increment or decrement operation performed with the up and down buttons.

Customized Step Value with Numeric Up-Down Buttons
Customized Step Value with Numeric Up-Down Buttons

Cultures

The .NET MAUI Numeric Entry control automatically adapts values according to regional or cultural settings, guaranteeing that your app is localized and caters to various cultural practices. You can enjoy the same feature in the numeric up-down button UI.

Custom Culture Support with Numeric Up-Down Buttons
Custom Culture Support with Numeric Up-Down Buttons

Custom format

You can also customize the format of the numerical values, select the number of decimal digits, and even incorporate prefixes and suffixes in the numeric up-down button UI.

Custom Format Support with Numeric Up-Down Buttons
Custom Format Support with Numeric Up-Down Buttons

Note: For more details, refer to the up-down button in .NET MAUI Numeric Entry control documentation.

Integrating the numeric up-down button in a .NET MAUI app

Let’s turn our attention to integrating the numeric up-down buttons into your .NET MAUI app by following these steps:

Step 1: Create a .NET MAUI application.

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

Step 3: Register the handler for 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 Numeric up-downSample
{
  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.Core and Syncfusion.Maui.Inputs namespaces 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. Here, we’ll set the value of the UpDownPlacementMode property as Inline to integrate the numeric up-down behavior in your app. Refer to the following code example.

<inputs:SfNumericEntry x:Name="numericUpDownnumeric up-down" UpDownPlacementMode="Inline"/>

After executing the previous code examples, our output will look like the following image:

Integrating Numeric Up-Down Button .NET MAUI App
Integrating Numeric Up-Down Button .NET MAUI App

GitHub reference

For more details, refer to the .NET MAUI numeric up-down button GitHub demo.

Conclusion

Thanks for reading! In this blog, we explored the numeric up-down button feature of the Syncfusion .NET MAUI Numeric Entry control. This feature is available in our 2023 Volume 2 release. Try it out now and leave your feedback in the comment section below!

Check out our release notes and What’s New pages to see the other updates in this release. Also, we hope you will download Essential Studio for .NET MAUI to start evaluating the features immediately.

You can always 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