65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Telerik Silverlight RadControls 的掩码文本框

<b>Kunal Chowdhury «IN»</b>
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.69/5 (8投票s)

2011年2月22日

CPOL

6分钟阅读

viewsIcon

55332

在本文中，我将介绍 Masked TextBox 控件的所有 API 以及使用它来掩码输入的各种方法。希望这能帮助您深入理解该控件。

引言

这是我探索 Telerik RadControls for Silverlight 的第三天。今天，我探索了 Telerik 的 Masked TextBox 控件。它是一个很棒的控件，提供了多种使用选项。

在本文中，我将介绍 Masked TextBox 控件的所有 API 以及使用它来掩码输入的各种方法。希望这能帮助您深入理解该控件。一如既往，欢迎您提出宝贵的意见和建议，以改进我的文章内容。

背景

几天前，我开始探索 Telerik RadControls for Silverlight。我发现 Telerik 控件在默认 Silverlight 控件之上支持许多控件和 API。

您可以在此处找到之前的文章

  1. 第一天：使用 Telerik Silverlight RadControls
  2. 第二天：使用 Telerik Silverlight RadControls 的 BusyIndicator
  3. 第三天：使用 Telerik Silverlight RadControls 的 Masked TextBox

在本文中，我们将探索 Masked TextBox 控件。那么，您还在等什么？让我们开始讨论吧。

设置项目

希望您已经安装了 Telerik RadControls for Silverlight 库。如果没有，请从 Telerik 网站下载试用版。详情请参阅系列文章的第一部分。一旦您的开发环境准备就绪，让我们开始创建基础项目。

打开 Visual Studio 2010 并打开“新建项目”对话框。在右侧的“已安装模板”面板中选择“Visual C#”。我只熟悉 C#，因此选择它。从右侧面板中，选择“RadControls Silverlight Application”，如下图所示。

image

为项目命名并在位置设置工作目录。点击“确定”继续。这将打开另一个对话框，如下图所示。

image

只需点击“确定”。这将为您的 Silverlight 应用程序创建 Web 托管项目。通常，在屏幕上点击“确定”后，它会为您创建 Silverlight 项目。但对于 Telerik 控件项目，您需要通过另一个屏幕，在那里您可以选择要包含的库程序集。请看下面的截图。

image

在本系列文章的这一部分，由于我们要使用 Masked TextBox 控件，请选择名为“Telerik.Windows.Controls.Input”的 Telerik 程序集。选择此项后，它将自动为您选择另一个共享程序集“Telerik.Windows.Controls”，如下图所示。

image

点击“完成”进入下一阶段创建项目。IDE 现在将为您生成所有页面，并在屏幕上打开默认的“MainPage.xaml”。

关于库的更多信息

在开始讨论其他部分之前，让我们先来了解一下 Telerik 提供的库和 Masked TextBox 控件。项目创建完成后，如果您转到 Silverlight 项目的“引用”部分，您将看到“Telerik.Windows.Controls”和“Telerik.Windows.Controls.Input” DLL 引用在该部分。

image

现在，在 Visual Studio IDE 中，打开“工具箱”面板并搜索“RadMaskedTextBox”。您会在那里找到该控件，如上图所示。

现在让我们来讨论一下这个控件。一旦我们熟悉了控件的内部机制，我们就可以更容易地用它开发一个示例应用程序。

控件 API 如下

