En la anterior entrada de la serie, “Desarrollo de aplicaciones MS Windows 7 Multitouch: SonidoAnimales II", se hizo mención de que en esta oportunidad se va a describir el funcionamiento del control de usuario llamado “UserControl1”, utilizado para interactuar con los objetos de la aplicación “SonidosAnimales” ,disponible desde hace ya un tiempo en el canal “codeplex” en sus versiones: ejecutable, instalable y código fuente (Source Code en inglés) para los que deseéis hacer un análisis de él.

Aplicación en ejecución

De los controles de usuario lo primero que hay que resaltar es el uso, una vez más, de las librerías propias de MS Windows7 Multitouch como “Interartivity” e “Interactions”, para el manipulado de dicho control. Además está formado por dos objetos bastante conocidos, como son “Image” y “TextBlock”, ya que se mostrará el nombre del animal por encima de la imagen cuando se  pulse sobre este. Para comprender mejor el diseño de “UserControl1”, en las líneas siguientes se mostrará el código XAML de la clase con algunos comentarios adicionales que describirán los motivos por los cuales fueron introducidos en la definición de este control de usuario.

<UserControl x:Class="JuegoSonidosAnimales.UserControl1"

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

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

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

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

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

             mc:Ignorable="d"

     d:DesignHeight="104" d:DesignWidth="200" MouseLeftButtonDown="UserControl1_Click"

     MouseLeftButtonUp="UserControl1_MouseUp"  Loaded="UserControl_Loaded"

     IsManipulationEnabled="True" VisualTextHintingMode="Animated" Visibility="Visible"

     TouchDown="UserControl_TouchDown" TouchUp="UserControl_TouchUp">

<!—Se utiliza el Interaction Bahavior para dotar de movimiento al control de usuario-->

<i:Interaction.Behaviors>

        <ei:TranslateZoomRotateBehavior    ConstrainToParentBounds="True">

        </ei:TranslateZoomRotateBehavior>

</i:Interaction.Behaviors>

<!—En este proyecto se definirá el lienzo llamado “canvas1” y con sus respectivas dimensiones-->

<Canvas Height="107" Name="canvas1" Width="204">

<!—Para definir este control de usuario se hará uso de una imagen, y de un bloque de texto que estará colocado exactamente sobre el centro de la imagen del animal-->

  <!—Imagen del animal con el que se va a interactuar-->

   <Image  Canvas.Left="2" Canvas.Top="0" Height="105" Name="image1" Stretch="Fill"

Width="200" Source="/JuegoSonidosAnimales;component/Images/caballo.jpg" Opacity="1">

            <Image.Effect>

                <DropShadowEffect></DropShadowEffect>

            </Image.Effect>

   </Image>

  <!—Cuadro de texto para informar sobre el animal que se esta pulsando-->

   <TextBlock Canvas.Left="58" Canvas.Top="37" Name="textBlock1" Text="TextBlock"

Visibility="Hidden" FontWeight="Black" FontSize="24" FontStretch="Normal"

Foreground="#FF23D756" Background="#83000000" VerticalAlignment="Center"

HorizontalAlignment="Center" />

</Canvas>

</UserControl>

El control de usuario tendrá este aspecto cuando se pulse sobre la imagen de un animal.

Ahora que ya ha quedado bien definido el diseño del control de usuario, se procederá a ver el funcionamiento interno de cada una de las acciones que puede realizar dicho control, y para ello, como viene siendo habitual, se mostrará el esquema de la clase que lo describe.

En el siguiente cuadro se puede ver cada uno de los elementos de la clase y el tipo al que corresponde, así mismo se aprecia el modificador del que dispone en esta aplicación.

Para completar la descripción del proyecto, se analizara uno a uno cada uno de ellos.

Campos

·         Handle:

Este campo fue descrito en la anterior entrada, ya que también forma parte de la clase “MainWindow” .En “UserControl1” cumple con la misma función, que es servir como parámetro usado por referencia a la hora de hacer una llamada a la función “midiOutOpen”.

·         Imagen

Esta variable recogerá la dirección en donde estará ubicado la imagen del animal que será mostrado.

·         Sonido

De manera análoga a la anterior, aquí se guardará la dirección donde se encuentra físicamente el archivo de sonido que corresponde con el animal sobre el que se ha pulsado

·         Player

Esta variable será un objeto de la clase “WindowsMediaPlayer” que servirá como medio de reproducción de los sonidos que se van a emitir.Para ello es necesario importar la referencia a la Liberia “WMPLib”.

WMPLib.WindowsMediaPlayer Player;

Funciones o métodos:

·         midiOutOpen:

Esta función hace llamadas a la API de Windows en relación con la apertura de dispositivos de salida, como puede ser los altavoces del equipo. Para poder hacer uso de estas funciones se tiene que agregar la referencia a la librería “winmm.dll” de Windows Media Player, como se puede apreciar en el código que la implementa.

[DllImport("winmm.dll")]

        private static extern int midiOutOpen(ref int handle, int deviceID,

            MidiCallback proc, int instance, int flags);

·         UserControl_Loaded

Esta función se desencadena con solo iniciar la aplicación, y su cometido es inicializar o crear objetos en tiempo de ejecución, como en este caso, que se encargará de crear una instancia de la clase “WindowsMediaPlayer”.

        private void UserControl_Loaded(object sender, EventArgs e) {

            Player = new WindowsMediaPlayer();

        }

