Xamarin

LogInPage {Xamarin.Forms}


El día de hoy les quiero compartir un rápido tutorial de cómo crear una página de LogIn en Xamarin.Forms, para esto primeramente nos debemos de asegurar de que contamos con la última versión de estas.

Para comprobar, hay que abrir el gestor de paquetes NuGet en Visual Studio o Xamarin Studio y comprobar si hay nuevas versiones de Xamarin.Forms. Porque no se nos notificará sobre los nuevos lanzamientos con sólo abrir una solución Xamarin.Forms en cualquier IDE, la comprobación de los paquetes actualizados vía NuGet es la única manera de asegurarse de que se obtienen las últimas mejoras.

Después haber hecho esto, podemos iniciar.

Paso 1

Comencemos creando una aplicación en blanco (Xamarin.Forms Portable):

1

Si nos percatamos, la solución tiene tres proyectos específicos de cada plataforma móvil y una biblioteca de clases Portable (PCL).

2

Paso 2

Ahora deberemos de crear la página de LogIn en el PCL, la cual será la primera que se muestre al ejecutar la aplicación.

Para esto, nos posicionamos en LogInPage (Portable), al dar clic con el botón secundario, seleccionamos la opción de Agregar –  Nuevo elemento, y elegiremos:

Forms ContentPage 

3 4

 Paso 3

Después de hacer lo anterior, al código que se nos presenta le agregaremos los elementos o controles denominados “vistas”, los cuales son con los que el usuario interactuara.

Antes 

5

Después

6

 Paso 4

Ya para concluir,  en nuestro archivo App.cs (Portable) debemos de modificar la iniciación de la página, para esto solo debemos de hacer lo siguiente:

Antes

7

Después 

8

Después de haber realizado todos los pasos, veamos si funciona, empecemos con Windows Phone, para esto solo debemos de seleccionarlo como proyecto de inicio.

9

NOTA – ERROR

Al estar escribiendo esto, me percate de un error, pero la solución es sencilla:

Error: Destino x86

10

Solución: Cambiar el destino

Antes

11

Después

12

Para Android, se repite el mismo paso de establecer como proyecto de inicio y se selecciona el dispositivo físico o el emulador al cual lanzaremos la aplicación.

En mi caso tengo un HTC One con una API de 16 en Genymotion.

13

Dispositivos

wp_ss_20150331_0001Android

 

 

 

 

 

 

 

 

 

 

 

 

 

El código lo pueden descargar desde aquí.
¿Te gusto el articulo?, descargalo también en PDF desde aquí.

Hasta la próxima!!

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 )

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 )

Google+ photo

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

Conectando a %s