Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle 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” -->

< < /span> 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-->

< < /span> 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 -->

< < /span> Canvas.Background >

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

  < /< /span> Canvas.Background >

< < /span> Canvas         Name ="inicio">

    < < /span> Canvas.Background >

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

    < /< /span> Canvas.Background >

< !— En este lienzo se situará n dos imá genes que será n usados como botones:< /span>

“ btnJugar” que redirigirá al juego, y el “ btnSalir” que cerrará la aplicació n-->

        < < /span> Image   TouchDown =" btnJugar_TouchDown" Name ="btnJugar" Stretch = "Fill"

        Source ="/PuzleAnimalTouch; component/Images/BotonJugar.png" ForceCursor ="True"  

        ImageFailed ="image1_ImageFailed" VerticalAlignment ="Center"

                        HorizontalAlignment ="Center"/>

        < < /span> Image Name ="botonSalir" Source ="/PuzleAnimalTouch; component/Images/botonSalirNormal.png"

      TouchDown =" botonSalir_TouchDown"> < /< /span> Image >

< /< /span> Canvas >

< !— Este es el segundo lienzo sobre el que se situará n los animales con los cuales se va a interactuar; ademá s tambié n estará n los botones de “ SalirDelJuego” y “ Repetir” .< /span>

Este lienzo será invisible en primera instancia, para que solo sea visible si se pulsa sobre el botó n “ jugar” del lienzo “ inicio” , con lo cual dicho lienzo pasarí a a estar el oculto y el lienzo “ Juego” pasarí a a estar en primer plano totalmente visible-->

< < /span> Canvas Name ="juego"   Visibility ="Hidden">

                      < < /span> Canvas.Background >

                              < < /span> ImageBrush ImageSource ="/PuzleAnimalTouch; component/Images/fondo.jpg" />

                      < /< /span> Canvas.Background >

                      < < /span> Image   Canvas.Left ="134" Canvas.Top ="228" Height ="120" Name ="image12"

Stretch ="Fill" Width ="120"   />

                      < < /span> Image   Canvas.Left ="422" Canvas.Top ="227" Height ="120" Name ="image2" Stretch ="Fill"

Width ="120"   />

                      < < /span> Image   Canvas.Left ="132" Canvas.Top ="407" Height ="120" Name ="image3" Stretch ="Fill"

Width ="120" />

                      < < /span> Image     Canvas.Left ="423" Canvas.Top ="411" Height ="120" Name ="image4"

Stretch ="Fill" Width ="120"   />

                      < < /span> Image Name ="botonSalirJuego"

Source ="/PuzleAnimalTouch; component/Images/botonSalirNormal.png"

TouchDown =" botonSalirJuego_TouchDown " VerticalAlignment ="Top" HorizontalAlignment ="Right" FlowDirection ="LeftToRight" > < /< /span> Image >

                      < < /span> Image Name ="FINJuego"

Source ="/PuzleAnimalTouch; component/Images/textomuybien.png"> < /< /span> Image >

< < /span> Image Name ="BotonRepetir" TouchDown ="BotonRepetir_TouchDown "

Source ="/PuzleAnimalTouch; component/Images/botonrepetir.png"> < /< /span> Image >

              < /< /span> Canvas >

< /< /span> Canvas >

  < !— Se finalize la ventana-->

< /< /span> 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 .