‫Bienvenido de nuevo.
‫Y en este video, vamos a echar un vistazo más de cerca a Zemel y es posible que desee examinar esto.
‫Zemel es un tipo de lenguaje XML, como puede ver aquí en la parte inferior.
‫Y de hecho, lo voy a arrastrar aún más para que nos permita escribir nuestra interfaz de usuario para que no
‫tengamos que seguir adelante y arrastrar todos los elementos a nuestra GUI y ajustarlo allí.
‫Podemos hacer todo eso en código.
‫Ahora, se podría decir que soy más un tipo visual.
‫Quiero seguir adelante y arrastrar las cosas y estoy bien con eso mientras tú puedas hacer eso.
‫Pero entonces estás limitado a arrastrarte.
‫Y con el ejemplo, puedes ajustar mucho y puedes ajustar no solo esas cosas como esta envoltura, sino que has
‫visto en el último video puedes hacer mucho más y veremos qué es la vinculación de datos, qué
‫propiedades o propiedades de dependencia y y así sucesivamente, que son cosas que puede hacer con Zemel, que
‫nos permiten crear excelentes interfaces de usuario que son fáciles de mantener.
‫Entonces, aquí lo que puedes ver es esta ventana, en primer lugar.
‫Por lo general, lo que tienes es una etiqueta de apertura y una etiqueta de cierre.
‫Si conoce HTML, es posible que esté familiarizado con eso.
‫Tiene los tirantes de esquina y los tiene cerrándose también.
‫Por lo tanto, menos que firmar la palabra y luego mayor que el seno.
‫Y ves que tenemos lo mismo con la ventana y aquí también.
‫Luego un cierre.
‫También tiene la barra justo antes de la palabra.
‫Entonces esto es lo mismo para la cuadrícula, para la ventana para cualquier otra cosa.
‫Entonces, si quiero, por ejemplo, usar un botón, puedo seguir adelante y hacerlo.
‫Y si utilizo el signo más grande, automáticamente crea la etiqueta de cierre.
‫Ahora, lo que puedo hacer es hacer todos los ajustes dentro de la etiqueta de apertura.
‫Como puede ver aquí, Botón, puedo seguir adelante y, por ejemplo, agregarle contenido.
‫Entonces, hay muchas propiedades diferentes, como puede ver.
‫Y solo voy a usar la propiedad de contenido y solo voy a usar algo como Click me.
‫Ahora hay este botón en el centro, como puede ver, y dice, haga clic en mí.
‫Por supuesto, no tenemos altura.
‫No tenemos una con todo ese tipo de propiedades que aún no están configuradas.
‫Pero digamos que quiero que este botón tenga 50 píxeles de alto y luego quiero que tenga 100 píxeles de ancho, como puede ver.
‫Ahora, este es mi botón que he creado.
‫Por supuesto, podría haberlo arrastrado, pero hacer un ejemplo es bastante útil.
‫¿Y ahora qué?
‫Algo que no he abordado demasiado todavía y que no se requerirá hasta más adelante en el
‫curso.
‫Pero en general, lo que puede ver aquí son X y L y S, lo que significa, por ejemplo, espacio de nombres.
‫Y Zemel son las siglas de Extensible Application Markup Language.
‫Así que déjame agregar eso aquí.
‫Agreguemos un comentario.
‫Voy a usar un comentario como ese.
‫Como puede ver, este es Greeno y esto es más o menos un comentario.
‫Entonces puedo escribir algo aquí, como que Zemel es un lenguaje
‫de marcado de aplicaciones extensible.
‫Está bien.
‫Ahora, el botón, como puede ver, está aquí.
‫Y ahora sigamos adelante y hagamos algunas cosas más con los botones.
‫Así que creemos algunos botones adicionales, por favor.
‫Continúe y cree otro botón.
‫De acuerdo, espero que lo hayas probado, simplemente usa el nombre del botón aquí o la palabra clave y luego sigue adelante y crea el
‫botón adicional.
‫Ahora, puede que te preguntes, oh, no está posicionada correctamente.
‫Entonces tengo este botón y tiene el contenido con.
‫Hola.
‫Ahora, ¿por qué se encuentra este botón "Haz clic en mí" ahora?
‫Bueno, está dentro de la cuadrícula y desapareció porque estamos usando una cuadrícula para que los botones no aparezcan uno encima
‫del otro y así sucesivamente.
‫Entonces, si lo intentaste, lo habrás visto.
‫Y también analizaremos las cuadrículas más adelante.
‫Pero solo quería mostrarte eso por ahora.
‫Está bien.
‫Así que vamos a deshacernos de ese botón de nuevo.
‫Ahora tenemos este botón de hacer clic en mí y ejecutemos la aplicación para que podamos
‫ver cómo se ve realmente en la vida real y cómo todo esto puede hacer nuestra vida hermosa con solo hacer clic en él.
‫Entonces, como puede ver, puedo pasar el cursor sobre él y cambia su color y puedo hacer clic
‫en él y hace esta pequeña animación de clic y eso es todo.
‫Pero no pasa nada al hacer clic en él.
‫Y hay varias formas de implementar una función de clic.
‫Y lo haremos más adelante.
‫Derecha.
‫Así es como podemos crear un botón en el ejemplo.
‫Ahora, hay muchos elementos adicionales a los que podemos acceder aquí o propiedades.
‫Por ejemplo, podemos acceder a la propiedad de tamaño de fuente y aumentar el tamaño de fuente a, digamos, 32.
‫Así que ahora el botón no es tan ancho como el texto, así que ajustemos el ancho.
‫Así que ahora está bien.
‫Nuevamente, podemos ver el texto completo del botón, pero cuando juegas con el tamaño de fuente y
‫todos esos elementos, debes tener cuidado de que aún encaje.
‫Ahora, lo que también puede hacer es, en lugar de agregar el contenido aquí a la propiedad del contenido,
‫simplemente puede agregarlo dentro del texto del botón.
‫Entonces aquí voy a decir algo como, haz clic en mí.
‫Y como puede ver, está ahí.
‫Entonces, este es el contenido entre las etiquetas, es donde tienes tu contenido.
‫Así que esa es una forma de hacerlo.
‫La otra es simplemente usar la propiedad de contenido aquí y asignar el texto de esta manera, como hemos visto
‫antes.
‫Ahora, este botón de etiqueta de cierre no es necesario si simplemente cierra el botón de esta manera para poder cerrarlo de una
‫manera más corta de esa manera para que no necesite el botón de etiqueta de cierre.
‫Y otra forma de diseñar un botón es la siguiente.
‫Entonces, si ves algo así, también está bien.
‫Entonces creas la etiqueta de botón para el cierre y la apertura.
‫Y aquí tiene un punto de botón y luego puede seguir adelante y ajustar todas las propiedades diferentes que
‫desee.
‫Entonces, como puede ver, hay muchas propiedades diferentes a las que podemos acceder, por ejemplo,
‫el tamaño de fuente así.
‫Entonces puedo establecer el tamaño de fuente en 72 así, por ejemplo, y otra propiedad de botón que quiero ajustar porque digamos
‫el contenido para poder seguir adelante y solo el contenido en alto.
‫Así que ahora ves que hay un botón enorme con un tamaño de fuente de 72 y dice hola.
‫Así que ese es el enfoque número dos.
‫E incluso hay algo más que puedes hacer.
‫Así que ajustemos ese botón aún más.
‫Así que digamos que como contenido, no quiero tener solo un texto de hola allí.
‫Quiero ir aún más lejos.
‫Quiero agregar un panel de envoltura.
‫Ahora, lo que hace el panel es simplemente envuelve todos sus controles o elementos uno al lado del otro, de izquierda
‫a derecha.
‫Entonces, el primer elemento será, digamos, un bloque de texto.
‫Y hemos visto qué bloques de texto son el texto simple.
‫Y este va a decir multi.
‫Ahora, necesito otro bloque de texto y el tercero.
‫Eso dice múltiples, tres veces.
‫Pero ahora lo que puedo hacer es ajustar el color de cada aspecto.
‫Entonces, para cada bloque de texto.
‫Digamos que lo cambio a azul, luego esto tiene el primer plano.
‫Entonces, el primer plano es el color del primer plano y este será rojo.
‫Y finalmente, mi último bloque de texto tendrá el primer plano en blanco.
‫Y ahora, en lugar de multi, multi, multi, es un botón multicolor.
‫Y ahora tal vez queramos ajustar un poco el tamaño de la fuente, hagámoslo más pequeño también el primer
‫botón, como pueden ver, está oculto porque la cuadrícula solo muestra el último elemento si no están
‫asignados en la cuadrícula de la derecha. estructura, que veremos más adelante.
‫Pero deshagámonos del primer botón que teníamos.
‫Y ahora establezcamos también un tamaño de botón.
‫Así que sigamos adelante y usemos el botón con el que serán, digamos doscientos.
‫Y un botón de tercera altura, que será de 100.
‫Y así, ahí estamos y el tamaño de la fuente es demasiado grande para que quepa todo.
‫Entonces, si seguimos adelante y hacemos eso con 24, ahora está ahí.
‫Entonces, si ejecuto el código, tendré un botón multicolor, que tiene varios bloques de texto diferentes.
‫Y ahí estamos.
‫Entonces, para que lo veas, hay varios enfoques diferentes para hacerlo.
‫Si desea incluir varios aspectos en él, puede usar este panel.
‫Incluso puede usar una cuadrícula dentro del botón y usar la etiqueta de cuadrícula para crear
‫múltiples controles diferentes dentro de su botón.
‫Pero eso es algo que cubriremos más adelante.
‫Por ahora, es importante que comprenda que el ejemplo le permite hacer muchas cosas elegantes con su GUI
‫sin tener que arrastrar y soltar y también con control total sobre cómo se ven las cosas y qué hacen.
‫Lo que voy a hacer es comentar eso y les voy a mostrar cómo hacer lo mismo que hemos visto
‫aquí con código, porque lo hemos visto con código Zemel.
‫Pero también podemos hacerlo en código subyacente, lo que significa en C Sharp, que prácticamente aprendimos para toda
‫la clase hasta ahora o para todo el curso.
‫Así que vayamos al código subyacente.
‫Como puede ver, hay un buen archivo de ejemplo, que es el que hemos abierto aquí, la
‫demostración de la ventana principal y nuestro archivo de ejemplo tiene un código detrás del archivo, que es un Zemel total.
‫Ese archivo de caso y este es un archivo de C nítido, lo que significa que tenemos una clase parcial de C
‫nítido aquí, que ahora podemos usar para ajustar o crear nuestra interfaz de usuario.
‫Y como puede ver, se llama Ventana principal y hereda de window.
‫Y aquí tenemos un método llamado Ventana principal, que es similar al método principal en nuestras aplicaciones de consola que
‫hemos visto hasta ahora.
‫Este se llama tan pronto como se abre la ventana o tan pronto como se inicia la aplicación.
‫Y como puede ver aquí, hay un componente inicializado llamado que simplemente inicializa todo lo demás
‫que se requiere para que se ejecute nuestra ventana.
‫Por ejemplo, inicializa el título y se inicializa al tamaño y así sucesivamente.
‫Y ahora podemos seguir adelante y escribir nuestro propio código aquí.
‫Entonces, primero te mostraré cómo crear un botón.
‫Entonces, en primer lugar, necesitamos una cuadrícula en la que podamos asignar ese botón.
‫Así que lo llamaré cuadrícula, que es una nueva cuadrícula.
‫Luego dije el contenido de esto a mi cuadrícula, pero lo que bastará es simplemente decir la ventana principal.
‫Debería tener algo de contenido.
‫Correcto, como hemos visto en el archivo de ejemplo.
‫Entonces, ventana esta etiqueta aquí se abre y todo lo que hay entre esas etiquetas de apertura y cierre es mi.
‫Prácticamente todo este contenido aquí.
‫Este es el contenido de mi ventana.
‫Y lo que digo aquí es que el contenido debería ser la cuadrícula.
‫Entonces creamos una nueva cuadrícula como hemos visto aquí.
‫Así que aquí también tenemos una cuadrícula, que es como abrir y cerrar la etiqueta de la cuadrícula aquí.
‫Y ahora dije eso como su contenido y ahora puedo agregar cosas a esta cuadrícula.
‫Por ejemplo, puedo agregar un botón a la cuadrícula.
‫Primero que nada, creemos ese botón y lo llamaré BGN será un nuevo botón.
‫Ahora tengo ese botón y puedo ajustar sus propiedades, así que digamos que quiero establecer el tamaño de fuente de
‫mi botón y simplemente puedo hacerlo de esa manera.
‫Simplemente puedo decir que será algo así como 26.
‫Ahora, en nuestro botón, como ha visto aquí, teníamos un panel de ajuste, que es el contenido del botón.
‫Entonces, lo que voy a hacer es crear un panel para ese panel y lo llamaré un
‫panel que será un nuevo panel envolvente.
‫Ahora podemos agregar cosas al panel de envoltura.
‫Agregamos el panel de envoltura al botón y agregamos el botón malo a la cuadrícula.
‫Y la grilla ya forma parte de nuestro contenido.
‫Así que ahora sigamos adelante y creemos todo lo que queremos agregar al panel y agregarlo a eso.
‫Así que primero necesitamos bloquear el texto.
‫Y el bloque de texto, como ha visto aquí, es este de aquí.
‫Entonces creamos uno, dos, tres bloques de texto.
‫El primero va a estar en 60 va a ser un nuevo bloque de texto.
‫Y simplemente digo el texto por mensaje de texto.
‫Entonces tiene un apoyo de texto. , este texto aquí, que es el contenido.
‫Entonces, para el botón, el contenido se llama contenido y para el bloque de texto, el texto en sí se llama
‫texto.
‫Así que tuvimos acceso a la propiedad text de nuestro bloque de texto y le dijimos eso a multi.
‫Luego, a continuación, establecemos el color.
‫Entonces, el texto que el primer plano va a ser un pensamiento de pinceles.
‫¿Y qué color tenía primero para el multi y era el azul?
‫Está bien.
‫Así que voy a hacer eso azul.
‫Y como ves, pinceles, bueno, el texto se hace con pinceles o el color del texto se hace con la clase
‫de pinceles.
‫Entonces necesito usar esta clase sin escobillas y luego acceder a su color.
‫Así que pincel de color sólido de tipo pinceles.
‫Y luego puedo agregar eso al panel rec.
‫Entonces, ahora que tengo el texto conectado al panel, lo hago accediendo a sus hijos y agregando
‫mi texto.
‫Así es como agrego un bloque de texto.
‫Y si ejecutamos ese nada, no veríamos nada todavía porque aún no agregamos el panel de repeticiones al botón
‫ni el botón a la cuadrícula.
‫Pero lo haremos en un segundo.
‫Así que sigamos adelante y ajustemos el texto o ajustemos esas tres partes nuevamente.
‫Entonces, lo que hacemos a continuación es agregar solo un texto a varios colores y el último fue un botón.
‫Y ahora teníamos el color rojo y teníamos el color blanco.
‫De acuerdo, simplemente copié y pegué esas tres líneas porque son iguales.
‫No necesito crear un nuevo bloque de texto cada vez que agrego el anterior.
‫Y luego me ajusté.
‫O ajuste sus valores y luego nuevamente a los paneles rojos.
‫Ahora, si esos tres textos en mi panel de ajuste y lo que puedo hacer ahora es, puedo agregar el panel rojo a mi botón.
‫Entonces, botón, ese contenido va a ser mi panel rojo y, finalmente, la cuadrícula de los niños, ese anuncio.
‫Y aquí agrego mi botón.
‫Así que de eso estaba hablando.
‫Entonces tenemos la cuadrícula, tenemos el botón, tenemos el panel de envoltura.
‫Y ahora agregamos ese texto al panel.
‫Agregamos el panel rojo al botón, agregamos el botón a la cuadrícula y agregamos la cuadrícula a la ventana.
‫Y como puede ver, así es como puede hacerlo con código.
‫Y antes de ejecutar el código, lo que tengo que hacer es comentar la cuadrícula también.
‫Entonces, en realidad, solo puedo tener la ventana.
‫Entonces, solo hay una ventana en nuestra ventana principal, por ejemplo, archivo y todo el otro código está dentro
‫de nuestro ensamblaje de ventana principal que se encuentra, que es el código detrás.
‫Entonces este archivo es el código detrás de nuestra ventana principal que Zemel.
‫Ahora, hay una cosa que falta antes de probar eso, y es que asigno un nuevo bloque de impuestos a mi
‫texto.
‫Así que necesito hacer eso para mis dos textos.
‫Entonces la cosa es que bien, creamos un texto aquí y lo inicializamos con un nuevo bloque de texto.
‫Y ahora necesitamos crear un nuevo bloque de texto y asignarlo a nuestro texto antes de que podamos agregarlo a nuestro panel de
‫representantes.
‫Entonces ahora tenemos que podemos ejecutar el código.
‫Y veremos que también tenemos nuestro botón multicolor, y como pueden ver, hemos hecho lo mismo que hemos
‫hecho antes con Zemo, que era esto de aquí, que también se ve bastante simple y ordenado.
‫Lo hicimos con código C agudo como ese.
‫Ahora puedes seguir el camino que prefieras, pero principalmente trabajaremos con Zemel.
‫Solo quería mostrarte que puedes hacer todo lo que hagas con ellos, todo lo que puedes hacer con el código subyacente
‫también.
‫Pero a veces tiene mucho más sentido usar código subyacente.
‫Entonces, por ejemplo, si desea agregar algo dinámicamente, entonces el código detrás tiene más sentido.
‫Entonces, ejecutarlo con C sharp o hacer los ajustes con C Sharp y Zemel tiene más sentido
‫cuando tiene interfaces de usuario estáticas.
‫Y, por cierto, cada vez que crea el archivo Zemel como el que tenemos aquí, lo que hace es seguir
‫adelante y crear este código detrás del archivo.
‫Entonces simplemente crea este código y lo ejecuta una vez que la aplicación comienza a ejecutarse, una vez que se captura nuestra ventana
‫principal.
‫Así que está hecho de todos modos.
‫Y lo hacemos así con Zemo o lo hacemos manualmente creando el código.
‫Entonces ahora, por supuesto, podría argumentar, oye, hay algo como esto y decidir qué no ha dicho,
‫bueno, puedo hacerlo muy fácilmente aquí.
‫Simplemente podría decir botón de ese ancho y podría establecer eso en ciento cincuenta y botón esa altura
‫y establecerlo en cien, por ejemplo.
‫Luego, el botón se ajustará en consecuencia.
‫Y como puede ver ahora, ya está distribuido en dos líneas, por lo que es Zemel y el código detrás del código.
‫Sé que fue un video largo, pero veremos cosas aún más interesantes en el próximo video.
‫Así que te veré allí.