Introducción a Ink en WPF

2025-05-07

Windows Presentation Foundation (WPF) tiene una característica de entrada de lápiz que facilita la incorporación de entrada de lápiz digital a la aplicación.

Prerrequisitos

Para usar los ejemplos siguientes, instale Primero Visual Studio. También ayuda a saber cómo escribir aplicaciones básicas de WPF. Para obtener ayuda para empezar a trabajar con WPF, vea Tutorial: Mi primera aplicación de escritorio wpF.

Inicio rápido

Esta sección le ayuda a escribir una aplicación WPF sencilla que recopila tinta.

¿Te sobra tinta?

Para crear una aplicación WPF que admita entrada de lápiz:

Abre Visual Studio.
Cree una aplicación WPF.

En el cuadro de diálogo Nuevo proyecto, expanda la categoría Instalado>Visual C# o Visual Basic>Escritorio de Windows. A continuación, seleccione la plantilla de aplicación WPF (.NET Framework). Escriba un nombre y, a continuación, seleccione Aceptar.

Visual Studio crea el proyecto y MainWindow.xaml se abre en el diseñador.
Escriba <InkCanvas/> entre las <Grid> etiquetas.
Presione F5 para iniciar la aplicación en el depurador.
Con un lápiz o un mouse, escriba hello world en la ventana.

Ha escrito el equivalente de tinta digital de una aplicación "Hola Mundo" con solo 12 pulsaciones de tecla.

Dale vida a tu aplicación

Vamos a aprovechar algunas características de WPF. Reemplace todo entre las etiquetas de apertura y cierre <Window> con el siguiente marcado:

<Page>
  <InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">
    <InkCanvas.Background>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Blue" Offset="0.5" />
            <GradientStop Color="HotPink" Offset="1.0" />
              </LinearGradientBrush>
    </InkCanvas.Background>
  </InkCanvas>
</Page>

Este XAML crea un fondo de pincel degradado en la superficie de tinta.

Colores degradados en la superficie de dibujo en la aplicación WPF

Agregar algo de código detrás del XAML

Aunque XAML facilita el diseño de la interfaz de usuario, cualquier aplicación real debe agregar código para controlar eventos. Este es un ejemplo sencillo que amplía la tinta en respuesta a un clic derecho con el ratón.

Establezca el controlador MouseRightButtonUp en su XAML:

<InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">

En el Explorador de soluciones, expanda MainWindow.xaml y abra el archivo de código subyacente (MainWindow.xaml.cs o MainWindow.xaml.vb). Agregue el siguiente código de controlador de eventos:

private void RightMouseUpHandler(object sender,
                                 System.Windows.Input.MouseButtonEventArgs e)
{
    Matrix m = new Matrix();
    m.Scale(1.1d, 1.1d);
    ((InkCanvas)sender).Strokes.Transform(m, true);
}

Private Sub RightMouseUpHandler(ByVal sender As Object, _
                                ByVal e As System.Windows.Input.MouseButtonEventArgs)

    Dim m As New Matrix()
    m.Scale(1.1, 1.1)
    CType(sender, InkCanvas).Strokes.Transform(m, True)

End Sub

Ejecute la aplicación. Agregue algo de tinta y, a continuación, haga clic con el botón derecho con el ratón o realice una pulsación prolongada con un lápiz óptico.

La pantalla se acerca cada vez que hace clic con el botón derecho del mouse.

Usar código de procedimientos en lugar de XAML

Puede acceder a todas las características de WPF desde el código de procedimientos. Siga estos pasos para crear una aplicación "Hello Ink World" para WPF que no use ningún XAML en absoluto.

Cree un proyecto de aplicación de consola en Visual Studio.

En el cuadro de diálogo Nuevo proyecto, expanda la categoría Instalado>Visual C# o Visual Basic>Escritorio de Windows. A continuación, seleccione la plantilla de aplicación Aplicación de consola (.NET Framework). Escriba un nombre y, a continuación, seleccione Aceptar.

Pegue el código siguiente en el archivo Program.cs o Program.vb:

using System;
using System.Windows;
using System.Windows.Controls;
class Program : Application
{
    Window win;
    InkCanvas ic;

    protected override void OnStartup(StartupEventArgs args)
    {
        base.OnStartup(args);
        win = new Window();
        ic = new InkCanvas();
        win.Content = ic;
        win.Show();
    }

    [STAThread]
    static void Main(string[] args)
    {
        new Program().Run();
    }
}

Imports System.Windows
Imports System.Windows.Controls


Class Program
    Inherits Application
    Private win As Window
    Private ic As InkCanvas


    Protected Overrides Sub OnStartup(ByVal args As StartupEventArgs)
        MyBase.OnStartup(args)
        win = New Window()
        ic = New InkCanvas()
        win.Content = ic
        win.Show()

    End Sub

End Class

Module Module1

    Sub Main()
        Dim prog As New Program()
        prog.Run()

    End Sub

End Module

Para agregar referencias a los ensamblados PresentationCore, PresentationFramework y WindowsBase, haga clic con el botón derecho en Referencias en el Explorador de soluciones y elija Agregar referencia.
Compile la aplicación presionando F5.

Compartir a través de