Kennwortfeld

Ein Kennwortfeld ist ein Texteingabefeld, das die darin eingegebenen Zeichen für den Datenschutz verdeckt. Ein Kennwortfeld sieht wie ein Textfeld aus, mit der Ausnahme, dass es Platzhalterzeichen anstelle des eingegebenen Texts rendert. Sie können das Platzhalterzeichen konfigurieren.

Standardmäßig bietet das Kennwortfeld dem Benutzer die Möglichkeit, sein Kennwort anzuzeigen, indem er eine Schaltfläche zum Anzeigen gedrückt hält. Sie können die Schaltfläche zum Anzeigen deaktivieren oder einen alternativen Mechanismus zum Anzeigen des Kennworts bereitstellen, z. B. ein Kontrollkästchen.

Ist dies das richtige Steuerelement?

Verwenden Sie ein PasswordBox-Steuerelement, um Kennwörter oder andere private Daten wie Sozialversicherungsnummern zu erfassen.

Weitere Informationen zur Auswahl des passenden Textsteuerelements finden Sie im Artikel Textsteuerelemente.

Empfehlungen

• Verwenden Sie einen Beschriftungs- oder Platzhaltertext, wenn der Zweck des Kennwortfelds nicht eindeutig ist. Eine Beschriftung ist sichtbar, unabhängig davon, ob das Texteingabefeld über einen Wert verfügt. Platzhaltertext wird im Texteingabefeld angezeigt und wird erst ausgeblendet, wenn der Benutzer einen Wert eingibt.
• Weisen Sie dem Kennwortfeld eine entsprechende Breite für den Wertebereich zu, der eingegeben werden kann. Die Wortlänge variiert zwischen den einzelnen Sprachen. Sie sollten also die Lokalisierung berücksichtigen, wenn Ihre App global verwendet werden soll.
• Platzieren Sie kein anderes Steuerelement direkt neben einem Kennworteingabefeld. Das Kennwortfeld enthält eine Schaltfläche zum Anzeigen von Kennwörtern, über die Benutzer die eingegebenen Kennwörter überprüfen können, und ein anderes Steuerelement direkt daneben kann dazu führen, dass Benutzer versehentlich ihre Kennwörter anzeigen, wenn sie versuchen, mit dem anderen Steuerelement zu interagieren. Um dies zu verhindern, platzieren Sie einen Abstand zwischen dem Kennwort im Put-Feld und dem anderen Steuerelement, oder setzen Sie das andere Steuerelement in die nächste Zeile.
• Erwägen Sie die Darstellung von zwei Kennwortfeldern für die Kontoerstellung: eines für das neue Kennwort und eine Sekunde, um das neue Kennwort zu bestätigen.
• Zeigt nur ein einzelnes Kennwortfeld für Anmeldungen an.
• Wenn ein Kennwortfeld zum Eingeben einer PIN verwendet wird, sollten Sie eine sofortige Antwort bereitstellen, sobald die letzte Nummer eingegeben wird, anstatt eine Bestätigungsschaltfläche zu verwenden.

Beispiele

Das Kennwortfeld verfügt über mehrere Zustände, einschließlich dieser wichtigen.

Ein ruhendes Kennwortfeld kann Hinweistext anzeigen, damit der Benutzer seinen Zweck kennt:

Wenn der Benutzer ein Kennwortfeld eingibt, zeigt das Standardverhalten Aufzählungszeichen an, die den eingegebenen Text ausblenden:

Wenn Sie auf der rechten Seite die Schaltfläche "Einblenden" drücken, erhalten Sie einen Blick auf den eingegebenen Kennworttext:

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

• UWP-APIs: PasswordBox-Klasse, Kennworteigenschaft, PasswordChar-Eigenschaft, PasswordRevealMode-Eigenschaft, PasswordChanged-Ereignis
• Öffnen Sie die WinUI 2 Gallery-App, und sehen Sie passwordBox in Aktion. Die App WinUI 2 Gallery beinhaltet interaktive Beispiele für die meisten WinUI 2-Steuerelemente, -Features und -Funktionen. Rufen Sie die App aus dem Microsoft Store oder den Quellcode auf GitHub ab.

Wir empfehlen die Verwendung der neuesten WinUI 2 zum Abrufen der aktuellsten Stile und Vorlagen für alle Steuerelemente. WinUI 2.2 oder höher enthält eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Erstellen eines Kennwortfelds

• Wichtige APIs: PasswordBox-Klasse, Kennworteigenschaft, PasswordChar-Eigenschaft, PasswordRevealMode-Eigenschaft, PasswordChanged-Ereignis

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie passwordBox in Aktion.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Verwenden Sie die Password-Eigenschaft , um den Inhalt des PasswordBox-Steuerelements abzurufen oder festzulegen. Sie können dies im Handler für das PasswordChanged-Ereignis ausführen, um die Überprüfung durchzuführen, während der Benutzer das Kennwort eingibt. Sie können auch ein anderes Ereignis wie eine Klickschaltfläche verwenden, um die Überprüfung durchzuführen, nachdem der Benutzer den Texteintrag abgeschlossen hat.

