Introducing the New WinUI MaskedTextBox Control
Tags: ui, whatsnew, winui, desktop
Published: 2023-01-17 13:21:02

---
title: Introducing the New WinUI MaskedTextBox Control
published: true
date: 2023-01-17 11:15:00 UTC
tags: ui, whatsnew, winui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-winui-maskedtextbox-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/542aeta37a9u4ov6zre5.png
---
In Syncfusion’s Essential Studio [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release, we introduced a new MaskedTextBox control for the [WinUI](https://www.syncfusion.com/winui-controls "Syncfusion WinUI toolkit") platform.

The [WinUI MaskedTextBox](https://www.syncfusion.com/winui-controls/masked-textbox "Syncfusion WinUI MaskedTextBox Control") control is an advanced input control that restricts the input of certain characters by using a mask pattern. We can use this control to create templates for providing information such as telephone numbers, email IDs, IP addresses, and product keys.

Let’s look at the features of the new WinUI MaskedTextBox control, and then I’ll demonstrate how to get started with it.

## Key features

The key features of the WinUI MaskedTextBox control are:

- [Mask types](#mask-types)
- [PromptChar](#promptchar)
- [Formatting value](#formatting-value)
- [Cultures](#cultures)
- [Headers](#headers)
- [Description](#description)

### <a name="mask-types">Mask types</a>

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

- Simple: To create expressions with specific mask elements for fixed-length inputs.
- Regex: To create more complex expressions for input data.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/WinUI-Masked-TextBox-control-with-a-simple-mask-1.gif" alt="WinUI MaskedTextBox control with a simple mask" style="width:100%">

  <figcaption>WinUI MaskedTextBox control with a simple mask</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/WinUI-Masked-TextBox-control-with-regex-mask-1.gif" alt="WinUI MaskedTextBox control with regex mask" style="width:100%">

  <figcaption>WinUI MaskedTextBox control with regex mask</figcaption>

</figure>

### <a name="promptchar">PromptChar</a>

You can customize the default prompt character (\_), which is used in the absence of input.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Customizing-the-default-PromptChar-in-WinUI-Masked-TextBox-control-1.png" alt="Customizing the default PromptChar in WinUI MaskedTextBox control" style="width:100%">

  <figcaption>Customizing the default PromptChar in WinUI MaskedTextBox control</figcaption>

</figure>

### <a name="formatting-value">Formatting value</a>

The WinUI MaskedTextBox 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, excluding literals.
- **IncludeLiterals** : Keeps typed and literal characters, excluding prompt characters.
- **IncludePromptAndLiterals** : Maintains typed, prompt, and literal characters in the input.

Refer to the following images.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Exclude-prompts-and-literals-1.png" alt="Exclude prompts and literals" style="width:100%">

  <figcaption>Exclude prompts and literals</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Include-prompts-1.png" alt="Include prompts" style="width:100%">

  <figcaption>Include prompts</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Include-literals-1.png" alt="Include literals" style="width:100%">

  <figcaption>Include literals</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Include-prompts-and-literals-1.png" alt="Include prompts and literals" style="width:100%">

  <figcaption>Include prompts and literals</figcaption>

</figure>

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

You can set any culture to currency symbols, date separators, time separators, group separators, and decimal separators.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Custom-culture-support-in-WinUI-Masked-TextBox-control-1.png" alt="Custom culture support in WinUI MaskedTextBox control" style="width:100%">

  <figcaption>Custom culture support in WinUI MaskedTextBox control</figcaption>

</figure>

### <a name="headers">Header</a>

You can set a title for the MaskedTextBox control and customize the title’s appearance with the header template.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/WinUI-Masked-TextBox-control-with-header-2.png" alt="WinUI MaskedTextBox control with header" style="width:100%">

  <figcaption>WinUI MaskedTextBox control with header</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Customizing-the-WinUI-Masked-TextBox-controls-header-using-templates-1.png" alt="Customizing the WinUI MaskedTextBox control’s header using templates" style="width:100%">

  <figcaption>Customizing the WinUI MaskedTextBox control’s header using templates</figcaption>

</figure>

### <a name="description">Description</a>

You can set the description for the MaskedTextBox control to guide the user to enter the expected input.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/WinUI-Masked-TextBox-control-with-description-1.png" alt="WinUI MaskedTextBox control with description" style="width:100%">

  <figcaption>WinUI MaskedTextBox control with description</figcaption>

</figure>

## Getting started with the WinUI MaskedTextBox control

We have seen the features of the WinUI MaskedTextBox control. Let’s learn how to integrate it into your WinUI app and utilize its features by following these steps.

### Step 1: Create a WinUI application.

First, [create a simple WinUI app using the Windows App SDK](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=desktop-csharp "Create your first WinUI 3 (Windows App SDK) project").

### Step 2: Add the Syncfusion.Editors.WinUI NuGet package.

Then, install the latest [Syncfusion.Editors.WinUI](https://www.nuget.org/packages/Syncfusion.Editors.WinUI/ "Syncfusion.Editors.WinUI NuGet Package") NuGet package in your project from the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery") or from the installed location, **C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages**.

**Note:** The **xx.x.x.xx** denotes the version of the installed Syncfusion WinUI Editors package.

### Step 3: Add the namespace.

Now, include the **Syncfusion.UI.Xaml.Editors**  namespace in your XAML file with the following code.

```xml
xmlns:syncfusion= “using:Syncfusion.UI.Xaml.Editors”
```

### Step 4: Initialize the WinUI MaskedTextBox control.

Finally, initialize the WinUI MaskedTexBox control. Here, we’ll use the regex mask type for the email ID field. Refer to the following code example.

```xml
<Page
    x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
      <syncfusion:SfMaskedTextBox Width="200"
                                   MaskType="RegEx"
                                   Mask="[A-Za-z0-9._%-]+@[A-Za-z0-9]+\.[A-Za-z]{2,3}" />
    </Grid>
</Page>

```

This code example will create a MaskedTextbox control like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Integrating-Masked-TextBox-control-into-a-WinUI-application-1.png" alt="Integrating MaskedTextBox control into a WinUI application" style="width:100%">

  <figcaption>Integrating MaskedTextBox control into a WinUI application</figcaption>

</figure>

## Conclusion

Thanks for reading! I hope learning about the new Syncfusion [WinUI MaskedTextBox](https://www.syncfusion.com/winui-controls/masked-textbox "Syncfusion WinUI MaskedTextBox Control") control and its features was enjoyable. Our [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release included this control. To see all the new upgrades in this release, look at our [Release Notes](https://help.syncfusion.com/winui/release-notes/v20.4.0.38?type=all "Essential Studio for WinUI Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "What's New in Syncfusion Products") pages. Try them out, then share your thoughts in the comments section below.

You can download and check our WinUI demo app in the [Microsoft Store](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Syncfusion WinUI demos on Microsoft Store").

The new version of Essential Studio is available for current customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and downloads page of Essential Studio") page. If you are not a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our newest features.

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

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-4-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 4 Is Here!")
- [What’s New in 2022 Volume 4: WinUI and WPF](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-4-winui-and-wpf.aspx "Blog: What’s New in 2022 Volume 4: WinUI and WPF")
- [Experience Seamless Excel-Like Filtering in WinUI DataGrid ](https://www.syncfusion.com/blogs/post/excel-like-filtering-in-winui-datagrid.aspx "Blog: Experience Seamless Excel-Like Filtering in WinUI DataGrid")
- [Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control](https://www.syncfusion.com/blogs/post/achieve-google-like-autosuggestions-with-the-winui-autocomplete-control.aspx "Blog: Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control")