New to Telerik UI for WPF? Download free 30-day trial

Common

This article lists features that are common between the RadMaskedInput controls.

No-Mask Functionality

You can take advantage of the 'no-mask' functionality of the RadMaskedTextInput,RadMaskedNumericInput and the RadMaskedCurrenyInput controls by setting the Mask property to "" like so:

Example 1: Setting no-mask functionality

<telerik:RadMaskedTextInput  Mask=""/> 
<telerik:RadMaskedCurrencyInput  Mask=""/> 
<telerik:RadMaskedDateTimeInput  Mask=""/> 
<telerik:RadMaskedNumericInput Mask=""/> 

This feature creates RadMaskedInput controls that allow unlimited input. And as the Mask property is empty, the controls won't expect a certain number of characters and this is why they will automatically update to fit the user input.

The 'no-mask' functionality will remove the restrictions usually applied by the Mask property on the type and the number of input characters in each of the controls. Still you can set the FormatString property to control the input in the RadMaskedInput controls when they don't specify a Mask. For example you can use the Standard Numeric Format Strings and Custom Numeric Format Strings to control the input in the RadMaskedNumericInput and the RadMaskedCurrencyInput. This means that if you need to restrict the number of digits after the decimal point to 2 in a RadMaskedNumericInput, you can set its FormatString property to "n2":

<telerik:RadMaskedNumericInput Mask="" FormatString="n2"/>

Input Behavior

The RadMaskedInput controls allow you to specify the characters input behavior using the InputBehavior property. The property is an enumeration of type InputBehavior and exposes the following values:

  • Replace: Inputs characters on the right of the current caret position.

  • Insert: Inserts characters before the caret's current position for as long as there are empty positions to fill. When there are no empty positions to fill on left of the caret, then the characters are added on right of the caret.

You can change the InputBehavior using the Insert key. Also please keep in mind that the InputBehavior reflects the behavior of the Backspace and Delete keys

Text and TextMode properties

The RadMaskedInput controls expose a Text property that gets the value displayed in the control when it isn't focused. The value of this property depends on the TextMode enumeration, that exposed the following values:

  • MaskedText: When this mode is enabled the Text property value represents the formatted Value including the placeholder characters.

  • PlainText: When this mode is enabled the Text property value represents the formatted Value without the placeholder characters.

Example 2: Setting TextMode property in XAML

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> 
    <TextBlock Margin="10, 10, 10, 0"  
               FontWeight="Bold" 
               Text="TextMode: MaskedText" /> 
    <telerik:RadMaskedNumericInput Margin="10, 10, 10, 0"  
                                   Mask="#6.2" 
                                   TextMode="MaskedText" 
                                   Value="123" /> 
    <TextBlock Margin="10, 10, 10, 0"  
               FontWeight="Bold" 
               Text="TextMode: PlainText" /> 
    <telerik:RadMaskedNumericInput Margin="10, 10, 10, 0"  
                                   Mask="#6.2" 
                                   TextMode="PlainText" 
                                   Value="123" /> 
</StackPanel> 

WPF RadMaskedInput Different Text Modes

ValueToTextConverter

The RadMaskedInput controls allow you to set an IValueConverter to change the Text property depending on the Value. The following example will illustrate a sample implementation of the ValueToTextConverter property.

Let's start by defining an IValueConverter:

Example 3: Implementing IValueConverter interface

public class NumericValueToTextConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        if (value != null) 
        { 
            double doubleValue = 0d; 
            decimal decimalValue = 0m; 
            if (double.TryParse(value.ToString(), System.Globalization.NumberStyles.Number, culture, out doubleValue)) 
            { 
                return "Double Value: " + doubleValue.ToString("n4"); 
            } 
            else if (decimal.TryParse(value.ToString(), System.Globalization.NumberStyles.Any, culture, out decimalValue)) 
            { 
                return "Decimal Value: " + decimalValue.ToString("c4"); 
            } 
            else return value.ToString(); 
        } 
        else 
        { 
            return value; 
        } 
    } 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 
