注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

水木的博客

唱好人生中的每一场戏

 
 
 

日志

 
 

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

2011-08-29 20:21:06|  分类: silverlight |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这一次说一下多层折叠效果在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的世界更加丰富多彩起来。
代码下载

转自:http://www.cnblogs.com/ithurricane/archive/2008/03/24/1119242.html

  评论这张
 
阅读(1001)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017