Primera aplicación Xamarin.Forms

A continuación mostrare como se construye una aplicación con Xamarin.Forms, ya esta instalado xamarin e integrado en Visual Studio. Crearemos una aplicación que mostrare el funcionamiento por ahora en iOS y Windows Phone desde Visual Studio.

Crear un una nueva solución  de Xamarin en Visual Studio mediante Archivo > Nuevo proyecto; después, en el cuadro de diálogo, expanda Plantillas > Otros lenguajes > Visual C# > Cross-Platform, seleccione Blank App (Xamarin.forms Portable)

  1. Seleccionar Cross-Platform
  2. Selección de una plantilla a utilizar
  3. Nombre de la aplicación en este caso se llamara "App1_PrimeraApp"
  4. Presionar el botón de "Aceptar" para crear el proyecto 

 

image

Se crea una solución con un proyecto de biblioteca de clases portable y proyectos individuales de Android, iOS y Windows (en caso de tener instalado el SDK de windows Phone )

imageEl primero es App1_PrimeraApp , un proyecto portable en el que vamos a escribir el código común. En los proyectos App1_PrimeraApp.Droid y App1_PrimeraApp.iOS y App1_PrimeraApp.WinPhone vamos a escribir lo requerido por cada plaforma. La figura siguiente muestra la estructura generada. 

image

En el proyecto App1_PrimeraApp(portable) tendremos el programa App.cs cuyo código base se muestra en el listado 1.

Listado 1. App.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
using Xamarin.Forms;
 
namespace App1_PrimeraApp
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new ContentPage
            {
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
                        new Label {
                            XAlign = TextAlignment.Center,
                            Text = "Welcome to Xamarin Forms!"
                        }
                    }
                }
            };
        }
}

El listado 2 muestra el el código del MainActivity.cs en el proyecto de Android, y el listado 3 muestra AppDelegate.cs para el proyecto iOS.

Listado 2. MainActivity.cs

using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace App1_PrimeraApp.Droid
{
    [Activity(Label = "App1_PrimeraApp", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }
    }
}

Listado 3.  AppDelegate.cs

using System;
using System.Collections.Generic;
using System.Linq;

using Foundation;
using UIKit;

namespace App1_PrimeraApp.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

Notemos que en los proyectos App1_PrimeraApp.Droid y App1_PrimeraApp.iOS se tiene la instrucción:

Xamarin.Forms.Forms.Init(this, bundle);

Este código inicializa los componentes necesarios para que todo esto funcione.

Ahora si ejecutamos en android y iOS tal como se ha creado la plantilla, obtendremos el siguiente resultado:

image image

Si quisiéramos hacer una formulario de captura, por ejemplo un "Login" con usuario/contraseña, incluiríamos un código similar al del listado 4 en nuestro proyecto portable, sin necesidad de tener que mover un dedo sobre el código de iOS  y Android . La siguiente figura muestra cómo se despliega esta forma tanto en iOS como en Android. Nótese que en cada caso se aplica automáticamente el estilo default de la plataforma correspondiente.

Listado 4. Forma de login.

 public App()
 {
			MainPage = new ContentPage
            {
                Title = "Perfil",
                Content = new StackLayout
                {
                    Spacing = 20,
                    Padding = 50,
                    VerticalOptions = LayoutOptions.Center,
                    Children =
                    {
                        new Entry() {Placeholder = "Nombre de Usuario"},
                        new Entry() {Placeholder = "Contraseña", IsPassword = true},
                        new Button() {Text = "Iniciar Sesión",TextColor = Color.Black,BackgroundColor = Color.Green}
                    }
                }
            };
}

image

image

La interfaz de Usuario fue creada desde codigo C#, pero tambien, esa misma interfaz mostrada se puede obtener usando XAML, ahora crearemos un nuevo elemento, clic derecho sobre App1_PrimeraApp(portable) > Agregar > Nuevo Elementoimage Se abrirá un cuadro de dialogo y realizar lo siguiente:

  1. Seleccionar Cross-Platform
  2. Selección de una plantilla a utilizar "Forms Xaml Page"
  3. Nombre de la pagina en este caso se llamara "HomePage.cs"
  4. Presionar el botón de "Agregar" para crear el archivo para la interfaz

imageEl código que contendrá de inicio sera una etiqueta "Label" dentro de la etiqueta de "ContentPage"

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1_PrimeraApp.HomePage">
  <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

EL código C# generado es el siguiente para esta plantilla,

como se puede ver, nuestra clase "HomePage" hereda de ContentPage

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace App1_PrimeraApp
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
        }
    }
}

Agregando el código XAML requerido para la interfaz antes creada desde el código C# queda de la siguiente manera:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1_PrimeraApp.HomePage">
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
  <Entry Placeholder="Nombre de Usuario"></Entry>
  <Entry Placeholder="Contraseña" IsPassword="True"></Entry>
  <Button Text="Iniciar Sesión" TextColor="Black" BackgroundColor="Green"></Button>
</StackLayout>
</ContentPage>

Enseguida, dentro de la clase App.cs, que es el punto de entrada de nuestra aplicación hay que llamar a la clase creada "HomePage" y quedaría de la siguiente manera:

 public App()
        {
            MainPage = new HomePage();
        }

y ejecutamos nuestra aplicación en iOS y en Android se vería como en las imágenes antes mostradas.

3 thoughts on “Primera aplicación Xamarin.Forms

Deja un comentario