·         UserControl_TouchDown y UserControl1_Click

 Ambas funciones son completamente iguales en su código, con la diferencia que se llamará a una u otra según la forma con la que se accede a estos controles. Si se hace mediante el ratón de un equipo convencional, se desencadenará el evento “Click” por lo cual se ejecutará la función “UserControl1_Click” que ha sido asociado previamente a este evento. Si por el contrario se accede mediante pulsaciones sobre la pantalla, se desencadenará el evento “TouchDown”, y de igual manera se ejecutará su método relacionado llamado “UserControl_TouchDown”.

Ahora se procederá a describir línea a línea el código que implementa.

void UserControl1_Click(object sender, MouseButtonEventArgs e)

        {

            // Se oculta el bloque de texto

            this.textBlock1.Visibility = System.Windows.Visibility.Visible;

            // Se crea un nuevo objeto de Windows Media Player

            Player = new WindowsMediaPlayer();

            // Se establece la ruta donde está ubicado el sonido a reproducirse

            string r = System.IO.Directory.GetCurrentDirectory();

            r = r+ this.sonido;

            string ruta = r;

           // Se le da la ruta del archivo de sonido al reproductor

            Player.URL = @ruta;

            // Se ejecuta el reproductor, que utilizara la ruta URL para reproducir el sonido

            Player.controls.play();

            DropShadowEffect myDropShadowEffect = new DropShadowEffect();

            // Se establece el color a negro.

            Color myShadowColor = new Color();

            myShadowColor.A = 255;

            myShadowColor.B = 0;

            myShadowColor.G = 0;

            myShadowColor.R = 0;

            myDropShadowEffect.Color = myShadowColor;

            //Establece la dirección en grados hacia donde ira dirigida la sombra

            myDropShadowEffect.Direction = 320;

            // Establece la profundidad de la sombra

            myDropShadowEffect.ShadowDepth = 0;

            // Establece la suavidad de la sombra.

            myDropShadowEffect.BlurRadius = 6;

            // Establece el grado de opacidad o transparencia.

            // El rango es de 0 a 1

            myDropShadowEffect.Opacity = 0.2;

            this.image1.Effect = myDropShadowEffect;

        }

 ·         UserControl_TouchUp y UserControl1_MouseUp

Cuando se deje de pulsar sobre el control de usuario se desencadenará el evento “TouchUp” o “MouseUp”, por lo cual se desencadenarían las funciones “UserControl_TouchUp” y “UserControl1_MouseUp” respectivamente.

Véase la descripción del código para solventar cualquier duda asociada.

private void UserControl1_MouseUp(object sender, MouseButtonEventArgs e)

        {

            DropShadowEffect myDropShadowEffect = new DropShadowEffect();

    // Se oculta el cuadro de texto.

            this.textBlock1.Visibility = System.Windows.Visibility.Hidden;

            Color myShadowColor = new Color();

    //Recordad que la imagen está formada por la combinación de un factor Alfa, y los

colores Azul(Blue), Verde (Green) , y Rojo (Red)

            myShadowColor.A = 0;

            myShadowColor.B = 50;

            myShadowColor.G = 50;

            myShadowColor.R =50;

            myDropShadowEffect.Color = myShadowColor;

            //Establece la dirección en grados hacia donde ira dirigida la sombra

            myDropShadowEffect.Direction = 320;

            // Establece la profundidad de la sombra

            myDropShadowEffect.ShadowDepth = 12;

            // Establece la suavidad de la sombra.

            myDropShadowEffect.BlurRadius = 6;

            // Establece el grado de opacidad o transparencia.

            // El rango es de 0 a 1

            myDropShadowEffect.Opacity = 0.9;

            this.image1.Effect = myDropShadowEffect;

            if (Player.playState == WMPPlayState.wmppsPlaying)

                Player.controls.stop();

        }

·         Constructor : “UserControl1”

Aquí el constructor de la clase, que recibe como parámetros una cadena que determina la ubicación de la foto que se va a mostrar, el sonido que se emitirá al pulsar sobre la imagen, y el nombre que será superpuesto a la figura del animal.

    public UserControl1(string fotoi, string sonidoi,string nombre)

        {

            InitializeComponent();

            this.image1.Source = new BitmapImage(new Uri(@fotoi));

            this.sonido = sonidoi;

            this.textBlock1.Text = nombre;

        }

Con el presente post se daría por finalizado la descripción minuciosa del código en lo que al proyecto “SonidoAnimales” se refiere. Adelantando que para la próxima semana estará disponible en el canal “codeplex” una nueva aplicación de ejemplo en la línea de desarrollo que se ha venido proponiendo a lo largo de estas semanas. Esperando que sea del agrado de todos, y muy en especial de los nuevos desarrolladores que verán una vez más a lo largo del nuevo proyecto las bondades que proporciona la programación con MS Windows 7 Multitouch.

Para acabar, recuerda que si quieres aprender mucho más sobre los secretos de los sistemas Microsoft Windows, te recomendamos leer el libro de Sergio de los Santos "Máxima Seguridad en Windows: Secretos Técnicos" , o siempre puedes suscribirte al Canal RSS de Windows Técnico para estar al día de las novedades e información técnica de interés.

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

Desarrollo de aplicaciones MS Windows 7 Multitouch: SonidosAnimales I

Desarrollo de aplicaciones MS Windows 7 Multitouch: SonidosAnimales II

Desarrollo de aplicaciones MS Windows 7 Multitouch: SonidosAnimales III

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