Compartir vía

Controles de escritura digital

En las aplicaciones de Windows existen dos controles diferentes que facilitan la entrada manuscrita: InkCanvas e InkToolbar.

El control InkCanvas representa la entrada manuscrita como un trazo de tinta (con la configuración predeterminada de color y grosor) o como un borrador. Este control es una superposición transparente que no incluye ninguna interfaz de usuario integrada para cambiar las propiedades predeterminadas del trazo de tinta.

Nota:

InkCanvas se puede configurar para que admita una funcionalidad similar tanto para la entrada táctil como para la del ratón.

Como el control InkCanvas no incluye soporte para cambiar la configuración predeterminada del trazo, se puede emparejar con un control InkToolbar. La InkToolbar contiene una colección personalizable y extensible de botones que activan características relacionadas con las entradas de lápiz en un InkCanvas asociado.

De manera predeterminada, la InkToolbar incluye botones para dibujar, borrar, resaltar y mostrar una regla. En función de la funcionalidad, en un control flotante se proporcionan otras opciones de configuración y comandos, como el color de tinta, el grosor del trazo o borrar toda la tinta.

Nota:

InkToolbar admite la entrada de lápiz y ratón y puede configurarse para reconocer la entrada táctil.

Flyout de la paleta de InkToolbar

¿Es este el control adecuado?

Use el InkCanvas cuando necesite habilitar características básicas de entrada de lápiz en su aplicación sin proporcionar ninguna configuración de entrada de lápiz al usuario.

De manera predeterminada, los trazos se representan como trazos de tinta al utilizar la punta del lápiz (un bolígrafo negro con un grosor de 2 píxeles) y como herramienta de borrado al utilizar la punta del borrador. Si no hay una punta de borrador, el InkCanvas puede configurarse para procesar la entrada de la punta del lápiz como si fuera un trazo de borrado.

Empareje el InkCanvas con una InkToolbar para proporcionar una UI para activar las funciones de entrada de lápiz y configurar las propiedades básicas de entrada de lápiz, como el tamaño del trazo, el color y la forma de la punta del lápiz.

Nota:

Para realizar una mayor personalización de la representación de trazos de tinta en un control InkCanvas, usa el objeto subyacente InkPresenter.

Información general de la barra de herramientas de tinta digital

Botones integrados

La InkToolbar incluye los siguientes botones integrados:

Bolígrafos

  • Lápiz bolígrafo: dibuja un trazo sólido y opaco con una punta de bolígrafo circular. El tamaño del trazo depende de la presión del lápiz detectada.
  • Lápiz: dibuja un trazo de bordes suaves, texturizado y semitransparente (útil para efectos de sombreado por capas) con una punta de lápiz circular. El color del trazo (oscuridad) depende de la presión del lápiz detectada.
  • Marcador: dibuja un trazo semitransparente con un lápiz de punta rectangular.

Puede personalizar tanto la paleta de colores como los atributos de tamaño (mín., máx., predeterminado) en el control flotante de cada lápiz.

Tool

  • Borrador: elimina cualquier trazo de tinta que toque. Tenga en cuenta que se borra todo el trazo de tinta, no solo la parte bajo el trazo de borrado.

Toggle

  • Regla: muestra u oculta la regla. Si dibuja cerca del borde de la regla, el trazo se ajustará automáticamente a la regla.
    Visual de regla asociado al InkToolbar

Aunque ésta es la configuración predeterminada, puede controlar completamente qué botones incorporados se incluyen en la InkToolbar de su aplicación.

Botones personalizados

InkToolbar consta de dos grupos distintos de tipos de botón:

  1. Un grupo de botones de "herramienta" que contienen los botones de dibujo, borrado y resaltado integrados. Aquí se agregan los lápices y herramientas personalizados.

Nota:

La selección de características es mutuamente excluyente.

  1. Un grupo de "botones de alternancia" que incluye el botón de regla integrado. Aquí se añaden conmutadores personalizados.

Nota:

Las características no son mutuamente excluyentes y se pueden usar de manera simultánea con otras herramientas activas.

Según la aplicación y la funcionalidad de entrada manuscrita requerida, puede agregar cualquiera de los botones siguientes (enlazados a las características de entrada de lápiz personalizadas) a InkToolbar:

  • Lápiz personalizado: un lápiz en el que la paleta de colores del trazo y las propiedades de la punta del lápiz, como la forma, la rotación y el tamaño, las define la aplicación host.
  • Herramienta personalizada: una herramienta que no es un lápiz, definida por la aplicación anfitriona.
  • Alternancia personalizada: establece el estado de una característica que define la aplicación en activada o desactivada. Cuando está activada, la característica funciona junto con la herramienta activa.

