Silverlight Parte 2 - Eventos desde XAML y JavaScript

Este artículo es parte de una serie, cuyo artículo anterior está localizado aquí

Silverlight y JavaScript 

Tenemos al momento los siguientes archivos:

 
Y al ejecutar la página web, vemos lo siguiente:

 
Respondiendo al click del mouse

Vamos a crear un elemento que pueda responder a eventos del mouse, para comenzar a darle más interacción a nuestros sitios Silverlight

La forma y el concepto son muy sencillos. Desde el XAML, se declaran los eventos a disparar en JavaScript, esto es, por ejemplo, a una etiqueta de XAML, le podemos declarar un atributo como MouseLeave y asociar este atributo a una función de JavaScript en el HTML. De esta manera lo que tenemos es:

 
Primero, vamos a cambiar el XAML existente por el siguiente:

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Canvas.Background>
  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
   <GradientStop Color="#FFDCEF1B" Offset="0"/>
   <GradientStop Color="#FF801A1A" Offset="1"/>
  </LinearGradientBrush>
 </Canvas.Background>

<Rectangle
 x:Name="r1"
 MouseEnter="r1Entrar"
 MouseLeave="r1Salir"
 MouseLeftButtonDown="r1Abajo"
 MouseLeftButtonUp="r1Arriba"
 Height="100" Width="100"
 Canvas.Left="100" Canvas.Top="50"
 Stroke="Black" StrokeThickness="10" Fill="Blue"/>

<TextBlock
 x:Name="miTexto"
 Canvas.Left="70"
 Canvas.Top="180"
 Text="Dame Click"
 FontSize="30"/>

</Canvas>

Para obtener lo siguiente:

 
Aquí lo imporante que mencionar es que tanto el TextBlock como el Rectangle, tienen una propiedad x:Name por medio de la cual podemos identificar a cada elemento dentro del XAML

Insertando Código JavaScript

El siguiente paso, como ya se imaginarán, es obvio, es momento de insertar el código que responda a los eventos que se disparan desde el XAML, para esto, insertaremos en nuestra página web, el siguiente bloque de código JavaScript

function r1Entrar(sender, args) {
    sender.stroke = "red";
    sender.findName("miTexto").Text = "Rojo";
}

function r1Salir(sender, args) {
    sender.stroke = "black";
    sender.findName("miTexto").Text = "Negro";
}

function r1Abajo(sender, args) {
    sender.stroke = "yellow";
    sender.findName("miTexto").Text = "Diste Click";
}

function r1Arriba(sender, args) {
    sender.stroke = "Green";
    sender.findName("miTexto").Text = "Verde";
}

En este código podemos observar dos cosas:

• Los eventos disparados desde el XAML, siempre reciben dos parámetros:
• sender: Corresponde al objeto que inicia la acción
• args: Corresponde a información relacionada al evento disparado
• Mediante el método findName localizamos a elementos de manera específica dentro del XAML, en este caso, “miTexto”

Este código lo pueden insertar dentro del mismo bloque de código <script> donde se encuentra la obtención de la referencia a plugin de Silverlight que ya se tiene. Obteniendo ya una página cuyos elementos XAML disparan eventos en JavaScript

Conclusión

Listo, ya tienen elementos XAML de Silverlight que responden al mouse disparando funciones JavaScript dentro de sus tradicionales páginas Web.

Seguiremos posteando más artículos relacionados a esta tecnología, en las próximas entregas, incluiré ya alguna animación, un video y más eventos para atraparlos con el mouse.

Suerte!