MaskedTextBox

Represents a control that limits the input text to the format determined by the specified mask.

Note: This version of MaskedTextBox replaces the toolkit's original control, providing a much more complete API. The original control is still available in the Xceed.Wpf.Toolkit.Obselete namespace; see MaskedTextBox (obsolete version).

<sample:DemoView x:Class="Samples.Modules.Text.Views.MaskedTextBoxView"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:sample="clr-namespace:Samples.Infrastructure.Controls;assembly=Samples.Infrastructure"
                 xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
                 xmlns:osb="clr-namespace:Xceed.Wpf.Toolkit.Obselete;assembly=WPFToolkit.Extended"
                 xmlns:s="clr-namespace:System;assembly=mscorlib"
                 Title="MaskedTextBox"
                 Description="The MaskedTextBox control lets you display and edit values based on a mask.">
   <Grid>

      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <GroupBox Header="Features" Grid.Row="0" Margin="5">
         <StackPanel Margin="5">
            <Grid>
               <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>

               <TextBlock Text="Include literals:" VerticalAlignment="Center" Margin="2" />
               <CheckBox x:Name="_literals" Grid.Column="1" VerticalAlignment="Center" Margin="5" 
                         IsChecked="{Binding IncludeLiteralsInValue, ElementName=_maskedTextBox, 

Mode=TwoWay}"/>

               <TextBlock Text="Include prompt:" Grid.Row="1" VerticalAlignment="Center" Margin="2" />
               <CheckBox x:Name="_prompt" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="5" 
                         IsChecked="{Binding IncludePromptInValue, ElementName=_maskedTextBox, Mode=TwoWay}"/>
            </Grid>
            <Grid Margin="0,5,0,0">
               <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>

               <TextBlock Text="Mask:" VerticalAlignment="Center" Margin="2" />
               <TextBox x:Name="_mask" Grid.Column="1" VerticalAlignment="Center" Margin="5" 
                        Text="{Binding Mask, ElementName=_maskedTextBox, ValidatesOnExceptions=True}" />

               <TextBlock Text="Value:" Grid.Row="1" VerticalAlignment="Center" Margin="2" />
               <TextBox x:Name="_value" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="5"
                        Text="{Binding Value, ElementName=_maskedTextBox, ValidatesOnExceptions=True}"  />

               <TextBlock Text="Text:" Grid.Row="2" VerticalAlignment="Center" Margin="2" />
               <TextBox x:Name="_text" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" Margin="5" 
                        Text="{Binding Text, ElementName=_maskedTextBox, ValidatesOnExceptions=True}"/>
            </Grid>
         </StackPanel>
      </GroupBox>

      <StackPanel Grid.Row="1" Margin="10">
         <xctk:MaskedTextBox x:Name="_maskedTextBox"
                             Mask="(000) 000-0000"
                             ValueDataType="{x:Type s:String}" />

      </StackPanel>
   </Grid>
</sample:DemoView>


Get 50+ awesome WPF controls in the Plus Edition.
---

Last edited May 9, 2013 at 8:48 PM by Kosmatos, version 19

Comments

nathandcole Mar 7, 2013 at 1:52 PM 
I am using the MaskedTextBox to bind to a string representation of a TimeSpan (i.e. 00:01:00.0) I am binding to the string via a TwoWay binding on the Value property. I have set IncludeLiterals to true and I've set my Mask to "00:00:00.0". The source seems to be updated when I edit from the MaskedTextBox, but the MaskedTextBox is not being updated when the underlying property is changed. INotifyPropertyChanged has been implemented.

BoucherS Feb 4, 2013 at 12:06 PM 
The possible masks are shown in the link of "see MaskedTextBox (obsolete version)." at top of this page.

Vaccano Feb 1, 2013 at 4:57 PM 
It would be nice if there was more functionality with the decimal placeholder. For example, if my Mask is ##0.0 and (after tabbing to the control) I type in "1." It would recognize that the first two values are optional, so it is ok to move the 1 next to the decimal and allow entry to continue.

Vaccano Feb 1, 2013 at 4:22 PM 
What is the Mask possibilities? From the example 0 means digit. What else is there? Is there documentation or this somewhere?

Kiransakpal Nov 27, 2012 at 10:37 AM 
We fixed it by using behavior.

Kiransakpal Nov 27, 2012 at 8:31 AM 
Hi,
I am using a Masked Textbox which comes with extended toolkit.

This textbox as seen in the figure has ‘(’ as the starting text and three underscores thereafter. I want to set the caret index of the textbox to index 1. I have used MVVM for application development, due to which I am facing some issue and currently not able to set the cursor inside bracket.

Kiransakpal Nov 27, 2012 at 8:29 AM 
Hi,

I am using a Masked Textbox which comes with extended toolkit.My textbox is a phone number field like (___) ________,Currently my caret index on load is before bracket and i want it after bracket.This textbox as seen in the figure has ‘(’ as the starting text and three underscores thereafter. I want to set the caret index of the textbox to index 1. I have used MVVM for application development, due to which I am facing some issue and currently not able to set the cursor inside bracket.

Thanks in Advance

JeroenNL Nov 27, 2012 at 7:14 AM 
It might be a good idea to show an example of binding to the Value property of the MaskedTextBox itself.

mhostez Aug 14, 2012 at 9:14 PM 
How can i verificate if the text is blank?

partizan_lv Jun 26, 2012 at 1:02 PM 
is it possible to bind Mask somehow?