Cuadro de contraseña

  • Artículo

Un cuadro de contraseña es un cuadro de entrada de texto que oculta los caracteres escritos para asegurar la privacidad. Un cuadro de contraseña parece un cuadro de texto, salvo en que representa caracteres de marcador de posición en vez del texto que se ha escrito. Puedes configurar el carácter de marcador de posición.

Cuadro de contraseña con el foco y texto escribiéndose

De manera predeterminada, el cuadro de contraseña proporciona un método para que el usuario pueda ver su contraseña si mantiene presionado el botón Mostrar. Puedes deshabilitar el botón Mostrar, o proporcionar un mecanismo alternativo para mostrar la contraseña como, por ejemplo, una casilla.

¿Es este el control adecuado?

Usa un control PasswordBox para recopilar la contraseña u otros datos privados, como el número de la Seguridad Social.

Para obtener más información sobre cómo elegir el control de texto correcto, consulta el artículo Controles de texto.

Recomendaciones

  • Usa una etiqueta o un texto de marcador de posición si el propósito del cuadro de contraseña no está claro. Una etiqueta es visible, tenga o no un valor el cuadro de entrada de texto. El texto de marcador de posición se muestra dentro del cuadro de entrada y desaparece una vez que se ha escrito un valor.
  • Dota al cuadro de contraseña de un ancho apropiado para los valores que se pueden escribir. La longitud de las palabras varía según el lenguaje, así que tenlo en cuenta si quieres que tu aplicación sea internacional.
  • No pongas otro control justo al lado de un cuadro de entrada de contraseñas. El cuadro de contraseña tiene un botón Mostrar para que el usuario pueda comprobar las contraseñas escritas. Si sitúas al lado otro control, podrías provocar que las contraseñas se muestren de forma accidental al intentar interactuar con él. Para evitar que esto suceda, deja un poco de espacio entre el cuadro de entrada de contraseña y el otro control, o pon el otro control en la siguiente línea.
  • También puedes tener en cuenta la posibilidad de presentar dos cuadros de contraseña para la creación de cuentas: uno para la nueva contraseña y otro para confirmarla.
  • Muestra un cuadro de contraseña único para los inicios de sesión.
  • Cuando se usa un cuadro de contraseña para escribir un PIN, tienes la posibilidad de proporcionar una respuesta instantánea tan pronto como se escriba el último número, en lugar de tener que usar un botón de confirmación.

Ejemplos

El cuadro de contraseña tiene varios estados, incluidos estos tan importantes.

Un cuadro de contraseña en reposo puede mostrar un texto de sugerencia para que el usuario conozca su propósito:

Cuadro de contraseña en reposo con texto de sugerencia

Cuando el usuario escribe en un cuadro de contraseña, el comportamiento predeterminado es mostrar viñetas que oculten el texto que se escribe:

Cuadro de contraseña con el foco y texto escribiéndose

Si se presiona el botón "Mostrar" de la derecha, se puede ver el texto de la contraseña que se está escribiendo:

Texto del cuadro de contraseña revelado

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Las API de este control existen en el espacio de nombres Windows.UI.Xaml.Controls .

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos y plantillas más actuales para todos los controles. WinUI 2.2 o posterior incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Crear un cuadro de contraseña.

Abra la aplicación Galería de WinUI 3 y vea PasswordBox en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

Usa la propiedad Password para obtener o establecer el contenido de la clase PasswordBox. Puedes hacerlo en el controlador del evento PasswordChanged y así realizar la validación mientras el usuario escribe la contraseña. Igualmente, también puedes usar otro evento, como un botón de clase Click, para realizar la validación después de que el usuario termine de escribir.

Este es el lenguaje XAML de un control de cuadro de contraseña que muestra el aspecto predeterminado de PasswordBox. Cuando el usuario escribe una contraseña, debes comprobar si es el valor literal, "Password". Si lo es, entonces le muestras un mensaje al usuario.

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