Public Class NumericValueToTextConverter 
    Implements IValueConverter 
    Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.Convert 
        If value IsNot Nothing Then 
            Dim doubleValue As Double = 0.0 
            Dim decimalValue As Decimal = 0D 
            If Double.TryParse(value.ToString(), System.Globalization.NumberStyles.Number, culture, doubleValue) Then 
                Return "Double Value: " & doubleValue.ToString("n4") 
            ElseIf Decimal.TryParse(value.ToString(), System.Globalization.NumberStyles.Any, culture, decimalValue) Then 
                Return "Decimal Value: " & decimalValue.ToString("c4") 
            Else 
                Return value.ToString() 
            End If 
        Else 
            Return value 
        End If 
    End Function 
    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack 
        Return value 
        'Throw New NotImplementedException() 
    End Function 
End Class 

Now we can define the NumericValueToTextConverter as a resource in our application and apply it to the RadMaskedNumericInput properties.

Example 5: Setting the IValueConverter to the ValueToTextConverter property in XAML

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> 
    <StackPanel.Resources> 
      <local:NumericValueToTextConverter x:Key="numericValueToTextConverter" />   
    </StackPanel.Resources> 
    <telerik:RadMaskedNumericInput Grid.Row="0"  
                                   Width="220" 
                                   Margin="10, 10, 10, 0" 
                                   IsClearButtonVisible="False" 
                                   TextMode="PlainText" 
                                   ValueToTextConverter="{StaticResource numericValueToTextConverter}" 
                                   Value="123.45" /> 
</StackPanel> 

WPF RadMaskedInput ValueToTextConverter

Add/Remove the ClearButton

The default Template of the RadMaskedInput controls defines a ClearButton that allows the user to clear the input. You can hide this button by setting the IsClearButtonVisible property to False.

Example 6: Setting the IsClearButtonVisible property

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> 
    <TextBlock FontWeight="Bold" Text="IsClearButtonVisible='True'" /> 
    <telerik:RadMaskedTextInput Margin="10"  
                                Mask="llll" 
                                Value="abcd" /> 
    <TextBlock FontWeight="Bold" Text="IsClearButtonVisible='False'" /> 
    <telerik:RadMaskedTextInput Margin="10"  
                                IsClearButtonVisible="False" 
                                Mask="llll" 
                                Value="abcd" /> 
</StackPanel> 

WPF RadMaskedInput Clear Button Hidden

IsLastPositionEditable

The IsLastPositionEditable property indicates whether the last position in the RadMaskedInput controls can be modified or not. If the property is set to True, the user will be able to edit the value in the last available position of the control. This is the default behavior of the RadMaskedInput controls. However, if you need to restrict the user from changing this value, you can set the IsLastPositionEditable property to False.

TextBoxStyle

The RadMaskedInput controls have a TextBoxStyle property which allows you to modify the style of the underlying text box element representing the input. The property is of type Style which targets PreviewInputTextBox.

Example 7: Setting TextBoxStyle

<telerik:RadMaskedTextInput> 
       <!-- This ResourceDictionary is not required if you use the NoXaml version of the Telerik dlls --> 
           <!-- It is used to access the MaskedInputTextBoxStyle resource used with the BasedOn setting --> 
           <!-- You can consider moving the ResourceDictionary to a parent element's Resources, like Window.Resources or UserControl.Resources  --> 
       <telerik:RadMaskedTextInput.Resources> 
        <!-- The .xaml file here will vary based on the used Telerik theme. For example, if you use Windows 11, the file should be GenericWindows11.xaml. For VisualStudio2019, GenericVisualStudio2019.xaml --> 
           <ResourceDictionary Source="/Telerik.Windows.Controls.Input;component/Themes/GenericOffice2019.xaml" /> 
       </telerik:RadMaskedTextInput.Resources> 
    <telerik:RadMaskedTextInput.TextBoxStyle> 
        <!-- The "maskedInput" namespace points to: --> 
            <!-- xmlns:maskedInput="clr-namespace:Telerik.Windows.Controls.MaskedInput;assembly=Telerik.Windows.Controls.Input" --> 
        <Style TargetType="maskedInput:PreviewInputTextBox" BasedOn="{StaticResource MaskedInputTextBoxStyle}"> 
            <Setter Property="TextWrapping" Value="Wrap" /> 
            <Setter Property="SelectionBrush" Value="Green" /> 
        </Style> 
    </telerik:RadMaskedTextInput.TextBoxStyle> 
</telerik:RadMaskedTextInput> 

See Also

In this article