Fun with Silverlight系列之二 -- Accordion多层折叠效果

这一次说一下多层折叠效果在silverlight2中的实现，在Adobe的Flex中自带了Accordion的控件，在silverlight2中目前好像
还没有提供，只好暂且自己实现类似的效果了，我目前暂时实现了效果，代码还有很多不完善的地方，以后打算做成一个控件
封装起来，这回先说一下如何实现Accordion效果吧。
实现平台：VS2008 + Silverlight2

效果图：
鼠标移动到注册上：


鼠标移动到登陆上：


鼠标移动到忘记密码上面：


实现步骤：
首先说一下Xaml的实现代码，要实现各个层的隐藏和现实就要先定义动画效果：
动画定义
主要是四个动作，第一设置具体内容的显示和隐藏，第二设置黄色小箭头的方向，第三是设置矩形框的大小，最后设置标题的黄色背景的显示和隐藏。

再说事件的响应部分，我响应的是鼠标移动的事件MouseEnter，
1<Rectangle x:Name='imageMenuRect' Width='200' Height='50' RadiusX='15' RadiusY='15' Stroke="White" StrokeThickness='2' Fill="Transparent" 
MouseEnter="imageMenuRect_MouseEnter"/>

后台代码：
 1        private void imageMenuRect_MouseEnter(object sender, MouseEventArgs e)
 2        {
 3            imageMenu.Opacity = 1d;
 4            textMenu.Opacity = 0.4d;
 5            inkMenu.Opacity = 0.4d;
 6            miscMenu.Opacity = 0.4d;
 7            if (imageMenuRect.Height == 50)
 8            {
 9                expandImageMenu.Begin();
10            }
11            else
12            {
13                collapseMenus.Begin();
14            }
15        }

把鼠标移动到的层高亮显示，然后激活动画。

最后我想说一下，因为silverlight起步比Flex晚，的确有很多控件和效果没有Flex的丰富，
希望Silverlight社区多涌现出像flexlib这样的开源控件库，
让Silverlight的世界更加丰富多彩起来。

代码下载

作者：ithurricane
出处：http://ithurricane.cnblogs.com
联系:ithurricane@126.com
MSN:ithurricane@hotmail.com
QQ:20158686
Tag标签: silverlight2
0
0
(请您对文章做出评价)
« 上一篇：Fun with Silverlight系列之一 -- 倒影效果
» 下一篇：Fun with Silverlight2.0系列之三 -- Skinnable动态换肤效果
posted @ 2008-03-24 13:14 ithurricane 阅读(3435) 评论(16)  编辑 收藏 网摘 所属分类: Fun with Silverlight2.0

  回复  引用    
#1楼2008-03-24 12:46 | eddielau[未注册用户]
silverlight性能不敢恭维，记得网上有个对比，同样是一个界面例子，运行FLASH速度很快，而且占用CPU资源很低， 可是silverlight稍微动动例子上的图元，比如dropdown，CPU占用就80%甚至更多。晕死，好像 silverlight2还是这样。
  回复  引用  查看    
#2楼[楼主]2008-03-24 12:50 | ithurricane      
@eddielau
不知道生成的.xap文件大小如何？
flex如果经过编译优化过生成的swf文件是非常小的。
  回复  引用  查看    
#3楼2008-03-24 12:57 | Ariel Y.      
@eddielau

说反了吧，那个Balls的例子，Silverlight CLR模式的速度最快了
  回复  引用  查看    
#4楼[楼主]2008-03-24 13:00 | ithurricane      
@Ariel Y.
不知道这个例子在哪里？我也去瞧瞧

  回复  引用  查看    
#5楼2008-03-24 13:42 | Ariel Y.      
http://bubblemark.com/index.htm

Silverlight CLR的最近没有更新，还不支持2.0
  回复  引用    
#6楼2008-03-24 18:25 | 森要[未注册用户]
性能比较差，只能自己欣赏欣常，不可以商用
  回复  引用  查看    
#7楼2008-03-24 19:57 | aspnetx      
@eddielau
silverlight 2.0 beta 1目前有dropdownlist发布吗?
感觉sl再怎么差劲应该也不至于有如此大的性能差异吧,关键还是看实现的方式.就好像从北京站到天安门,你坐车从崇文绕到宣武再绕到海淀走朝阳经过东城走西城也不如步行直接走到那里快.

silverlight目前对于我个人来说,能把统计分析研判的东西很好的表达出来,就够了.毕竟正式版还要等段时间发布嘛.总之个人比较看好这个.
  回复  引用  查看    
#8楼[楼主]2008-03-24 20:14 | ithurricane      
@森要
其实还是要看编译出来文件的大小，如果很大，下载时间很长，
自然就感觉速度慢了

  回复  引用  查看    
#9楼[楼主]2008-03-24 20:17 | ithurricane      
@aspnetx
恩，不知道正式版什么时候出，希望控件能多一些，自带效果能像flex一样方便

  回复  引用  查看    
#10楼2008-03-25 09:03 | 巫云      
还是感觉flash那样，编译后的好，性能好很多。
  回复  引用    
#11楼2008-09-01 14:42 | xhz[未注册用户]
唉，楼主写的代码真是一点重用性都没有。

  回复  引用    
#12楼2009-05-28 23:04 | jasson[未注册用户]
@eddielau
这个东西要自已测试才知道性能好坏，听别人说是没用的。我测试过silverlight程序，可以说cpu占用并不高，当切换控件的那一刹那大部分的比例在11%之间，一秒钟过后，即控件已加载后在1%--2%之间
  回复  引用    
#13楼2009-05-28 23:05 | jasson[未注册用户]
--引用--------------------------------------------------
eddielau: silverlight性能不敢恭维，记得网上有个对比，同样是一个界面例子，运行FLASH速度很快，而且占用CPU资源很低， 可是silverlight稍微动动例子上的图元，比如dropdown，CPU占用就80%甚至更多。晕死，好像 silverlight2还是这样。
--------------------------------------------------------

这个东西要自已测试才知道性能好坏，听别人说是没用的。我现在就在做一个silverlight的项目在，我测试过silverlight性能，可以说cpu占用并不高，当切换控件的那一刹那大部分的比例在11%之间，一秒钟过后，即控件已加载后在1%--2%之