MaskedBehavior

项目
04/03/2024

MaskedBehavior 是一种 Behavior，允许用户为数据输入定义输入掩码。将此行为添加到 InputView（例如 Entry）控件将强制用户仅输入与给定掩码匹配的值。其用法示例包括输入信用卡号或电话号码。

重要

.NET MAUI 社区工具包行为不会设置行为的 BindingContext，因为行为可以通过样式共享，并应用于多个控件。有关详细信息，请参阅 .NET MAUI 行为

语法

以下示例演示如何将 MaskedBehavior 添加到 Entry，以帮助用户输入 16 位信用卡号。

XAML

包括 XAML 命名空间

若要在 XAML 中使用工具包，需要将以下 xmlns 添加到页面或视图中：

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

因此，以下内容：

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

将被修改为包括 xmlns，如下所示：

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

使用 MaskedBehavior

MaskedBehavior 可以在 XAML 中按如下所示方式使用：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.MaskedBehaviorPage">

    <Entry Keyboard="Numeric">
        <Entry.Behaviors>
            <toolkit:MaskedBehavior Mask="XXXX XXXX XXXX XXXX" />
        </Entry.Behaviors>
    </Entry>

</ContentPage>

C#

MaskedBehavior 可在 C# 中按如下所示方式使用：


class MaskedBehaviorPage : ContentPage
{
    public MaskedBehaviorPage()
    {
        var entry = new Entry
        {
            Keyboard = Keyboard.Numeric
        };

        var behavior = new MaskedBehavior
        {
            Mask = "XXXX XXXX XXXX XXXX"
        };

        entry.Behaviors.Add(behavior);

        Content = entry;
    }
}

C# 标记

我们的 CommunityToolkit.Maui.Markup 包提供一种更简洁的方式来在 C# 中使用此 Behavior。

using CommunityToolkit.Maui.Markup;

class MaskedBehaviorPage : ContentPage
{
    public MaskedBehaviorPage()
    {
        Content = new Entry
        {
            Keyboard = Keyboard.Numeric
        }.Behaviors(new MaskedBehavior
        {
            Mask = "XXXX XXXX XXXX XXXX"
        });
    }
}

以下屏幕截图显示 Android 上生成的 MaskedBehavior： Android 上的 MaskedBehavior 的屏幕截图

自定义提示字符

可以在 Mask 属性中重写将对用户可见的字符。可以通过设置 UnmaskedCharacter 属性（默认为 'X'）来更改此项。因此，例如，如果需要在 16 位信用卡条目中每 4 位数字之间显示 X，则可以使用以下方法：

<Entry Keyboard="Numeric">
    <Entry.Behaviors>
        <toolkit:MaskedBehavior Mask="0000X0000X0000X0000" UnmaskedCharacter="0" />
    </Entry.Behaviors>
</Entry>

未遮罩的字符

属性

属性	类型	描述
`Mask`	`string`	输入值需要匹配的掩码。
`UnmaskedCharacter`	`char`	定义 `Mask` 属性中哪些字符将可见并由用户输入。

示例

可以在 .NET MAUI 社区工具包示例应用程序中查找此行为的示例。

API

可以在 .NET MAUI 社区工具包 GitHub 存储库查看MaskedBehavior 的源代码

通过