学步园

相信大家都看到过网易的新闻图片幻灯片切换效果，好像Flash和Ajax版本的都有了，我来加一个Sliverlight2版本的。

实现平台：VS2008 + Silverlight2

下面链接可以直接看运行程序
Live Demo

效果图：

实现要点：
1.从配置文件中动态添加Image对象，并且初始Image对象的一些属性：

 // 添加图片控件
                Image image = new Image();
                image.Cursor = System.Windows.Input.Cursors.Hand;
                image.Width = IMAGE_WIDTH;
                image.Height = IMAGE_HEIGHT;
                image.SetValue(Canvas.LeftProperty, 0);
                image.SetValue(Canvas.TopProperty, 0);
                image.SetValue(Canvas.ZIndexProperty, i);
                image.Source = new BitmapImage(new Uri(this.picList[i].ImageUrl, UriKind.Relative));
                image.MouseLeftButtonUp += new MouseButtonEventHandler(image_MouseLeftButtonUp);

Canvas.LeftProperty属性是指相对于容器的左边缘的位置，这里图片的消失显示主要就是利用了这个属性，
如果是负值，那么图片将显示在容器左边缘以外的位置，如果这个值大于容器的宽度，那么则显示在容器右边缘
以外的位置。图片点击时间自然是弹出图片链接的新闻了。

        void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            HtmlPage.Window.Navigate(new Uri(this.picList[this.picIndex].Href), "_blank");
        }

图片属性设定完成后开始添加飞行效果的动作了：

   // 添加动作
                Storyboard driftStoryboard = new Storyboard();
                Duration driftDuration = new Duration(TimeSpan.FromSeconds(1));
                DoubleAnimation driftAnimation = new DoubleAnimation();
                driftAnimation.Duration = driftDuration;
                Storyboard.SetTarget(driftAnimation, image);
                // 对左面边框的位置
                Storyboard.SetTargetProperty(driftAnimation, "(Canvas.Left)");
                driftStoryboard.Children.Add(driftAnimation);
                driftStoryboard.Duration = driftDuration;
                driftStoryboard.Completed += new EventHandler(driftStoryboard_Completed);
                Backgroud.Children.Add(image);
                // 添加到资源中
                Backgroud.Resources.Add(driftStoryboard);
                this._animationMap.Add(i, driftStoryboard);
                this._imageMap.Add(i, image);

new Duration(TimeSpan.FromSeconds(1)是指一秒钟内完成飞行动作，
Storyboard.SetTargetProperty(driftAnimation, "(Canvas.Left)");
则是说这个动画设置的是图片的Canvas.Left 的属性，这个属性已经在上面说明过了。

然后就是设置定时器以不断的促发这个动画了：

  // 定时器
            this.timer = new DispatcherTimer();
            this.timer.Interval = TimeSpan.FromSeconds(2);
            this.timer.Tick += new EventHandler(timer_Tick);
            this.timer.Start();

在定时器方法里：

        // 定时切换图片
        void timer_Tick(object sender, EventArgs e)
        {
            int nextIndex = this.picIndex + 1;
            if (this.picList.Count == nextIndex)
                nextIndex = 0;

            // 现在的图片的动作
            DoubleAnimation currentAnimation = (DoubleAnimation)this._animationMap[this.picIndex].Children[0];

            // 要显示的图片的动作
            DoubleAnimation nextAnimation = (DoubleAnimation)this._animationMap[nextIndex].Children[0];

            // 从右到左消失
            currentAnimation.From = 0;
            currentAnimation.To = 0 - IMAGE_WIDTH;

            // 从右到左显示
            nextAnimation.From = IMAGE_WIDTH;
            nextAnimation.To = 0;

            // 调整图片显示顺序
            for (int i = 0; i < this.picList.Count; i++)
            {
                this._imageMap[i].SetValue(Canvas.ZIndexProperty, i);
                if (i == nextIndex) 
                    this._imageMap[i].SetValue(Canvas.ZIndexProperty, this.picList.Count);
                else if(i == this.picIndex)
                    this._imageMap[i].SetValue(Canvas.ZIndexProperty, this.picList.Count - 1);
            }
            
            this._animationMap[this.picIndex].Begin();
            this._animationMap[nextIndex].Begin();

            // 设置新的Title和选中的按钮
            Picture pic = this.picList[nextIndex];
            this.titleText.Text = pic.Title;

            ButtonNo buttonno = this._ButtonMap[this.picIndex];
            buttonno.txtnum.Foreground = new SolidColorBrush(Colors.White);
            buttonno.rect.Fill = new SolidColorBrush(Colors.Black);

            buttonno = this._ButtonMap[nextIndex];
            buttonno.txtnum.Foreground = new SolidColorBrush(Colors.Black);
            buttonno.rect.Fill = new SolidColorBrush(Colors.Red);

            // 保存当前的图片索引
            this.picIndex = nextIndex;
        }

这一段主要是指定动画的开始点和结束点，然后调整下面的数字按钮。
数字按钮的事件代码和定时器的类似，大家可以直接看源代码。

重点的部分都说完了，最后测试画面的时候要修改一下TestPage.html页面，
原来显示Sliverlight控件部分要修改成

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight," type="application/x-silverlight-2-b1" Width="282" Height="408">
            <param name="source" value="PictureSlider.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="white" />
            
            <a href="http://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">
                 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
            </a>
        </object>
        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>

原来是Width="100%" Height="100%" 改成容器的大小  Width="282" Height="408"
否则图片会显示在容器之外了。

这样一个初步的图片轮转效果就完成了，还有很多需要修改的地方，我会继续完善它的，开发它的后续版本。
如果有兴趣的朋友可以一起讨论探究哦。

代码下载：http://files.cnblogs.com/ithurricane/PictureSlider.zip