3 - Controles Button, TextBox y TextBlock


En el concepto anterior vimos los pasos para crear una aplicación en la plataforma universal de Windows. Ahora repasaremos el concepto anterior e incorporaremos dos nuevos controles visuales llamados TextBox y TextBlock.

El control TextBlock permite mostrar una cadena de caracteres en la pantalla de nuestro dispositivo, en cambio el control TextBox permite cargar al usuario de nuestro programa una cadena de caracteres.

Desarrollaremos una aplicación mínima que muestre su funcionamiento.

Problema

Desarrollar una aplicación que permita ingresar dos valores enteros y al presionar un botón mostrar la suma de los valores ingresados.

Como primer paso creamos un nuevo proyecto llamado "Proyecto2" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto:

nuevo proyecto visual Studio 2015

Seleccionamos el archivo MainPage.xaml desde el "Explorador de soluciones" y procedemos a implementar la siguiente interfaz en nuestro formulario:

TextBlock TextBox Button aplicacion universal windows visual Studio 2015

Arrastramos desde el "Cuadro de herramientas" objetos de las clases Button, TextBlock y TextBox. Por el momento no nos preocuparemos que nuestra interfaz visual quede bonita, ya veremos luego los pasos que debemos dar para que nuestra aplicación se vea correctamente en un celular, en una tablet, en una máquina de escritorio etc.

Seleccionar el botón y cambiar la propiedad Content desde la ventana de propiedades:

propiedad Content Button aplicacion universal windows visual Studio 2015

Si queremos cambiar los nombres de los objetos debemos seleccionar el objeto y acceder a la propiedad "Nombre" que está en la parte superior de la ventana de "Propiedades", cambiemos los nombres de los dos TextBox por text1 y text2, también vaciemos la propiedad "Text" para que aparezca vacío el TextBox:

propiedad Nombre Text TextBox aplicacion universal windows visual Studio 2015

De forma similar cambiemos el nombre del segundo TextBox por valor2 y vaciemos también su texto inicial:

propiedad Nombre Text TextBox aplicacion universal windows visual Studio 2015

La propiedad "Content" del botón iniciarla con el texto "Sumar".

Al TextBlock iniciar la propiedad "Text" con el texto "resultado":

propiedad  Text TextBlock aplicacion universal windows visual Studio 2015

Ahora pasamos a definir el evento Click para el botón. Desde la ventana de propiedades presionamos el ícono de eventos y hacemos doble clic sobre el evento "Click":

evento Click Button aplicacion universal windows visual Studio 2015

Al hacer doble clic sobre el evento "Click" se abre automáticamente el archivo MainPage.xaml.cs con el método button_Click añadido:

evento Click Button aplicacion universal windows visual Studio 2015

En el método button_Click debemos implementar el algoritmo para sumar los dos valores que carga el operador por teclado y mostrar dicha suma en el TextBlock.

        private void button_Click(object sender, RoutedEventArgs e)
        {
            string s1 = text1.Text;
            string s2 = text2.Text;
            int nro1 = int.Parse(s1);
            int nro2 = int.Parse(s2);
            int suma = nro1 + nro2;
            textBlock.Text = "La suma es=" + suma;
        }

Si ejecutamos ahora la aplicación (en modo "Equipo Local") podemos ver la siguiente interfaz:

aplicacion en ejecucion evento Click Button aplicacion universal windows visual Studio 2015

Si cambiamos de emulador (celular, tablet, equipo local) el programa sigue funcionando sin cambios (luego veremos como hacer que la interfaz se adapte a la pantalla del dispositivo):

aplicacion en ejecucion emulador celular universal windows visual Studio 2015

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto2.zip

Retornar