Esto es lo que se obtiene cuando se ejecuta este código y el usuario escribe "Password" (Contraseña).

Cuadro de contraseña con un mensaje de validación

Carácter de contraseña

Para cambiar el carácter que se usa para enmascarar la contraseña, puedes establecer la propiedad PasswordChar. Aquí, la viñeta predeterminada se reemplaza por un signo de libra.

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

El resultado tiene el siguiente aspecto.

Cuadro de contraseña con un carácter personalizado

Encabezados y texto del marcador de posición

Puedes usar las propiedades Header y PlaceholderText para proporcionar el contexto de PasswordBox. Esto es especialmente útil si tienes varios cuadros, como sucede en un formulario para cambiar una contraseña.

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

Cuadro de contraseña en reposo con texto de sugerencia

Longitud máxima

Puedes especificar el número máximo de caracteres que el usuario puede escribir mediante la propiedad MaxLength. No hay ninguna propiedad para especificar una longitud mínima, pero puedes comprobar la longitud de la contraseña y realizar cualquier otra validación en el código de la aplicación.

Modo de revelación de contraseña

La clase PasswordBox tiene un botón integrado que el usuario puede presionar para visualizar el texto de la contraseña. Esto es lo que se obtiene una vez el usuario decide presionar el botón. Cuando lo suelta, la contraseña vuelve a ocultarse automáticamente.

Texto del cuadro de contraseña revelado

Modo de información

De manera predeterminada, se muestra el botón Mostrar (o botón "ojear"). El usuario debe presionar continuamente el botón para ver la contraseña, de modo que se mantiene un alto nivel de seguridad.

El valor de la propiedad PasswordRevealMode no es el único factor que determina si un botón para mostrar la contraseña debe ser visible para el usuario. Otros factores aclaran si el control debe mostrarse sobre un ancho mínimo, si PasswordBox debe tener el foco y si el campo de entrada de texto debe contener al menos un carácter. El botón para mostrar la contraseña solo se muestra cuando PasswordBox recibe el foco por primera vez y se escribe un carácter. Si PasswordBox pierde el foco y luego lo recupera, no se vuelve a visualizar el botón Mostrar, a menos que la contraseña se borre y se vuelva a escribir.

Modos Oculta y Visible

Otros valores de enumeración de la propiedad PasswordRevealMode, como Oculta y Visible, ocultan el botón para mostrar la contraseña y te permiten decidir mediante programación si la contraseña debe permanecer oculta.

Para ocultar siempre la contraseña, debes establecer la propiedad PasswordRevealMode en Oculta. A menos que necesites que la contraseña siempre esté oculta, puedes proporcionar una interfaz de usuario personalizada para permitir que el usuario cambie la propiedad PasswordRevealMode entre las opciones Oculta y Visible. Por ejemplo, puede usar una casilla para alternar si la contraseña está oculta, tal y como se muestra en el ejemplo siguiente. Asimismo, también puedes usar otros controles, como ToggleButton, para permitir al usuario cambiar de modo.

Este ejemplo muestra cómo usar una clase CheckBox para permitir al usuario cambiar el modo de mostrar la contraseña en una clase 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;
    }
}

Esta clase PasswordBox tiene el aspecto siguiente.

Cuadro de contraseña con un botón Mostrar personalizado.

Elección del teclado adecuado para el control de texto

Para ayudar a los usuarios a escribir datos con el teclado táctil o con el panel de entrada de software (SIP), puedes establecer el ámbito de entrada del control de texto para que coincida con el tipo de datos que se espera que escriba el usuario. PasswordBox solo es compatible con los valores de ámbito de entrada Password y NumericPin. Se ignorará cualquier otro valor.

Para obtener más información sobre cómo usar los ámbitos de entrada, consulta Usar el ámbito de entrada para cambiar el teclado táctil.

Obtención del código de ejemplo

Controles de texto