Introducción a las entradas manuscritas

Artículo
08/10/2011

Incorporar las entradas de lápiz digitales a sus aplicaciones es más fácil que nunca. Las entradas de lápiz han evolucionado desde ser una consecuencia natural del método de programación de COM y de formularios Windows Forms hasta lograr la integración plena en el WPF. No es necesario instalar ningún SDK independiente ni bibliotecas en tiempo de ejecución.

Requisitos previos

Para utilizar los ejemplos siguientes, debe instalar primero Microsoft Visual Studio 2005 y Windows SDK. También debe comprender la escritura de aplicaciones para WPF. Para obtener más información acerca de cómo empezar con WPF, vea Tutorial: Introducción a WPF.

Tutorial

Esta sección le ayuda a escribir una aplicación WPF sencilla que recopila entradas de lápiz.

Si aún no lo ha hecho, instale Microsoft Visual Studio 2005 y Windows Software Development Kit (SDK). Normalmente, es necesario compilar las aplicaciones de WPF para poder verlas, aunque consistan en su totalidad en código Extensible Application Markup Language (XAML). Sin embargo, Windows Software Development Kit (SDK) incluye una aplicación, XamlPad, diseñada para acelerar el proceso de implementar una interfaz de usuario basada en XAML. Puede utilizar esa aplicación para ver y aprovechar los primeros ejemplos de este documento. El proceso de crear aplicaciones compiladas a partir de XAML se aborda más adelante en este documento.

Para iniciar XAMLPad, haga clic en el menú Inicio, seleccione Todos los programas, Microsoft Windows SDK, Herramientas y haga clic en XAMLPad. En el panel de representación, XAMLPad representa el código XAML escrito en el panel de código. Puede editar el código XAML; los cambios aparecerán inmediatamente en el panel de representación.

¿Necesita entradas de lápiz?

Para iniciar su primera aplicación de WPF que admite las entradas de lápiz:

Abra Microsoft Visual Studio 2005.
Cree una nueva aplicación para Windows (WPF).
Escriba <InkCanvas/> entre las etiquetas <Grid>.
Presione F5 para iniciar la aplicación en el depurador.
Mediante un lápiz óptico o con el mouse, escriba hello world (hola a todos) en la ventana.

¡Ha escrito el equivalente de entrada de lápiz de una aplicación "Hello World" con tan sólo 12 pulsaciones de tecla!

Mejorar la aplicación

Ahora, vamos a aprovechar algunas características del WPF. Reemplace todo lo que aparece entre las etiquetas <Window> de apertura y </Window> de cierre con el marcado siguiente, para obtener un fondo de pincel de degradado en la superficie de escritura a mano.

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


...


</Page>

Usar la animación

Para que sea más divertido, vamos a animar los colores del pincel de degradado. Agregue el código XAML siguiente después de la etiqueta </InkCanvas> de cierre, pero antes de la etiqueta </Page> de cierre.

<Page.Triggers>
  <EventTrigger RoutedEvent="Page.Loaded">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
          <ColorAnimation  Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
          From="Yellow" To="Blue" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
          From="Blue" To="Red" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
          From="Green" To="Blue" Duration="0:0:5"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
</Page.Triggers>

Agregar código subyacente al código XAML

Aunque XAML facilita en gran medida el diseño de la interfaz de usuario, es preciso agregar código a las aplicaciones reales para que puedan administrar los eventos. A continuación se muestra un ejemplo sencillo que acerca las entradas de lápiz en respuesta a un clic con el botón secundario de un mouse:

Establezca el controlador MouseRightButtonUp en el código XAML:

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

En el Explorador de soluciones de Visual Studio, expanda Windows1.xaml y abra el archivo de código subyacente, Window1.xaml.cs o Window1.xaml.vb si usa Visual Basic. Agregue el código de controlador de eventos siguiente:

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 'RightMouseUpHandler

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

Ahora, ejecute la aplicación. Agregue una entrada de lápiz y, a continuación, haga clic con el botón secundario del mouse o realice la acción equivalente de presionar y mantener presionado con un lápiz óptico.

Usar código de procedimientos en lugar de XAML

Puede tener acceso a todas las características de WPF a partir del código de procedimientos. A continuación se muestra una aplicación "Hello Ink World" (Hola a todos los que realizan entradas de lápiz) para WPF que no usa ningún código XAML. Pegue el código siguiente en una aplicación de consola vacía en Visual Studio. Agregue referencias a los ensamblados PresentationCore, PresentationFramework y WindowsBase. A continuación, presione F5 para generar la aplicación:

Imports System
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 'OnStartup

End Class 'Program

Module Module1

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

    End Sub

End Module

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