Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzle Animales I

Debido a la buena acogida que han tenido las series de entradas de reciente publicación Inertia y Manejador de Gestos sobre el desarrollo de aplicaciones para dispositivos Tablet Multitouch con Ms Windows 7, y teniendo en consideración la petición de varios usuarios suscritos al canal de RSS de Windows Técnico , se va a iniciar el desarrollo de algunas entradas adicionales en torno al desarrollo de código de las aplicaciones de ejemplo disponibles en el canal MS Windows 7 Multitouch en " CodePlex ",

En esta ocasión se va a llevar a efecto en análisis en mayor detalle y paso a paso del código que se encuentra por detrás del proyecto " PuzleAnimales " .

Estructura del proyecto

Como se puede ver en el árbol de la solución del proyecto " puzleanimales ", dicha solución cuenta con tres ficheros de " Windows Presentation Fundation " (WPF): el primero es " App.xaml " que es el punto de entrada principal para la aplicación y cuyo fichero análogo en una aplicación ". Net " sería la clase " program.cs ". En segundo lugar se puede ver " MainWindow.xaml " que es una primera ventana que se corresponde con la interfaz de bienvenida a la aplicación, en ella se va a encontrar un botón " Jugar " y un botón " Salir ", si se pulsa sobre la pantalla jugar, el lienzo principal es reemplazado por el lienzo de juego que a su vez está compuesta por cuatro objetos de tipo imagen que serán cargados en tiempo de ejecución, estos elementos son controles de usuario, cuyo código de diseño se encuentra en " UserControl1.xaml "   y código funcional se encuentra en " UserControl1.xaml.cs "  

Antes de empezar con el desarrollo del código cabe mencionar que es totalmente necesario importar tres librerías, las cuales se van a resaltar en la siguiente imagen.

Librerías importantes que deben ser referenciadas en el proyecto.

MainWindow

< !—La aplicación automáticamente va a establecer los esquemas "xmlns"-->

< < /font> Window x : Class ="PuzleAnimalTouch.MainWindow"

              xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

              xmlns : i ="http://schemas.microsoft.com/expression/2010/interactivity"

              xmlns : ei ="http://schemas.microsoft.com/expression/2010/interactions"

              xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"

Title ="MainWindow"   xmlns : my ="clr-namespace:PuzleAnimalTouch" Loaded ="Window_Loaded" WindowState ="Maximized" SizeToContent ="Manual" ResizeMode ="NoResize" WindowStyle ="None">

< !—En este punto se va a declarar el lienzo genérico sobre el cual se va a trabajar-->

< < /font> Canvas     Name ="canvas1" Width ="{ Binding SizeW }" Height ="{ Binding SizeH }" >

< !—Como imagen de fondo se colocara el archivo FondoPuzzle.png que se encuentra en la carpeta Images -->

< < /font> Canvas.Background >

        < < /font> ImageBrush ImageSource ="/PuzleAnimalTouch; component/Images/FondoPuzzle.png"/>

  < /< /font> Canvas.Background >

< /< /font> Window >

Después de conocer el fichero "MainWindow.xaml" , sería conveniente ver el código que se sitúa por detrás de esta clase, la cual genera todo el comportamiento de la aplicación y que hace especial mención a las librerías de audio de Windows Media Player, así como uso de las particularidades de las librerías " Microsoft.Expression.Interactions " y " System.Windows.Interactivity" de "Microsoft Expresion Blend " para el manipulado de objetos.

Para dar un marco de guía sobre lo que se va a desarrollar se puede ver el siguiente esquema donde se ve plasmado todos y cada uno de los elementos de los que está compuesto esta clase.

Esquema de la clase" MainWindow"

Ahora se pueden describir con más facilidad los atributos de la clase:

·                 Completado : Numero entero que representa el número de animales que han sido encajado correctamente, al llegar este valor a 4 será consecuencia de que el puzle se ha completado exitosamente.

·                 fin1, fin2, fin3, fin4 : Estos valores son de tipo cadena y representan localización de la imagen que será visible cuando un animal sea encajado correctamente.

·                 Handle : Argumento que será usado por referencia por los métodos " midiOutClose " y " midiOutOpen "y " midiOutShortMsg "

·                 SonidoFinal : Valor de tipo cadena que representa el sonido que se podrá escuchar al finalizar con éxito el puzle.

·                 u1, u2, u3, u4 : Estos valores corresponden a cuatro controles de usuario, que serán creados y situados en tiempo de ejecución. Dichos controles serán los elementos con los que se va a interactuar durante el juego.

En el siguiente post se detallará el comportamiento de las funciones de la clase " MainWindow " así como también se procederá a describir el funcionamiento del control de usuario "ControlUser1" .

Si deseas continuar informado sobre las publicaciones de desarrollo, seguridad y novedades en torno a las tecnologías Microsoft no dudes en suscribirte al canal de RSS de Windows Técnico .