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://www.cnblogs.com/images/cnblogs_com/guozili/SilverlightApplication1.jpg