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

核心提示：这一次说一下多层折叠效果在silverlight2中的实现，在Adobe的Flex中自带了Accordion的控件，Fun with Silverlight系列之二 －－ Accordion多层折叠效果，在silverlight2中目前好像还没有提供，只好暂且自己实现类似的效果了，以后打算做成一个控件封装起来，这回先说

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

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

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

实现平台：VS2008 + Silverlight2

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

效果图：

鼠标移动到注册上：

鼠标移动到登陆上：

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

实现步骤：

首先说一下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>