第一個Silverlight的helloword教程

Silverlight 是一個跨浏覽器、跨平台的插件，用於針對 Web 提供下一代媒體體驗和 Rich Interactive Applications (RIA, 豐富交互式應用程序)。也許ms用它來對抗Flash的，對於我們程序員來說那個好就用那個，silverlight已經出來1.2了據說，從1.1開始支持.net程序的嵌入，對.Net程序員來說是個福音哦！silverlight很強悍，它支持和JS互調，它的表現形式就是嵌入在Html頁面中。
具體的區ms的網站上看看，這裡是你需要下載安裝的地方。
這裡我主要講用JS寫一個簡單的siverlight的helloworld
首先我們得了解一些知識
XAML：這個是從WPF開始就提出來的和XML一樣，只不過裡面你需要用siverlight定義好的一個control的tag
我們helloworld需要拿些文件：
一個Html文件：helloworld.htm
一個XAML文件：helloworld.XAML
一個ms提供的js文件：Silverlight.JS
這裡看看這個Silverlight.JS文件


///////////////////////////////////////////////////////////////////////////////
//
//  Silverlight.JS               version 1.0
//
//  This file is provided by Microsoft as a helper file for websites that
//  incorporate Silverlight Objects. This file is provided under the Silverlight 
//  SDK 1.0 license available at http://go.microsoft.com/fwlink/?linkid=94240.  
//  You may not use or distribute this file or the code in this file except as 
//  expressly permitted under that license.
// 
//  Copyright (c) 2007 Microsoft Corporation. All rights reserved.
//
///////////////////////////////////////////////////////////////////////////////

