0% encontró este documento útil (0 votos)
15 vistas2 páginas

Introducción a XAML en Xamarin

Este código describe una aplicación móvil para calcular el índice de masa corporal (IMC) utilizando XAML y C#. El código XAML define la interfaz gráfica con campos para ingresar la altura y el peso, así como botones. El código en C# implementa el evento del botón para calcular el IMC, validar los resultados y mostrar un alerta con el estado de peso del usuario.
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
15 vistas2 páginas

Introducción a XAML en Xamarin

Este código describe una aplicación móvil para calcular el índice de masa corporal (IMC) utilizando XAML y C#. El código XAML define la interfaz gráfica con campos para ingresar la altura y el peso, así como botones. El código en C# implementa el evento del botón para calcular el IMC, validar los resultados y mostrar un alerta con el estado de peso del usuario.
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Codigo de XAML

<?xml version="1.0" encoding="utf-8" ?>


<ContentPage xmlns="[Link]
xmlns:x="[Link]
x:Class="[Link]"
<!--Esta linea de codigo nos incluye el material de visual
material
el cual hace que se puedan cambiar los colores de algunos elementos de la
interfaz de XAML--!>
Visual="Material">

<!--Inicio del stackLayout tambien conodido como un contenedor, esta seccion en


html se podria presentar como
un body o un div--!>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center"
WidthRequest="250">
<!--Esta es una etiqueta de texto--!>
<Label Text="Calcula tu IMC" FontAttributes="Bold" FontSize="50"
HorizontalTextAlignment="Center" TextColor="#565168"/>
<!--Este es un tipo de input, en el que pueden ingresar datos para su
posterior lectura y operacion--!>
<Entry Placeholder="Altura" x:Name="Altura" Keyboard="Numeric"/>
<Entry Placeholder="Peso" x:Name="Peso" Keyboard="Numeric"/>
<!--Este entry esta validado para que no se pueda escribir en el--!>
<Entry Placeholder="Tu IMC" x:Name="IMC" IsEnabled="False"/>
<!--Este boton tiene un evento el cual nos calcula el imc, el evento se
crea desde cs--!>
<Button Text="Calcular" Clicked="Button_Clicked"
BackgroundColor="DarkGoldenrod"/>
</StackLayout>
<!--Fin del StackLayout--!>

</ContentPage>

Codigo de cs
using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace App1
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();//Se inicializa el codigo de xaml, es decir
la interfaz
}

private void Button_Clicked(object sender, EventArgs e) //Se inicializa


el evento que declaramos en XAML
{
//Se valida si la caja de texto no esta vacia, en caso de que no
este vacia realizara lo siguiente
if(![Link]([Link]) &&
![Link]([Link]))
{
//jalamos las varuables por medio del x:name que le dimo en la
seccion del xaml
var altura = [Link]([Link]);
var peso = [Link]([Link]);
//realizamos el calculo del imc
var imc = peso / (altura * altura);
//convertimos dicho calculo a texto y lo mostramos en el entry
con el que declaramos el x:name de IMC
[Link] = [Link]();
string resultado = "";
//En base al resultado del IMC, se dara un mensaje dependiendo
de la validacion que se de
//otra forma de aplicarlo seria por medio de un switch
if (imc < 18.5)
{
resultado = "Tienes bajo peso";
}
else if (imc >= 18.5 && imc <= 24.9)
{
resultado = "Tu peso es normal";
}
else if (imc >= 25 && imc <= 29.9)
{
resultado = "Tienes sobrepeso";
}
else
{
resultado = "Tienes obesidad, Cuidate!";
}
//Una vez que nos aroje la validacion, mostraremos el resultado
en un alert, es decir una ventana alterna
//el primer parametro es el titulo del alert, el segundo lo que
se mostrara, y el tercero el texto del boton para quitar dicho alert
DisplayAlert("Resultado", resultado, "Ok");
}
else
{
//En caso de que detecte que alguno de los inputs estan vacios,
mandara el siguiente alert
DisplayAlert("Datos erroneos", "Por favor llena toda la
informacion", "Ok");
}

}
}
}

También podría gustarte