パスワード ボックス

パスワード ボックスは、プライバシーの目的で入力文字が非表示になるテキスト入力ボックスです。 パスワード ボックスは、入力されたテキストの代わりに代替文字が表示される点を除けば、テキスト ボックスに似ています。 この代替文字は、構成できます。

既定では、ユーザーは表示ボタンを押すことによってパスワード ボックスでパスワードを表示できます。 表示ボタンを無効にしたり、別の方法でパスワードを表示できるようにしたりすることもできます (チェック ボックスなど)。

これは適切なコントロールですか?

PasswordBox コントロールを使用して、パスワードや、社会保障番号などのプライベート データを収集できます。

適切なテキスト コントロールの選択の詳細については、「テキスト コントロール」の記事をご覧ください。

推奨事項

• パスワード ボックスの目的がわかりにくい場合は、ラベルまたはプレース ホルダー テキストを使用します。 ラベルは、テキスト入力ボックスに値が存在するかどうかに関係なく表示されます。 プレースホルダー テキストはテキスト入力ボックスの内側に表示され、値を入力すると非表示になります。
• パスワード ボックスは、入力できる値の範囲に適した幅になるようにします。 単語の長さは言語によって異なるため、アプリを世界対応にする場合は、ローカライズを考慮に入れて幅を調整します。
• パスワード入力ボックスのすぐ横に、他のコントロールを配置しないようにします。 パスワード ボックスには、入力したパスワードをユーザーが確認するための、パスワード表示ボタンがあります。他のコントロールをすぐ横に配置すると、ユーザーが他のコントロールを操作しようとしたときに、誤ってパスワードが表示される可能性があります。 これを防ぐには、パスワード入力ボックスと他のコントロールの間には少し間隔をおくか、他のコントロールを次の行に配置します。
• アカウントの作成時は、新しいパスワードの入力用および新しいパスワードの確認用として、2 つのパスワード ボックスを提示することを検討します。
• ログイン時は 1 つのパスワード ボックスのみを表示します。
• 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 でソース コードを取得します。

PasswordBox の内容を取得または設定するには Password プロパティを使います。 PasswordChanged イベントのハンドラーでこの操作を実行すると、ユーザーがパスワードを入力している間に検証を実行できます。 ボタンの Click などの別のイベントを使って、ユーザーが入力を終えてから検証を実行することもできます。

パスワード ボックス コントロールの 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;
    }
}

このコードを実行し、ユーザーが「Password」と入力した場合に表示される結果を次に示します。

パスワード文字

パスワードを隠すために使う文字を変更するには、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 を用意して、ユーザーが PasswordRevealMode の Hidden と Visible を切り替えられるようにすることができます。 たとえば、次の例に示すように、パスワードを表示するかどうかをチェック ボックスで切り替えることができます。 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 プロパティ