namespace Telerik.Windows.Controls
{
    [TemplateVisualState(Name = "Empty", GroupName = "EmptyStates")]
    [TemplateVisualState(Name = "NonEmpty", GroupName = "EmptyStates")]
    public class RadMaskedTextBox : Control
    {
        public static readonly Telerik.Windows.RoutedEvent ValueChangedEvent;
        public static readonly Telerik.Windows.RoutedEvent ValueChangingEvent;
        public static readonly DependencyProperty CultureProperty;
        public static readonly DependencyProperty AutoCompleteIntervalProperty;
        public static readonly DependencyProperty SelectionOnFocusProperty;
        public static readonly DependencyProperty MaskProperty;
        public static readonly DependencyProperty MaskTypeProperty;
        public static readonly DependencyProperty UpdateValueEventProperty;
        public static readonly DependencyProperty PlaceholderProperty;
        public static readonly DependencyProperty IsSpinEnabledProperty;
        public static readonly DependencyProperty ValueProperty;
        public static readonly DependencyProperty EmptyContentTemplateProperty;
        public static readonly DependencyProperty EmptyContentProperty;
        public static readonly DependencyProperty IsEmptyProperty;
        public static readonly DependencyProperty IsFocusedProperty;
        public static readonly DependencyProperty IsReadOnlyProperty;
        public static readonly DependencyProperty TextAlignmentProperty;
        public static readonly DependencyProperty MaskedTextProperty;
        public static readonly DependencyProperty MaxLengthProperty;
        public RadMaskedTextBox();
        public bool IsSpinEnabled { get; set; }
        public CultureInfo Culture { get; set; }
 
        [Obsolete("This property was not used and will be removed.", true)]
        public int AutoCompleteInterval { get; set; }
 
        public bool IsReadOnly { get; set; }
 
        [Obsolete("Please use HorizontalContentAlignment property.", false)]
        public TextAlignment TextAlignment { get; set; }
 
        public string Mask { get; set; }
        public MaskType MaskType { get; set; }
 
        [TypeConverter(typeof (CharConverter))]
        public char Placeholder { get; set; }
 
        [SuppressMessage("Microsoft.Naming", 
            "CA1721:PropertyNamesShouldNotMatchGetMethods")]
        public object Value { get; set; }
 
        public string MaskedText { get; set; }
        public int MaxLength { get; set; }
        public SelectionOnFocus SelectionOnFocus { get; set; }
 
        [Category("Behavior")]
        [DefaultValue(false)]
        [Description("Gets the bool indicating whether the control is focused or not. 
                      This is a dependency property.")]
        public bool IsFocused { get; internal set; }
 
        public int SelectionLength { get; set; }
        public int SelectionStart { get; set; }
        public object EmptyContent { get; set; }
        public DataTemplate EmptyContentTemplate { get; set; }
        public bool IsEmpty { get; set; }
        public UpdateValueEvent UpdateValueEvent { get; set; }
        public bool CallSpin(bool isUp);
        public override void OnApplyTemplate();
        protected override void OnGotFocus(RoutedEventArgs e);
        protected override void OnLostFocus(RoutedEventArgs e);
        protected override void OnMouseEnter(MouseEventArgs e);
        protected override void OnMouseLeave(MouseEventArgs e);
 
        [Description("Occurs when the value is changed.")]
        [Category("Behavior")]
        public event EventHandler<RadRoutedEventArgs> ValueChanged;
 
        [Category("Behavior")]
        [Description("Occurs before the value is changed.")]
        public event EventHandler<RadMaskedTextBoxValueChangingEventArgs> ValueChanging;
    }
}

您会注意到它有两种状态：“Empty”和“NonEmpty”。当用户没有输入文本时，它会在文本框中显示掩码。您也可以选择不同的文本。我们稍后会尝试一下。

它有一个名为“MaskType”的属性，它是一个枚举，包含三个值：“None”、“DateTime”、“Numeric”和“Standard”。

public enum MaskType { None, DateTime, Numeric, Standard }

其余的属性和方法都易于理解。因此，我们可以跳过这一部分，开始实际实现。

玩转 XAML

让我们开始玩转 XAML。我假设您熟悉 XAML 代码。如果不熟悉，请详细遵循下面的代码。如果您熟悉 VS IDE 或 Blend 中的设计视图，也可以选择它。

假设您熟悉 XAML 代码，让我们为 Telerik 控件添加 xmlns 命名空间。在您的 XAML 页面中包含命名空间 http://schemas.telerik.com/2008/xaml/presentation，如下所示。

image

添加后，效果如下：

image

好的，现在我们可以将控件添加到页面中了。让我们将 Grid 分割成一行两列，并将一个 RadMaskedTextBox 控件放置在其中一个单元格中。效果如下：

<UserControl x:Class="Day3RadMaskedTextBoxDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Width="500" Margin="100">
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Rad Masked TextBox (default):" 
        Grid.Row="0" Grid.Column="0"/>
        <telerik:RadMaskedTextBox Width="200" 
        Height="26" Grid.Row="0" Grid.Column="1"/>
    </Grid>
</UserControl>

默认的 Masked TextBox 控件仅限于 4 个字符。如果您现在运行应用程序，您将能够看到实时版本，但只能输入 4 个字符。因此，让我们将默认布局 Grid 分割成更多行和列。然后，我们将把更多的 RadMaskedTextBox 放置在页面上，并与 Grid 控件的行和列正确对齐。

这是我的示例代码：

<UserControl x:Class="Day3RadMaskedTextBoxDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Width="500" Margin="100">
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Masked TextBox (default):" 
        Grid.Row="0" Grid.Column="0"/>
        <telerik:RadMaskedTextBox Width="200" 
        Height="26" Grid.Row="0" Grid.Column="1"/>
 
