Controles de texto

Los controles de texto constan de cuadros de entrada de texto, cuadros de contraseña, cuadros de sugerencias automáticas y bloques de texto. El marco XAML proporciona varios controles para representar, escribir y editar texto, y un conjunto de propiedades para dar formato al texto.

API importantes: Clase TextBlock, Clase RichTextBlock, Clase TextBox, Clase RichEditBox, Clase AutoSuggestBox, Clase PasswordBox

¿Es este el control adecuado?

El control de texto que use depende de su escenario. Usa esta información para seleccionar el control de texto correcto que se usará en tu aplicación.

Representación de texto de solo lectura

Usa un TextBlock para mostrar la mayoría del texto de solo lectura en la aplicación. Puede usarlo para mostrar texto de una sola línea o de varias líneas, hipervínculos en línea y texto con formato como negrita, cursiva o subrayado.

TextBlock suele ser más fácil de usar y proporciona un mejor rendimiento de representación de texto que RichTextBlock, por lo que es preferible para la mayoría del texto de la interfaz de usuario de la aplicación. Puedes acceder y usar fácilmente texto desde un TextBlock en tu aplicación obteniendo el valor de la propiedad Text .

También proporciona muchas de las mismas opciones de formato para personalizar cómo se representa el texto. Aunque puedes incluir saltos de línea en el texto, TextBlock está diseñado para mostrar un único párrafo y no admite la sangría del texto.

Use un RichTextBlock cuando necesite compatibilidad con varios párrafos, texto de varias columnas u otros diseños de texto complejos o elementos de interfaz de usuario insertados como imágenes. RichTextBlock proporciona varias características para el diseño de texto avanzado.

La propiedad content de RichTextBlock es la propiedad Blocks , que admite texto basado en párrafos a través del elemento Paragraph . No tiene una propiedad Text que puedes usar para acceder fácilmente al contenido de texto del control en la aplicación.

Entrada de texto

Usa un control TextBox para permitir al usuario escribir y editar texto sin formato, como en un formulario. Puedes usar la propiedad Text para obtener el texto y establecerlo en un control TextBox.

Puedes hacer que un control TextBox sea de solo lectura, pero este debe ser un estado temporal y condicional. Si el texto nunca se puede editar, piensa en la posibilidad de usar un TextBlock en su lugar.

Usa un control PasswordBox para recopilar la contraseña u otros datos privados, como el número de la Seguridad Social. Un cuadro de contraseña es un cuadro de entrada de texto que oculta los caracteres que se escriben en él por motivos de privacidad. Un cuadro de contraseña parece un cuadro de entrada de texto, salvo que muestra viñetas en vez del texto que se ha escrito. El carácter de viñeta se puede personalizar.

Use un control AutoSuggestBox para mostrar al usuario una lista de sugerencias entre las que elegir a medida que escriben. Un cuadro de sugerencias automáticas es un cuadro de entrada de texto que desencadena una lista de sugerencias de búsqueda básicas. Los términos sugeridos pueden extraerse de una combinación de términos de búsqueda populares y términos históricos especificados por el usuario.

También debe usar un control AutoSuggestBox para implementar un cuadro de búsqueda.

Use un RichEditBox para mostrar y editar archivos de texto. No usas un RichEditBox para obtener la entrada del usuario en la aplicación de la manera en que usas otros cuadros de entrada de texto estándar. En su lugar, se usa para trabajar con archivos de texto independientes de la aplicación. Normalmente, se guarda el texto escrito en un RichEditBox en un archivo .rtf.

¿La entrada de texto es la mejor opción?

