MaskedBehavior

發行項
04/02/2024

MaskedBehavior是 Behavior ，可讓使用者定義數據輸入的輸入遮罩。將此行為新增至 InputView （例如， Entry）控制項會強制使用者只輸入符合指定遮罩的輸入值。其使用方式的範例包括信用卡號碼或電話號碼的輸入。

重要

.NET MAUI 社群工具組行為不會設定 BindingContext 行為，因為行為可以透過樣式共用並套用至多個控件。如需詳細資訊，請參閱 .NET MAUI 行為

語法

下列範例示範如何在輸入16位數信用卡號碼時，將新增 MaskedBehavior 至 Entry ，以協助使用者。

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'的屬性來變更。因此，例如，如果需要 X 在16位數信用卡專案的每個4位數群組之間顯示，可以使用下列專案：

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

未遮罩的字元

屬性

屬性	類型	描述
`Mask`	`string`	輸入值必須相符的遮罩。
`UnmaskedCharacter`	`char`	定義使用者將可見並輸入的屬性中的 `Mask` 哪一個字元。

範例

您可以在 .NET MAUI Community Toolkit 範例應用程式中找到此行為的範例。

API

您可以在 .NET MAUI Community Toolkit GitHub 存放庫上找到的MaskedBehavior原始程式碼。

共用方式為