Como suscribir eventos de objetos Silverlight en JavaScript

En las aplicaciones que desarrollamos con SilverLight, rara es la vez en la que no tenemos nada de JavaScript y además queremos relacionarlo con lo que ocurre en nuestos controles de SilverLight, por ejemplo que cuando el usuario haga Click en determinado elemento de nuestro control SilverLight este evento sea capturado por el javascript y lanze tambien su propia función.

 

   1:  <Button x:Name="Button1" Height="35" Width="120" Content="Do Something" Click="Button1_Click" />

 

Tenemos el botón anterior definido en nuestro control SilverLight y nuestro code-behind es

 

   1:  public partial class Page : UserControl
   2:  {
   3:      [ScriptableMember]
   4:      public event EventHandler ButtonClicked;
   5:   
   6:      public Page()
   7:      {
   8:          InitializeComponent();
   9:          HtmlPage.RegisterScriptableObject("ScriptablePageObject", this);
  10:      }
  11:   
  12:      private void Button1_Click(object sender, RoutedEventArgs e)
  13:      {
  14:          if (ButtonClicked != null)
  15:          {
  16:              ButtonClicked(sender, e);
  17:          }
  18:      }
  19:  }

Como podeis observar ponemos el atributo [ScriptableMember] en el vento que queremos que se comunique con el Javascript y en la creación del control lo registramos con la instrucción

9: HtmlPage.RegisterScriptableObject(«ScriptablePageObject«, this);

Ahora desde Javascript solo nos queda

 

  1:  <asp:Silverlight 
   2:      ID="Xaml1" 
   3:      runat="server" 
   4:      Source="~/ClientBin/CallHtmlDom.xap" 
   5:      OnPluginLoaded="pluginLoaded"
   6:      Version="2.0" 
   7:      Width="100%" Height="100%" />
   8:  </div>
   9:  </form>
  10:  <script type="text/javascript">
  11:   
  12:      function pluginLoaded(sender,args) {
  13:          var slCtl = document.getElementById("Xaml1"); 
  14:          slCtl.Content.ScriptablePageObject.addEventListener("ButtonClicked", jsEventHandler);
  15:      } 
  16:      
  17:      function jsEventHandler(sender, args) {
  18:          alert("Pulso el botón");
  19:      }
  20:      
  21:  </script>

Una vez que el control SilverLight se ha cargado se llama a la función javascript pluginLoaded, que se encarga de crear el manejador para el evento Buttonclicked