Xamarin Forms #2 – Usando XAML

Con este sencillo ejemplo aprenderá a usar XAML en Xamarin Forms con Visual Studio 2017, además seguirá familiarizándose con el entorno de desarrollo.

  • Publicado el
  • Juan Jos Mendoza.

    Juan José Mendoza --> juan.mendoza@LYNXWORK.CLOUD

    1.- Creando el proyecto

    Abra Visual Studio 2017, una vez abierto de clic en Archivo --> Nuevo --> Proyecto

    Aparecerá el cuadro de diálogo siguiente, que muestra algunas de las plantillas disponibles para crear un nuevo proyecto, en la sección de plantillas colóquese en Visual C# --> Cross-Platform y seleccione la plantilla Cross Platform App (Xamarin)

    Coloque un nombre al proyecto, defina su ubicación y de clic en Aceptar

    Se abrirá un nuevo cuadro de dialogo que muestra algunas de las plantillas disponibles para crear una aplicación de Xamarin, seleccione la plantilla Aplicación en blanco, en el apartado de Tecnología de UI establezca Xamarin.Forms, como estrategia de uso compartido de código seleccione Biblioteca de clases portátil (PLC) y de clic en OK.

    Aparecerá otro cuadro de dialogo, que permite seleccionar las versiones mínimas con las que la aplicación de Windows Universal será compatible, deje los valores por defecto y de clic en Aceptar.

    2.- Usando XAML

    Una vez creada su solución seleccione su proyecto portable de clic derecho y elija Agregar --> Nuevo elemento

    Aparecerá el cuadro de diálogo siguiente, que muestra los elementos disponibles para agregar al proyecto, en la sección izquierda colóquese en Visual C# --> Xamarin.Forms y seleccione el elemento Content Page, cambie su nombre predeterminado por HomePage.xaml y de clic en Agregar

    Se le generara un archivo XAML con código predeterminado en donde se crea una página de tipo ContentPage y dentro de ella un layout StackLayout que contiene un control Label con el texto “Welcome to Xamarin Forms!”

    El control Label sustitúyalo por un Button con el texto “Presiona aquí” y de clic en el icono correspondiente para guardar los cambios.

    De clic en el menú Ver --> Otras ventanas --> Xamarin.Forms.Previewer y espere a que se cargue el pre-visualizador de páginas XAML

    El pre-visualizador se mostrará en la parte derecha como se muestra en la imagen siguiente

    Con el pre-visualizador activado, ya no será necesario compilar e implementar en su emulador o dispositivo físico su solución para verificar sus cambios en las páginas XAML, por lo tanto, cada vez que modifique algo en su página el pre-visualizador mostrará dichos cambios.

    Dele un nombre al control con la finalidad de identificarlo, para ello defina su propiedad “Name” y asígnele un valor, en este ejemplo se asignara “btnSumar” de la siguiente manera x:Name="btnSumar"

    Especifique su página HomePage.xaml como página de inicio, para hacerlo abra App.xaml.cs (localizado en su proyecto portable).

    En su constructor sustituya MainPage = new UsoDeXAML.MainPage(); por MainPage = new UsoDeXAML.HomePage(); y de clic en el icono correspondiente para guardar todos los cambios.

    Abra la clase HomePage.xaml.cs

    Agregue una variable de tipo entero, llámela “count” y asígnele el valor inicial 0

    Cree un método protected override void OnAppearing()  (Se ejecutara cuando aparezca la aplicación)

    En su contenido agregue el método BtnSumar_Clicked al evento Clicked del botón btnSumar

    En el contenido del método BtnSumar_Clicked incremente en uno el valor de su variable count posteriormente asigne dicho valor a la propiedad Text del control btnSumar y guarde los cambios.

    De forma predefinida el proyecto de Android es el que está configurado como proyecto de inicio, por lo que en Visual Studio 2017 aparecerá un listado de emuladores de dispositivos Android donde se podrá ejecutar su App

    Seleccione VisualStudio_android-23_x86_phone (Android 6.0 - API 23) y presione la tecla F5

    Espere a que se inicie el Emulador de Android, cuando termine de iniciarse se mostrara el resultado de la ejecucion de su app.

    De clic en el botón

    >De clic en el botón varias veces y verifique que cada vez que da clic se incrementa en uno el valor del texto contenido en el botón

    Con el siguiente ejemplo aprendió la forma de hacer que un botón funcione cuando se le da clic, también vio las propiedades básicas Text y Name, además aprendió a desplegar el pre-visualizador de páginas XAML para ver en tiempo real lo que se está editando.