当前位置:主页   - 电脑 - 图形图像 - Flash
Fun with Silverlight系列之二 -- Accordion多层折叠效果
来源:网络   作者:   更新时间:2012-05-13
收藏此页】    【字号    】    【打印】    【关闭

  这一次说一下多层折叠效果在silverlight2中的实现,在Adobe的Flex中自带了Accordion的控件,在silverlight2中目前好像

  还没有提供,只好暂且自己实现类似的效果了,我目前暂时实现了效果,代码还有很多不完善的地方,以后打算做成一个控件

  封装起来,这回先说一下如何实现Accordion效果吧。

  实现平台:VS2008 + Silverlight2

  本文示例下载: http://flashview.ddvip.com//2008_10/AppleAccordion.zip

  效果图:

  鼠标移动到注册上:

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

  鼠标移动到登陆上:

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

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

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

  实现步骤:

  首先说一下Xaml的实现代码,要实现各个层的隐藏和现实就要先定义动画效果:

  动画定义

 1 <Canvas.Resources>
 2      <Storyboard x:Name='expandImageMenu'>
 3        <DoubleAnimation Storyboard.TargetName='imageMenuScale' Storyboard.TargetProperty='ScaleY' To='1' Duration='0:0:0.3'/>
 4        <DoubleAnimation Storyboard.TargetName='textMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
 5        <DoubleAnimation Storyboard.TargetName='inkMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
 6        <DoubleAnimation Storyboard.TargetName='miscMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
 7        <DoubleAnimation Storyboard.TargetName='imageMenuIconTransform' Storyboard.TargetProperty='Angle' To='-90' Duration='0:0:0.3'/>
 8        <DoubleAnimation Storyboard.TargetName='textMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
 9        <DoubleAnimation Storyboard.TargetName='inkMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
10        <DoubleAnimation Storyboard.TargetName='miscMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
11        <DoubleAnimation Storyboard.TargetName='imageMenuRect' Storyboard.TargetProperty='Height' To='130' Duration='0:0:0.3'/>
12        <DoubleAnimation Storyboard.TargetName='textMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
13;       <DoubleAnimation Storyboard.TargetName='inkMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
14        <DoubleAnimation Storyboard.TargetName='miscMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
15        <DoubleAnimation Storyboard.TargetName='imageMenu' Storyboard.TargetProperty='(Canvas.Top)' To='10' Duration='0:0:0.3'/>
16        <DoubleAnimation Storyboard.TargetName='textMenu' Storyboard.TargetProperty='(Canvas.Top)' To='140' Duration='0:0:0.3'/>
17        <DoubleAnimation Storyboard.TargetName='inkMenu' Storyboard.TargetProperty='(Canvas.Top)' To='190' Duration='0:0:0.3'/>
18        <DoubleAnimation Storyboard.TargetName='miscMenu' Storyboard.TargetProperty='(Canvas.Top)' To='240' Duration='0:0:0.3'/>19        <DoubleAnimation Storyboard.TargetName='regRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
20        <DoubleAnimation Storyboard.TargetName='loginRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
21        <DoubleAnimation Storyboard.TargetName='forgetRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
22        <DoubleAnimation Storyboard.TargetName='exitRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
23      </Storyboard>
24      <Storyboard x:Name='expandTextMenu'>
25        <DoubleAnimation Storyboard.TargetName='imageMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
26        <DoubleAnimation Storyboard.TargetName='textMenuScale' Storyboard.TargetProperty='ScaleY' To='1' Duration='0:0:0.3'/>
27        <DoubleAnimation Storyboard.TargetName='inkMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
28        <DoubleAnimation Storyboard.TargetName='miscMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
29        <DoubleAnimation Storyboard.TargetName='imageMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
30        <DoubleAnimation Storyboard.TargetName='textMenuIconTransform' Storyboard.TargetProperty='Angle' To='-90' Duration='0:0:0.3'/>
31        <DoubleAnimation Storyboard.TargetName='inkMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
32        <DoubleAnimation Storyboard.TargetName='miscMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
33        <DoubleAnimation Storyboard.TargetName='imageMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
34        <DoubleAnimation Storyboard.TargetName='textMenuRect' Storyboard.TargetProperty='Height' To='110' Duration='0:0:0.3'/>
35        <DoubleAnimation Storyboard.TargetName='inkMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
36        <DoubleAnimation Storyboard.TargetName='miscMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
37        <DoubleAnimation Storyboard.TargetName='imageMenu' Storyboard.TargetProperty='(Canvas.Top)' To='10' Duration='0:0:0.3'/>
38        <DoubleAnimation Storyboard.TargetName='textMenu' Storyboard.TargetProperty='(Canvas.Top)' To='60' Duration='0:0:0.3'/>
39        <DoubleAnimation Storyboard.TargetName='inkMenu' Storyboard.TargetProperty='(Canvas.Top)' To='170' Duration='0:0:0.3'/>
40        <DoubleAnimation Storyboard.TargetName='miscMenu' Storyboard.TargetProperty='(Canvas.Top)' To='220' Duration='0:0:0.3'/>
41        <DoubleAnimation Storyboard.TargetName='regRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
42        <DoubleAnimation Storyboard.TargetName='loginRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
43        <DoubleAnimation Storyboard.TargetName='forgetRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
44        <DoubleAnimation Storyboard.TargetName='exitRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
45      </Storyboard>
46      <Storyboard x:Name='expandInkMenu'>
47        <DoubleAnimation Storyboard.TargetName='imageMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
48        <DoubleAnimation Storyboard.TargetName='textMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
49        <DoubleAnimation Storyboard.TargetName='inkMenuScale' Storyboard.TargetProperty='ScaleY' To='1' Duration='0:0:0.3'/>
50        <DoubleAnimation Storyboard.TargetName='miscMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
51        <DoubleAnimation Storyboard.TargetName='imageMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
52        <DoubleAnimation Storyboard.TargetName='textMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
53        <DoubleAnimation Storyboard.TargetName='inkMenuIconTransform' Storyboard.TargetProperty='Angle' To='-90' Duration='0:0:0.3'/>
54        <DoubleAnimation Storyboard.TargetName='miscMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
55        <DoubleAnimation Storyboard.TargetName='imageMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
56        <DoubleAnimation Storyboard.TargetName='textMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
57        <DoubleAnimation Storyboard.TargetName='inkMenuRect' Storyboard.TargetProperty='Height' To='110' Duration='0:0:0.3'/>
58        <DoubleAnimation Storyboard.TargetName='miscMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
59        <DoubleAnimation Storyboard.TargetName='imageMenu' Storyboard.TargetProperty='(Canvas.Top)' To='10' Duration='0:0:0.3'/>
60        <DoubleAnimation Storyboard.TargetName='textMenu' Storyboard.TargetProperty='(Canvas.Top)' To='60' Duration='0:0:0.3'/>
61        <DoubleAnimation Storyboard.TargetName='inkMenu' Storyboard.TargetProperty='(Canvas.Top)' To='110' Duration='0:0:0.3'/>
62        <DoubleAnimation Storyboard.TargetName='miscMenu' Storyboard.TargetProperty='(Canvas.Top)' To='220' Duration='0:0:0.3'/>
63        <DoubleAnimation Storyboard.TargetName='regRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
64        <DoubleAnimation Storyboard.TargetName='loginRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
65        <DoubleAnimation Storyboard.TargetName='forgetRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
66        <DoubleAnimation Storyboard.TargetName='exitRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
67      </Storyboard>
68      <Storyboard x:Name='expandMiscMenu'>
69        <DoubleAnimation Storyboard.TargetName='imageMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
70        <DoubleAnimation Storyboard.TargetName='textMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
71        <DoubleAnimation Storyboard.TargetName='inkMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
72        <DoubleAnimation Storyboard.TargetName='miscMenuScale' Storyboard.TargetProperty='ScaleY' To='1' Duration='0:0:0.3'/>
73        <DoubleAnimation Storyboard.TargetName='imageMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
74        <DoubleAnimation Storyboard.TargetName='textMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
75        <DoubleAnimation Storyboard.TargetName='inkMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
76        <DoubleAnimation Storyboard.TargetName='miscMenuIconTransform' Storyboard.TargetProperty='Angle' To='-90' Duration='0:0:0.3'/>
77        <DoubleAnimation Storyboard.TargetName='imageMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
78        <DoubleAnimation Storyboard.TargetName='textMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
79        <DoubleAnimation Storyboard.TargetName='inkMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
80        <DoubleAnimation Storyboard.TargetName='miscMenuRect' Storyboard.TargetProperty='Height' To='110' Duration='0:0:0.3'/>
81        <DoubleAnimation Storyboard.TargetName='imageMenu' Storyboard.TargetProperty='(Canvas.Top)' To='10' Duration='0:0:0.3'/>
82        <DoubleAnimation Storyboard.TargetName='textMenu' Storyboard.TargetProperty='(Canvas.Top)' To='60' Duration='0:0:0.3'/>
83        <DoubleAnimation Storyboard.TargetName='inkMenu' Storyboard.TargetProperty='(Canvas.Top)' To='110' Duration='0:0:0.3'/>
84        <DoubleAnimation Storyboard.TargetName='miscMenu' Storyboard.TargetProperty='(Canvas.Top)' To='160' Duration='0:0:0.3'/>
85        <DoubleAnimation Storyboard.TargetName='regRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
86        <DoubleAnimation Storyboard.TargetName='loginRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
87        <DoubleAnimation Storyboard.TargetName='forgetRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
88        <DoubleAnimation Storyboard.TargetName='exitRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
89      </Storyboard>
90      <Storyboard x:Name='collapseMenus'>
91        <DoubleAnimation Storyboard.TargetName='imageMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
92        <DoubleAnimation Storyboard.TargetName='textMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
93        <DoubleAnimation Storyboard.TargetName='inkMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
94        <DoubleAnimation Storyboard.TargetName='miscMenuScale' Storyboard.TargetProperty='ScaleY' To='0' Duration='0:0:0.3'/>
95        <DoubleAnimation Storyboard.TargetName='imageMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
96        <DoubleAnimation Storyboard.TargetName='textMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
97        <DoubleAnimation Storyboard.TargetName='inkMenuIconTransform' Storyboard.TargetProperty='Angle' To='0' Duration='0:0:0.3'/>
98        <DoubleAnimation Storyboard.TargetName='miscMenuIconTransform' Storyboard.TargetProperty='Angle' To='00' Duration='0:0:0.3'/>
99        <DoubleAnimation Storyboard.TargetName='imageMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
100        <DoubleAnimation Storyboard.TargetName='textMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
101        <DoubleAnimation Storyboard.TargetName='inkMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
102        <DoubleAnimation Storyboard.TargetName='miscMenuRect' Storyboard.TargetProperty='Height' To='50' Duration='0:0:0.3'/>
103        <DoubleAnimation Storyboard.TargetName='imageMenu' Storyboard.TargetProperty='(Canvas.Top)' To='10' Duration='0:0:0.3'/>
104        <DoubleAnimation Storyboard.TargetName='textMenu' Storyboard.TargetProperty='(Canvas.Top)' To='60' Duration='0:0:0.3'/>
105        <DoubleAnimation Storyboard.TargetName='inkMenu' Storyboard.TargetProperty='(Canvas.Top)' To='110' Duration='0:0:0.3'/>
106        <DoubleAnimation Storyboard.TargetName='miscMenu' Storyboard.TargetProperty='(Canvas.Top)' To='160' Duration='0:0:0.3'/>
107        <DoubleAnimation Storyboard.TargetName='regRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
108        <DoubleAnimation Storyboard.TargetName='loginRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
109        <DoubleAnimation Storyboard.TargetName='forgetRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
110        <DoubleAnimation Storyboard.TargetName='exitRect' Storyboard.TargetProperty='Height' To='0' Duration='0:0:0.3'/>
111      </Storyboard>
112    </Canvas.Resources>

其它资源
来源声明

版权与免责声明
1、本站所发布的文章仅供技术交流参考,本站不主张将其做为决策的依据,浏览者可自愿选择采信与否,本站不对因采信这些信息所产生的任何问题负责。
2、本站部分文章来源于网络,其版权为原权利人所有。由于来源之故,有的文章未能获得作者姓名,署“未知”或“佚名”。对于这些文章,有知悉作者姓名的请告知本站,以便及时署名。如果作者要求删除,我们将予以删除。除此之外本站不再承担其它责任。
3、本站部分文章来源于本站原创,本站拥有所有权利。
4、如对本站发布的信息有异议,请联系我们,经本站确认后,将在三个工作日内做出修改或删除处理。
请参阅权责声明