Hay muchas maneras de obtener la entrada del usuario en la aplicación. Estas preguntas le ayudarán a responder si uno de los cuadros de entrada de texto estándar u otro control es la mejor opción para obtener la entrada del usuario.

  • ¿Resulta práctico enumerar eficientemente todos los valores válidos? Si es así, considere la posibilidad de usar uno de los controles de selección, como una casilla, una lista desplegable, un cuadro de lista, un botón de radio, un control deslizante, un modificador de alternancia, un selector de fecha o un selector de hora.
  • ¿Existe un conjunto reducido de valores válidos? Si es así, considere una lista desplegable o un cuadro de lista, especialmente si los valores tienen más de unos pocos caracteres.
  • ¿Los datos válidos no tienen absolutamente ninguna restricción? ¿O están los datos válidos restringidos solo por el formato (restricción de longitud o tipos de caracteres)? Si es así, use un control de entrada de texto. Puedes limitar el número de caracteres que se pueden escribir y puedes validar el formato en el código de la aplicación.
  • ¿Representa el valor un tipo de datos que tiene un control común especializado? Si es así, use el control adecuado en lugar de un control de entrada de texto. Por ejemplo, usa un DatePicker en lugar de un control de entrada de texto para aceptar una entrada de fecha.
  • Si los datos son estrictamente numéricos:
    • ¿El valor introducido es aproximado y/o relativo a otra cantidad mostrada en la misma página? Si es así, use un control deslizante.
    • ¿Sería bueno que el usuario recibiera una respuesta instantánea del efecto de los cambios en la configuración? Si es así, use un control deslizante, posiblemente con un control complementario.
    • ¿Es probable que el valor introducido se ajuste tras observar el resultado (como, por ejemplo, el volumen o el brillo de pantalla)? Si es así, use un control deslizante.

Ejemplos

WinUI 2 Gallery
WinUI Gallery

Si tiene instalada la aplicación WinUI 2 Gallery , haga clic aquí para abrir la aplicación y ver los controles de texto en acción.

Text box

Cuadro de texto

Cuadro de sugerencias automáticas

Ejemplo del control de sugerencias automáticas expandida

Cuadro de contraseña

Estado de enfoque del cuadro de contraseña escribiendo texto

Crear un control de texto

Consulta estos artículos para obtener información y ejemplos específicos de cada control de texto.

Directrices de fuente y estilo

Consulte estos artículos para obtener instrucciones de fuentes:

Entrada manuscrita

Se aplica a: TextBox, RichEditBox, AutoSuggestBox

A partir de Windows 10, versión 1803, los cuadros de entrada de texto XAML cuentan con soporte incrustado de entrada manuscrita con Windows Ink. Cuando un usuario pulsa en un cuadro de entrada de texto con un lápiz de Windows, el cuadro de texto se transforma para permitir al usuario escribir directamente en él con un lápiz, en lugar de abrir un panel de entrada independiente.

El cuadro de texto se amplía cuando se pulsa con el lápiz

Para obtener más información, consulta Entrada de texto con la vista de escritura a mano.

Elección del teclado adecuado para el control de texto

Se aplica a: TextBox, PasswordBox RichEditBox

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.

Sugerencia Esta información solo se aplica al SIP. No se aplica a los teclados de hardware ni al teclado en pantalla disponible en las opciones de accesibilidad de Windows.

El teclado táctil se puede usar para escribir texto cuando la aplicación se ejecuta en un dispositivo con pantalla táctil. El teclado táctil se invoca cuando el usuario pulsa un campo de entrada editable, como TextBox o RichEditBox. Para que los usuarios puedan escribir datos en la aplicación de forma mucho más rápida y sencilla, establezca el ámbito de entrada del control de texto para que coincida con el tipo de datos que espera que introduzca el usuario. El ámbito de entrada proporciona una sugerencia al sistema sobre el tipo de entrada de texto que espera el control para que el sistema pueda proporcionar un diseño de táctil especializado para el tipo de entrada.

Por ejemplo, si un cuadro de texto se usa únicamente para escribir un PIN de 4 dígitos, establece la propiedad InputScope en Number. Esto indica al sistema que debe mostrar el diseño de teclado numérico, lo cual facilita al usuario la entrada del PIN.

Importante
El ámbito de entrada no implica que se realice ninguna validación de entrada ni evita que el usuario realice cualquier entrada a través de un teclado de hardware u otro dispositivo de entrada. Sigues siendo responsable de la validación de la entrada en el código, según sea necesario.

Para obtener más información, consulta Usar el ámbito de entrada para cambiar el teclado táctil.

Fuentes de color

Se aplica a: TextBlock, RichTextBlock, TextBox, RichEditBox

