Logo

dev-resources.site

for different kinds of informations.

Introducing the New .NET MAUI Masked Entry Control

Published at
4/6/2023
Categories
netmaui
mobile
ui
whatsnew
Author
jollenmoyani
Categories
4 categories in total
netmaui
open
mobile
open
ui
open
whatsnew
open
Author
12 person written this
jollenmoyani
open
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();
         }
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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}"/>
Enter fullscreen mode Exit fullscreen mode

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 forum, support portal, or feedback portal. We are always happy to help you!

Related blogs

netmaui Article's
30 articles in total
Favicon
Introducing the New .NET MAUI Bottom Sheet Control
Favicon
Create Stunning AI-Powered .NET MAUI Charts Using Natural Language
Favicon
How to Easily Load JSON Data in .NET MAUI TreeView?
Favicon
Transform JSON into Stunning Charts: Auto-Generate Visuals with SyncfusionŽ .NET MAUI Toolkit 
Favicon
Visualizing Skyscraper Data with .NET MAUI Doughnut Chart and Maps
Favicon
Syncfusion EssentialÂŽ UI Kit for .NET MAUI: Accelerate App Development with Pre-Built UI Pages
Favicon
Building a Neumorphic UI with .NET MAUI Column Chart to Showcase Gen Z’s Favourite Social Media Platforms
Favicon
Introducing Syncfusion’s Second Set of Open-Source .NET MAUI Controls
Favicon
Sneak Peek at 2024 Volume 4: .NET MAUI
Favicon
Create a .NET MAUI Spline Area Chart to Track Annual Gold Price Fluctuations Across Major Global Currencies
Favicon
Visualize U.S. Gulf Coast Kerosene-Type Jet Fuel Prices with .NET MAUI Fast Line Chart
Favicon
Introducing Syncfusion’s First Set of Open-Source .NET MAUI Controls
Favicon
Introducing the New .NET MAUI AI AssistView Control
Favicon
AI-Powered Smart .NET MAUI Scheduler for Easy Appointment Booking
Favicon
AI-Driven Smart PDF Form Filling in .NET MAUI PDF Viewer
Favicon
AI-Driven Smart Location Search in .NET MAUI Maps
Favicon
AI-Powered Smart Searching in .NET MAUI Autocomplete
Favicon
Integrating AI-Powered Smart Paste in .NET MAUI DataForm for Easy Data Entry
Favicon
Syncfusion Essential Studio 2024 Volume 3 Is Here!
Favicon
Chart of the Week: Create a .NET MAUI Drill-Down Chart to View U.S. Workforce Distribution by Industry
Favicon
Sneak Peek 2024 Volume 3: AI-Powered Smart .NET MAUI controls
Favicon
Chart of the Week: Creating a .NET MAUI Radar Chart to Visualize Wind Directions
Favicon
Creating a Custom Chatbot with OpenAI APIs | Blazor and .NET MAUI Integration (Workshop Show Notes)
Favicon
بهترین آموزش .NET MAUI فارسی
Favicon
Xamarin, I Hate U
Favicon
Chart of the Week: Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data
Favicon
Create and Validate a Login Form in .NET MAUI
Favicon
Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control
Favicon
Introducing the New .NET MAUI Masked Entry Control
Favicon
What’s New in 2023 Volume 1: .NET MAUI Charts

Featured ones: