密碼方塊

密碼方塊是一個文字輸入方塊，會為了隱私權而隱藏輸入的字元。 密碼方塊看起來就像文本框，不同之處在於它會轉譯佔位符字元來取代已輸入的文字。 您可以設定佔位元字元。

根據預設，密碼方塊提供一種方式，讓使用者按住顯色按鈕來檢視其密碼。 您可以停用顯色按鈕，或提供替代機制來顯示密碼，例如複選框。

這是正確的控制項嗎？

使用 PasswordBox 控制項，以收集密碼或其他私人資料，例如身分證字號。

如需如何選擇正確文字控制項的詳細資訊，請參閱文字控制項文章。

建議

• 如果密碼方塊的目的不清楚，請使用標籤或佔位元文字。 無論文字輸入方塊是否包含值，都會顯示標籤。 預留位置文字會顯示在文字輸入方塊內，只要輸入值就會消失。
• 為密碼方塊提供可輸入之值範圍的適當寬度。 每個語言的單字長度都不相同，所以如果您希望您的應用程式能夠全球化，請考慮到當地語系化。
• 請勿將另一個控件放在密碼輸入方塊旁邊。 密碼方塊有一個密碼顯示按鈕，可讓使用者確認他們輸入的密碼，並在旁邊有另一個控件可能會讓用戶在嘗試與其他控件互動時不小心顯示其密碼。 若要防止這種情況發生，請將密碼放在放置方塊與其他控件之間，或將另一個控件放在下一行。
• 請考慮提供兩個密碼方塊來建立帳戶：一個用於新密碼，另一個用於確認新密碼。
• 只顯示登入的單一密碼方塊。
• 當密碼方塊用來輸入 PIN 時，請考慮在輸入最後一個數位而不是使用確認按鈕時立即提供回應。

範例

密碼方塊有數種狀態，包括這些值得注意的狀態。

待用密碼方塊可以顯示提示文字，讓使用者知道其用途：

當使用者在密碼方塊中輸入時，預設行為是顯示隱藏所輸入文字的項目符號：

按下右側的 [顯色] 按鈕，即可查看輸入的密碼文字：

UWP 和 WinUI 2

重要

本文中的資訊和範例已針對使用 Windows 應用程式 SDK 和 WinUI 3 的應用程式進行優化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平臺特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控件所需的資訊。

此控件的 API 存在於 Windows.UI.Xaml.Controls 命名空間中。

• UWP API：PasswordBox 類別、Password 屬性、PasswordChar 屬性、PasswordRevealMode 屬性、PasswordChanged 事件
• 開啟 WinUI 2 資源庫應用程式，並查看 PasswordBox 運作情形。 WinUI 2 資源庫應用程式包含大部分 WinUI 2 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 Github 上取得原始程式碼。

我們建議使用最新的 WinUI 2 來取得所有控制件的最新樣式和範本。 WinUI 2.2 或更新版本包含使用此圓角之控件的新範本。 如需詳細資訊，請參閱圓角半徑。

建立密碼方塊

• 重要 API：PasswordBox 類別、Password 屬性、PasswordChar 屬性、PasswordRevealMode 屬性、PasswordChanged 事件

開啟 WinUI 3 資源庫應用程式，並查看 PasswordBox 運作情形。

WinUI 3 資源 庫 應用程式包含大部分 WinUI 3 控制件、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上 取得原始程式碼

使用 Password 屬性來取得或設定 PasswordBox 的內容。 您可以在 PasswordChanged 事件的處理程式中執行此動作，以在使用者輸入密碼時執行驗證。 或者，您可以使用另一個事件，例如按下按鈕，在使用者完成文字項目之後執行驗證。

以下是密碼方塊控件的 XAML，示範 PasswordBox 的預設外觀。 當使用者輸入密碼時，您會檢查其是否為常值 「Password」。 如果是，您會向使用者顯示訊息。

<StackPanel>  
  <PasswordBox x:Name="passwordBox" Width="200" MaxLength="16"
             PasswordChanged="passwordBox_PasswordChanged"/>

  <TextBlock x:Name="statusText" Margin="10" HorizontalAlignment="Center" />