Nota:

No se puede cambiar el orden de visualización de los botones integrados. El orden de visualización predeterminado es: bolígrafo, lápiz, marcador, borrador y regla. Los lápices personalizados se anexan al último lápiz predeterminado, los botones de herramientas personalizados se agregan entre el último botón de lápiz y el botón de borrador, y los botones de alternancia personalizados se agregan después del botón de regla. (Los botones personalizados se agregan en el orden en que se especifican).

Si bien el control InkToolbar puede ser un elemento de primer nivel, por lo general se expone a través de un botón o comando de "Tinta Digital". Se recomienda usar el glyph EE56 del tipo de letra Segoe MLD2 Assets como icono de nivel superior.

Interacción con InkToolbar

Todos los botones integrados de lápiz y herramientas incluyen un control flotante en el que se pueden configurar las propiedades de la tinta y la forma y el tamaño de la punta del lápiz. Se muestra un "glifo de extensión" en el botón para indicar que existe el desplegable.

Glifo de InkToolbar

El panel desplegable se muestra cuando se vuelve a seleccionar el botón de una herramienta activa. Cuando se cambia el color o el tamaño, la ventana volante desaparece automáticamente y se puede reanudar la entrada manuscrita. Los bolígrafos y herramientas personalizados pueden usar el panel flotante predeterminado o especificar un panel flotante personalizado.

El borrador también tiene un control flotante que proporciona el comando Borrar toda la tinta.

InkToolbar con el menú desplegable de borrador activado

Para más información sobre personalización y extensibilidad, consulte el ejemplo de SimpleInk.

Recommendations

  • InkCanvas y el uso de la tinta digital, en general, se disfruta mejor con un lápiz activo. Sin embargo, si su aplicación lo requiere, le recomendamos que admita la entrada de tinta mediante el ratón y la función táctil (incluido el lápiz pasivo).
  • Usa un control InkToolbar con el InkCanvas para proporcionar funciones y configuraciones básicas de escritura a mano. Tanto el InkCanvas como la InkToolbar pueden personalizarse mediante programación.
  • El InkToolbar y el dibujo con tinta en general se experimentan mejor mediante un lápiz activo. Sin embargo, si tu aplicación lo requiere, se puede admitir la función de escritura manual con el ratón y la función táctil.
  • Si se admite la escritura a mano con entrada de toque, recomendamos usar el icono ED5F de la fuente Segoe MLD2 Assets para el botón de alternancia, con una etiqueta "Escritura táctil".
  • Si se proporciona la selección de trazo, recomendamos usar el icono EF20 de la fuente Segoe MLD2 Assets para el botón de herramienta, con "Herramienta de selección" como información sobre herramientas.
  • Si se usa más de un InkCanvas, se recomienda usar una sola InkToolbar para controlar el entintado digital en todos los lienzos.
  • Para obtener el mejor rendimiento, recomendamos alterar el desplegable predeterminado en lugar de crear uno personalizado para ambas herramientas, las predeterminadas y las personalizadas.

Examples

Microsoft Edge

Microsoft Edge usa los controles InkCanvas e InkToolbar para las notas web.
El control InkCanvas se usa para dibujar con un lápiz digital en Microsoft Edge

Área de trabajo de Windows Ink

Los controles InkCanvas e InkToolbar también se usan para Recorte y anotación en el Espacio de trabajo de Windows Ink.
Control InkToolbar en el Área de trabajo de Windows Ink

Crear un InkCanvas e InkToolbar

Agregar un InkCanvas a su aplicación solo requiere una línea de marcado:

<InkCanvas x:Name="myInkCanvas"/>

Nota:

Para la personalización detallada de InkCanvas mediante InkPresenter, consulta el artículo "Interacciones de lápiz y Windows Ink en aplicaciones de Windows".

El control InkToolbar debe utilizarse junto con un InkCanvas. La incorporación de una InkToolbar (con todas las herramientas integradas) en su aplicación requiere una línea adicional de marcado:

<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>

Esto muestra la siguiente InkToolbar:

Barra de Herramientas de Tinta Básica

Obtención del código de ejemplo

  • Muestra de SimpleInk: muestra los 8 escenarios en torno a las funcionalidades de personalización y extensibilidad de los controles InkCanvas e InkToolbar. Cada escenario proporciona una guía básica sobre situaciones comunes de entrada manuscrita e implementaciones de controles.
  • Muestra de ComplexInk: demuestra escenarios de entintado más avanzados.
  • Ejemplo de la Galería de WinUI para UWP : consulta todos los controles XAML en un formato interactivo.
  • Last updated on