本文实例为大家分享了silverlight实现跑马灯效果的具体代码，供大家参考，具体内容如下
主要功能有以下几点：
1、使用动画属性驱动图片运动动画
2、图片循环到最后一张后会自动循环
3、当鼠标放到图片时运动的图片会停止，当鼠标离开时暂停的图片会继续运动
4、当鼠标点击任何一个图片时，该图片会显示真正大小
xaml：
< grid x:name = "layout" background = "white" >
< canvas x:name = "canvas" background = "black" grid.row = "1" height = "280" >
<!--隐藏矩形以外的其它部分-->
< canvas.clip >
< rectanglegeometry x:name = "rg" />
</ canvas.clip >
< stackpanel x:name = "sp" orientation = "horizontal" ></ stackpanel >
</ canvas >
< image x:name = "img_full" width = "640" height = "480" visibility = "collapsed" mouseleftbuttonup = "img_full_mouseleftbuttonup" />
</ grid >
界面由grid、canvas、stackpanel和一个image组成，image用来显示图片的真实尺寸。
public partial class demo : usercontrol
{
//定义
private storyboard storyboard;
private const double photowidth = 320;
private double totalwidth;
public demo()
{
initializecomponent();
createphoto();
}
/// <summary>
/// 创建图片列表
/// </summary>
private void createphoto()
{
string [] piclist = new string [] { "1.jpg" , "2.jpg" , "3.jpg" , "4.jpg" , "5.jpg" };
//创建多组图片，保证图片不会出现空白,因为stackpanel是横向排列的，这样就可以把图片类似模拟的排成一圈
for ( int i = 0; i < 3; i++)
{
//根据数组创建图片
for ( int j = 0; j < piclist.length; j++)
{
uc_pic pic = new uc_pic();
pic.imageurl = "images/photo/" + piclist[j];
pic.width = photowidth;
//绑定事件
pic.mouseenter += new mouseeventhandler(pic_mouseenter);
pic.mouseleave += new mouseeventhandler(pic_mouseleave);
pic.mouseleftbuttonup += new mousebuttoneventhandler(pic_mouseleftbuttonup);
//添加对象到stackpanel中
sp.children.add(pic);
}
}
//计算图片的总宽度
totalwidth = -1.0 * photowidth * piclist.length;
canvas.setleft(sp, totalwidth);
//调用初始化 方法
createstoryboard();
//播放动画
storyboard.begin();
//重新绘制区域
resize();
}
/// <summary>
/// 创建故事面板
/// </summary>
private void createstoryboard()
{
//创建故事面板
storyboard = new storyboard();
doubleanimation animation = new doubleanimation();
//设置动画延时
animation.duration = new duration(timespan.fromseconds(2.0));
//设置对象的作用属性
storyboard.settarget(animation, sp);
storyboard.settargetproperty(animation, new propertypath( "(canvas.left)" , new object [0]));
//添加到动画故事板内
storyboard.children.add(animation);
//动画自动完成事件
storyboard.completed += new eventhandler(storyboard_completed);
}
//动画自动完成事件，当动画播放完成（结束）的时候。再次循环动画
void storyboard_completed( object sender, eventargs e)
{
doubleanimation animation = (doubleanimation)storyboard.children[0];
//取得图片当前位置
double left = canvas.getleft(sp);
//如果图片已接近最后，就重新设置位置
if (left > (totalwidth - photowidth))
{
animation.from = new double ?(left);
}
//设置动画的起始值（from）所依据的总量（总长度）
animation.by = new double ?(totalwidth);
//循环动画
storyboard.begin();
}
private void resize()
{
//重新绘制显示区域
rg.rect = new rect(0, 0, this .actualwidth, 260);
}
void pic_mouseleftbuttonup( object sender, mousebuttoneventargs e)
{
//显示放大图片
uc_pic pic = sender as uc_pic;
img_full.source = pic.photo.source;
img_full.visibility = visibility.visible;
}
void pic_mouseleave( object sender, mouseeventargs e)
{
//继续动画
storyboard.resume();
}
void pic_mouseenter( object sender, mouseeventargs e)
{
//暂停动画
storyboard.pause();
}
private void img_full_mouseleftbuttonup( object sender, mousebuttoneventargs e)
{
//隐藏放大图片
img_full.visibility = visibility.collapsed;
}
private void usercontrol_sizechanged( object sender, sizechangedeventargs e)
{
//动画根据屏幕大小改变而改变
resize();
}
}
同时还有一个usercontrol用来承载图片代码如下：
< canvas x:name = "layoutroot" background = "white" >
< image x:name = "photo" width = "320" height = "240" stretch = "uniformtofill" margin = "10" />
</ canvas >
c#：
public partial class uc_pic : usercontrol
{
public uc_pic()
{
initializecomponent();
}
private string _imgurl;
public string imageurl
{
get { return this ._imgurl; }
set {
//设置图片资源属性
this ._imgurl = value;
uri uri = new uri(value, urikind.relative);
bitmapimage bitimg = new bitmapimage(uri);
this .photo.source = bitimg;
}
}
}
这样就完成了跑马灯的效果，如图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/oxiaoxio/article/details/7099138
dy("nrwz");
查看更多关于Silverlight实现跑马灯动画的详细内容...