パスワード ボックスPassword box

パスワード ボックスは、プライバシーの目的で入力文字が非表示になるテキスト入力ボックスです。A password box is a text input box that conceals the characters typed into it for the purpose of privacy. パスワード ボックスは、入力されたテキストの代わりに代替文字が表示される点を除けば、テキスト ボックスに似ています。A password box looks like a text box, except that it renders placeholder characters in place of the text that has been entered. この代替文字は、構成できます。You can configure the placeholder character.

既定では、ユーザーは表示ボタンを押すことによってパスワード ボックスでパスワードを表示できます。By default, the password box provides a way for the user to view their password by holding down a reveal button. 表示ボタンを無効にしたり、別の方法でパスワードを表示できるようにしたりすることもできます (チェック ボックスなど)。You can disable the reveal button, or provide an alternate mechanism to reveal the password, such as a check box.

Windows UI ライブラリを入手するGet the Windows UI Library

WinUI ロゴ

Windows UI ライブラリ 2.2 以降には、丸めた角を使用するこのコントロールの新しいテンプレートが含まれます。Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. 詳しくは、「角の半径」をご覧ください。For more info, see Corner radius. WinUI は、Windows アプリの新しいコントロールと UI 機能が含まれる NuGet パッケージです。WinUI is a NuGet package that contains new controls and UI features for Windows apps. インストール手順などについて詳しくは、「Windows UI Library (Windows UI ライブラリ)」をご覧ください。For more info, including installation instructions, see Windows UI Library.

プラットフォーム API: PasswordBox クラスPassword プロパティPasswordChar プロパティPasswordRevealMode プロパティPasswordChanged イベントPlatform APIs: PasswordBox class, Password property, PasswordChar property, PasswordRevealMode property, PasswordChanged event

これは適切なコントロールですか?Is this the right control?

PasswordBox コントロールを使用して、パスワードや、社会保障番号などのプライベート データを収集できます。Use a PasswordBox control to collect a password or other private data, such as a Social Security number.

適切なテキスト コントロールの選択の詳細については、「テキスト コントロール」の記事をご覧ください。For more info about choosing the right text control, see the Text controls article.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、PasswordBox の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the PasswordBox in action.

パスワード ボックスには、次のようにいくつかの状態があります。The password box has several states, including these notable ones.

待機状態のパスワード ボックスでは、目的がユーザーにわかるように、ヒントのテキストを表示できます。A password box at rest can show hint text so that the user knows its purpose:

ヒントのテキストが表示された、待機状態のパスワード ボックス

ユーザーがパスワード ボックスに入力すると、既定の動作では、入力中のテキストを隠す記号が表示されます。When the user types in a password box, the default behavior is to show bullets that hide the text being entered:

テキスト入力中でフォーカス状態のパスワード ボックス

右側にある "表示" ボタンを押すと、入力中のパスワード テキストを一時的に表示できます。Pressing the "reveal" button on the right gives a peek at the password text being entered:

テキストが一時的に表示されたパスワード ボックス

パスワード ボックスの作成Create a password box

PasswordBox の内容を取得または設定するには Password プロパティを使います。Use the Password property to get or set the contents of the PasswordBox. PasswordChanged イベントのハンドラーでこの操作を実行すると、ユーザーがパスワードを入力している間に検証を実行できます。You can do this in the handler for the PasswordChanged event to perform validation while the user enters the password. ボタンの Click などの別のイベントを使って、ユーザーが入力を終えてから検証を実行することもできます。Or, you can use another event, like a button Click, to perform validation after the user completes the text entry.

パスワード ボックス コントロールの XAML を次に示します。PasswordBox の既定の外観を確認してください。Here's the XAML for a password box control that demonstrates the default look of the PasswordBox. ユーザーがパスワードを入力すると、リテラル値の "Password" であるかどうかが調べられます。When the user enters a password, you check to see if it's the literal value, "Password". 一致する場合、メッセージがユーザーに表示されます。If it is, you display a message to the user.

<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;
    }
}

このコードを実行し、ユーザーが「Password」と入力した場合に表示される結果を次に示します。Here's the result when this code runs and the user enters "Password".

