这一次说一下多层折叠效果在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'/>