在Silverlight1.1中定義與調用Javascript事件的方法

我們在silverlight1.0 想調用javascript事件，直接在事件後寫上函數名就可以，比如Loaded=SayHell, 但是在silverlight1.1 裡是不行的，因為Silverlight1.1中一個XAML檔案對應一個C#檔案，和aspx與aspx.cs的對應關係一樣，在XAML中可以定義一個Silverlight對象的事件代理，在對應的.xaml.cs檔案中定義事件處理方法，在方法中可以操作XAML對象。但是如何為一個XAML對象定義一個JAVASCRIPT事件及事件處理方法呢？

    在Silverlight1.1工程中一個Silverlight頁面通常會有四個檔案：html宿主檔案及與之關聯的html.js檔案；XAML檔案及與之對應的.xaml.cs檔案。其中html宿主檔案是一個普通的HTML檔案用來作為Silverlight對象的容器，.html.js檔案用會根據XAML檔案來建立Silverlight對象顯示在HTML檔案中，XAML檔案是一個基於XML格式的檔案，用來定義Silverlight物件模型。

那麼我們如何調用呢，以下就是樣本：

1. 開啟vs2008, 建立一個silverlight項目CallJavascript，預設產生如下檔案

 

2. 在page.xaml的cavas下加入下面的代碼

<TextBlock Width="314" Height="72" Canvas.Left="78" Canvas.Top="142" Text="Hello World" 
MouseLeftButtonDown="mCallJsTextBlockOnClicked" TextWrapping="Wrap"/>

我們為這個對象設定了事件代理MouseLeftButtonDown="mCallJsTextBlockOnClicked"

最後代碼會使這個樣子

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="Page_Loaded"
        x:Class="CallJavascript.Page;assembly=ClientBin/CallJavascript.dll"
        Width="640"
        Height="480"
        Background="White"
        >
    <TextBlock Width="314" Height="72" Canvas.Left="78" Canvas.Top="142" Text="Hello World" 
               MouseLeftButtonDown="mCallJsTextBlockOnClicked" TextWrapping="Wrap"/>
</Canvas>

 

3. 修改page.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace CallJavascript
{
    [Scriptable]
    public partial class Page : Canvas
    {
        [Scriptable]
        public event EventHandler onTextBlockClicked;
        public void Page_Loaded(object o, EventArgs e)
        { 
            WebApplication.Current.RegisterScriptableObject("calljsObject", this);
            // Required to initialize variables
            InitializeComponent();
        } 
        void mCallJsTextBlockOnClicked(object sender, MouseEventArgs e)
        {
            if (this.onTextBlockClicked != null)
            {
                onTextBlockClicked(sender, e);
            }
        }
    }
}

引用 using System.Windows.Browser;

在C#檔案中定義了Silverlight對象點擊事件的處理方法，在這個方法裡邊會調用另一個事件，這個事件對象（onTextBlockClicked）有一個[Scriptable]標記，說明這個事件被定義為一個JS指令碼事件，另外還要注意這個事件所在的類也要打上[Scriptable]標記，並且註冊了一個指令碼對象（在本例中是calljsObject）

4. 修改Testpage.html.js為

// JScript source code

//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
    Silverlight.createObjectEx({
        source: "Page.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.1",
            enableHtmlAccess: "true"
        },
        events: {
                onLoad:function(sender,args)
                        {
                            sender.Content.calljsObject.onTextBlockClicked = function (sender, args)
                                                                    {alert("Hello World, I am Jack_wangds");};
                        }

        }
    });
    // Give the keyboard focus to the Silverlight control by default
    document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }

}

可以看到這是一個標準的createSilverlight方法，但是不同的是我在這個方法的events參數中增加了一個onLoad事件，在這個事件中我對onTextBlockClicked事件進行了初始化，從這一句初始化代碼可以看到calljsObject就是剛才我在C#檔案中註冊的指令碼對象。這個事件的處理函數也可以寫在一個獨立的JS檔案中，只要在Silverlight宿主檔案中將其引用就可以了。
 

總結，silverlight1.1 其優勢就是我們用Managed 程式碼如C#來寫代碼，這就造成了我們直接使用javascript比較繁瑣，還好不是很繁瑣，如果你不想用這個新特性而喜歡手寫javascript，那還是用1.0吧