Wednesday, March 27, 2024
HomeC#Introducing the New .NET MAUI Masked Entry Management

Introducing the New .NET MAUI Masked Entry Management


In Syncfusion’s Important Studio 2023 Quantity 1 launch, we launched a brand new Masked Entry management for the .NET MAUI platform. This management is designed particularly for .NET MAUI apps, making it an ideal match for builders constructing cross-platform cellular apps.

The brand new .NET MAUI Masked Entry is a textual content enter management that restricts the person’s enter to sure characters utilizing a masks sample. Because the person varieties, the management applies the masks to the enter, robotically formatting it based on the sample. It’s used to create templates for offering info reminiscent of phone numbers, e mail IDs, IP addresses, and product keys.

On this article, we are going to see the important thing options of the brand new .NET MAUI Masked Entry management and the steps to get began with it.

Key options

The .NET MAUI Masked Entry management helps many user-friendly options:

Masks varieties

There are two sorts of masks, easy and regex. Every has a distinct set of masks components that mix to type a masks expression.

Easy

You may generate expressions with easy masks components. That is primarily used for fixed-length inputs.

.NET MAUI Masked Entry control with a simple mask pattern
.NET MAUI Masked Entry management with a easy masks sample

Regex

Use regex masks to create extra advanced expressions for enter information.

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

PromptChar

You may customise the default immediate character (_), which is displayed within the absence of enter.

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

Formatting worth

The Masked Entry management gives the next choices to format the enter values with literals, prompts, and typed characters:

  • ExcludePromptAndLiterals: Excludes the immediate and literal characters, preserving solely the typed characters.
  • IncludePrompt: Retains typed and immediate characters and excludes the literals.
  • IncludeLiterals: Retains typed and literal characters and excludes the immediate characters.
  • IncludePromptAndLiterals: Retains typed, immediate, and literal characters within the enter.

Confer with the next photographs.

Excluding prompts and literals in the input
Excluding prompts and literals within the enter
Including prompts in the input
Together with prompts within the enter
Including literals in the input
Together with literals within the enter
Including prompts and literals in the input
Together with prompts and literals within the enter

Cultures

You may set a supported tradition for particular symbols like foreign money, date, time, group, and decimal separators.

Culture support in the .NET MAUI Masked Entry control
Tradition assist within the .NET MAUI Masked Entry management

Be aware: For extra particulars, check with the .NET MAUI Masked Entry management documentation.

Getting began with the .NET MAUI Masked Entry management

We now have seen the important thing options of the .NET MAUI Masked Entry management. Let’s see the right way to combine it into your .NET MAUI app and make the most of its primary options.

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

Step 2: The Syncfusion .NET MAUI controls can be found on the NuGet Gallery. So as to add the .NET MAUI Masked Entry management to your mission, open the NuGet bundle supervisor in Visible Studio. Seek for Syncfusion.Maui.Inputs after which set up it.

Step 3: Register the handler for the Syncfusion core within the MauiProgram.cs file. Confer with the next code.

utilizing Microsoft.Maui;
utilizing Microsoft.Maui.Internet hosting;
utilizing Microsoft.Maui.Controls.Compatibility;
utilizing Microsoft.Maui.Controls.Internet hosting;
utilizing Microsoft.Maui.Controls.Xaml;
utilizing Syncfusion.Maui.Core.Internet hosting;
namespace MaskedEntrySample
{
  public static class MauiProgram
  {
        public static MauiApp CreateMauiApp()
        {
               var builder = MauiApp.CreateBuilder();
               builder
               .UseMauiApp<App>()
               .ConfigureSyncfusionCore()
               .ConfigureFonts(fonts =>
               {
                   fonts.AddFont("OpenSans-Common.ttf", "OpenSansRegular");
               });
               return builder.Construct();
         }
  }
}

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

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

Step 5: Then, initialize the Syncfusion .NET MAUI Masked Entry management. For this demo, we’re going to use the regex masks sort for an e mail ID area.

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

After executing the earlier code examples, we are going to get a Masked Entry management like the next picture.

Integrating the Masked Entry control into a .NET MAUI application
Integrating the Masked Entry management right into a .NET MAUI software

GitHub reference

Take a look at the .NET MAUI Masked Entry management demos on GitHub.

Conclusion

Thanks for studying! On this weblog, we have now seen the options of the brand new .NET MAUI Masked Entry management rolled out within the 2023 Quantity 1 launch. Take a look at our launch notes and What’s New pages to see the opposite updates on this launch. Attempt them out and depart your suggestions within the feedback part under.

If you’re not but a Syncfusion buyer, obtain the Important Studio for .NET MAUI free trial to start out evaluating its controls instantly.

For questions, you possibly can contact us via our assist discussion boardassist portal, or suggestions portal. We’re at all times completely happy that can assist you!

Associated blogs

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments