silverlight 示例

香水坏坏 发表于 2007-8-24 [silverlight]

今天用notepad写了一个silverlight示例。这里记录一哈 开发过程和用notepad开发的文件分布结构。查看示例 (PS:查看示例前，请先自行安装 Silverlight 1.0或者 Silverlight 1.1 )

开发工具：notepad

silverlight版本：Silverlight 1.0

浏览器：IE6 FF

操作系统:Win2003

WEB服务器：IIS6.0 、ASP.NET 2.0

SampleHtmlPage.htm 用来呈现silverlight，里面包含silverlight.js以及用来放置silverlight画布的div定义，最后再初始化silverlight。

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">  
  3.   <head>  
  4.     <title>A Sample HTML page</title>  
  5.     <script type="text/javascript" src="Silverlight.js" language="javascript"></script>  
  6.     <script type="text/javascript" src="createSilverlight.js" language="javascript"></script>  
  7.   </head>  
  8.   
  9.   
  10.   <body>  
  11.   
  12. <div id="mySilverlightPluginHost">  
  13. </div>  
  14. <script type="text/javascript">                 
  15.         // Retrieve the div element you created in the previous step.   
  16.         var parentElement =    
  17.             document.getElementById("mySilverlightPluginHost");   
  18.            
  19.         // This function creates the Silverlight plugin.   
  20.         createMySilverlightPlugin();   
  21. document.write('information of u:'+Silverlight.ua.OS +',');           
  22. document.write(Silverlight.ua.Browser);   
  23. </script>  
  24.   
  25.   </body>  
  26. </html>  

Silverlight.js Silverlight SDK里面提供的一个HTML在如上HTML里面包含

createSilverlight.js 实现silverlight插件的创建，如画布的高度、宽度在那个HTML元素里插入等等

 

JavaScript代码
  1. function createMySilverlightPlugin(){     
  2.     Silverlight.createObject(   
  3.         "myxaml.xaml",                  // Source property value.   
  4.         parentElement,                  // DOM reference to hosting DIV tag.   
  5.         "mySilverlightPlugin",         // Unique plugin ID value.   
  6.         {                               // Per-instance properties.   
  7.             width:'400',                // Width of rectangular region of plugin area in pixels.   
  8.             height:'400',               // Height of rectangular region of plugin area in pixels.   
  9.             inplaceInstallPrompt:true,  // Determines whether to display in-place install prompt if  invalid version detected.   
  10.             background:'#000',       // Background color of plugin.   
  11.             isWindowless:'false',       // Determines whether to display plugin  in Windowless mode.   
  12.             framerate:'24',             // MaxFrameRate property value.   
  13.             version:'1.0'               // Silverlight version to use.   
  14.         },   
  15.         {   
  16.             onError:null,               // OnError property value --  event handler function name.   
  17.             onLoad:null                 // OnLoad property value --  event handler function name.   
  18.         },   
  19.         null);                          // Context value -- event handler function name.   
  20. }   

 

myxaml.xaml 定义silverlight里面要呈现的数据和事件等，是一个XML文件

 

XML/HTML代码
  1. <Canvas  
  2.     xmlns="http://schemas.microsoft.com/client/2007"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
  4.  <Canvas.Triggers>  
  5.     <EventTrigger RoutedEvent="Canvas.Loaded">  
  6.       <EventTrigger.Actions>  
  7.         <BeginStoryboard>  
  8.           <Storyboard>  
  9.             <DoubleAnimation    
  10.               Storyboard.TargetName="ellipse"  
  11.               Storyboard.TargetProperty="(Canvas.Left)"  
  12.               To="340" Duration="0:0:1" />  
  13.             <DoubleAnimation    
  14.               Storyboard.TargetName="ellipse"  
  15.               Storyboard.TargetProperty="(Canvas.Top)"  
  16.               To="200" Duration="0:0:1" />  
  17.            </Storyboard>  
  18.         </BeginStoryboard>  
  19.       </EventTrigger.Actions>  
  20.     </EventTrigger>  
  21.   </Canvas.Triggers>  
  22.   
  23.   <Image Source="logo.jpg" Canvas.Left="20" Canvas.Top="20"/>  
  24.   <Ellipse x:Name="ellipse"  
  25.       Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"  
  26.       Fill="blue" />  
  27.   <TextBlock Text="Hello world"  Canvas.Left="30" Canvas.Top="30" />  
  28. </Canvas>  

 

1060 0 
访客评论
    发表评论
    • 你的姓名：
    • 你的网站：
    •   EMAIL：   
    • 评论内容：
    • 私人