步驟可以參考
DEMO 網址
a. Index.html
在這裡有 3個 function
1. ShowTheEllipse: 執行建立物件的動作
2. ClearCanvase: 清除 Silverlight Canvas 的物件
3. addEllipse： 新增物件到 Silverlight Canvas 上
code 如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> Sliver Light Test 1</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="SL2.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
/// the canvas top
var top = 0;
function ShowTheEllipse() {
// Get the inpute Value
var GetValue = document.getElementById('txtInput').value;
if (GetValue >= 0 && GetValue !="") {
// Get the XAML Object
var SlControl = document.getElementById('SilverlightPlugIn');
// Claer the objevt in the canvas
ClearCanvase();
// Add the object in the canvas
for (var i = 0; i < GetValue; i++) {
var xaml = SlControl.content.createFromXaml(' <Ellipse Width="20" Height="15" Fill="Azure"/>');
addEllipse(xaml);
}
}
else{
alert("Error, must enter the number");
}
}
// Clear the objevt in the canvas
function ClearCanvase() {
// Get the XAML Object
var SlControl = document.getElementById('SilverlightPlugIn');
var itemsContainer = SlControl.content.findName('Root');
itemsContainer.children.clear();
top = 0;
}
// Add the Ellipse object
function addEllipse(xaml) {
// Get the XAML Object
var SlControl = document.getElementById('SilverlightPlugIn');
// Set the Canvas top
xaml["Canvas.Top"] = top;
var itemsContainer = SlControl.content.findName('Root');
itemsContainer.children.insert(0, xaml);
top += 20;
}
</script>
</head>
<body>
<input id="txtInput" type="text" />
<input id="ShowSilverlight" type="button" value="Enter the number to show the Ellipse in the seliverlight Canvase" onclick="ShowTheEllipse()"/>
<div id="SilverlightPlugInHost">
<br />
<br />
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
b. 主要的js 檔 呼叫 xaml 物件 , 如 index.js
function createSilverlight() {
var scene = new AdBanner.Scene();
Silverlight.createObjectEx({
source: 'SL2.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '300',
height: '300',
background: 'LightBlue',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});
}
if (!window.Silverlight)
window.Silverlight = {};
Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}
c. Xaml 檔 ， 定義 silverlight 物件的顯示 ， 如 SL2.xaml
別忘了命名 ，在這裡將 Canvas 命名為 Root
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Root">
</Canvas>
d. X.Xaml.js ， 定義 silverlight 物件的方法， 如若在visual stdio 上 ，新增 XAML檔就會一起建立，如 SL2.js
if (!window.AdBanner)
window.AdBanner = {};
AdBanner.Scene = function() {
}
AdBanner.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement) {
this.plugIn = plugIn;
}
}
沒有留言:
張貼留言