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内容.

<

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.

}

下面是图片是你结合上面的HTML和ilverlight plug-in 被加载后,TextBlock对相触发Loeded事件引起显示当前时间的Example.

---worksguo