none
Fun with Silverlight2.0系列之四 -- PictureSlide仿网易新闻图片轮转效果V1.0 RRS feed

  • 常规讨论

  • 相信大家都看到过网易的新闻图片幻灯片切换效果,好像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" />
                
                
    <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


    作者: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:53
    版主