6 - Control ComboBox


El uso más común del control ComboBox es seleccionar una opción entre un conjunto de opciones.

Problema

Desarrollar una aplicación que permita ingresar dos valores enteros, mediante un control de tipo ComboBox permitir seleccionar si queremos sumarlos o restarlos, al presionar un botón mostrar el resultado en un control TextBlock.

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

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

TextBlock TextBox Button ComboBox aplicacion universal windows visual Studio 2019

Arrastramos desde el "Cuadro de herramientas" objetos de las clases ComboBox, Button, TextBlock y TextBox.

Seleccionar el ComboBox, definimos su Nombre y presionamos el botón de la propiedad Items:

propiedad Items ComboBox aplicacion universal windows visual Studio 2019

En este diálogo agregamos dos ComboBoxItem:

propiedad ComboBoxItem ComboBox aplicacion universal windows visual Studio 2019

Cargamos en las propiedades Content de cada ComboBoxItem las etiquetas "sumar" y "restar":

propiedad Content ComboBoxItem ComboBox aplicacion universal windows visual Studio 2019

También iniciamos las propiedades para el Button y los TextBox como lo hicimos en conceptos anteriores:

propiedad Content TextBox aplicacion universal windows visual Studio 2019

Igual el segundo TextBox:

propiedad Content TextBox aplicacion universal windows visual Studio 2019

y el TextBlock:

propiedad Content TextBox aplicacion universal windows visual Studio 2019

Iniciamos las propiedades Content y Nombre del Button:

propiedad Content Button aplicacion universal windows visual Studio 2019

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 2019

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

En el método Boton1_Click debemos implementar el algoritmo para sumar y/o restar los dos valores que carga el operador por teclado según que operación eligió en el ComboBox y mostrar dicho resultado en el TextBlock.

        private void Boton1_Click(object sender, RoutedEventArgs e)
        {
            string s1 = text1.Text;
            string s2 = text2.Text;
            int nro1 = int.Parse(s1);
            int nro2 = int.Parse(s2);
            ComboBoxItem item = (ComboBoxItem)combo1.SelectedItem;
            if (item.Content.ToString() == "Sumar")
            {
                int suma = nro1 + nro2;
                textblock1.Text = "La suma es=" + suma;
            }
            if (item.Content.ToString() == "Restar")
            {
                int resta = nro1 - nro2;
                textblock1.Text = "La resta es=" + resta;
            }
        }

Accedemos a la propiedad SelectedItem del ComboBox y almacenamos el valor devuelto en la variable item que debe ser de la clase ComboBoxItem.

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

ComboBox aplicacion universal windows visual Studio 2019

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

Retornar