Hier sehen Sie den XAML-Code für ein Kennwortfeld-Steuerelement, das das Standardmäßige Aussehen des PasswordBox-Steuerelements veranschaulicht. Wenn der Benutzer ein Kennwort eingibt, überprüfen Sie, ob es sich um den Literalwert "Password" handelt. Wenn dies der Vorgang ist, zeigen Sie dem Benutzer eine Meldung an.

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

Dies ist das Ergebnis, wenn dieser Code ausgeführt wird und der Benutzer "Kennwort" eingibt.

Kennwortzeichen

Sie können das Zum Maskieren des Kennworts verwendete Zeichen ändern, indem Sie die PasswordChar-Eigenschaft festlegen. Hier wird das Standardzeichen durch ein Nummernzeichen ersetzt.

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

Das Ergebnis sieht wie folgt aus.

Kopfzeilen und Platzhaltertext

Sie können die Header- und PlaceholderText-Eigenschaften verwenden, um den Kontext für das PasswordBox-Objekt bereitzustellen. Dies ist besonders hilfreich, wenn Sie mehrere Felder haben, z. B. auf einem Formular, um ein Kennwort zu ändern.

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

Maximale Länge

Geben Sie die maximale Anzahl von Zeichen an, die der Benutzer eingeben kann, indem Sie die MaxLength-Eigenschaft festlegen. Es gibt keine Eigenschaft, um eine Mindestlänge anzugeben, aber Sie können die Kennwortlänge überprüfen und eine andere Überprüfung in Ihrem App-Code durchführen.

Kennwortanzeigemodus

Das PasswordBox-Steuerelement verfügt über eine integrierte Schaltfläche, die der Benutzer drücken kann, um den Kennworttext anzuzeigen. Hier sehen Sie das Ergebnis der Aktion des Benutzers. Wenn der Benutzer es loslässt, wird das Kennwort automatisch wieder ausgeblendet.

Vorschaumodus

Standardmäßig wird die Schaltfläche zum Anzeigen des Kennworts (oder die Schaltfläche "Vorschau") angezeigt. Der Benutzer muss kontinuierlich auf die Schaltfläche drücken, um das Kennwort anzuzeigen, damit ein hohes Sicherheitsniveau beibehalten wird.

Der Wert der PasswordRevealMode-Eigenschaft ist nicht der einzige Faktor, der bestimmt, ob eine Schaltfläche zum Anzeigen eines Kennworts für den Benutzer sichtbar ist. Weitere Faktoren sind, ob das Steuerelement über einer Mindestbreite angezeigt wird, ob das PasswordBox-Steuerelement den Fokus hat und ob das Texteingabefeld mindestens ein Zeichen enthält. Die Schaltfläche zum Anzeigen des Kennworts wird nur angezeigt, wenn das PasswordBox-Steuerelement den Fokus zum ersten Mal erhält und ein Zeichen eingegeben wird. Wenn das PasswordBox-Steuerelement den Fokus verliert und dann wieder den Fokus erhält, wird die Schaltfläche zum Anzeigen erst wieder angezeigt, wenn das Kennwort gelöscht wird und der Zeicheneintrag beginnt.

Ausgeblendete und sichtbare Modi

Die anderen PasswordRevealMode-Enumerationswerte , "Hidden " und "Visible", blenden die Schaltfläche zum Anzeigen des Kennworts aus, und lassen Sie programmgesteuert verwalten, ob das Kennwort verdeckt wird.

Um das Kennwort immer zu verdecken, legen Sie PasswordRevealMode auf "Hidden" fest. Wenn Sie das Kennwort nicht immer verdeckt benötigen, können Sie eine benutzerdefinierte Benutzeroberfläche bereitstellen, damit der Benutzer das PasswordRevealMode zwischen Ausgeblendet und Sichtbar umschalten kann. Sie können z. B. ein Kontrollkästchen verwenden, um umzuschalten, ob das Kennwort verdeckt wird, wie im folgenden Beispiel gezeigt wird. Sie können auch andere Steuerelemente verwenden, z . B. ToggleButton, damit der Benutzer modi wechseln kann.

In diesem Beispiel wird gezeigt, wie Sie mithilfe eines CheckBox-Steuerelements den Anzeigemodus eines PasswordBox-Steuerelements wechseln können.

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

Dieses PasswordBox-Steuerelement sieht wie folgt aus.

Auswählen der richtigen Tastatur für Ihr Textsteuerelement

Um Benutzern die Eingabe von Daten mit der Bildschirmtastatur oder dem Soft Input Panel (SIP) zu erleichtern, können Sie den Eingabeumfang des Textsteuerelements an die Art der Daten anpassen, die der Benutzer vermutlich eingeben wird. PasswordBox unterstützt nur die Eingabebereichswerte "Password " und "NumericPin ". Alle anderen Daten werden ignoriert.

Weitere Informationen zur Verwendung von Eingabebereichen finden Sie unter Verwenden des Eingabebereichs zum Ändern der Bildschirmtastatur.

Beispielcode herunterladen

• Beispiel für Windows-UI-Bibliothek: Hier werden alle XAML-Steuerelemente in einem interaktiven Format dargestellt.

Verwandte Artikel

Textsteuerelemente

• Richtlinien für die Rechtschreibprüfung
• Hinzufügen von Suchfunktionen
• Richtlinien für die Texteingabe
• TextBox-Klasse
• class
• StringLength-Eigenschaft