Dibujando con InkCanvas en UWP

Buen día a todos, estoy muy contento de poder reaperturar este blog ya que este hace tiempo no tenia mucha actividad y ahora con nueva dirección. Espero que todos los artículos les sean de mucha ayuda :D

Este artículo, lo escribí en epocas navideñas y ya se darán cuenta al final porque hago mención a esto. Hace un tiempo tuve el agrado de dar una charla sobre desarrollo de aplicaciones para la plataforma universal de Windows 10. Me tocó un tema bastante interesante, permitir que tu app pueda escribir o dibujar a través de stylus, mouse u otras entradas.

En este articulo veremos cómo desarrollar una app que nos permita lo ya mencionado anteriormente, se creará un InkCanvas que acepta entradas táctiles, así cómo las del ratón y stylus.

Consideraciones

Para poder llevar este tutorial, necesitaremos estas herramientas:

  • Visual Studio 2015 (Cualquier versión es válida).
  • Windows 10.

Nota - InkCanvas viene por defecto para su uso con Stylus.

Empecemos!

Lo primero que haremos es abrir Visual Studio 2015 y elegir Nuevo Proyecto. Una vez hecho eso, escogemos Visual C#>Windows>Universal y por ultimo seleccionamos Aplicación Vacía (Windows Universal).

Visual Studio 2015

Nombraremos al proyecto InkCanvas y lo guardaremos en el lugar que nosotros deseemos.

Name of Project

Paso 1 - Creamos el InkCanvas

Vamos a ir al Explorador de Soluciones y abriremos el archivo con el que trabajaremos la interfaz de la aplicación, esta es MainPage.xaml. Luego de eso, a codificar! :3

Solution Explorer

Añadimos el siguiente código que nos permite trabajar la interfaz. Este código nos ayudará a definir el fondo de la aplicación en un Gris Claro y también definiremos tres filas con la etiqueta RowDefinitions

<Grid Background="LightGray">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
</Grid>

Teniendo el código anterior ya listo, si ejecutamos nuestra aplicación, el fondo de la aplicación tendría que aparecer de color LightGray. Ahora definiremos los contenidos de nuestras tres filas, asi como también el InkCanvas, luego de la etiqueta </Grid.RowDefinitions> añadiremos estas lineas de codigo:

  <Grid Grid.Row="0" Margin="12">
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="1*" />
         <ColumnDefinition Width="1*" />
     </Grid.ColumnDefinitions>
     <StackPanel Grid.Column="0" Orientation="Horizontal">
     </StackPanel>
     <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
     </StackPanel>
  </Grid>
  <Grid Grid.Row="1" Background="White" Grid.ColumnSpan="2">
     <InkCanvas x:Name="InkCanvas" />
  </Grid>
  <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12">
  </StackPanel>
</Grid>

Hasta este punto ya tendremos nuestra aplicación lista para dibujar con un Stylus. La ejecutaremos y nos tiene que aparecer así:

Prueba

public MainPage()
{
  this.InitializeComponent();
  InkCanvas.InkPresenter.InputDeviceTypes = 
    Windows.UI.Core.CoreInputDeviceTypes.Mouse |    
    Windows.UI.Core.CoreInputDeviceTypes.Pen | 
    Windows.UI.Core.CoreInputDeviceTypes.Touch;
}

Paso 2 - Añadimos Mouse y Táctil como entradas para el InkCanvas

Vamos a abrir el archivo de C# de nuestro MainPage.xaml, este lo encontraremos como MainPage.xaml.cs. Una vez abierto, vamos a importar nuestras librerias de Inking, para esto añadimos esta linea de código `using Windows.UI.Input.Inking;.

using...

Ahora, añadiremos estas lineas de código, en el MainPage , con este código habilitaremos la opción de dibujar con el Mouse, Pen y Táctil.

public MainPage()
{
   this.InitializeComponent();

   InkCanvas.InkPresenter.InputDeviceTypes = 
       Windows.UI.Core.CoreInputDeviceTypes.Mouse |    
       Windows.UI.Core.CoreInputDeviceTypes.Pen | 
       Windows.UI.Core.CoreInputDeviceTypes.Touch;
}

Nuevamente ejecutaremos nuestra aplicación y dibujaremos con el mouse haciendo clic sobre nuestra área definida anteriormente. Veamos cómo queda:

Demo

Genial!

Espero que este tutorial les haya gustado, no se olviden de seguir practicando e investigando más, es la mejor forma de aprender. Acá les dejo el link de la aplicación ya hecha para que la puedan revisar, descargar y si gustan (les recomiendo) mejorar.

Si tienen alguna consulta, no duden en dejarla en los comentarios, me ayudarían muchísimo haciéndolo.

Acá les dejo un artículo guía y un curso que pueden llevar en MVA
http://windows.microsoft.com/en-us/windows-10/speech-inking-typing-privacy-faq
https://mva.microsoft.com/en-US/training-courses/windows-10-inking-and-the-inkcanvas-14586?l=0UvtIbisB_8405632527

Hasta luego, muchísimas gracias :3