Silverlight2.0之旋转木马.docVIP

Silverlight 2.0 之旋转木马序言:记得去年8月就开始接触Silverlight 1.0了,那时候刚出来,接触的人还不是很多,一位MVP讲师朋友说国内精通的也就几千人吧,因为自己对RIA一直也比较有兴趣,所以学起来也很快,想不到MS终于放出了2.0,立马给VS2008打上SP1的补丁,装上sl2.0 RTW(SDK),装上EB SP1... 正文:关于Sl2.0的一些新特性啥的我就不说了,直接切入正题,我之前在个人网站上的首页(见/)一直是用Ajax来实现的,效率低不说,CPU那个使用率... 所以今天的主要内容就是使用SL2.0来实现旋转木马的效果,最终效果图如下(点我体验): 导航分类会围绕中心点做椭圆轨迹的旋转,并且产生不同视觉效果(近点较大,远点较小),那么首先对椭圆轨迹要有一个清晰的认识(x2/a2+y2/b2=1),我们没有必要去求每个分类在椭圆上每个点的精确坐标值(x,y),使用x=sinα*a,y=cosα*b即可.这样根据我们定义的椭圆长轴和短轴坐标可以很方便的计算分类对象当前运动轨迹的x轴坐标和y轴坐标.至于分类对象的大小则可以使用一个比例来进行缩放,基本原理就这么多,下面来看具体的实现步骤: a) 数据提供??? 使用Xml就可以轻松的实现配置.Xml的结构如下:??? WebDatas?1xml?version=1.0?encoding=utf-8???2WebDatas?3??WebData?4????UniqueIdUniqueId?5????ImageSrcImageSrc?6????TitleTitle?7????linklink?8????linkContentlinkContent?9????DescriptionDescription10??WebData11WebDatas ??? WebDatas为根节点,WebData为每个分类对象,包括的属性为: ??????????UniqueId -? 唯一标识 ??????????ImageSrc - 导航分类的展示图片Url ??????????Title - 每个分类的标题 ??????????Link - 每个分类链接Url ??????????linkContent - 分类的实际显示文字(比如锚的InnerText) ??????????Description - 分类描述 ? b) Xaml生成 ?????由于数据是由Xml读取的,所以需要动态生成Xaml. ?????基础知识: ??????????1) Silverlight 2.0 读取Xml ???????????????SL2提供了很多数据通信的方法,包括WCF,WebRequest,WebClient,Json等,那么这里就直接使用WebClient类来读取一个Xml文件的内容: Use WebClientWebClient?wc?=?new?WebClient();wc.DownloadStringAsync(new?Uri(HtmlPage.Document.DocumentUri,Data/Data.xml));wc.DownloadStringCompleted?+=?new?DownloadStringCompletedEventHandler(wc_DownloadStringCompleted); ?????首先创建一个WebClient的对象,并为其注册DownloadStirngCompleted事件, 我会将数据文件放在宿主网站的Data目录下,命名为Data.xml.使用HtmlPage.Document.DocumentUri来取得其Uri,并进行下载. Codevoid?wc_DownloadStringCompleted(object?sender,?DownloadStringCompletedEventArgs?e){????if?(e.Cancelled?==?false??e.Error?==?null??e.Result?!=?string.Empty)????{????????XmlReader?xr?=?XmlReader.Create(new?StringReader(e.Result));????????XDocument?xd?=?XDocument.Load(xr);????????var?wdm?=?from?f?in?xd.Descendants(WebData)??????????????????select?new?WebDataModel??????????????????{??????????????????????Title?=?f.E