SignaturePad [Xamarin.Forms]


Hola de nuevo, el día de hoy veremos como funciona el plugin de SignaturePad, el cual nos permite contar con la opción de brindarle la experiencia al usuario de firmar en nuestra aplicación.

Para este ejemplo voy a suponer que ya han creado su aplicación en Xamarin.Forms, en dado caso de que no lo hayan hecho y tengan alguna duda, los invito a que lean el siguiente post: My first App in Xamarin.Forms

Una vez realizado esto, procedamos a agregar el NuGet Package, esto haciendo clic con el botón derecho sobre la solución y seleccionando “Manage NuGet Packages for Solution”…

1

Escribamos “Xamarin.Controls.SignaturePad.Forms” y seleccionemos el plugin como se muestra a continuación:

2

Seleccionemos todos los proyectos y hagamos clic en el botón “Install”.

3

XAML

Ahora, lo primero que debemos de hacer en nuestro archivo MainPage.xaml es hacer referencia al espacio de nombres de SignaturePad.Forms.

xmlns:sign=”clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms”

Posteriormente agreguemos un SignaturePadView y editemos algunas de sus propiedades, como por ejemplo:

  • StrokeWidth – Espesor del texto.
  • StrokeColor – Color del texto.
  • CaptionText – Texto que aparecerá debajo de la línea.

Así mismo, agreguemos un botón que nos permitirá guardar la firma.

[/code]

<StackLayout><StackLayout>        <sign:SignaturePadView              x:Name=”signature”            StrokeWidth=”5″            WidthRequest=”280″            HeightRequest=”350″         BackgroundColor=”White”         StrokeColor=”Black”            CaptionText=”Firma”>        </sign:SignaturePadView>
<Button Clicked=”Save” Text=”Save”/>
</StackLayout>

[/code]

Código

Utilizando el método GetImageStreamAsync que devuelve un Stream podremos guardar la firma.

 public async void Save(object sender, EventArgs eventArgs)
        {
            Stream stream = await signature.GetImageStreamAsync(SignatureImageFormat.Jpeg);
        }

Resultado

SignaturePad

Descarga el código completo de este ejemplo desde mi GitHub.

GitIronMan

Hasta la próxima!

Más información: Xamarin.Controls.SignaturePad.Forms

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s