検証メッセージを表示するパスワード ボックス

パスワード文字Password character

パスワードを隠すために使う文字を変更するには、PasswordChar プロパティを設定します。You can change the character used to mask the password by setting the PasswordChar property. ここでは、既定の記号をアスタリスクに置き換えています。Here, the default bullet is replaced with an asterisk.

<PasswordBox x:Name="passwordBox" Width="200" PasswordChar="*"/>

結果は次のようになります。The result looks like this.

カスタムの文字が使われているパスワード ボックス

ヘッダーとプレースホルダー テキストHeaders and placeholder text

Header プロパティと PlaceholderText プロパティを使って PasswordBox のコンテキストを提示することができます。You can use the Header and PlaceholderText properties to provide context for the PasswordBox. パスワードを変更するためのフォームなど、複数のボックスがある場合に特に便利です。This is especially useful when you have multiple boxes, such as on a form to change a password.

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

ヒントのテキストが表示された、待機状態のパスワード ボックス

最大長Maximum length

ユーザーが入力できる文字の最大数を指定するには、MaxLength プロパティを設定します。Specify the maximum number of characters that the user can enter by setting the MaxLength property. 長さの最小値を指定するプロパティはありませんが、アプリのコードでパスワードの長さをチェックしたりその他の検証を実行したりできます。There is no property to specify a minimum length, but you can check the password length, and perform any other validation, in your app code.

パスワード表示モードPassword reveal mode

PasswordBox には、ユーザーが押すとパスワード テキストを表示できるボタンが組み込まれています。The PasswordBox has a built-in button that the user can press to display the password text. ユーザーがこのボタンを操作した結果を次に示します。Here's the result of the user's action. ユーザーがボタンを離すと、パスワードは自動的に非表示になります。When the user releases it, the password is automatically hidden again.

テキストが一時的に表示されたパスワード ボックス

プレビュー モードPeek mode

既定で表示されるパスワード表示ボタン ("プレビュー" ボタン) では、By default, the password reveal button (or "peek" button) is shown. ユーザーがパスワードを表示するにはボタンを押し続けなければならないため、高レベルのセキュリティが維持されます。The user must continuously press the button to view the password, so that a high level of security is maintained.

PasswordRevealMode プロパティの値は、ユーザーにパスワード表示ボタンが表示されるかどうかを決定する唯一の要因ではありません。The value of the PasswordRevealMode property is not the only factor that determines whether a password reveal button is visible to the user. その他の要因には、コントロールの表示幅が最小幅を上回っているか、PasswordBox にフォーカスがあるか、テキスト入力フィールドに文字が含まれているか、などがあります。Other factors include whether the control is displayed above a minimum width, whether the PasswordBox has focus, and whether the text entry field contains at least one character. パスワード表示ボタンが表示されるのは、PasswordBox が初めてフォーカスを受け取り、文字が入力されたときだけです。The password reveal button is shown only when the PasswordBox receives focus for the first time and a character is entered. いったん PasswordBox からフォーカスが移動すると、その後にフォーカスが戻っても、パスワードをクリアして入力し直さない限り、パスワード表示ボタンは表示されません。If the PasswordBox loses focus and then regains focus, the reveal button is not shown again unless the password is cleared and character entry starts over.

注意:   Windows 10 より前のバージョンでは、パスワード表示ボタンは既定で表示されませんでした。Caution  Prior to Windows 10, the password reveal button was not shown by default. アプリのセキュリティにより、パスワードを必ず非表示にする必要がある場合は、PasswordRevealMode を Hidden に設定してください。If the security of your app requires that the password is always obscured, be sure to set PasswordRevealMode to Hidden.

非表示モードと表示モードHidden and Visible modes

PasswordRevealMode には、そのほかに HiddenVisible という列挙値があります。これらの列挙値を使うと、パスワード表示ボタンを非表示にして、パスワードを非表示にするかどうかをプログラムで管理できます。The other PasswordRevealMode enumeration values, Hidden and Visible, hide the password reveal button and let you programmatically manage whether the password is obscured.

