‫Bienvenido de nuevo.
‫Y en este video, vamos a hablar sobre el cuadro de lista de paneles apilados, luego los tres lógicos y los tres visuales.
‫Entonces, en primer lugar, sigamos adelante y eliminemos esta cuadrícula porque aún no hemos tocado la cuadrícula.
‫Así que todavía no lo hemos usado correctamente, pero lo haremos en uno de los próximos videos.
‫Entonces, en lugar de una cuadrícula, quiero usar un panel de palo.
‫Un panel de estado me permite apilar elementos uno encima del otro, por lo que simplemente puedo seguir
‫adelante y agregar un bloque de texto aquí, por ejemplo, y simplemente escribiré el texto como texto simple de Hello World.
‫Como puede ver, ahora está mi texto del mundo.
‫Lo que también quiero hacer es alinearlo.
‫Entonces, la alineación horizontal, voy a usar el centro aquí.
‫Así que ahora estoy centrando el texto, como pueden ver aquí ahora en Texas, también centrado quizás en un pequeño
‫margen hacia todas las direcciones, que es 20.
‫Como puede ver, estoy usando un margen y solo digo 20, lo que dirá o creará un
‫margen hacia las cuatro direcciones de 20 píxeles.
‫Ahora, lo siguiente es un cuadro de lista, y quiero usar un cuadro de lista, solo para que veas cómo se ve uno.
‫Entonces, este cuadro de lista aquí actualmente está vacío, pero podemos cambiarlo muy fácilmente creando un elemento ListBox allí.
‫Así que sigamos adelante y creemos un elemento ListBox.
‫Y ese elemento debe tener el contenido de, digamos, el contenido es igual al elemento uno.
‫Y ahora, en lugar de tener una etiqueta de apertura y cierre, solo quiero tener esta versión más corta.
‫Así que utilicé este último año y Visual Studio lo suficientemente inteligente como para deshacerme de la etiqueta de cierre automáticamente.
‫Así que ahora este cuadro de lista tiene este elemento uno y solo lo voy a copiar y pegar varias veces.
‫Así que voy a tener el punto uno, dos y tres.
‫Y ahora este cuadro de lista ocupa todo el ancho.
‫Como puede ver, se necesita a todo el padre y es tan alto o tan alto como se requiere.
‫Por lo tanto, significa que solo se requiere tanto espacio como los elementos dentro de él estén en su altura.
‫Entonces, es más o menos, digamos, este elemento uno y el elemento dos y tres, cada uno tiene un empate de 30 píxeles.
‫Entonces, toda esta caja tendría solo 90 píxeles de altura.
‫Pero podemos cambiar eso, digamos, ajustando la altura.
‫Y solo voy a usar una altura de 100.
‫Como puede ver, es más alto que el objeto antes.
‫Y ahora creemos también un ancho.
‫También cien píxeles.
‫Ahora puede ver que esta caja es mucho más pequeña y encaja perfectamente.
‫Está bien.
‫Ahora, si quiero tener un margen hacia todas las direcciones, también puedo poner este elemento en el margen.
‫Pero como puede ver, debido a que este tiene un bloque de texto mundial, tiene un margen de veinte hacia todas las direcciones.
‫También hay una distancia entre esos dos elementos aquí entre el ListBox y el bloque de texto.
‫Ahora, si ejecutamos ese código, veremos que tenemos esta pequeña ventana principal, que es hermosa y
‫tiene nuestro cuadro de lista con sus elementos.
‫Entonces, como puede ver aquí en el mundo, el bloque de texto y luego esos elementos de la lista, puede hacer clic
‫en ellos, incluso puede seleccionarlos, como puede ver.
‫Pero no pasa nada más porque aún no hemos comprobado el evento, lo que haremos en el siguiente
‫video.
‫Bien, voy a cerrar eso de nuevo.
‫Y ahora hablemos rápidamente sobre lo lógico y lo visual.
‫Entonces, lo que tenemos aquí es un árbol lógico o podemos ver el árbol lógico en Zemel.
‫Entonces, el árbol lógico es una ventana dentro de esa ventana.
‫Tenemos un panel apilado dentro de ese panel apilado.
‫Tenemos un bloque de texto y un cuadro de lista.
‫Y dentro del ListBox tenemos el ListBox, elemento uno, ListBox, elemento dos y tres.
‫Entonces ese es el árbol lógico.
‫Prácticamente tienes varias ramas.
‫Va más y más profundo.
‫Entonces, la ventana tiene una rama de panel apilado que tiene dos ramas, y una de ellas es ListBox, que
‫también tiene ramas y así sucesivamente.
‫Entonces, como dije nuevamente, este es el árbol lógico.
‫Ahora echemos un vistazo al árbol visual, porque si, por ejemplo, agrego un botón aquí, lo
‫necesitaré para algo en un segundo.
‫Entonces creo un nuevo botón.
‫Le doy el contenido de Callignee.
‫Y también voy a agregar un método aquí al que se llamará cada vez que alguien haga clic.
‫Entonces estoy usando click here y estoy creando un nuevo controlador de eventos.
‫Y lo que eso hace por mí, crea un nuevo método llamado clic de botón.
‫Si miras, sabes, podemos ver que hay un método llamado Button Click, que tiene un remitente
‫de objeto y argumentos de evento enrutados llamados EHP.
‫Entonces, lo que esto hace es que se llamará a este método cada vez que hagamos clic en el botón y se ejecutará todo
‫lo que tengamos dentro del cuerpo de este método.
‫Entonces, digamos que usamos un cuadro de mensaje, algo que aún no hemos usado y llamamos a su método show.
‫Simplemente podemos mostrar un cuadro o un cuadro aparecerá como una pequeña ventana emergente y que nos mostrará algo de texto.
‫Así que algo así como gracias por hacer clic en mí.
‫Y el texto decía, haz clic en mí y bueno, el texto que aparecerá así, gracias por hacer clic en el cuadro de mensaje,
‫mostrará algo hermoso como gracias por hacer clic en mí.
‫Entonces, como puede ver, este botón haga clic en mí está justo debajo de nuestro cuadro de lista.
‫Entonces no, continúe y agregue un poco de distancia entre ellos.
‫Muy bien, espero que intentes hacer eso y podamos darle nuestro margen de botánica y solo voy a usar 20 nuevamente, o
‫podríamos haberle dado un margen a nuestro ListBox, pero darle al botón el margen debería estar
‫totalmente bien.
‫Entonces, si ejecuta el código, obtendremos este hermoso botón de clic aquí.
‫Entonces tenemos el mundo entero con el texto y demás o el cuadro de lista.
‫Y ahora, si hacemos clic en Hacer clic en mí, aparece este cuadro de mensaje y dice algo como, gracias por hacer clic
‫en mí y podemos hacer clic en Aceptar para cerrar ese cuadro de mensaje nuevamente.
‫Así que abrámoslo.
‫Como se puede ver.
‫Haz click en mi.
‫Gracias por hacer clic en mí.
‫Así que ese es un cuadro de mensaje y podemos usarlo de una manera, digamos, similar a la que hemos usado la
‫línea roja de la consola y nuestras aplicaciones de consola para propósitos de prueba.
‫Así que es genial.
‫Si queremos abrir algo después de un evento, simplemente abrimos un cuadro de mensaje para que sepamos, está bien.
‫Funcionó muy bien.
‫Así que ese es el botón y nuestro tres lógico.
‫Ahora echemos un vistazo al árbol visual.
‫Entonces, para obtener el árbol visual, hay varias formas.
‫Pero el que voy a usar es que voy a agregar un punto aquí, un punto de depuración, por lo que se ejecutará
‫en depuración cada vez que se ejecute esta línea de código.
‫Así que déjame iniciar el código o iniciar nuestro programa.
‫Ahora hago clic en el botón y nuestro programa se detiene y pasamos al modo de depuración.
‫Y aquí puedo ir al WP Free Visualizer.
‫Entonces, lo que voy a hacer es hacer clic en eso y abre el visualizador, que tiene el tratamiento
‫visual, que también tiene esas propiedades en la parte superior derecha o en el lado derecho.
‫Como puede ver, hay tantas propiedades para nuestro botón, por ejemplo, o para nuestro cuadro de lista,
‫también muchas propiedades.
‫E incluso me dice todos los valores de esas propiedades.
‫Y ni siquiera establecimos ninguno de esos.
‫Bueno, excepto por el margen tal vez.
‫Pero aparte de eso, no hay nada que hayamos configurado.
‫Y como puede ver, el fondo es amplio.
‫Eso siempre es bueno.
‫Así que también podríamos cambiar eso en el código.
‫Y, por cierto, lo importante aquí ahora es nuestro árbol visual.
‫Y puede ver algunos aspectos de nuestro árbol lógico aquí, así como, por ejemplo, puede ver la ventana principal,
‫luego verá el panel apilado y allí verá el cuadro sin trazado de texto y el botón.
‫Pero hay mucho más, como puede ver, la ventana principal tiene un borde, que no vemos en
‫el árbol lógico, pero sí árbol individual.
‫Luego tiene un decorador de donantes, un centro de contenido, que en realidad muestra el contenido, que es el
‫panel apilado.
‫Y el panel apilado, nuevamente, tiene un blog de texto, un cuadro de lista, que tiene un borde.
‫Entonces este cuadro tiene una vista de desplazamiento.
‫Entonces, si hay demasiados elementos para mostrar en la altura que ha hecho, tendrá una capacidad
‫de desplazamiento, entonces es una cuadrícula que contiene un rectángulo y un presentador de contenido de desplazamiento, que tiene un elemento para
‫el presentador que visualiza el panel de pila.
‫Y luego allí encontramos nuestro elemento ListBox uno, que nuevamente tiene un borde que tiene un presentador de contenido.
‫Y finalmente, podemos encontrar el bloque de texto.
‫Verá, aquí es un árbol muy, muy largo, con muchas ramas.
‫Pero al final, lo que puede encontrar son todos los diferentes elementos que están visualmente en su programa.
‫Y esto puede ser muy útil si desea obtener más información sobre lo que se representa o se usa en general
‫en su programa y lo que ha agregado a su programa, pero en general así es como puede averiguar todo
‫sobre el tratamiento visual.
‫Como puede ver, tenemos una cuadrícula dentro de nuestro cuadro de lista, que no configuramos nosotros mismos, pero está
‫ahí.
‫Derecha.
‫Y si hace clic en la cuadrícula, también puede encontrar las propiedades de esa cuadrícula en el lado derecho.
‫Visto bueno.
‫Así que eso fue todo para el árbol visual.
‫El árbol lógico.
‫Tenemos panel USEC y ListBox.
‫Usaremos ese panel mucho más en el futuro.
‫Así que acostúmbrate a eso.
‫Y si.
‫Y en el siguiente video, veremos los eventos.
‫Así que nos vemos allí.