Xamarin Forms - Principiantes- Label y Button

de: hmvcode

Dificultad:

Principiante

Plataforma:

Otra

Categoria:

Software

Favoritos:

favorite1

reportReportar

Descripción:

Inicio de la guia de Xamarin Forms para principiantes con el que se podra iniciar a desarollar aplicaciones moviles multiplataforma


Tags:

Android
Xamarin
iOS
Xamarin Forms

Paso 0:

Xamarin Studio es el IDE con el que trabajaremos nosotros desde Mac, para los usuarios de Windows se puede utilizar desde Visual Studio.

Comenzaremos creando una nueva Solucion:

Seleccionaremos Forms App ya que trabajaremos con Xamarin Forms para hacer nuestra Aplicacion multiplataforma

Le asignaremos el nombre con el que se mostrara la App nosotros elegimos nombre y mantendremos seleccionados Android e iOS:

Continuaremos Dando el nombre y localización de nuestro proyecto nosotros lo pondremos en el Desktop:

De entrada nos mostrara las carpetas dentro de la solución tendremos Buttons que es el nombre de la carpeta raíz donde introduciremos todos nuestros XAML que es casi idéntico a XML de Android también vemos que tenemos la carpeta Buttons.iOS la cual es para iOS en cada una podemos modificar nativamente el código pero esta ves nos enfocaremos en utilizar Forms para evitar el usar código en cada carpeta:


las ventajas que tenemos es que al usar solo la carpeta raíz de buttons nosotros estamos creando código para ambas plataformas sin necesidad de usar un lenguaje especial para cada una como java para Android o Objectiv-C para iOS:


nosotros en nuestra carpeta raíz contamos con lo que son las paginas o los .xaml los cuales contiene el .xaml y un .cs:

al nosotros mirar App.xaml vemos que esta vacía de código solo con la creación de la ventana en si:

nos pasaremos al .cs:

en el App.xaml.cs observamos que contiene un inicializador de componentes y un objeto el cual es la pagina de inicio que se mostrara en nuestro caso nuestra ButtonsPage():


Nuestra ButtonsPage contiene un Label por defecto el cual contiene el Texto Welcome to xamarin Forms con los atributos de estar en el centro vertical y horizontal de la pagina:

en nuestro .cs de ButtonsPage solo observamos el InicializeComponent(); el cual inicia nuestra pagina y sus códigos y métodos que ingresemos en el:

Ahora corremos la App por defecto que nos a creado el IDE

Imagen del Emulador de iPhone :

Como observamos contiene el Texto del Label de nuestra pagina ahora trabajaremos dándole un identificador para poder acceder a el desde código:

usando x:Name le asignaremos un nombre nosotros le pondremos TextoLabel1:

También crearemos un Button para interactuar con el label:

su declaración es parecida a xml <Button /> y se asignan los atributos que le daremos que nos permite este

Le asignaremos un texto para que se muestre en el botón tal como el atributo del Label usamos Text ="nuestro Texto":


Ahora lo ejecutaremos para ver el resultado:

imagen del iPhone:

como observamos abarca toda la vista ya que no esta definido un tamaño ni una layout en esta solo tenemos el contenedor que ese contenedor es ContenPage que se observa al inicio de este le daremos una layout que sera un StackLayout :

lo que nos genera un StackLayout es que todos los objetos dentro de este se observen de forma lineal mientras se van declarando dentro de el :

en el iphone tenemos una acción muy curiosa y es que tenemos que declarar el padding de la pagina para que no choque con la barra superior en Android y en Windows Phone no se necesita (este en caso de que desarrollemos en Visual Studio):


lo solucionaremos dando un padding de 10 para la barra superior de la siguiente forma:

Observamos que en el iphone ya se encuentra mas limpio nuestro código interno le asignaremos un identificador al button para poder interactuar con el como se muestra arriba :

Ahora interactuaremos con el botón con el nombre que le declaramos dentro del XAML lo mandaremos a llamar en el .cs:

ahora usaremos el método Clicked que nos permite interactuar cuando este sea clickeado:


de la siguiente forma declaramos un método para que este ejecute un código en especial cada que sea clickeado:

nos generara un método especial el cual obtiene un objeto y un EventArgs :

dentro de este método podemos empezar a trabajar usaremos el label que estaba declarado ya con un identificador para modificar su atributo texto:

llamamos al método Text de el label:

ahora le declaramos lo que queremos que contenga en nuestro caso "hola Mundo" ya que este es un valor tipo String se declara dentro de comillas dobles:

nuestro resultado al darle al botón sera así:

después de darle al botón nos colocara el texto en el label:

que tal si hacemos uso de un corta código por decirlo así usando el nombre del método Boton1_clicked lo usaremos para llamarlo directamente desde el XAML

usaremos Clicked:

y le ingresamos el nombre del método tal como esta escrito en el .cs :

pero que tal si hacemos un poco mas compleja la aplicación con el método Clicked solo llamamos al método sin necesidad de declararlo en debajo del initcomponent crearemos 3 botones mas y usaremos otro Stacklayout pero en posición horizontal para que nos muestre los botones horizontalmente:

declaremos los métodos con el nombre que le dimos en el Clicked del XAML y un texto que cambiara el del único label principal:

nuestro resultado al ejecutarlo seria el siguiente los botones gracias al Stacklayout en forma horizontal y no vertical

tenemos nuestros textos hacia la izquierda ya que no colocamos el Stacklayout principal centrado se puede hacer si también hemos eliminado el centrado del label lo deseamos pero lo veremos mas adelante:


vídeo de resultado :



Comentarios:

  • Este Proyecto aun no tiene comentarios.
mode_edit