silverlight应用-图片新闻展示效果

使用的是SL bete2,cpu占用快于js,差于flash,参考了jQuery实例：图片展示效果 的思想实现了一些网站首页的图片新闻展示效果。大概解析下（具体请参考代码注释）：图片容器包括图片、底部文字、数字圆圈3部分和对应的3个动画，其定位和动画位移都是通过改变其Canvas.Top或Left属性，图片hover时通过改变DoubleAnimation.From和To属性实现位移动画，这些基础可以参考园子上面的很多文章，初步实现了基本功能，后续将实现更多的动画效果，并封装成控件。

预览体验：
 

Page.xaml：

< UserControl  x:Class ="SilverlightApplication1.Page"
    xmlns ="http://schemas.microsoft.com/client/2007"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
    Width ="400"  Height ="300" >
    
     < Canvas  x:Name ="main"  Background ="Black"  Cursor ="Hand"  MouseLeave ="main_MouseLeave" >
         < Canvas .Resources >
             < Storyboard  x:Name ="storyboard" >
             </ Storyboard >
             < Storyboard  x:Name ="storyboard2" >
             </ Storyboard >
             < Storyboard  x:Name ="storyboard3" >
             </ Storyboard >
         </ Canvas.Resources >
         < Canvas .Clip >
             < RectangleGeometry  x:Name ="rectangleGeometry" >
             </ RectangleGeometry >
         </ Canvas.Clip >
            
     </ Canvas >
</ UserControl >

Page.xaml.cs：

