Introducción a Xamarin Forms - Tutorial

Xamarin Forms es una nueva tecnología para el desarrollo, que permite crear aplicaciones multiplataforma, es decir, en cualquier dispositivo móvil (iOS, Android o incluso Windows Phone). El IDE a utilizar es Visual Studio .NET, y el lenguaje a usar es C#.

Xamarin Forms te proporcionará un entorno de desarrollo en el que lograrás compartir la mayoría de tu código (menos el específico). También podremos reutilizar la interfaz (la mayoría de elementos básicos). Hay elementos más específicos que son independientes en cada tecnología.

Crear una aplicación usando Xamarin Forms

Para empezar a usar Xamarin Forms y crear una aplicación, previamente debes cumplir unos requisitos para poder empezar a programar. Necesitarás la última versión de Visual Studio a ser posible. También necesitarás desarrollo para dispositivos móviles con .NET, y tener conocimientos de C#.

• Inicie Visual Studio.
• En segundo lugar, elecciona la ventana "Crear un proyecto nuevo" y selecciona móvil.
• En el desplegable "Tipo de proyecto", elija "Aplicación móvil", y siguiente.
• Configure su nuevo proyecto, en "Notes", dele nombre al proyecto.
• Elija una ubicación, y seleccione "Crear".
• En el cuadro "Nueva aplicación móvil", selecciona "Tabbed", pulse "Crear".
• Una vez creado el proyecto, cierre el archivo "GettingStarted.txt".
• En el "Explorador de soluciones", en el proyecto "Notes", elimine las carpetas (modelos, servicios, ViewModels, vistas)
• Nuevamente en el "Explorador de soluciones", elimine "GettingStarted.txt".
• Por otro lado, Agregue una carpeta nueva que se denomine "Vistas".

Dentro del proyecto "Notes", seleccione la carpeta creada de "Vistas". Con el botón derecho, seleccione "Agregar, nuevo elemento". En el cuadro de diálogo selecciona "Agregar nuevo elemento", elementos de Visual C#, página de contenido. Una vez hecho esto, asigne el nombre de "ExamplePage" al nuevo archivo creado y lo agrega.

Esto agrega una nueva página que se denomina "ExamplePage", en la carpeta "Vistas". Esta es la principal página de la aplicación. Dentro del "Explorador de soluciones", en el proyecto "Notes", haga doble clic en ExamplePages.xaml para poder abrirlo.

Código a implementar una vez creada la aplicación

• Dentro de ExamplePages.xaml, elimina todo el código de la página y sustituye por el siguiente.

Este código contiene dos botones y una instancia de "Editor". Estos botones dirigen para eliminar o guardar un archivo. Los dos botones están situados de manera horizontal, mientras los componentes de "Editor" y "Grid" están componiendo un StackLayout. Guarde los cambios en ExamplePage.xaml.

• Nuevamente en el "Explorador de soluciones", en el proyecto "Notes", haz doble click en ExamplePage.xaml.cs para que se pueda abrir.
• En ExamplePage.xaml.cs, quite todo el código y sustitúyelo por este.

El campo "_filename", hace referencia a un archivo "Examples.txt", que almacena los datos del documento en la carpeta de datos de la aplicación que estamos creando. Este sencillo programa comprueba si existe y lo muestra en el
"Editor". Guarde los cambios en su sistema.

Dentro del "Explorador de soluciones", en el proyecto de "Notes", selecciona Vistas, y agregue un nuevo elemento. En el cuadro de diálogo seleccione "Agregar nuvo elemento", y "elemento de Visual C#". Por último selecciona "Página de diálogo", y póngale un nombre (SecondPage.xaml), y copia el siguiente código.

Este código define un Image y un Button, que forma un StackLayout vertical. Por otro lado, el Image, se disponen horizontalmente en un Grid. Guarde nuevamente el proyecto en su sistema.

• A continuación, en SecondPage.xaml.cs, copie y pegue este código.

El evento "OnButtonClicked", se ejecuta cuando se pulsa el botón. Una vez presionado el botón, se abre el navegador web y se muestra la URL que hayamos introducido en el método "OpenAsync" (podemos poner la URL que queramos).

Cómo compilar una app en Xamarin

Dentro de App.xaml.cs, elimine el código existente (dentro del proyecto "Notes", expande App.xaml, y encontraras el archivo .cs). Sustituya dicho código por el siguiente.

Este código hace que el código que se encuentra en la clase App, que es el que gestiona las instancias de toda la aplicación. Esto inicializa MainPage, en un objeto shell, que es una clase menor. Guarde su aplicación nuevamente.

Para compilar y finalizar con la aplicación, dentro de Visual Studio, selecciona "Compilación", "Compilar solución". Una vez se compile correctamente el proyecto, aparecerá un mensaje de que la operación se ha completado correctamente (si no hay errores previos).

Una vez compilado el proyecto, en la barra de herramientas de Visual Studio, pulse en Iniciar, para iniciar la ejecución de la aplicación en el emulador de Android. Posteriormente, se ejecutará la aplicación y podrá comprobar su funcionamiento. Por otro lado, podrá ir modificando el código, y ejecutando la aplicación para ver como se realizan los cambios que vaya introduciendo.