</StackPanel>   

private void passwordBox_PasswordChanged(object sender, RoutedEventArgs e)
{
    if (passwordBox.Password == "Password")
    {
        statusText.Text = "'Password' is not allowed as a password.";
    }
    else
    {
        statusText.Text = string.Empty;
    }
}

以下是此程式代碼執行且使用者輸入「密碼」時的結果。

密碼字元

您可以藉由設定 PasswordChar 屬性來變更用來遮罩密碼的字元。 在這裡，預設項目符號會以磅號取代。

<PasswordBox x:Name="passwordBox" Width="300" PasswordChar="#"/>

結果看起來像這樣。

標頭和佔位元文字

您可以使用 Header 和 PlaceholderText 屬性來提供 PasswordBox 的內容。 當您有多個方塊時，這特別有用，例如在窗體上變更密碼。

<PasswordBox x:Name="passwordBox" Width="200" Header="Password" PlaceholderText="Enter your password"/>

最大長度

藉由設定 MaxLength 屬性，指定使用者可以輸入的最大字元數。 沒有屬性可指定最小長度，但您可以在應用程式程式代碼中檢查密碼長度，並執行任何其他驗證。

密碼顯示模式

PasswordBox 有一個內建按鈕，使用者可以按下來顯示密碼文字。 以下是用戶動作的結果。 當使用者放開密碼時，密碼會自動再次隱藏。

查看模式

根據預設，會顯示 [密碼顯示] 按鈕（或 [查看] 按鈕。 使用者必須持續按下按鈕來檢視密碼，才能維護高階的安全性。

PasswordRevealMode 屬性的值並不是決定使用者是否可以看到密碼顯示按鈕的唯一因素。 其他因素包括控件是否以最小寬度顯示、PasswordBox 是否具有焦點，以及文字輸入字段是否包含至少一個字元。 只有在 PasswordBox 第一次收到焦點且輸入字元時，才會顯示密碼顯示按鈕。 如果 PasswordBox 失去焦點，然後重新取得焦點，除非清除密碼且字元項目開始，否則不會再次顯示顯色按鈕。

隱藏和可見模式

其他 PasswordRevealMode 列舉值 Hidden 和 Visible，隱藏密碼顯示按鈕，並可讓您以程式設計方式管理密碼是否遮蔽。

若要一律遮蔽密碼，請將PasswordRevealMode 設定為 Hidden。 除非您需要一律遮蔽密碼，否則您可以提供自定義UI，讓使用者在Hidden和Visible之間切換PasswordRevealMode。 例如，您可以使用核取方塊來切換是否遮蔽密碼，如下列範例所示。 您也可以使用其他控制件，例如 ToggleButton，讓使用者切換模式。

此範例示範如何使用 CheckBox 讓使用者切換 PasswordBox 的顯色模式。

<StackPanel Width="200">
    <PasswordBox Name="passwordBox1"
                 PasswordRevealMode="Hidden"/>
    <CheckBox Name="revealModeCheckBox" Content="Show password"
              IsChecked="False"
              Checked="CheckBox_Changed" Unchecked="CheckBox_Changed"/>
</StackPanel>

private void CheckBox_Changed(object sender, RoutedEventArgs e)
{
    if (revealModeCheckBox.IsChecked == true)
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Visible;
    }
    else
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Hidden;
    }
}

此 PasswordBox 看起來像這樣。

選擇文字控制項的正確鍵盤

為協助使用者使用觸控式鍵盤或螢幕輸入面板 (SIP) 輸入資料，您可以設定文字控制項的輸入範圍，使其符合使用者要輸入的資料類型。 PasswordBox 僅 支援 Password 和 NumericPin 輸入範圍值。 忽略任何其他值。

如需如何使用輸入範圍的詳細資訊，請參閱 使用輸入範圍來變更觸控式鍵盤。

取得範例程式碼

• WinUI 資源庫範例 - 查看互動式格式的所有 XAML 控制件。

相關文章

文字控制項

• 拼字檢查指導方針
• 新增搜尋
• 文字輸入的指導方針
• TextBox 類別 \(英文\)
• class
• String.Length 屬性 \(部分機器翻譯\)