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

  • 常规讨论

  • 这一次说一下多层折叠效果在silverlight2中的实现,在Adobe的Flex中自带了Accordion的控件,在silverlight2中目前好像
    还没有提供,只好暂且自己实现类似的效果了,我目前暂时实现了效果,代码还有很多不完善的地方,以后打算做成一个控件
    封装起来,这回先说一下如何实现Accordion效果吧。
    实现平台:VS2008 + Silverlight2

    效果图:
    鼠标移动到注册上:


    鼠标移动到登陆上:


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


    实现步骤:
    首先说一下Xaml的实现代码,要实现各个层的隐藏和现实就要先定义动画效果:
    主要是四个动作,第一设置具体内容的显示和隐藏,第二设置黄色小箭头的方向,第三是设置矩形框的大小,最后设置标题的黄色背景的显示和隐藏。

    再说事件的响应部分,我响应的是鼠标移动的事件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

    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月9日 7:52
    版主