XAML es un lenguaje de etiquetas(declarativo) basado en XML, con el cual se puede diseñar interfaces de usario enriquecidas (manejo mutimedia, animaciones, colores degradados y mucho mas...).
Para más información de click Aquí
XAML, se genera de manera practimante automatica, al usar las herramientas graficas incluidad en el toolbox de Visual Studio 2010 o las herramientas dispuestas para este fin en Expression Blend, por ejemplo:
Voy a crear una aplicación Silverlight de nombre "Prueba3".
Agregare un "Rectagulo", usando las herramientas Gráficas de Expression Blend, y entre sus propiedades configurare que su color sea azul, asi mismo con herramientas Gráficas.
Esto me genera de forma automatica un XAML, que muestro a continuación:
El XAML que se genera de forma automatica, si lo revisan dentro del Grid de nombre LayoutRoot coloca un Rectangle de Fill '#FF0404F3' (relleno Azul), y Stroke(línea de borde) Negra (Black), así mismo hace referencia a la ubicación del mismo dentro del LayoutRoot su Alineación y Margeneas, además por ultimo define el tamaño del Rectangulo con sus Propiedades Height y Width.
Todo esto fue hecho con herramientas Gráficas, sin que yo digitara ni una sola línea de código.
Pero tambien es posible generar XAML de forma dinámica usando C# o Vb.Net, es decir el código de fondo que da la funcionalidad a la aplicación, puede generar tambien parte o toda la Interfaz Gráfica.
Para esto he preparado un Ejemplo, consiste en un juego de 3 en Rayas, hecho totalmente con XAML dinámico, es decir, en mi caso completamente generado con C#, mediante el uso de un Class Library.
Antes de comenzar les muestro una gráfica donde planifique previo a la digitación del código (ya que al trabajar con C#, no puedo ver lo que estoy diseñando en tiempo de diseño, solo se puede ver en Tiempo de Ejecución).
Planeo crear en el Layouroot 6 Celdas, si se fijan para crear este numero de celdas seria necesario 3 columnas y 3 filas, juestamente comenzare haciendo esa división en el Laouytroot, luego dentro de cada celda colocare un Border (Revisar elementos de agrupación en Silverlight), en este border configurare su propiedad Tap, al usario dar tap se creara ya sea un elipse o un cuadrado, dependiendo de que jugador este en su respectivo turno.
Al final validarare la victoria de la forma más obvia, primero por Columnas, Luego por Filas, y por Ultimo por las 2 Diagonales.
Pasos a seguir:
1.- Abrir un nuevo proyecto en Visual Studio 2010 (en mi caso usare un proyecto de tipo Windows Phone Application, pueden trabajar tambien con Siverlight o WPF) de nombre "3_en_raya".
2.- Dentro de este proyecto agregare un Class Library (en mi caso un Windows Phone Class Library) de nombre "Juego".
Así iria quedando mi proyecto.
3.- Agregaremos la referencia del Class Library en el Proyecto.
*1.- En el constructor de clase, crearemos las respectivas divisiones para las filas y columnas dentro del grid.
*2.- Agregaremos las divisiones antes creadas al Grid.
*3.- Definiremos los Bordes, que vamos a colocar dentro de cada celda del Grid.
*4.- Agregaremos lo antes definido al Grid.
*5.- Definire variables que usare más adelante para la programación de la Victoria en el juego 3 en Raya.
*6.- Ahora ya puedo configurar los eventos Tap, de los Border que antes agregue.
Colocare 3 eventos tap como ejemplo.
Para definir si colocar si es un Elipse Verde o un Cuadrado Azul, usare una validación simple, si el contador que defini es Par entonces se genera un elipse verde, caso contrario se generara un cuadrado rojo.
Además, Aquí defino la ubicación donde pondre los respectivos elipse (para esto recomiendo ver el gráfico de la planficación hecho en pizarra que esta más arriba en este articulo), por ejemplo la ubicación Columna 0, Fila 0, corresponde a la esquina superior izquierda.
NO olvidar que debe haber un evento Tap, por cada Border.
Si, vieron con calma, podrán notar que en cada tap ejecuto un Método "validar_ganador", que recibe como parametro los string que guardan el "R" si es un rectangulo y "E" si es un elipse, estos string son los que uso para hacer la validación de victoria.
*8.-Adjunto el método que mencione anteiormente:
5.- Por el lado del MainPage de nuestro proyecto Principal, tocaría hacer la referencía a esta Biblioteca de Clases dentro del XAML del Grid (en mi caso se llama Content Panel).
Solo me faltaría agregar el "Class1.cs" como referencía para que sea esta clase la que defina el contenido del Grid.
Les muestro unas capturas del proyecto en Ejecución:
Para descargar el Ejemplo de Click Aquí.
Nombre: "3_en_raya".
No hay comentarios:
Publicar un comentario