DEMO 網址
開啟專案的步驟
1. 建立專案，選擇 Sliverlight Application or Sliverlight Navigation Application
Sliverlight Application : 空白的 專案
Sliverlight Navigation Application ： 在專案中已有先建立簡單的 瀏覽器的表框
2.
雖然原本有樣本可以使用(預設範例是 C# 或 VB 的方式)，但以下使用自行增加檔案來使用 javascript 執行 XAML
所以就 新增物件如下
3.
新增html:
在 Web 選項中選擇 HTML Page， 如圖
JS 檔 ： Web 選項中選擇 ： javascript File
xaml 檔 : Sliverlight 選項中選擇 ： SilverlightJScript Page
4.
設定 執行首頁， 在檔案上按右鍵，選 Set Start Page
5.
在 html 用 javascript 使用 silverlight 必須包含以下幾個 檔案 的設定
a. Index.html
b. 主要的js 檔 呼叫 xaml 物件 , 如 SL1.js
c. Xaml 檔 ， 定義 silverlight 物件的顯示 ， 如 SL1.xaml
d. X.Xaml.js ， 定義 silverlight 物件的方法， 如 SL1.xaml.js
code 如下
a. Index.html
在這裡必須引用 幾個JS 檔 包含 Silverlight.js, SL1.js ,SL1.xaml.js
<!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="SL1.js"></script>
<script type="text/javascript" src="SL1.xaml.js"></script>
<script type="text/javascript">
function changeText() {
// Get the inpute Value
var GetValue = document.getElementById("txtInput").value;
// Get the XAML Object
var SlControl = document.getElementById("SilverlightPlugIn");
// Get the Object SLText in the XAML file
var SLText = SlControl.content.findName("SLText");
// Change the ext
SLText.Text = GetValue;
}
</script>
</head>
<body>
<input id="txtInput" type="text" />
<input id="ShowSilverlight" type="button" value="Show in Silverlight Canvas" onclick="changeText()"/>
<div id="SilverlightPlugInHost">
<br />
<br />
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
b. SL1.js
function createSilverlight() {
var scene = new AdBanner.Scene();
Silverlight.createObjectEx({
source: 'SL1.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. SL1.xaml
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock x:Name="SLText" Width="67" Height="23.2" Canvas.Left="29"
Canvas.Top="10" Foreground="#FFEFEFEF" Text="Enter and show" />
</Canvas>
d. SL1.xaml.js
if (!window.AdBanner)
window.AdBanner = {};
AdBanner.Scene = function() {
}
AdBanner.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement) {
this.plugIn = plugIn;
}
}
沒有留言:
張貼留言