Windows tiene la capacidad de que las fuentes incluyan varias capas de color para cada glifo. Por ejemplo, la fuente Segoe UI Emoji define versiones de color del Emoticon y otros caracteres emoji.

Los controles de texto enriquecido y estándar admiten fuentes de color para mostrar. De forma predeterminada, la propiedad IsColorFontEnabled es true y las fuentes con estas capas adicionales se representan en color. La fuente de color predeterminada en el sistema es Segoe UI Emoji y los controles volverán a esta fuente para mostrar los glifos en color.

<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>

El texto representado tiene este aspecto:

Bloque de texto con fuente de color

Para obtener más información, consulta la propiedad IsColorFontEnabled.

Directrices para separadores de líneas y párrafos

Se aplica a: TextBlock, RichTextBlock, TextBox de varias líneas, RichEditBox

Use el carácter separador de línea (0x2028) y el carácter separador de párrafo (0x2029) para dividir texto sin formato. Se inicia una nueva línea después de cada separador de línea. Se inicia un nuevo párrafo después de cada separador de párrafo.

No es necesario iniciar la primera línea o párrafo de un archivo con estos caracteres o finalizar la última línea o párrafo con ellos; si lo hace, indica que hay una línea vacía o un párrafo en esa ubicación.

La aplicación puede usar el separador de líneas para indicar un final de línea incondicional. Sin embargo, los separadores de línea no corresponden a los caracteres separados de retorno de carro y avance de línea, o a una combinación de estos caracteres. Los separadores de línea deben procesarse por separado de los caracteres de retorno de carro y avance de línea.

La aplicación puede insertar un separador de párrafos entre párrafos de texto. El uso de este separador permite la creación de archivos de texto sin formato que se pueden formatear con diferentes anchos de línea en diferentes sistemas operativos. El sistema de destino puede omitir los separadores de línea y interrumpir párrafos solo en los separadores de párrafo.

Directrices sobre revisión ortográfica

Se aplica a: TextBox, RichEditBox

Durante la entrada y edición de texto, la revisión ortográfica informa al usuario de que una palabra está mal escrita resaltando con un subrayado ondulado rojo y proporciona una manera para que el usuario corrija la falta de ortografía.

Este es un ejemplo del corrector ortográfico integrado:

el corrector ortográfico integrado

Use la revisión ortográfica con controles de entrada de texto para estos dos fines:

  • Para una corrección automática de los errores ortográficos

    El motor de revisión ortográfica corrige automáticamente las palabras mal escritas cuando está seguro de la corrección. Por ejemplo, el motor cambia automáticamente "the" a "the".

  • Para mostrar una ortografía alternativa

    Cuando el motor de revisión ortográfica no confía en las correcciones, agrega una línea roja bajo la palabra mal escrita y muestra las alternativas en un menú contextual al pulsar o hacer clic con el botón derecho en la palabra.

  • Use la revisión ortográfica para ayudar a los usuarios a escribir palabras o oraciones en controles de entrada de texto. La revisión ortográfica funciona con entradas táctiles, del mouse y del teclado.

  • No use la revisión ortográfica cuando una palabra no esté en el diccionario o si los usuarios no valoren la revisión ortográfica. Por ejemplo, no lo active si el cuadro de texto está pensado para capturar un número de teléfono o un nombre.

  • No deshabilite la revisión ortográfica solo porque el motor de revisión ortográfica actual no admite el idioma de la aplicación. Cuando el corrector ortográfico no admite un idioma, no hace nada, por lo que no hay ningún daño en dejar la opción activada. Además, algunos usuarios pueden usar un Editor de métodos de entrada (IME) para escribir otro idioma en la aplicación y ese idioma podría ser compatible. Por ejemplo, al compilar una aplicación de idioma japonés, aunque el motor de revisión ortográfica no reconozca actualmente ese idioma, no desactive la revisión ortográfica. El usuario puede cambiar a un IME inglés y escribir inglés en la aplicación; Si la revisión ortográfica está habilitada, el inglés se revisará ortográficamente.

Para los controles TextBox y RichEditBox, la revisión ortográfica está activada de forma predeterminada. Puede desactivarlo estableciendo la propiedad IsSpellCheckEnabled en false.

Para diseñadores

Para desarrolladores (XAML)