Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions wpf/MaskedTextBox/Appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
layout: post
title: Appearance in WPF MaskedTextBox control | Syncfusion®
description: Learn here all about Appearance support in Syncfusion® WPF MaskedTextBox (SfMaskedEdit) control and more.
platform: WPF
platform: wpf
control: SfMaskedEdit
documentation: ug
---

# Appearance in WPF MaskedTextBox (SfMaskedEdit)

This section explains different UI customization and theming options available in [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html).
This section explains the UI customization and theming options available in the [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) control. The WPF MaskedTextBox control is implemented through the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) class.

## Setting the background

You can change the default background color and selection color of `SfMaskedEdit` by using the `Background` and `SelectionBrush` property. The default value of `Background` property is `White` and `SelectionBrush` property is `Royal Blue`.
You can change the default background and selection colors of `SfMaskedEdit` by using the `Background` and `SelectionBrush` properties. The default value of the `Background` property is `White`, and the default value of the `SelectionBrush` property is `Royal Blue`.

{% tabs %}
{% highlight XAML %}
Expand All @@ -32,13 +32,13 @@ sfMaskedEdit.SelectionBrush = Brushes.Green;
{% endhighlight %}
{% endtabs %}

![Changing Background Color of WPF MaskedEdit](Appearence_Images/wpf-maskededit-background.png)
![Changing Background Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-background.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub

## Setting the foreground

You can change the foreground color by using the `Foreground` property and can change the caret color by using the `CaretBrush` property. The default value of `Foreground` property is `Black` and `CaretBrush` property is `null`.
You can change the foreground color by using the `Foreground` property and the caret color by using the `CaretBrush` property. The default value of the `Foreground` property is `Black`, and the default value of the `CaretBrush` property is `null`.

{% tabs %}
{% highlight XAML %}
Expand All @@ -57,13 +57,13 @@ sfMaskedEdit.CaretBrush = Brushes.Red;
{% endhighlight %}
{% endtabs %}

![Changing Foreground Color of WPF MaskedEdit](Appearence_Images/wpf-maskededit-foreground.png)
![Changing Foreground Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-foreground.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub

## Setting the border color

You can change the default border color of `SfMaskedEdit` by using the `BorderBrush` property. The default value of `BorderBrush` property is `Lavender`.
You can change the default border color of `SfMaskedEdit` by using the `BorderBrush` property. The default value of the `BorderBrush` property is `Lavender`.

{% tabs %}
{% highlight XAML %}
Expand All @@ -80,13 +80,13 @@ sfMaskedEdit.BorderBrush = Brushes.Blue;
{% endhighlight %}
{% endtabs %}

![Changing Border Color of WPF MaskedEdit](Appearence_Images/wpf-maskededit-border-color.png)
![Changing Border Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-border-color.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub

## Change flow direction

You can change the flow direction of the `SfMaskedEdit` layout from right to left by setting the `FlowDirection` property value as `RightToLeft`. The default value of `FlowDirection` property is `LeftToRight`.
You can change the flow direction of the `SfMaskedEdit` layout from right to left by setting the `FlowDirection` property to `RightToLeft`. The default value of the `FlowDirection` property is `LeftToRight`.

{% tabs %}
{% highlight XAML %}
Expand All @@ -103,16 +103,16 @@ sfMaskedEdit.FlowDirection = FlowDirection.RightToLeft;
{% endhighlight %}
{% endtabs %}

![Changing Flow Direction of WPF MaskedEdit](Appearence_Images/wpf-maskededit-flow-direction.png)
![Changing Flow Direction of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-flow-direction.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub

## Theme

SfMaskedEdit supports various built-in themes. Refer to the below links to apply themes for the SfMaskedEdit,
The WPF MaskedTextBox supports various built-in themes. Refer to the following links to apply them:

* [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)

* [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)

![Applying Theme to WPF SfMaskedEdit](Getting-Started_images/wpf-maskededit-theme.png)
![Applying Theme to WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-theme.png)
36 changes: 18 additions & 18 deletions wpf/MaskedTextBox/Getting-Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ documentation: ug

# Getting Started with WPF MaskedTextBox (SfMaskedEdit)

This section explains how to create a [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) (SfMaskedEdit) and explains about its structure and features.
This section explains how to create a [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) and describes its structure and features. The WPF MaskedTextBox control is implemented through the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) class.

## Control Structure

![WPF MaskedEdit](Getting-Started_images/wpf-maskededit-structure.png)
![WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-structure.png)

## Assembly deployment

Expand All @@ -23,16 +23,16 @@ You can find more details about installing the NuGet package in a WPF applicatio

[How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages)

## Adding WPF SfMaskedEdit via designer
## Adding WPF WPF MaskedTextBox via designer

You can add the `SfMaskedEdit` control to an application by dragging it from the toolbox to a view of the designer. The following dependent assembly will be added automatically.

* Syncfusion.SfInput.WPF
* Syncfusion.SfShared.WPF

![Dragging WPF MaskedEdit Control from Toolbox to Designer](Getting-Started_images/wpf-maskededit-toolbox.png)
![Dragging WPF MaskedTextBox Control from Toolbox to Designer](Getting-Started_images/wpf-maskededit-toolbox.png)

## Adding WPF SfMaskedEdit via XAML
## Adding WPF MaskedTextBox via XAML

To add the `SfMaskedEdit` control manually in XAML, follow these steps:
1. Create a new WPF project in Visual Studio.
Expand Down Expand Up @@ -67,7 +67,7 @@ To add the `SfMaskedEdit` control manually in XAML, follow these steps:
{% endcapture %}
{{ codesnippet1 | OrderList_Indent_Level_1 }}

## Adding WPF SfMaskedEdit via C\#
## Adding WPF MaskedTextBox through C\#

To add the `SfMaskedEdit` control manually in C#, follow these steps:

Expand Down Expand Up @@ -105,13 +105,13 @@ public partial class MainWindow : Window {
{% endcapture %}
{{ codesnippet2 | OrderList_Indent_Level_1 }}

![WPF MaskedEdit Control](Getting-Started_images/wpf-maskededit-control.png)
![WPF MaskedTextBox Control](Getting-Started_images/wpf-maskededit-control.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/blob/master/Samples/Getting-Started) in GitHub

## Restrict the user to enter valid data

You can restrict the user to enter the valid input without any custom validation by creating the mask pattern as your requirement. You can enable the mask by setting the mask pattern to the [Mask](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Mask) property and set the [MaskType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_MaskType) property value as `Regex`. The default value of `Mask` property is `null` and `MaskType` property is `Simple`.
You can restrict valid input without custom validation by creating a mask pattern. Enable the mask by setting the mask pattern to the [Mask](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Mask) property and set the [MaskType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_MaskType) property to `Regex`. The default value of the `Mask` property is `null`, and the default value of the `MaskType` property is `Simple`.

{% tabs %}
{% highlight xaml %}
Expand All @@ -130,7 +130,7 @@ sfMaskedEdit.Mask = @"-?\d+\.?\d*";
{% endhighlight %}
{% endtabs %}

![WPF MaskedEdit displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png)
![WPF MaskedTextBox displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png)

Here, the `SfMaskedEdit` accept the positive and negative whole or float type numbers.

Expand All @@ -140,7 +140,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext

## Setting the value

You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`.
You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of the `Value` property is formatted. The default value of the `Value` property is `null`.

{% tabs %}
{% highlight xaml %}
Expand All @@ -161,7 +161,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}";
{% endhighlight %}
{% endtabs %}

![WPF MaskedEdit displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png)
![WPF MaskedTextBox displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub

Expand Down Expand Up @@ -193,13 +193,13 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}";
{% endhighlight %}
{% endtabs %}

![WPF MaskedEdit displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png)
![WPF MaskedTextBox displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub

## Indicates error on invalid input

After input validation failed, you can indicate to the user about the invalid input by the showing error border. The error border automatically disappeared when the input validation is succeed. You can change the error border color by using the [ErrorBorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_ErrorBorderBrush) property. The default value of `ErrorBorderBrush` property is `Red`.
After input validation fails, you can indicate invalid input to the user by showing an error border. The error border automatically disappears when input validation succeeds. You can change the error border color by using the [ErrorBorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_ErrorBorderBrush) property. The default value of the `ErrorBorderBrush` property is `Red`.

{% tabs %}
{% highlight xaml %}
Expand All @@ -216,7 +216,7 @@ sfMaskedEdit.ErrorBorderBrush = Brushes.Yellow;
{% endhighlight %}
{% endtabs %}

![WPF MaskedEdit displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif)
![WPF MaskedTextBox displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub

Expand All @@ -243,13 +243,13 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}";
{% endhighlight %}
{% endtabs %}

![WPF MaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png)
![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub

## Value changed notification

you can notified when changing the value of `SfMaskedEdit.Value` property by using the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) event.
You can receive a notification when the value of the `SfMaskedEdit.Value` property changes by using the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) event.

N> Your valid input character is updated to the `Value` property based on the `ValidationMode` property.
Refer [Input Validation](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#input-validation) to know more about the `ValidationMode`.
Expand Down Expand Up @@ -283,12 +283,12 @@ private void SfMaskedEdit_ValueChanged(object sender, EventArgs e) {

## Theme

SfMaskedEdit supports various built-in themes. Refer to the below links to apply themes for the SfMaskedEdit,
The WPF MaskedTextBox supports various built-in themes. Refer to the following links to apply them.

* [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)

* [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)

![Applying Theme to WPF MaskedEdit](Getting-Started_images/wpf-maskededit-theme.png)
![Applying Theme to WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-theme.png)

N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Themes) in GitHub
Loading