        <TextBlock Text="Masked TextBox (IP):" 
        Grid.Row="1" Grid.Column="0"/>
        <telerik:RadMaskedTextBox Width="200" Height="26" 
        Grid.Row="1" Grid.Column="1"
                                  Mask="###.###.###.###"/>
        
        <TextBlock Text="Masked TextBox (Date):" 
        Grid.Row="2" Grid.Column="0"/>
        <telerik:RadMaskedTextBox Width="200" 
        Height="26" Grid.Row="2" Grid.Column="1"
                                  Mask="##-##-####"/>
 
        <TextBlock Text="Masked TextBox (Masked Text):" 
        Grid.Row="3" Grid.Column="0"/>
        <telerik:RadMaskedTextBox Width="200" 
        Height="26" Grid.Row="3" Grid.Column="1"
                                  Mask="##/##/####" MaskedText="Enter your DOB"/>
    </Grid>
</UserControl>

您会看到添加的第一个控件是默认控件。现在您可以设置各种属性。在第二个控件中，我们为 IP 地址添加了掩码。通常，IP 地址可以包含由句点（.）分隔的数字，每个部分最多包含 3 位数字。例如，192.168.028.001 是一个有效的 IP 地址。

同样，第三个和第四个 Masked TextBox 控件接受 Date 作为输入。您可以使用掩码来选择如何显示文本。您还可以根据需要选择许多其他属性。

演示

完成编码部分后，让我们构建并运行示例项目。这将为您阐明一切。运行应用程序后，您将在浏览器窗口中看到以下 UI。第一个文本框是默认的，您只能输入 4 个字符。第二个将接受 IP 地址。第三个和第四个文本框将以 2 种不同格式接受 Date。

image

让我为每个文本框控件输入一些文本。在这里，您可以看到 Masked TextBox 控件的行为。

image

现在让我们做一些更多的自定义。有时，您可能希望在下划线 (_) 处添加一条消息。可以这样做吗？是的，您可以设置名为“EmptyContent”的属性，它会为您处理。

为此做一个示例代码，代码如下：

<TextBlock Text="Masked TextBox (Empty Content):" 
Grid.Row="4" Grid.Column="0"/>
<telerik:RadMaskedTextBox Width="200" Height="26" 
Grid.Row="4" Grid.Column="1"
Mask="##/##/####" EmptyContent="Enter your DOB"/>

如果您现在运行它，您将看到以下行为：

image

第一个文本框显示了应用程序运行时具有“EmptyContent”属性（设置为一些文本）的默认行为。一旦您点击该框，您将看到掩码值，如第二个文本框控件所示。

结束语

希望您喜欢阅读本文。这将让您对如何使用 Telerik Rad Masked TextBox 控件有一个基本的了解。我真的很喜欢这个控件，因为 Silverlight 中没有这样的默认控件。您可能会在应用程序的某些场景中发现它很有用，如果您早知道它，就可以更容易地集成。

请继续阅读我的其他文章，也别忘了在底部留言分享您的喜爱。在 Twitter 上关注我：@kunal2383 和 @SilverlightZone，以随时了解我的最新推文。祝您一切顺利……

© . All rights reserved.