パスワードを常に非表示にするには、PasswordRevealMode を Hidden に設定します。To always obscure the password, set PasswordRevealMode to Hidden. パスワードを常に非表示にする必要がある場合以外は、カスタム UI を用意して、ユーザーが PasswordRevealMode の Hidden と Visible を切り替えられるようにすることができます。Unless you need the password to be always obscured, you can provide a custom UI to let the user toggle the PasswordRevealMode between Hidden and Visible. たとえば、次の例に示すように、パスワードを表示するかどうかをチェック ボックスで切り替えることができます。For example, you can use a check box to toggle whether the password is obscured, as shown in the following example. ToggleButton などのその他のコントロールを使ってユーザーがモードを切り替えられるようにすることもできます。You can also use other controls, like ToggleButton, to let the user switch modes.

次の例は、CheckBox を使ってユーザーが PasswordBox の表示モードを切り替えられるようにする方法を示しています。This example shows how to use a CheckBox to let a user switch the reveal mode of a 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 は次のように表示されます。This PasswordBox looks like this.

カスタムの表示ボタンが使われているパスワード ボックス

テキスト コントロールに適切なキーボードの選択Choose the right keyboard for your text control

ユーザーがタッチ キーボード、つまりソフト入力パネル (SIP) でデータを入力できるように、ユーザーが入力すると予想されるデータの種類に合わせてテキスト コントロールの入力値の種類を設定できます。To help users to enter data using the touch keyboard, or Soft Input Panel (SIP), you can set the input scope of the text control to match the kind of data the user is expected to enter. PasswordBox でサポートされている入力値の種類は PasswordNumericPin だけです。PasswordBox supports only the Password and NumericPin input scope values. それ以外の値はすべて無視されます。Any other value is ignored.

入力値の種類の使い方について詳しくは、「入力値の種類を使ったタッチ キーボードの変更」をご覧ください。For more info about how to use input scopes, see Use input scope to change the touch keyboard.

推奨事項Recommendations

  • パスワード ボックスの目的がわかりにくい場合は、ラベルまたはプレース ホルダー テキストを使用します。Use a label or placeholder text if the purpose of the password box isn't clear. ラベルは、テキスト入力ボックスに値が存在するかどうかに関係なく表示されます。A label is visible whether or not the text input box has a value. プレースホルダー テキストはテキスト入力ボックスの内側に表示され、値を入力すると非表示になります。Placeholder text is displayed inside the text input box and disappears once a value has been entered.
  • パスワード ボックスは、入力できる値の範囲に適した幅になるようにします。Give the password box an appropriate width for the range of values that can be entered. 単語の長さは言語によって異なるため、アプリを世界対応にする場合は、ローカライズを考慮に入れて幅を調整します。Word length varies between languages, so take localization into account if you want your app to be world-ready.
  • パスワード入力ボックスのすぐ横に、他のコントロールを配置しないようにします。Don't put another control right next to a password input box. パスワード ボックスには、入力したパスワードをユーザーが確認するための、パスワード表示ボタンがあります。他のコントロールをすぐ横に配置すると、ユーザーが他のコントロールを操作しようとしたときに、誤ってパスワードが表示される可能性があります。The password box has a password reveal button for users to verify the passwords they have typed, and having another control right next to it might make users accidentally reveal their passwords when they try to interact with the other control. これを防ぐには、パスワード入力ボックスと他のコントロールの間には少し間隔をおくか、他のコントロールを次の行に配置します。To prevent this from happening, put some spacing between the password in put box and the other control, or put the other control on the next line.
  • アカウントの作成時は、新しいパスワードの入力用および新しいパスワードの確認用として、2 つのパスワード ボックスを提示することを検討します。Consider presenting two password boxes for account creation: one for the new password, and a second to confirm the new password.
  • ログイン時は 1 つのパスワード ボックスのみを表示します。Only show a single password box for logins.
  • PIN の入力にパスワード ボックスを使う場合は、確認ボタンを使う代わりに、最後の数値が入力されたらすぐに応答を返すことを検討します。When a password box is used to enter a PIN, consider providing an instant response as soon as the last number is entered instead of using a confirmation button.

サンプル コードの入手Get the sample code

テキスト コントロールText controls