Soporte de Tinta (Ink) en Silverlight

Voy a mostrarles como utilizar el objeto InkPresenter, que nos va a permitir tener una interfaz de dibujo para logar escritura con el mouse, que puede ser utilizado para en tablet PC.

Como primer paso, vamos a agregar al XAML el control InkPresenter que donde vamos a escribir.

<InkPresenter x:Name="inkCuadro" 
              MouseLeftButtonDown="inkCuadro_MouseLeftButtonDown" 
              MouseLeftButtonUp="inkCuadro_MouseLeftButtonUp" 
              MouseMove="inkCuadro_MouseMove"
              Background="Transparent"
              Opacity="1" />

 

Ahora en nuestro code-behind vamos a ir agregando todos los elementos necesarios para crear la aplicación.

Primero agregamos la referencia a la librería que nos permite agregar soporte para dibujar.

using System.Windows.Ink;

 

Segundo vamos a definir dos variables, una que va a ser un Stroke que es lo que se va a dibujar y otro el color del trazo. 
Stroke stroke;
Color currentColor = Colors.Black;

 

Tercero agregamos los handlers del mouse, donde vamos a empezar a dibujar al hacer click con el mouse y dejar de hacerlo al liberar el mouse.

private void inkCuadro_MouseLeftButtonDown(object sender, 
                                           MouseButtonEventArgs e)
{
    inkCuadro.Cursor = Cursors.Stylus;
    inkCuadro.CaptureMouse();
 
    stroke = new Stroke();
    stroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkCuadro));
    stroke.DrawingAttributes.Color = currentColor;
 
    inkCuadro.Strokes.Add(stroke);                         
}
 
private void inkCuadro_MouseMove(object sender, 
                                 MouseEventArgs e)
{
    if (stroke != null)
    {
        inkCuadro.Cursor = Cursors.Stylus;
        stroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkCuadro));
    }
}
 
private void inkCuadro_MouseLeftButtonUp(object sender, 
                                         MouseButtonEventArgs e)
{
    stroke = null;
}

De esta manera podemos agregarle funcionalidad, como el grosor o color del trazo.

No Comments