Seamlessly Integrate Numeric Up-Down UI in Your .NET MAUI App
Tags: dotnetmaui, mobile, desktop, crossplatform
Published: 2023-07-18 13:14:44

---
title: Seamlessly Integrate Numeric Up-Down UI in Your .NET MAUI App
published: true
date: 2023-07-18 12:27:01 UTC
tags: dotnetmaui, mobile, desktop, crossplatform
canonical_url: https://www.syncfusion.com/blogs/post/seamlessly-integrate-numeric-up-down-ui-in-your-net-maui-app.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20j5zfk7aitw8exyjxgm.png
---
In the Essential Studio [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release, we introduced a new [Numeric Entry control for the .NET MAUI](https://www.syncfusion.com/maui-controls/maui-numeric-entry ".NET MAUI Numeric Entry Control") platform. This control offers **entry** and **numeric up – down** 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:

- [Range validation](#Range)
- [Step value](#Step)
- [Cultures](#Cultures)
- [Custom format](#Custom)

Let’s check them out!

###<a name="Range">Range validation</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Range-Validation-Feature-with-Numeric-Up-Down-Buttons.gif" alt="Range Validation Feature with Numeric Up-Down Buttons" style="width:100%">

  <figcaption>Range Validation Feature with Numeric Up-Down Buttons</figcaption>

</figure>

###<a name="Step">Step value</a>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customized-Step-Value-with-Numeric-Up-Down-Buttons.gif" alt="Customized Step Value with Numeric Up-Down Buttons" style="width:100%">

  <figcaption>Customized Step Value with Numeric Up-Down Buttons</figcaption>

</figure>

###<a name="Cultures">Cultures</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Custom-Culture-Support-with-Numeric-Up-Down-Buttons.png" alt="Custom Culture Support with Numeric Up-Down Buttons" style="width:100%">

  <figcaption>Custom Culture Support with Numeric Up-Down Buttons</figcaption>

</figure>

###<a name="Custom">Custom format</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Custom-Format-Support-with-Numeric-Up-Down-Buttons-1.png" alt="Custom Format Support with Numeric Up-Down Buttons" style="width:100%">

  <figcaption>Custom Format Support with Numeric Up-Down Buttons</figcaption>

</figure>

**Note:** For more details, refer to the [up-down button in .NET MAUI Numeric Entry control documentation](https://help.syncfusion.com/maui/numericentry/updown-button "Getting Started with the UpDown Button in .NET MAUI NumericEntry").

## 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](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first app with .NET MAUI").

**Step 2:** The Syncfusion .NET MAUI controls are available on the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI **SfNumericEntry** control to your project, open the **NuGet package manager** in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"). Search for the [Syncfusion.Maui.Inputs](https://www.nuget.org/packages/Syncfusion.Maui.Inputs "Syncfusion.Maui.Inputs nuget package") package and then install it.

**Step 3:** Register the handler for Syncfusion core in the **MauiProgram.cs** file.

```csharp
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.

```xml
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.

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

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Integrating-Numeric-Up-Down-Button-.NET-MAUI-App.png" alt="Integrating Numeric Up-Down Button .NET MAUI App" style="width:100%">

  <figcaption>Integrating Numeric Up-Down Button .NET MAUI App</figcaption>

</figure>

## GitHub reference

For more details, refer to the [.NET MAUI numeric up-down button GitHub demo](https://github.com/SyncfusionExamples/maui-numericentry-samples ".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](https://www.syncfusion.com/maui-controls/maui-numeric-entry ".NET MAUI Numeric Entry Control") control. This feature is available in our [2023 Volume 2 ](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2")release. Try it out now and leave your feedback in the comment section below!

Check out our [release notes](https://www.syncfusion.com/products/release-history "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages to see the other updates in this release. Also, we hope you will download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Essential Studio for .NET MAUI") to start evaluating the features immediately.

You can always contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to help you!

## Related Blogs

- [Introducing the New .NET MAUI Expander Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-expander-control.aspx "Blog: Introducing the New .NET MAUI Expander Control")
- [Unveiling the Cutting-Edge .NET MAUI Chips Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-chips-control.aspx "Blog: Unveiling the Cutting-Edge .NET MAUI Chips Control")
- [Chart of the Week: Creating .NET MAUI Area Chart for US Tech Companies Adopting Dual-Class Voting Structures](https://www.syncfusion.com/blogs/post/dotnet-maui-area-chart-visualize-us-companies-adopting-dual-class-voting.aspx "Blog: Chart of the Week: Creating .NET MAUI Area Chart for US Tech Companies Adopting Dual-Class Voting Structures")
- [Introducing the New .NET MAUI Numeric Entry Control](https://www.syncfusion.com/blogs/post/dotnet-maui-numeric-entry.aspx "Blog: Introducing the New .NET MAUI Numeric Entry Control")