柳暗花明
以博会友
社区
首页
新随笔
联系
管理
订阅
随笔- 8 文章- 0 评论- 50
Fun with Silverlight系列之二 -- Accordion多层折叠效果
这一次说一下多层折叠效果在silverlight2中的实现,在Adobe的Flex中自带了Accordion的控件,在silverlight2中目前好像
还没有提供,只好暂且自己实现类似的效果了,我目前暂时实现了效果,代码还有很多不完善的地方,以后打算做成一个控件
封装起来,这回先说一下如何实现Accordion效果吧。
实现平台:VS2008 + Silverlight2
效果图:
鼠标移动到注册上:
鼠标移动到登陆上:
鼠标移动到忘记密码上面:
实现步骤:
首先说一下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
>
主要是四个动作,第一设置具体内容的显示和隐藏,第二设置黄色小箭头的方向,第三是设置矩形框的大小,最后设置标题的黄色背景的显示和隐藏。
再说事件的响应部分,我响应的是鼠标移动的事件
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
posted @ 2008-03-24 13:14
ithurricane
阅读(2241)
评论(13)
编辑
收藏
所属分类:
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