В WPF изменить маску

Check our “Mask Tokens” documentation article for the RadMaskedInput WPF control.

Syntax

<Page … xmlns_extensions=”using:Microsoft.Toolkit.Uwp.UI.Extensions”><TextBox extensions:TextBoxMask.Mask=”9a9a-a9a*” Header=”Text box with Mask 9a9a-a9a* (9 allows from 0 to 9, a allow from a to Z and * allows both a and 9)”/><TextBox extensions:TextBoxMask.Mask=”+1999-9999″ extensions:TextBoxMask.PlaceHolder=” ” Header=”Text box with Mask +1999-9999 and placeHolder as space (placeholder represents the characters the user can change on runtime)”/><TextBox extensions:TextBoxMask.CustomMask=”5:[1-5],c:[a-c]” extensions:TextBoxMask.Mask=”a5c-5c*9″ Header=”Text box with CustomMask in case you want to define your own variable character like a,9 and * , mask: a5c-5c*9, 5: [1-5], c: [a-c]”/>

General Information

You can define an editor’s mask settings using the properties that have the ‘Mask‘ prefix (such as the TextEdit.MaskType, TextEdit.Mask, TextEdit.MaskCulture, etc.). Masks are usually used in edit mode. When an editor is not in edit mode, its display text can be also formatted using the specified mask, if the TextEdit.MaskUseAsDisplayFormat property is set to true. If this property is false, an editor’s display text is composed using the BaseEdit.DisplayFormatString format in display mode.

IME is disabled in all masked editors.

When you use the Text property to specify the editor’s value, the value is of System.String type and the Numeric and DateTime mask types may apply incorrectly. To correctly apply mask settings, you should use EditValue property to specify the editor’s value.

Introduction

After trying several different approaches, I finally settled on creating a custom class derived from TextBox. Then very simply added a custom public enum property “Mask” to my custom class for selecting the masked type. Next, I subscribe to the TextChanged event in the constructor of my class and this is where I’ll apply any logic needed to filter input, then apply our need mask.

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet package that needs to be added as reference to use the control in any application.

You can find more details about installing the NuGet package in a WPF application in the following link:

How to install nuget packages

Alphanumeric tokens

1. Standard format codes:

  • A: Alphanumeric or a special character, required.

  • a: Alphanumeric or a special character, not required

  • L: Letter, required. Restrict input to the ASCII letters a-z and A-Z. This mask element is equivalent to [a-zA-Z] in regular expressions.

  • l: Letter, not required

  • : Escapes a mask character, turning it into a literal. “” is the escape sequence for a backslash.

  • Any other characters: (literals) All non-mask elements will appear as themselves within RadMaskedTextInput. Literals always occupy a static position in the mask at run time, and cannot be moved or deleted by the user.

Example 1: Setting standard format codes

<StackPanel HorizontalAlignment=”Center” VerticalAlignment=”Center”> <TextBlock Text=”Mask: A” /> <telerik:RadMaskedTextInput Margin=”0,5,0,10″ Mask=”AAAAAA” /> <TextBlock Text=”Mask: a” /> <telerik:RadMaskedTextInput Margin=”0,5,0,10″ Mask=”aaaaaa” /> <TextBlock Text=”Mask: L” /> <telerik:RadMaskedTextInput Margin=”0,5,0,10″ Mask=”LLLL” /> <TextBlock Text=”Mask: l” /> <telerik:RadMaskedTextInput Margin=”0,5,0,10″ Mask=”llll” /> <TextBlock Text=”Mask: ” /> <telerik:RadMaskedTextInput Mask=”####” /> <TextBlock Text=”Mask: Any other characters” /> <telerik:RadMaskedTextInput Mask=”Name: llll” /> </StackPanel>

2. Numeric format codes:

  • c: Currency pattern, not required

  • n: Decimal pattern, required

  • p: Percentage, not required

  • d: Digit pattern, required

  • #: Digit pattern, not required. If this position is blank in the mask, it will be rendered as the character in the Placeholder property. Plus (+) and minus (-) signs are allowed.

Example 2: Setting numeric format codes

<StackPanel HorizontalAlignment=”Center” VerticalAlignment=”Center”> <TextBlock Text=”Currency Pattern” /> <telerik:RadMaskedCurrencyInput Margin=”0,5,0,10″ Mask=”c3.3″ Value=”111.234″ /> <TextBlock Text=”Decimal Pattern” /> <telerik:RadMaskedNumericInput Margin=”0,5,0,10″ Mask=”n3.3″ Value=”111.234″ /> <TextBlock Text=”Percent Pattern” /> <telerik:RadMaskedNumericInput Margin=”0,5,0,10″ Mask=”p3.2″ Value=”111.234″ /> <TextBlock Text=”Digit Pattern – d” /> <telerik:RadMaskedNumericInput Margin=”0,5,0,10″ Mask=”d3″ Value=”111.234″ /> <TextBlock Text=”Digit Pattern – #” /> <telerik:RadMaskedNumericInput Margin=”0,5,0,10″ Mask=”#3.1″ Value=”111.234″ /> </StackPanel>

An explanation about the default numeric format strings can be found in this MSDN article.

3 ответов

короткий ответ, нет простого способа. Если вы часто используете маски, я бы рекомендовал создать свой собственный элемент управления с функцией маскировки. Использование класса MaskedTextProvider должно быть довольно простым.

см. Пример пользовательского TextBox с функциями маскирования:

пример маскированного текстового поля…

вы смотрели на xCeeD DataGrid Express для WPF. Это бесплатно и обеспечивает замаскированный элемент управления текстового поля, который будет очень просто делать то, что вы хотите.

xceed Datagrid Express edition для WPF больше не доступен.

Design-Time Enhancements

The Mask Editor allows you to quickly create and customize masks of any complexity at design time.

xpf-MaskWizard

Attached Properties

Property Type Description
CustomMask string Represents the custom mask that the user can create to add his own variable characters based on regex expression
Mask string Represents a mask/format for the textbox that the user must follow
PlaceHolder string Represents the mask place holder which represents the variable character that the user can edit in the textbox

XAML

The following code is from my MainWindow XAML:

<Windowx:Class=”WpfApplication6.MainWindow”xmlns:dc=”clr-namespace:WpfApplication6″xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″xmlns:local=”clr-namespace:WpfApplication6″mc:Ignorable=”d”Title=”MainWindow”Height=”350″Width=”525″> <Grid> <dc:MaskedTextBoxMask=”SSN”Height=”23″Width=”150″></dc:MaskedTextBox> </Grid></Window>

I’ve added only two lines:

xmlns:dc=”clr-namespace:WpfApplication6″

in the Window declaration and for our masked text box:

<Grid> <dc:MaskedTextBoxMask=”SSN”Height=”23″Width=”150″></dc:MaskedTextBox> </Grid>

Sample Code

TextBoxMask Sample Page. You can see this in action in the Windows Community Toolkit Sample App.

Conclusion

There is plenty of room to reduce, reuse, and refactor, but this should give you a jumping off point to experiment with your own mask types.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Extensions
NuGet package Microsoft.Toolkit.Uwp.UI

See Also

  • Common Features
  • MaskedNumericInput
  • MaskedCurrencyInput
  • MaskedTextInput
  • MaskedDateTimeInput
Рейтинг
( 1 оценка, среднее 5 из 5 )
Загрузка ...