silverlight

(一).概述(二).代码示例1).基础知识示例1.对象的定位2.使用SilverLight插件3.SilverLight元素的鼠标事件4.SilverLight元素的键盘事件5.方法createFromXaml使用示例6.访问和修改Silverlight元素以及属性7.Silverlight中的字体使用8.全屏支持功能9.SilverlightDownloader对象使用10.定时器功能11.错误处理支持12.把xaml段内置在aspx或html页面中2).制作图形示例13.基本图形形状示例14.画刷对象的使用15.视频刷对象的使用16.Path元素使用17.变换效果(Transform)3).多媒体功能18.在线电影播放4).制作动画效果示例19.一个动画示例20.动画的交互控制21.动画关键帧示例(一).概述Silverlight是一个跨浏览器的、跨操作系统平台的插件，为Web带来下一代媒体体验和丰富的交互式应用程序体验.使用JS实现Ajax技术可以使网站具有很好的用户体验,但它也会使网站过于庞大和臃肿.业余时间学习了一下微软的Silverlight官方教程,在学习时顺便根据学习示例整理了一个教程.此教程包括一些精简的小例子,主要针对开发使用场景展开示例,在实际开发中也可以作为查找手册使用.运行环境为VS2005,这些示例比较简单很容易看懂,因此示例没有太多注释.(二).代码示例1).基础知识示例1.对象的定位通过呈现几个Silverlight元素来示例对象之间的定位,以及在一个页面中创建装载多个Silverlight对象.I.页面代码(Default.aspx)htmlxmlns==servertitleSilverlight对象的定位/titlescripttype=text/javascriptsrc=..\Silverlight.js/scriptscripttype=text/javascriptsrc=Default.aspx.js/script/headbodyformid=form1runat=serverdivid=SilverlightControlHost1scripttype=text/javascriptcreateSilverlight1();/script/divhrdivid=SilverlightControlHost2scripttype=text/javascriptcreateSilverlight2();/script/divhrdivid=SilverlightControlHost3scripttype=text/javascriptcreateSilverlight3();/script/divhrdivid=SilverlightControlHost4scripttype=text/javascriptcreateSilverlight4();/script/divhrdivid=SilverlightControlHost5scripttype=text/javascriptcreateSilverlight5();/script/div/form/body/htmlII.页面对应的JS文件代码(Default.aspx.js)//创建对象functioncreateSilverlight1(){Silverlight.createObjectEx({source:Page1.xaml,parentElement:document.getElementById(SilverlightControlHost1),id:SilverlightControl1,properties:{width:350,height:350,version:1.0,background:white,isWindowless:true,enableHtmlAccess:true},events:{}});}functioncreateSilverlight2(){Silverlight.createObjectEx({source:Page2.xaml,parentElement:document.getElementById(SilverlightControlHost2),id:SilverlightControl2,properties:{width:350,height:350,version:1.0,background:white,isWindowless:true,enableHtmlAccess:true},events:{}});}functioncreateSilverlight3(){Silverlight.createObjectEx({source:Page3.xaml,parentElement:document.getElementById(SilverlightControlHost3),id:SilverlightControl3,properties:{width:350,height:350,version:1.0,background:white,isWindowless:true,enableHtmlAccess:true},events:{}});}functioncreateSilverlight4(){Silverlight.createObjectEx({source:Page4.xaml,parentElement:document.getElementById(SilverlightControlHost4),id:SilverlightControl4,properties:{width:350,height:350,version:1.0,background:white,isWindowless:true,enableHtmlAccess:true},events:{}});}functioncreateSilverlight5(){Silverlight.createObjectEx({source:Page5.xaml,parentElement:document.getElementById(SilverlightControlHost5),id:SilverlightControl5,properties:{width:350,height:350,version:1.0,background:white,isWindowless:true,enableHtmlAccess:true},events:{}});}III.Xaml文件代码1.Page1.xaml代码Canvasxmlns=:x==640Height=480Background=LightGreenCanvas.Left=10Canvas.Top=10RectangleCanvas.Left=30Canvas.Top=30Fill=LightBlueWidth=200Height=200//Canvas2.Page2.xaml代码Canvasxmlns=:x==300Height=300Background=WhiteCanvasWidth=250Height=250Canvas.Left=30Canvas.Top=30Background=LightBlueRectangleCanvas.Left=30Canvas.Top=30Fill=LightGreenWidth=200Height=200//Canvas/Canvas3.Page3.xaml代码Canvasxmlns=:x==300Height=300Background=WhiteLineX1=280Y1=10X2=10Y2=280Stroke=BlueStrokeThickness=5/PolylinePoints=150,150150,250250,250250,150Stroke=YellowStrokeThickness=10/PathData=M10,100C10,300300,-200250,100zStroke=RedFill=OrangeCanvas.Left=10Canvas.Top=10//Canvas4.Page4.xaml代码Canvasxmlns=:x==200Height=200RectangleCanvas.Left=100Canvas.Top=100Width=50Height=50Fill=RoyalBlueRectangle.RenderTransformRotateTransformAngle=45//Rectangle.RenderTransform/Rectangle/Canvas5.Page5.xaml代码Canvasxmlns=:x==3Canvas.Left=5Canvas.Top=5Height=200Width=200Stroke=BlackStrokeThickness=10Fill=Silver/EllipseCanvas.ZIndex=2Canvas.Left=50Canvas.Top=50Height=200Width=200Stroke=BlackStrokeThickness=10Fill=DeepSkyBlue/EllipseCanvas.ZIndex=1Canvas.Left=95Canvas.Top=95Height=200Width=200Stroke=BlackStrokeThickness=10Fill=Lime//Canvas2.使用SilverLight插件I.页面代码(Default.aspx)htmlxmlns==servertitle访问Silverlight插件/titlescripttype=text/javascriptsrc=..\Silverlight.js/scriptscripttype=text/javascriptsrc=Default.aspx.js/script/headbodyonload=document.getElementById(''SilverlightControlHost'').focus()formid=form1runat=serverdivid=SilverlightC