Delen via

Wachtwoordvak

Een wachtwoordvak is een tekstvak dat de ingevoerde tekens verborgen houdt voor privacy. Een wachtwoordvak ziet eruit als een tekstvak, behalve dat er tijdelijke aanduidingen worden weergegeven in plaats van de tekst die is ingevoerd. U kunt het plaatsaanduidingsteken configureren.

Tekst voor het typen van de status van het wachtwoordvak

Standaard biedt het wachtwoordvak een manier voor de gebruiker om zijn of haar wachtwoord te bekijken door een knop voor onthullen ingedrukt te houden. U kunt de knop Weergeven uitschakelen of een alternatief mechanisme opgeven om het wachtwoord weer te geven, zoals een selectievakje.

Is dit de juiste controle?

Gebruik een PasswordBox besturingselement voor het verzamelen van een wachtwoord of andere persoonlijke gegevens, zoals een burgerservicenummer.

Zie het artikel Tekstbesturingselementen voor meer informatie over het kiezen van het juiste tekstbesturingselement.

Aanbevelingen

  • Gebruik een label of tijdelijke aanduiding als het doel van het wachtwoordvak niet duidelijk is. Een label is zichtbaar of het invoervak wel of niet een waarde heeft. Tekst van tijdelijke aanduiding wordt weergegeven in het invoervak en verdwijnt zodra een waarde is ingevoerd.
  • Geef het wachtwoordvak een geschikte breedte voor het bereik van waarden dat kan worden ingevoerd. De lengte van Word verschilt per taal, dus houd rekening met lokalisatie als u wilt dat uw app wereldklaar is.
  • Plaats geen ander controle-element naast een invoervak voor wachtwoorden. Het wachtwoordvak bevat een knop om wachtwoorden weer te geven, zodat gebruikers de wachtwoorden die ze hebben getypt kunnen verifiëren. Door een ander besturingselement naast deze knop te plaatsen, kunnen gebruikers per ongeluk hun wachtwoorden onthullen wanneer ze proberen gebruik te maken van het andere besturingselement. Als u dit wilt voorkomen, plaatst u een afstand tussen het wachtwoord in het vak Put en het andere besturingselement of plaatst u het andere besturingselement op de volgende regel.
  • Overweeg twee wachtwoordvakken te presenteren voor het maken van accounts: een voor het nieuwe wachtwoord en een tweede om het nieuwe wachtwoord te bevestigen.
  • Alleen één wachtwoordvak weergeven voor aanmeldingen.
  • Wanneer een wachtwoordvak wordt gebruikt om een pincode in te voeren, kunt u een direct antwoord opgeven zodra het laatste nummer is ingevoerd in plaats van een bevestigingsknop te gebruiken.

Voorbeelden

Het wachtwoordvak heeft verschillende statussen, waaronder deze belangrijke.

Een wachtwoordvak in rust kan hinttekst weergeven, zodat de gebruiker het doel ervan kent:

Wachtwoordvak in ruststatus met hinttekst

Wanneer de gebruiker in een wachtwoordvak typt, is het standaardgedrag om bolletjes weer te geven die de tekst verbergen die wordt ingevoerd.

Tekst voor het typen van de status van het wachtwoordvak

Als u op de knop 'onthullen' aan de rechterkant drukt, krijgt u een kijkje in de wachtwoordtekst die wordt ingevoerd:

De tekst van het wachtwoordvak is zichtbaar

Een wachtwoordvak maken

Open de App WinUI 3 Gallery en zie PasswordBox in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Gebruik de eigenschap Wachtwoord om de inhoud van het Wachtwoordvak op te halen of in te stellen. U kunt dit doen in de handler voor de gebeurtenis PasswordChanged om validatie uit te voeren terwijl de gebruiker het wachtwoord invoert. U kunt ook een andere gebeurtenis, zoals een knop Klikken, gebruiken om de validatie uit te voeren nadat de gebruiker de tekstinvoer heeft voltooid.

Hier volgt de XAML voor een wachtwoordveldcontrol die het standaard uiterlijk van het wachtwoordveld laat zien. Wanneer de gebruiker een wachtwoord invoert, controleert u of dit de letterlijke waarde 'Wachtwoord' is. Als dat het is, geeft u een bericht weer aan de gebruiker.

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