if(!window.Silverlight)window.Silverlight=...{};Silverlight._silverlightCount=0;Silverlight.ua=null;Silverlight.available=false;Silverlight.fwlinkRoot="http://go.microsoft.com/fwlink/?LinkID=";Silverlight.StatusText="Get Microsoft Silverlight";Silverlight.EmptyText="";Silverlight.detectUserAgent=function()...{var a=window.navigator.userAgent;Silverlight.ua=...{OS:"Unsupported",Browser:"Unsupported"};if(a.indexOf("Windows NT")>=0)Silverlight.ua.OS="Windows";else if(a.indexOf("PPC Mac OS X")>=0)Silverlight.ua.OS="MacPPC";else if(a.indexOf("Intel Mac OS X")>=0)Silverlight.ua.OS="MacIntel";if(Silverlight.ua.OS!="Unsupported")if(a.indexOf("MSIE")>=0)...{if(navigator.userAgent.indexOf("Win64")==-1)if(parseInt(a.split("MSIE")[1])>=6)Silverlight.ua.Browser="MSIE"}else if(a.indexOf("Firefox")>=0)...{var b=a.split("Firefox/")[1].split("."),c=parseInt(b[0]);if(c>=2)Silverlight.ua.Browser="Firefox";else...{var d=parseInt(b[1]);if(c==1&&d>=5)Silverlight.ua.Browser="Firefox"}}else if(a.indexOf("Safari")>=0)Silverlight.ua.Browser="Safari"};Silverlight.detectUserAgent();Silverlight.isInstalled=function(d)...{var c=false,a=null;try...{var b=null;if(Silverlight.ua.Browser=="MSIE")b=new ActiveXObject("AgControl.AgControl");else if(navigator.plugins["Silverlight Plug-In"])...{a=document.createElement("div");document.body.appendChild(a);a.innerHTML=''<embed type="application/x-silverlight" />'';b=a.childNodes[0]}if(b.IsVersionSupported(d))c=true;b=null;Silverlight.available=true}catch(e)...{c=false}if(a)document.body.removeChild(a);return c};Silverlight.createObject=function(l,g,m,j,k,i,h)...{var b=...{},a=j,c=k;a.source=l;b.parentElement=g;b.id=Silverlight.HtmlAttrib

uteEncode(m);b.width=Silverlight.HtmlAttributeEncode(a.width);b.height=Silverlight.HtmlAttributeEncode(a.height);b.ignoreBrowserVer=Boolean(a.ignoreBrowserVer);b.inplaceInstallPrompt=Boolean(a.inplaceInstallPrompt);var e=a.version.split(".");b.shortVer=e[0]+"."+e[1];b.version=a.version;a.initParams=i;a.windowless=a.isWindowless;a.maxFramerate=a.framerate;for(var d in c)if(c[d]&&d!="onLoad"&&d!="onError")...{a[d]=c[d];c[d]=null}delete a.width;delete a.height;delete a.id;delete a.onLoad;delete a.onError;delete a.ignoreBrowserVer;delete a.inplaceInstallPrompt;delete a.version;delete a.isWindowless;delete a.framerate;if(Silverlight.isInstalled(b.version))...{if(Silverlight._silverlightCount==0)if(window.addEventListener)window.addEventListener("onunload",Silverlight.__cleanup,false);else window.attachEvent("onunload",Silverlight.__cleanup);var f=Silverlight._silverlightCount++;a.onLoad="__slLoad"+f;a.onError="__slError"+f;window[a.onLoad]=function(a)...{if(c.onLoad)c.onLoad(document.getElementById(b.id),h,a)};window[a.onError]=function(a,b)...{if(c.onError)c.onError(a,b);else Silverlight.default_error_handler(a,b)};slPluginHTML=Silverlight.buildHTML(b,a)}else slPluginHTML=Silverlight.buildPromptHTML(b);if(b.parentElement)b.parentElement.innerHTML=slPluginHTML;else return slPluginHTML};Silverlight.supportedUserAgent=function()...{var a=Silverlight.ua,b=a.OS=="Unsupported"||a.Browser=="Unsupported"||a.OS=="Windows"&&a.Browser=="Safari"||a.OS.indexOf("Mac")>=0&&a.Browser=="IE";return !b};Silverlight.builDHtml=function(c,d)...{var a=[],e,i,g,f,h;if(Silverlight.ua.Browser=="Safari")...{a.push("<embed ");e="";i=" ";g=''="'';f=''"'';h='' type="application/x-silverlight"/>''+"<iframe style=''visibility:hidden;height:0;width:0''/>"}else...{a.push(''<object type="application/x-silverlight"'');e=">";i='' <param name="'';g=''" value="'';f=''" />'';h="</object>"}a.push('' id="''+c.id+''" width="''+c.width+''" height="''+c.height+''" ''+e);for(var b in d)if(d[b])a.push(i+Silverlight.HtmlAttributeEncode(b)+g+Silverlight.HtmlAttributeEncode(d[b])+f);a.push(h);return a.join("")};Silverlight.default_error_handler=function(e,b)...{var d,c=b.ErrorType;d=b.ErrorCode;var a=" Silverlight error message      ";a+="ErrorCode: "+d+" ";a+="ErrorType: "+c+"        ";a+="Message: "+b.ErrorMessage+"      ";if(c=="ParserError")...{a+="XamlFile: "+b.xamlFile+"      ";a+="Line: "+b.lineNumber+"      ";a+="Position: "+b.charPosition+"      "}else if(c=="RuntimeError")...{if(b.lineNumber!=0)...{a+="Line: "+b.lineNumber+"      ";a+="Position: "+b.charPosition+"      "}a+="MethodName: "+b.methodName+"      "}alert(a)};Silverlight.createObjectEx=function(b)...{var a=b,c=Silverlight.createObject(a.source,a.parentElement,a.id,a.propertIEs,a.events,a.initParams,a.context);if(a.parentElement==null)return c};Silverlight.buildPromptHtml=function(i)...{var a=null,f=Silverlight.fwlinkRoot,c=Silverlight.ua.OS,b="92822",d;if(i.inplaceInstallPrompt)...{var h;if(Silverlight.available)...{d="94376";h="94382"}else...{d="92802";h="94381"}var g="93481",e="93483";if(c=="Windows")...{b="92799";g="92803";e="92805"}else if(c=="MacIntel")...{b="92808";g="92804";e="92806"}else if(c=="MacPPC")...{b="92807";g="92815";e="92816"}a=''<table border="0" cellpadding="0" cellspacing="0" width="205px"><tr><td><img title="Get Microsoft Silverlight" onclick="Javascript:Silverlight.followFWLink({0});"  src="{1}"/></td></tr><tr><td  >By clicking <b>Get Microsoft Silverlight</b> you accept the <a title="Silverlight License Agreement" href="{2}" target="_top" ><b>Silverlight license agreement</b></a>.</td></tr><tr><td >Silverlight updates automatically, <a title="Silverlight Privacy Statement&qu ot; href="{3}" target="_top" ><b>learn more</b></a>.</td></tr><tr><td><img src="{4}"/></td></tr></table>'';a=a.replace("{2}",f+g);a=a.replace("{3}",f+e);a=a.replace("{4}",f+h)}else...{if(Silverlight.available)d="94377";else d="92801";if(c=="Windows")b="92800";else if(c=="MacIntel")b="92812";else if(c=="MacPPC")b="92811";a=''<div ><img onclick="Javascript:Silverlight.followFWLink({0});"  src="{1}" alt="Get Microsoft Silverlight"/></div>''}a=a.replace("{0}",b);a=a.replace("{1}",f+d);return a};Silverlight.__cleanup=function()...{for(var a=Silverlight._silverlightCount-1;a>=0;a--)...{window["__slLoad"+a]=null;window["__slError"+a]=null}if(window.removeEventListener)window.removeEventListener("unload",Silverlight.__cleanup,false);else window.detachEvent("onunload",Silverlight.__cleanup)};Silverlight.followFWLink=function(a)...{top.location=Silverlight.fwlinkRoot+String(a)};Silverlight.HtmlAttributeEncode=function(c)...{var a,b="";if(c==null)return null;for(var d=0;d<c.length;d++)...{a=c.charCodeAt(d);if(a>96&&a<123||a>64&&a<91||a>43&&a<58&&a!=47||a==95)b=b+String.fromCharCode(a);else b=b+"&#"+a+";"}return b}這個文件主要是判斷你當前是否安裝silverlight，如果沒有安裝提示客戶去安裝它。
如果你沒有沒有這個文件你可以直接把上面代碼copy到一個文件裡rename為Silverlight.JS即可。
接下來是我們要的兩個文件
第一，我們先寫一個helloworld.htm文件


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<Html>
<head>
    <title>My First Silverlight Page</title>
    <script src="Silverlight.JS" type="text/Javascript"></script>   
</head>
<body>

<br />
  <center>
     <div id="Ag1Host" >
        <script type="text/Javascript">...
           var pe1 = document.getElementById("Ag1Host");
        </script>
     </div>
  </center>

<script>...
Silverlight.createObjectEx(...{source: ''helloworld.xaml'', parentElement:pe1, id:''Ag1'', propertIEs:...{width:''600'', height:''800'', background:''#00FFFFFF'', isWindowless:''true'', framerate:''24'', version:''0.90.0''}, events:...{onError:null, onLoad:null}, context:null});
</script>

</Html>這個文件首先把ms提供給我們js加進來  <script src="Silverlight.JS" type="text/Javascript"></script>  
然後創建了一個div為Silverlight.createObjectEx使用，你可以看到Silverlight.createObjectEx的第一個參數就是
我們要寫得xaml文件，你可以在這裡根據需要添加你的相對路徑，其他的參數一看就明白，詳細地得去ms提供
的sdk中看看了，Silverlight.createObjectEx就是創建一個Silverlight對象。

接下來我們寫一個簡單的xaml文件，文件名為helloworld.xmal



<Canvas 
   XMLns="http://schemas.microsoft.com/clIEnt/2007"
   XMLns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="600"
   Height="800">

    <TextBlock FontSize="36" Canvas.Left="17" Canvas.Top="10" Foreground="Blue">Hello World</TextBlock>

</Canvas>
XMLns="http://schemas.microsoft.com/clIEnt/2007"
   XMLns:x="http://schemas.microsoft.com/winfx/2006/xaml"
這兩行是ms固定的格式,我們照寫就行,然後定義了canvas的寬高,接著就是我們要顯示的內容了,輸出一個文本
Hello World文本,把這幾個文件保存,然後打開helloworld.htm你將會看到最簡單的silverlight輸出的helloworld,:)

該例子沒有什麼太大用處，不過對理解silverlight來說還是很有用的，哈哈！