• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
works guo

成功的渴望与生俱来---- 成功是获得赞美与尊重的最有效的途径
博客园    首页    新随笔    联系   管理    订阅  订阅

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

<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
posted @ 2008-03-01 19:57  works guo  阅读(482)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3