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”-->

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

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

<Canvas.Background>

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

 </Canvas.Background>

<!--Una vez definido el color de fondo, se va a crear dos lienzos, el primero es el lienzo de bienvenida llamado “inicio”, y el segundo lienzo es el lienzo donde se va a jugar propiamente dicho, este lienzo se llamará = ”juego”-->

<Canvas     Name="inicio">

   <Canvas.Background>

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

   </Canvas.Background>

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

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

     <Image  TouchDown=" btnJugar_TouchDown" Name="btnJugar" Stretch= "Fill"

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

     ImageFailed="image1_ImageFailed" VerticalAlignment="Center"

             HorizontalAlignment="Center"/>

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

    TouchDown =" botonSalir_TouchDown"></Image>

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

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

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

            <Canvas.Background>

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

            </Canvas.Background>

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

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

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

Width="120"  />

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

Width="120" />

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

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

            <Image Name="botonSalirJuego"

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

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

            <Image Name="FINJuego"

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

<Image Name="BotonRepetir" TouchDown ="BotonRepetir_TouchDown "

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

        </Canvas>

</Canvas>

 <!—Se finalize la ventana-->

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

------------------------------------------------------------------------------------------------------------------------

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

Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle Animales II

Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle Animales III

------------------------------------------------------------------------------------------------------------------------