Dit is het resultaat wanneer deze code wordt uitgevoerd en de gebruiker 'Wachtwoord' invoert.

Wachtwoordvak met een validatiebericht

Wachtwoordteken

U kunt het teken wijzigen dat wordt gebruikt om het wachtwoord te maskeren door de eigenschap PasswordChar in te stellen. Hier wordt het standaard opsommingsteken vervangen door een hekje.

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

Het resultaat ziet er als volgt uit.

Wachtwoordvak met een aangepast teken

Kopteksten en tijdelijke aanduidingen

U kunt de eigenschappen Header en PlaceholderText gebruiken om context te bieden voor het PasswordBox. Dit is vooral handig wanneer u meerdere vakken hebt, zoals in een formulier om een wachtwoord te wijzigen.

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

Wachtwoordvak in ruststatus met hinttekst

Maximumlengte

Geef het maximum aantal tekens op dat de gebruiker kan invoeren door de eigenschap MaxLength in te stellen. Er is geen eigenschap om een minimale lengte op te geven, maar u kunt de wachtwoordlengte controleren en andere validaties uitvoeren in uw app-code.

Modus voor het onthullen van wachtwoorden

De PasswordBox heeft een ingebouwde knop waarop de gebruiker kan drukken om de wachtwoordtekst weer te geven. Dit is het resultaat van de actie van de gebruiker. Wanneer de gebruiker het loslaat, wordt het wachtwoord automatisch opnieuw verborgen.

De tekst van het wachtwoordvak is zichtbaar

Kijkmodus

Standaard wordt de knop Voor het weergeven van wachtwoorden (of de knop 'peek') weergegeven. De gebruiker moet continu op de knop drukken om het wachtwoord weer te geven, zodat een hoog beveiligingsniveau behouden blijft.

De waarde van de eigenschap PasswordRevealMode is niet de enige factor die bepaalt of een knop voor het weergeven van wachtwoorden zichtbaar is voor de gebruiker. Andere factoren zijn onder andere of het besturingselement boven een minimale breedte wordt weergegeven, of het wachtwoordvak de focus heeft en of het tekstinvoerveld ten minste één teken bevat. De knop Voor het weergeven van wachtwoorden wordt alleen weergegeven wanneer het wachtwoordvak de focus voor de eerste keer ontvangt en er een teken wordt ingevoerd. Als het wachtwoordvak de focus verliest en vervolgens weer de focus krijgt, wordt de knop onthullen niet opnieuw weergegeven, tenzij het wachtwoord is gewist en het tekeninvoer opnieuw begint.

Verborgen en zichtbare modussen

De andere opsommingswaarden voor PasswordRevealMode , Verborgen en Zichtbaar, verbergen de knop voor het weergeven van wachtwoorden en u kunt programmatisch beheren of het wachtwoord wordt verborgen.

Als u het wachtwoord altijd wilt verbergen, stelt u PasswordRevealMode in op Verborgen. Tenzij u het wachtwoord altijd wilt verbergen, kunt u een aangepaste gebruikersinterface opgeven om de gebruiker passwordRevealMode te laten in-/uitschakelen tussen Verborgen en Zichtbaar. U kunt bijvoorbeeld een selectievakje gebruiken om te schakelen of het wachtwoord wordt verborgen, zoals wordt weergegeven in het volgende voorbeeld. U kunt ook andere besturingselementen, zoals ToggleButton, gebruiken om de gebruikersmodi te laten schakelen.

In dit voorbeeld ziet u hoe u een selectievakje kunt gebruiken om een gebruiker de weergavemodus van een Wachtwoordvak te laten wijzigen.

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

Dit wachtwoordvak ziet er als volgt uit.

Wachtwoordvak met een aangepaste knop weergeven

Het juiste toetsenbord kiezen voor uw tekstbesturing

Om gebruikers te helpen bij het invoeren van gegevens via het schermtoetsenbord of SIP (Soft Input Panel), kunt u het invoerbereik van het tekstbeheer instellen op basis van het soort gegevens dat de gebruiker moet invoeren. PasswordBox ondersteunt alleen de waarden voor het invoerbereik Password en NumericPin. Elke andere waarde wordt genegeerd.

Zie Invoerbereik gebruiken om het schermtoetsenbord te wijzigen voor meer informatie over het gebruik van invoerbereiken.

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.

Besturingselementen voor tekst

  • Last updated on