public   partial   class  Page : UserControl
    {
         // 整个布局宽度
         int  divWidth  =   480 ;
         // 整个布局高度
         int  divHeight  =   332 ;
         // 图片数量
         int  imgNums  =   4 ;
         // 图片宽度
         int  imgWidth  =   349 ;
         // 整个布局长方形圆角弧度
         int  radius  =   10 ;
         // 底部文字高度
         int  textHeight  =   30 ;
         // 数字圆圈大小
         int  numberSize  =   30 ;
         // 图片实体集合
        List < Photo >  photos;
               
         public  Page()
        {
            InitializeComponent();
             // 载入图片数据
            InitImageData();
        }

         private   void  InitImageData()
        {
             // 建立读取xml文件的WebClient
            WebClient xmlClient  =   new  WebClient();
            xmlClient.DownloadStringCompleted  +=   new  DownloadStringCompletedEventHandler(xmlClient_DownloadStringCompleted);
            xmlClient.DownloadStringAsync( new  Uri(HtmlPage.Document.DocumentUri,  " Photos.xml " ));
        }

         private   void  xmlClient_DownloadStringCompleted( object  sender, DownloadStringCompletedEventArgs e)
        {
             if  (e.Error  ==   null   &&  e.Result.Length  >   0 )
            {
                photos  =   new  List < Photo > ();

                 using  (XmlReader reader  =  XmlReader.Create( new  StringReader(e.Result)))
                {
                     while  (reader.Read())
                    {
                         if  (reader.NodeType  ==  XmlNodeType.Element)
                        {
                            Photo photo  =   new  Photo();
                             if  (reader.HasAttributes)
                            {
                                photo.imgurl  =  reader[ 0 ];
                                photo.url  =  reader[ 1 ];
                                photo.target  =  reader[ 2 ];
                                photo.text  =  reader[ 3 ];
                                photos.Add(photo);
                            }
                        }
                    }
                }

                imgNums  =  photos.Count;
                 // 载入成功后初始化界面上的元素
                InitImage();

            }
        }
        
         private   void  InitImage()
        {
             // 设置整个布局
            main.Height  =  divHeight;
            main.Width  =  divWidth;
             // 设置布局的圆角
            rectangleGeometry.SetValue(RectangleGeometry.RadiusXProperty, radius);
            rectangleGeometry.SetValue(RectangleGeometry.RadiusYProperty, radius);
            rectangleGeometry.SetValue(RectangleGeometry.RectProperty,  string .Format( " 0,0,{0},{1} " , divWidth, divHeight));
             // 创建图片元素
             for  ( int  i  =   0 ; i < imgNums; i ++ )
            {
                 // 图片容器
                Canvas photo  =   new  Canvas();
                photo.Width  =  imgWidth;
                photo.Height  =  divHeight;
                photo.Opacity  =   0.7 ;
                photo.Tag  =  i.ToString();
                photo.SetValue(Canvas.LeftProperty, i  *  (divWidth  /  imgNums));
                photo.SetValue(NameProperty,  " photo "   +  i.ToString());
                photo.MouseEnter  +=   new  MouseEventHandler(photo_MouseEnter);
                photo.MouseLeftButtonDown  +=   new  MouseButtonEventHandler(photo_MouseLeftButtonDown);
                 // 第一个元素：背景图片
                Image image  =   new  Image();
                image.Width  =  imgWidth;
                image.Height  =  divHeight;
                image.Source  =   new  BitmapImage( new  Uri(photos[i].imgurl, UriKind.Relative));
                 // 第二个元素：数字圆圈
                Canvas number  =   new  Canvas();
                number.Width  =  numberSize;
                number.Height  =  numberSize;
                number.Opacity  =   0.6 ;
                number.SetValue(NameProperty,  " number "   +  i.ToString());
                 // 数字圆圈-背景圆形
                Ellipse ellipse  =   new  Ellipse();
                ellipse.Height  =  numberSize;
                ellipse.Width  =  numberSize;
                ellipse.Fill  =   new  SolidColorBrush(Colors.Black);
                ellipse.Stroke  =   new  SolidColorBrush(Colors.White);
                 // 数字圆圈-数字文字
                TextBlock numberText  =   new  TextBlock();
                numberText.Text  =  (i  +   1 ).ToString();
                numberText.FontWeight  =  FontWeights.Bold;
                numberText.Foreground  =   new  SolidColorBrush(Colors.White);
                numberText.SetValue(Canvas.LeftProperty, numberSize  /   5 );
                numberText.SetValue(Canvas.TopProperty, numberSize  /   5 );
                 // 第三个元素：底部文字
                Canvas content  =   new  Canvas();
                content.Width  =  imgWidth;
                content.Height  =  textHeight;
                content.Opacity  =   0.8 ;
                content.SetValue(NameProperty,  " content "   +  i.ToString());
                content.SetValue(Canvas.LeftProperty,  0 );
                content.SetValue(Canvas.TopProperty, divHeight);
                 // 底部文字-背景矩形
                Rectangle rect  =   new  Rectangle();
                rect.Width  =  imgWidth;
                rect.Height  =  textHeight;
                rect.Fill  =   new  SolidColorBrush(Colors.Black);
                 // 底部文字-图片文字
                TextBlock text  =   new  TextBlock();
                text.Width  =  imgWidth;
                text.Text  =  photos[i].text;               
                text.Foreground  =   new  SolidColorBrush(Colors.White);
                 // 添加的元素关系为
                 // main +                          最外层容器
                 //      photo +                    图片容器
                 //            image -              背景图片
                 //            content +            底部文字
                 //                    rect -       背景矩形     
                 //                    text -       图片文字
                 //            number +             数字圆圈
                 //                   ellipse -     背景圆形   
                 //                   numberText -  数字文字
                content.Children.Add(rect);
                content.Children.Add(text);
                number.Children.Add(ellipse);
                number.Children.Add(numberText);
                photo.Children.Add(image);
                photo.Children.Add(content);
                photo.Children.Add(number);

                main.Children.Add(photo);

                 // 动画1-图片移动动画初始化
                DoubleAnimation animation  =   new  DoubleAnimation();
                animation.SetValue(NameProperty,  " animation "   +  i.ToString());
                animation.SetValue(Storyboard.TargetNameProperty,  " photo "   +  i.ToString());
                animation.SetValue(Storyboard.TargetPropertyProperty,  " (Canvas.Left) " );
                
                animation.SetValue(DoubleAnimation.DurationProperty,  " 0:0:0.4 " );
                animation.SetValue(DoubleAnimation.RepeatBehaviorProperty,  " 1x " );
                storyboard.Children.Add(animation);

                 // 动画2-底部文字移动动画初始化
                DoubleAnimation animation2  =   new  DoubleAnimation();
                animation2.SetValue(NameProperty,  " animation2 "   +  i.ToString());
                animation2.SetValue(Storyboard.TargetNameProperty,  " content "   +  i.ToString());
                animation2.SetValue(Storyboard.TargetPropertyProperty,  " (Canvas.Top) " );
                
                animation2.SetValue(DoubleAnimation.DurationProperty,  " 0:0:0.5 " );
                animation2.SetValue(DoubleAnimation.RepeatBehaviorProperty,  " 1x " );

                storyboard2.Children.Add(animation2);

                 // 动画3-数字圆圈消失动画初始化
                DoubleAnimation animation3  =   new  DoubleAnimation();
                animation3.SetValue(NameProperty,  " animation3 "   +  i.ToString());
                animation3.SetValue(Storyboard.TargetNameProperty,  " number "   +  i.ToString());
                animation3.SetValue(Storyboard.TargetPropertyProperty,  " Opacity " );

                animation3.SetValue(DoubleAnimation.DurationProperty,  " 0:0:0.5 " );
                animation3.SetValue(DoubleAnimation.RepeatBehaviorProperty,  " 1x " );

                storyboard3.Children.Add(animation3);
            }
        }

         void  photo_MouseLeftButtonDown( object  sender, MouseButtonEventArgs e)
        {
             // 点击时打开链接
            Canvas currentPhoto  =  sender  as  Canvas;

             int  currentIndex  =  Convert.ToInt16(currentPhoto.Tag);

            HtmlPage.Window.Navigate( new  Uri(photos[currentIndex].url), photos[currentIndex].target);
        }


         void  photo_MouseEnter( object  sender, MouseEventArgs e)
        {
             // 显示其中一张图片时其他图片的显示宽度
             int  minWidth  =  (divWidth  -  imgWidth)  /  (imgNums  -   1 );
             // 当前点击的图片
            Canvas currentPhoto  =  sender  as  Canvas;
             // 当前点击图片为第几张
             int  currentIndex  =  Convert.ToInt16(currentPhoto.Tag);
             // 循环创建动画
             for  ( int  i  =   0 ; i  <  imgNums; i ++ )
            {
                Canvas photo  =  main.Children[i]  as  Canvas;
                Canvas content  =  photo.FindName( " content "   +  i.ToString())  as  Canvas;
                Canvas number  =  photo.FindName( " number "   +  i.ToString())  as  Canvas;

                DoubleAnimation animation  =  storyboard.Children[i]  as  DoubleAnimation;
                DoubleAnimation animation2  =  storyboard2.Children[i]  as  DoubleAnimation;
                DoubleAnimation animation3  =  storyboard3.Children[i]  as  DoubleAnimation;

                animation.SetValue(DoubleAnimation.FromProperty, photo.GetValue(Canvas.LeftProperty));
                animation2.SetValue(DoubleAnimation.FromProperty, content.GetValue(Canvas.TopProperty));
                animation3.SetValue(DoubleAnimation.FromProperty, number.GetValue(Canvas.OpacityProperty));

                 // 如果是当前滑过图片的前面的图片
                 if  (i  <=  currentIndex)
                {
                     // 处理图片移动的位移
                    animation.SetValue(DoubleAnimation.ToProperty, i  *  minWidth);

                }
                 else
                {
                    animation.SetValue(DoubleAnimation.ToProperty, (i  -   1 )  *  minWidth  +  imgWidth);

                }
                 // 如果是当前滑过图片
                 if  (i  ==  currentIndex)
                {
                     // 处理底部文字移动的位移
                    animation2.SetValue(DoubleAnimation.ToProperty, divHeight  -  textHeight);

                     // 处理圆圈文字隐现
                    animation3.SetValue(DoubleAnimation.ToProperty,  0.1 );
                }
                 else
                {
                    animation2.SetValue(DoubleAnimation.ToProperty, divHeight);

                    animation3.SetValue(DoubleAnimation.ToProperty,  0.6 );
                }
                 // 设置图片透明度
                 if  (i  ==  currentIndex)
                {
                    photo.SetValue(Canvas.OpacityProperty,  1 );
                }
                 else
                {
                    photo.SetValue(Canvas.OpacityProperty,  0.7 );
                }
            }

            storyboard.Begin();
            storyboard2.Begin();
            storyboard3.Begin();
        }
         // 鼠标离开时回位
         private   void  main_MouseLeave( object  sender, MouseEventArgs e)
        {
             for  ( int  i  =   0 ; i  <  imgNums; i ++ )
            {
                Canvas photo  =  main.Children[i]  as  Canvas;
                
                DoubleAnimation animation  =  storyboard.Children[i]  as  DoubleAnimation;

                animation.SetValue(DoubleAnimation.FromProperty, photo.GetValue(Canvas.LeftProperty));
                animation.SetValue(DoubleAnimation.ToProperty, i  *  (divWidth  /  imgNums));
                
            }

            storyboard.Begin();
        }

    }

源代码下载（vs2008 + siverlight beta 2，“.jpg”后缀名改为“.rar”）:http://images.cnblogs.com/cnblogs_com/guozili/SilverlightApplication1.jpg