Using lnline XAML
Using lnline XAML
使用一个引用有Uniform Resource Identifer不连贯的文件替换设置初开化Microsoft Silverlight content,你能在你的HTML中指定一个inline区域在里面放你的XAML.使用这个技术,你必须将XAML封装在<Script>标签里面和里面要指定Type属性在"text/xaml"中,这是一XML文档的类型声明,是优先XAML.这个XAML内容必须被唯一识别,所以它能被Silverlight plug-in初始化参数source所引用.这个Source参数使用时加上"#",加上<Script>标签中识别XAML的id值.在XAML内容中还能定义在HTML中的事件.
下面是HTML事例显示怎样创建一个create inline XAML内容.在case 中HTML内容包括JavaScript和XAML内容.
下面的JavaScript事例Show的是怎样在CreateSilverlight.js中的CreateSilverlightEx方法引用inline XAML内容,然后调用在Silverlight.js中 CreateObjectEx helper函数时.当你使用CreateObjectEx时候,参数值就不能使用默认的拉.
下面是图片是你结合上面的HTML和ilverlight plug-in 被加载后,TextBlock对相触发Loeded事件引起显示当前时间的Example.
---worksguo
使用一个引用有Uniform Resource Identifer不连贯的文件替换设置初开化Microsoft Silverlight content,你能在你的HTML中指定一个inline区域在里面放你的XAML.使用这个技术,你必须将XAML封装在<Script>标签里面和里面要指定Type属性在"text/xaml"中,这是一XML文档的类型声明,是优先XAML.这个XAML内容必须被唯一识别,所以它能被Silverlight plug-in初始化参数source所引用.这个Source参数使用时加上"#",加上<Script>标签中识别XAML的id值.在XAML内容中还能定义在HTML中的事件.
下面是HTML事例显示怎样创建一个create inline XAML内容.在case 中HTML内容包括JavaScript和XAML内容.
<html>
<head>
<title>Display Date</title>
<script type="text/javascript" src="CreateSilverlight.js"></script>
<script type="text/javascript" src="Silverlight.js"></script>
<!-- Define Loaded event handler for TextBlock. -->
<script type="text/javascript">
function setDate(sender, eventArgs)
{
sender.text = Date();
}
</script>
</head>
<body bgcolor="Teal">
<!-- Define XAML content. -->
<script type="text/xaml" id="xamlContent"><?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
Background="Wheat">
<TextBlock
Canvas.Left="20"
FontSize="24"
Loaded="setDate" />
</Canvas>
</script>
<div id="pluginHost" >
<script type="text/javascript">
var parentElement = document.getElementById("pluginHost");
createSilverlightEx();
</script>
</div>
</body>
</Html>
<head>
<title>Display Date</title>
<script type="text/javascript" src="CreateSilverlight.js"></script>
<script type="text/javascript" src="Silverlight.js"></script>
<!-- Define Loaded event handler for TextBlock. -->
<script type="text/javascript">
function setDate(sender, eventArgs)
{
sender.text = Date();
}
</script>
</head>
<body bgcolor="Teal">
<!-- Define XAML content. -->
<script type="text/xaml" id="xamlContent"><?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
Background="Wheat">
<TextBlock
Canvas.Left="20"
FontSize="24"
Loaded="setDate" />
</Canvas>
</script>
<div id="pluginHost" >
<script type="text/javascript">
var parentElement = document.getElementById("pluginHost");
createSilverlightEx();
</script>
</div>
</body>
</Html>
下面的JavaScript事例Show的是怎样在CreateSilverlight.js中的CreateSilverlightEx方法引用inline XAML内容,然后调用在Silverlight.js中 CreateObjectEx helper函数时.当你使用CreateObjectEx时候,参数值就不能使用默认的拉.
function createSilverlightEx()
{
Silverlight.createObjectEx({
source: '#xamlContent', // Source property value, referencing an ID in the HTML DOM.
parentElement:parentElement, // DOM reference to hosting DIV tag.
id:'myPlugin', // Unique plug-in ID value.
properties:{ // Plug-in properties.
width:'360', // Width of rectangular region of plug-in, in pixels.
height:'60', // Height of rectangular region of plug-in, in pixels.
background:'oldlace', // Background color of plug-in.
version:'1.0'}, // Plug-in version.
events:{
onLoad:null}}); // OnLoad property value -- event handler function name.
}
{
Silverlight.createObjectEx({
source: '#xamlContent', // Source property value, referencing an ID in the HTML DOM.
parentElement:parentElement, // DOM reference to hosting DIV tag.
id:'myPlugin', // Unique plug-in ID value.
properties:{ // Plug-in properties.
width:'360', // Width of rectangular region of plug-in, in pixels.
height:'60', // Height of rectangular region of plug-in, in pixels.
background:'oldlace', // Background color of plug-in.
version:'1.0'}, // Plug-in version.
events:{
onLoad:null}}); // OnLoad property value -- event handler function name.
}
下面是图片是你结合上面的HTML和ilverlight plug-in 被加载后,TextBlock对相触发Loeded事件引起显示当前时间的Example.
---worksguo