Introducing the New .NET MAUI Masked Entry Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (215)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (228)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (948)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (141)Chart of the week  (55)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (662)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)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  (513)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (619)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI Masked Entry Control

Introducing the New .NET MAUI Masked Entry Control

In Syncfusion’s Essential Studio 2023 Volume 1 release, we introduced a new Masked Entry control for the .NET MAUI platform. This control is designed specifically for .NET MAUI apps, making it a perfect fit for developers building cross-platform mobile apps.

The new .NET MAUI Masked Entry is a text input control that restricts the user’s input to certain characters using a mask pattern. As the user types, the control applies the mask to the input, automatically formatting it according to the pattern. It is used to create templates for providing information such as telephone numbers, email IDs, IP addresses, and product keys.

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

Key features

The .NET MAUI Masked Entry control supports many user-friendly features:

Mask types

There are two types of masks, simple and regex. Each has a different set of mask elements that combine to form a mask expression.

Simple

You can generate expressions with simple mask elements. This is mainly used for fixed-length inputs.

.NET MAUI Masked Entry control with a simple mask pattern
.NET MAUI Masked Entry control with a simple mask pattern

Regex

Use regex masks to create more complex expressions for input data.

.NET MAUI Masked Entry control with regex mask
.NET MAUI Masked Entry control with regex mask

PromptChar

You can customize the default prompt character (_), which is displayed in the absence of input.

Customizing the default PromptChar in .NET MAUI Masked Entry control
Customizing the default PromptChar in .NET MAUI Masked Entry control

Formatting value

The Masked Entry control provides the following options to format the input values with literals, prompts, and typed characters:

  • ExcludePromptAndLiterals: Excludes the prompt and literal characters, preserving only the typed characters.
  • IncludePrompt: Keeps typed and prompt characters and excludes the literals.
  • IncludeLiterals: Keeps typed and literal characters and excludes the prompt characters.
  • IncludePromptAndLiterals: Keeps typed, prompt, and literal characters in the input.

Refer to the following images.

Excluding prompts and literals in the input
Excluding prompts and literals in the input
Including prompts in the input
Including prompts in the input
Including literals in the input
Including literals in the input
Including prompts and literals in the input
Including prompts and literals in the input

Cultures

You can set a supported culture for special symbols like currency, date, time, group, and decimal separators.

Culture support in the .NET MAUI Masked Entry control
Culture support in the .NET MAUI Masked Entry control

Note: For more details, refer to the .NET MAUI Masked Entry control documentation.

Getting started with the .NET MAUI Masked Entry control

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

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

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

Step 3: Register the handler for the Syncfusion core in the MauiProgram.cs file. Refer to the following code.

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

Step 4: Add the Syncfusion.Maui.Core and Syncfusion.Maui.Inputs namespaces to your XAML page.

xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"

Step 5: Then, initialize the Syncfusion .NET MAUI Masked Entry control. For this demo, we are going to use the regex mask type for an email ID field.

<inputs:SfMaskedEntry x:Name="maskedEntry"
                      WidthRequest="300"
                      MaskType="RegEx"
                      Mask="[A-Za-z0-9._%-]+@[A-Za-z0-9]+\.[A-Za-z]{2,3}"/>

After executing the previous code examples, we will get a Masked Entry control like the following image.

Integrating the Masked Entry control into a .NET MAUI application
Integrating the Masked Entry control into a .NET MAUI application

GitHub reference

Check out the .NET MAUI Masked Entry control demos on GitHub.

Conclusion

Thanks for reading! In this blog, we have seen the features of the new .NET MAUI Masked Entry control rolled out in the 2023 Volume 1 release. Check out our release notes and What’s New pages to see the other updates in this release. Try them out and leave your feedback in the comments section below.

If you are not yet a Syncfusion customer, download the Essential Studio for .NET MAUI free trial to start evaluating its controls immediately.

For questions, you can 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