Lösenordsruta

En lösenordsruta är en textinmatningsruta som döljer de tecken som skrivs in i den i sekretesssyfte. En lösenordsruta ser ut som en textruta, förutom att den återger platshållartecken i stället för texten som har angetts. Du kan konfigurera platshållartecknet.

Som standard är lösenordsrutan ett sätt för användaren att visa sitt lösenord genom att hålla ned en markeringsknapp. Du kan inaktivera knappen visa eller ange en alternativ mekanism för att visa lösenordet, till exempel en kryssruta.

Är det här rätt kontroll?

Använd en PasswordBox- kontroll för att samla in ett lösenord eller andra privata data, till exempel ett personnummer.

Mer information om hur du väljer rätt textkontroll finns i artikeln Textkontroller.

Rekommendationer

• Använd en etikett eller platshållartext om syftet med lösenordsrutan inte är klar. En etikett visas oavsett om textinmatningsrutan har ett värde eller inte. Platshållartext visas i textinmatningsrutan och försvinner när ett värde har angetts.
• Ge lösenordsrutan en lämplig bredd för det värdeintervall som kan anges. Ordlängden varierar mellan språk, så ta hänsyn till lokalisering om du vill att din app ska vara världsklar.
• Placera inte någon annan kontroll bredvid en inmatningsruta för lösenord. Lösenordsrutan har en knapp för att visa lösenord för användare för att verifiera de lösenord som de har skrivit, och om du har en annan kontroll bredvid den kan användarna oavsiktligt avslöja sina lösenord när de försöker interagera med den andra kontrollen. Om du vill förhindra att detta inträffar kan du placera ett visst avstånd mellan lösenordet i rutan och den andra kontrollen, eller placera den andra kontrollen på nästa rad.
• Överväg att presentera två lösenordsrutor för att skapa kontot: en för det nya lösenordet och en andra för att bekräfta det nya lösenordet.
• Visa endast en enda lösenordsruta för inloggningar.
• När en lösenordsruta används för att ange en PIN-kod bör du överväga att ge ett omedelbart svar så snart det sista numret har angetts i stället för att använda en bekräftelseknapp.

Exempel

Lösenordsfältet har flera tillstånd, inklusive dessa märkvärda.

En vilande lösenordsruta kan visa tipstext så att användaren vet dess syfte:

När användaren skriver i en lösenordsruta är standardbeteendet att visa punkter som döljer texten som anges:

Om du trycker på knappen "avslöja" till höger får du en titt på lösenordstexten som anges:

Skapa en lösenordsruta

WinUI 3 Gallery-appen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store- eller hämta källkoden på GitHub-

Använd egenskapen Password för att hämta eller ange innehållet i PasswordBox. Du kan göra detta i hanteraren för händelsen PasswordChanged för att utföra validering medan användaren anger lösenordet. Eller så kan du använda en annan händelse, till exempel en knapp Klicka, för att utföra verifieringen när användaren har slutfört textposten.

Här är XAML för en lösenordsrutekontroll som visar standardutseendet för PasswordBox. När användaren anger ett lösenord kontrollerar du om det är literalvärdet "Lösenord". I så fall visar du ett meddelande för användaren.

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

Här är resultatet när den här koden körs och användaren anger "Lösenord".

Lösenordstecken

Du kan ändra tecknet som används för att maskera lösenordet genom att ange egenskapen PasswordChar. Här ersätts standardkulan med ett pundtecken.

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

Resultatet ser ut så här.

Rubriker och platshållartext

Du kan använda egenskaperna Header och PlaceholderText för att ange kontext för PasswordBox. Detta är särskilt användbart när du har flera rutor, till exempel i ett formulär för att ändra ett lösenord.

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

Maxlängden

Ange det maximala antalet tecken som användaren kan ange genom att ange egenskapen MaxLength. Det finns ingen egenskap för att ange en minsta längd, men du kan kontrollera lösenordslängden och utföra andra verifieringar i din appkod.

Lösenordsvisningsläge

PasswordBox har en inbyggd knapp som användaren kan trycka på för att visa lösenordstexten. Här är resultatet av användarens åtgärd. När användaren släpper det döljs lösenordet automatiskt igen.

Förhandsgranskningsläge

Som standard visas knappen för att visa lösenord (eller "granska"-knappen). Användaren måste kontinuerligt trycka på knappen för att visa lösenordet, så att en hög säkerhetsnivå upprätthålls.

Värdet för egenskapen PasswordRevealMode är inte den enda faktor som avgör om en knapp för lösenordsavslöjning är synlig för användaren. Andra faktorer är om kontrollen visas över en minsta bredd, om PasswordBox har fokus och om textinmatningsfältet innehåller minst ett tecken. Lösenordsavslöjningsknappen visas bara när lösenordsfältet får fokus första gången och ett tecken anges. Om PasswordBox förlorar fokus och sedan återfår det, visas inte knappen för att visa igen, såvida inte lösenordet rensas och teckninmatningen börjar om.

Dolda och synliga lägen

Den andra PasswordRevealMode uppräkningsvärden, Dolda och Synliga, döljer knappen för avslöjande av lösenord och låter dig programmatiskt hantera om lösenordet är dolt.

Om du alltid vill dölja lösenordet anger du PasswordRevealMode till Dold. Om du inte behöver att lösenordet alltid ska döljas kan du ange ett anpassat användargränssnitt för att låta användaren växla PasswordRevealMode mellan Dolt och Synligt. Du kan till exempel använda en kryssruta för att växla om lösenordet är dolt, som du ser i följande exempel. Du kan också använda andra kontroller, till exempel ToggleButton, för att låta användaren växla lägen.

Det här exemplet visar hur du använder en CheckBox- för att låta en användare växla uppslöjningsläget för en Lösenordslåda.

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

Den här Lösenordslådan ser ut så här.

Välj rätt tangentbord för textkontrollen

För att hjälpa användarna att ange data med hjälp av pektangentbordet eller soft input panel (SIP) kan du ange textkontrollens indataomfång så att det matchar den typ av data som användaren förväntas ange. PasswordBox stöder endast Password och NumericPin indataomfångsvärden. Alla andra värden ignoreras.

Mer information om hur du använder indataområden finns i Använd indataområde för att ändra skärmtangentbordet.

UWP och WinUI 2

API:er för den här kontrollen finns i Windows.UI.Xaml.Controls namnområde.

Vi rekommenderar att du använder den senaste WinUI 2- för att få de senaste formaten och mallarna för alla kontroller. WinUI 2.2 eller senare innehåller en ny mall för den här kontrollen som använder rundade hörn. För mer information, se hörnradie.

Relaterade artiklar

Textkontroller

• Riktlinjer för stavningskontroll
• Lägga till sökning
• Riktlinjer för textinmatning
• TextBox-klass
• klass
• egenskapen String.Length