Silverlight跑马灯效果实现代码

首先定义一个UC_Pic.xaml的文件

UC_Pic.xaml.cs文件内容如下：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace RunLight
{
public partial class UC_Pic : UserControl
{
  public UC_Pic()
  {
   // required to initialize variables
   InitializeComponent();
  }

  //定义一个图片的url属性
  private string _imageUrl;
  public string ImageUrl
  {
   get{return this._imageUrl;}
   set
   {
    this._imageUrl = value;
    Uri uri = new Uri(value,UriKind.Relative);
    BitmapImage bitmap = new BitmapImage(uri);
    this.photo.source = bitmap;
   }
  }
}
}

然后是在MainPage.xaml文件中定义

MainPage.xaml.cs文件内容如下：

namespace RunLight
{
public partial class MainPage : UserControl
{
  //定义一个故事版变量
  private Storyboard sby;
  //图片的宽度
  private const double photoWidth = 240;
  //滚动图片的总宽度
  private double totalWidth;

  public MainPage()
  {
   InitializeComponent();
   CreatePhoto();
  }

  private void CreatePhoto()
  {
   string[] photoList = new string[]{"a1.jpg","a2.jpg","a4.jpg","a5.jpg","a6.jpg","a7.jpg","a8.jpg","a9.jpg","a10.jpg"};
   for(int i=0;i<3;i++)
   {
    for(int j=0;j<photoList.Length;j++)
    {
     UC_Pic pic = new UC_Pic();
     pic.Width = photoWidth;
     pic.ImageUrl = "Photos/"+photoList[j];
     pic.MouseEnter+=new System.Windows.Input.MouseEventHandler(pic_MouseEnter);
     pic.MouseLeave+=new System.Windows.Input.MouseEventHandler(pic_MouseLeave);
     pic.MouseLeftButtonUp+=new System.Windows.Input.MouseButtonEventHandler(pic_MouseLeftButtonUp);
     SP.Children.Add(pic);
    }
   }
   //图片总宽度
   totalWidth = -1.0 * photoWidth * photoList.Length;
   //设置Canvas的Left属性值
   Canvas.SetLeft(SP,totalWidth);
   //创建故事板
   CreateStoryboard();
   sby.Begin();
   //重置大小
   Resize();
  }

  //创建故事板
  private void CreateStoryboard()
  {
   //创建故事板
   sby = new Storyboard();
   //创建DoubleAnimation动画
   DoubleAnimation ad = new DoubleAnimation();
   //设置动画的时间
   ad.Duration = new Duration(TimeSpan.FromSeconds(5.0));
   //设置作用对象的属性
   Storyboard.SetTarget(ad,SP);
   Storyboard.SetTargetProperty(ad,new PropertyPath("(canvas.left)",new Object[0]));
   //将动画添加到故事板中去
   sby.Children.Add(ad);
   //创建动画结束事件
   sby.Completed+=new System.EventHandler(sby_Completed);

  }

  private void FullImage_MouseLeftButtonUp(object sender,System.Windows.Input.MouseButtonEventArgs e)
  {
   //图片由放大再缩小至指定大小值
   FullImage.Visibility = Visibility.Collapsed;
  }

  private void pic_MouseEnter(object sender,System.Windows.Input.MouseEventArgs e)
  {
   //图片暂时停止
   sby.Pause();
  }

  private void pic_MouseLeave(object sender,System.Windows.Input.MouseEventArgs e)
  {
   //图片滚动继续
   sby.Resume();
  }

  private void pic_MouseLeftButtonUp(object sender,System.Windows.Input.MouseButtonEventArgs e)
  {
   //显示放大图片
   UC_Pic pic = sender as UC_Pic;
   FullImage.source = pic.photo.source;
   FullImage.Visibility = Visibility.Visible;
  }

  private void Resize()
  {
   rg.Rect = new Rect(0,this.ActualWidth,260);
  }

  private void UserControl_SizeChanged(object sender,System.Windows.SizeChangedEventArgs e)
  {
   // 改变尺寸
   Resize();
  }

private void sby_Completed(object sender,System.EventArgs e) { // Todo: Add event handler implementation here. DoubleAnimation ad = (DoubleAnimation)sby.Children[0]; //获取图片组的当前位置 double left = Canvas.GetLeft(SP); //如果图片已经接近最后，则重新设置开始位置 if(left>(totalWidth-photoWidth)) { ad.From = new double?(left); } //设置结束位置 ad.By = new double?(totalWidth); //开始循环动画 sby.Begin(); } }}

Silverlight跑马灯效果实现代码

相关推荐