建置 Silverlight 1.0 開發環境
摘至网络
MSN Space、Google Doc 、Google Blog
Chui-Wen Chiu
2007.07.26
下載
1. Sliverlight 1.0 Beta Runtime
2. Sliverlight SDK 1.0 beta
3. Microsoft Blend 2.0 Preview
4. Sliverlight SDK 1.1 alpha
安裝 Sliverlight 專案樣板
為了讓 VS 2005 能夠開發 Sliverlight，先下載 Sliverlight SDK(Silverlight1.0SDK.zip)，取出其中的 SilverlightBetaToolsForVS2005.zip，將內容解開後放置在 %My Document%\Visual Studio 2005\Templates\ProjectTemplates\Sliverlight 1.0 beta，此時 VS2005 中可以使用 Sliverlight 專案，如下圖：
安裝 XAML IntelliSense
從 Silverlight1.0SDK.zip 中取出 silverlight.xsd，並放置在 C:\Program Files\Microsoft Visual Studio 8\Xml\Schemas 目錄下。
專案樣板程式碼研究
使用 Sliverlight 1.0 Beta 專案樣板產生的專案共會產生下面五個檔案：
Default.html -- HTML UI 定義
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SilverlightJSApplication1</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Default.html.js"></script>
<script type="text/javascript" src="Scene.xaml.js"></script>
</head>
<body>
<div >
createSilverlight(); // 建立 Sliverlight
</script>
</div>
</body>
</html>
Default.html.js -- HTML 事件處理
/**
* 建立 Sliverlight
*
*/
function createSilverlight()
{
var scene = new SilverlightJSApplication1.Scene();
Sys.Silverlight.createObjectEx({
source: "Scene.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "400",
height: "400",
version: "0.9"
},
events: {
onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
}
});
}
if (!window.Sys)
window.Sys = {};
if (!window.Silverlight)
window.Silverlight = {};
/**
* 產生 create Delegate
*
* @param instance Scense 物件
* @param method instance 的 method
* @return Function 呼叫 instance 的 member function 的 Function Object
*/
Sys.Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}
Scense.xaml -- XAML UI 定義
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Resources>
<Storyboard x:Name="mouseEnter">
<ColorAnimation Duration="00:00:00.25" To="#3DFFFFFF" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>
<Storyboard x:Name="mouseDown">
<ColorAnimation Duration="00:00:00.2" To="#22000000" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>
<Storyboard x:Name="mouseUp">
<ColorAnimation Duration="00:00:00.2" To="#3DFFFFFF" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>
<Storyboard x:Name="mouseLeave">
<ColorAnimation Duration="00:00:00.25" To="#00FFFFFF" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>
</Canvas.Resources>
<Canvas Width="120" Height="44">
<Rectangle StrokeThickness="4" RadiusX="17" RadiusY="36" Width="120" Height="44" Stroke="#46000000">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
<GradientStop Color="#FFD3BE46" Offset="0.242"/>
<GradientStop Color="#FFD79B03" Offset="0.333"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Width="67" Height="23.2" Canvas.Left="29" Canvas.Top="10" Foreground="#FFEFEFEF" Text="Click Me" />
<Rectangle StrokeThickness="4" RadiusX="16" RadiusY="36" Width="104" Height="32" Canvas.Left="8" Canvas.Top="1.3">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
<GradientStop Color="#00FFFFFF" Offset="0.13"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="17" RadiusY="36" Width="114" Height="38" Fill="#00FFFFFF" x:Name="highlightEllipse" Canvas.Left="3" Canvas.Top="3"/>
</Canvas>
</Canvas>
Scense.xaml.js -- XAML 事件處理
if (!window.SilverlightJSApplication1)
window.SilverlightJSApplication1 = {};
SilverlightJSApplication1.Scene = function()
{
}
SilverlightJSApplication1.Scene.prototype =
{
/**
* Sliverlight 事件載入完成的事件處理函式
*
* @param control
* @param userContext
* @param rootElement
*/
handleLoad: function(control, userContext, rootElement)
{
this.control = control;
// Sample button event hookup: Find the button and then attach event handlers
this.button = rootElement.children.getItem(0);
// 建立事件處理
this.button.addEventListener("MouseEnter", Sys.Silverlight.createDelegate(this, this.handleMouseEnter));
this.button.addEventListener("MouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.handleMouseDown));
this.button.addEventListener("MouseLeftButtonUp", Sys.Silverlight.createDelegate(this, this.handleMouseUp));
this.button.addEventListener("MouseLeave", Sys.Silverlight.createDelegate(this, this.handleMouseLeave));
},
/**
* 處理 Mouse Enter 事件
*
* @param sender
* @param eventArgs
*/
handleMouseEnter: function(sender, eventArgs)
{
var mouseEnterAnimation = sender.findName("mouseEnter");
mouseEnterAnimation.begin();
},
/**
* 處理 Mouse Down 事件
*
* @param sender
* @param eventArgs
*/
handleMouseDown: function(sender, eventArgs)
{
var mouseDownAnimation = sender.findName("mouseDown");
mouseDownAnimation.begin();
},
/**
* 處理 Mouse Up 事件
*
* @param sender
* @param eventArgs
*/
handleMouseUp: function(sender, eventArgs)
{
var mouseUpAnimation = sender.findName("mouseUp");
mouseUpAnimation.begin();
// Put clicked logic here
alert("clicked");
},
/**
* 處理 Mouse Leave 事件
*
* @param sender
* @param eventArgs
*/
handleMouseLeave: function(sender, eventArgs)
{
var mouseLeaveAnimation = sender.findName("mouseLeave");
mouseLeaveAnimation.begin();
}
}
Sliverlight.js -- Sliverlight 核心
/**
* Silverlight.js version 0.9
*
* This file is provided by Microsoft as a helper file for websites that
* incorporate Silverlight Objects. It must be used in conjunction with createSilverlight.js,
* or alternatively, a custom .js file specific to your site. The 0.9 version of this file is
* hard coded to match Microsoft Silverlight v1.0 Beta, which exposes 0.9 as its version number.
* This file is provided as is.
*
*/
if (!window.Sys)
{
window.Sys = { };
}
if (!window.Sys.Silverlight)
{
window.Sys.Silverlight = { };
}
/**
* 檢查是否安裝符合指定的 Sliverlight 版本
*
* ＠param version 版本
* @return true=已安裝, false=未安裝
*/
Sys.Silverlight.isInstalled = function(version)
{
var uaString = navigator.userAgent;
var reqVersionArray = version.split(".");
reqMajorVer = (reqVersionArray[0] != null) ? reqVersionArray[0] : 0;
reqMinorVer = (reqVersionArray[1] != null) ? reqVersionArray[1] : 9;
reqBuildVer = (reqVersionArray[2] != null) ? reqVersionArray[2] : 0;
/**
* 取得 Sliverlight 版本資訊
*
* @return 版本資訊
*/
function detectAgControlVersion()
{
agVersion = -1;
if ((navigator.plugins != null) && (navigator.plugins.length > 0))
{
if (document.getElementById && !document.all && navigator.plugins["WPFe Plug-In"] )
{
if (navigator.userAgent.indexOf("Firefox") != -1)
{
// ??
var tmpAgObjectTag = '<object ;
}
alert(errMsg);
}
/**
* createObjectEx, takes a single parameter of all createObject parameters enclosed in {}
*
* @param params
* @return
*/
Sys.Silverlight.createObjectEx = function(params)
{
var parameters = params;
var html = Sys.Silverlight.createObject(parameters.source, parameters.parentElement, parameters.id, parameters.properties, parameters.events, parameters.initParams, parameters.context);
if (parameters.parentElement == null)
{
return html;
}
}
執行結果
[Firefox 2.0.0.5]
[IE 6]
補充
1. Sliverlight 元件的 ProgID 為 AgControl.AgControl，元件檔案位於 C:\Program Files\Microsoft Silverlight\npctrl.dll，CLASS_ID 為 {32C73088-76AE-40F7-AC40-81F62CB2C1DA}