在Silverlight1.1中定义Javascript事件的方法

    在Silverlight1.0中XAML文件对应的是一个JAVASCRIPT文件，而在Silverlight1.1中一个XAML文件对应的是一个C#文件，和aspx与aspx.cs的对应关系一样，在XAML中可以定义一个Silverlight对象的事件代理，在与其对应的.xaml.cs文件中定义事件处理方法，在方法中可以操作XAML对象。但是如何为一个XAML对象定义一个JAVASCRIPT事件及事件处理方法呢？

    在Silverlight1.1工程(VS2008)中一个Silverlight页面通常会涉及到四个文件：html宿主文件及与之关联的html.js文件；XAML文件及与之对应的.xaml.cs文件。其中html宿主文件是一个普通的HTML文件用来作为Silverlight对象的容器，.html.js文件用会根据XAML文件来创建Silverlight对象显示在HTML文件中，XAML文件是一个基于XML格式的文件，用来定义Silverlight对象模型。

    按照下面的步骤为Silverlight 对象定义JS事件：

   1.在XAML中定义一个对象（例如：Rectangle）并为其设置事件代理BtnSample_MouseLeftButtonDown

< 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 ="BlendTry1.Page;assembly=ClientBin/BlendTry1.dll"
        Width ="640"
        Height ="480"
        Background ="White"
         >
     < Rectangle  Canvas.Left ="20"  Canvas.Top ="20"  Width ="100"  Height ="50"  Fill ="#33ddff"  Cursor ="Hand"  MouseLeftButtonDown ="BtnSample_MouseLeftButtonDown"  x:Name ="BtnSample" ></ Rectangle >
</ Canvas >

2.再来看.xaml.cs文件，代码如下：

   [Scriptable]
     public   partial   class  Page : Canvas
     ... {
        [Scriptable]
        //定义单击事件对象
        public event EventHandler OnButtonClicked;
            
        public Page()
        ...{
             //注册客户端实例
       WebApplication.Current.RegisterScriptableObject("Sample",this);
              this.Loaded += this.Page_Loaded;
        }

        //事件处理方法
        void BtnSample_MouseLeftButtonDown(object sender, MouseEventArgs e)
        ...{
            if (this.OnButtonClicked != null)
            ...{
                OnButtonClicked(sender, EventArgs.Empty);
            }
        }

        private void Page_Loaded(object sender, EventArgs args)
        ...{
               // Required to initialize variables.  Needs to be done from loaded event so FindName works properly. 
              InitializeComponent();
        }
    }

在C#文件中定义了Silverlight对象点击事件的处理方法，在这个方法里边会调用另一个事件，这个事件对象（OnButtonClicked）有一个[Scriptable]标记，说明这个事件被定义为一个JS脚本事件，另外还要注意这个事件所在的类也要打上[Scriptable]标记，并且在Page的构造方法中要注册一个脚本对象（在本例中是Sample）.

3.定义JS事件及JS事件处理方法：

function  createSilverlight()
... {
    var controlID = "SilverlightControl";
    Silverlight.createObjectEx(...{
        source: "Page.xaml",
        parentElement: document.getElementById("silverlightControlHost"),
        id: controlID,
        properties: ...{
            width: "100%",
            height: "100%",
            version: "1.1"
        },
        events: ...{
            onError: function(sender, args) 
            ...{
                var errorDiv = document.getElementById("errorLocation");
                if (errorDiv != null) 
                ...{
                    var errorText = args.errorType + "- " + args.errorMessage;
                            
                    if (args.ErrorType == "ParserError") 
                    ...{
                        errorText += "<br>File: " + args.xamlFile;
                        errorText += ", line " + args.lineNumber;
                        errorText += " character " + args.charPosition;
                    }
                    else if (args.ErrorType == "RuntimeError") 
                    ...{
                        errorText += "<br>line " + args.lineNumber;
                        errorText += " character " +  args.charPosition;
                    }
                    errorDiv.innerHTML = errorText;
                }    
            },
            
            /**//*
            *Initialize the events when the page is loaded
            */ 
            onLoad:function(sender,args)
            ...{
                sender.Content.Sample.OnButtonClicked = function (sender, args)...{alert("Hello Client Event");};
            }
        }
    });

    可以看到这是一个标准的createSilverlight方法，但是不同的是我在这个方法的events参数中增加了一个onLoad事件，在这个事件中我对OnButtonClicked事件进行了初始化，从这一句初始化代码可以看到Sample就是刚才我在C#文件中注册的脚本对象。这个事件的处理函数也可以写在一个独立的JS文件中，只要在Silverlight宿主文件中将其引用就可以了。

   完成这几步后JS事件就定义好了，编译并运行项目就可以在浏览中看到当点击矩形块后会执行OnButtonClicked对应的事件函数。