本文實例為大家分享了silverlight實現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下
主要功能有以下幾點：
1、使用動畫屬性驅(qū)動圖片運動動畫
2、圖片循環(huán)到最后一張后會自動循環(huán)
3、當(dāng)鼠標(biāo)放到圖片時運動的圖片會停止，當(dāng)鼠標(biāo)離開時暫停的圖片會繼續(xù)運動
4、當(dāng)鼠標(biāo)點擊任何一個圖片時，該圖片會顯示真正大小
xaml：
|
1
2
3
4
5
6
7
8
9
10
|
<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用來顯示圖片的真實尺寸。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
public partial class demo : usercontrol { //定義 private storyboard storyboard; private const double photowidth = 320; private double totalwidth; public demo() { initializecomponent(); createphoto(); } /// <summary> /// 創(chuàng)建圖片列表 /// </summary> private void createphoto() { string[] piclist = new string[] { "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg" }; //創(chuàng)建多組圖片，保證圖片不會出現(xiàn)空白,因為stackpanel是橫向排列的，這樣就可以把圖片類似模擬的排成一圈 for (int i = 0; i < 3; i++) { //根據(jù)數(shù)組創(chuàng)建圖片 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); //調(diào)用初始化 方法 createstoryboard(); //播放動畫 storyboard.begin(); //重新繪制區(qū)域 resize(); } /// <summary> /// 創(chuàng)建故事面板 /// </summary> private void createstoryboard() { //創(chuàng)建故事面板 storyboard = new storyboard(); doubleanimation animation = new doubleanimation(); //設(shè)置動畫延時 animation.duration = new duration(timespan.fromseconds(2.0)); //設(shè)置對象的作用屬性 storyboard.settarget(animation, sp); storyboard.settargetproperty(animation, new propertypath("(canvas.left)", new object[0])); //添加到動畫故事板內(nèi) storyboard.children.add(animation); //動畫自動完成事件 storyboard.completed += new eventhandler(storyboard_completed); } //動畫自動完成事件，當(dāng)動畫播放完成（結(jié)束）的時候。再次循環(huán)動畫 void storyboard_completed(object sender, eventargs e) { doubleanimation animation = (doubleanimation)storyboard.children[0]; //取得圖片當(dāng)前位置 double left = canvas.getleft(sp); //如果圖片已接近最后，就重新設(shè)置位置 if (left > (totalwidth - photowidth)) { animation.from = new double?(left); } //設(shè)置動畫的起始值（from）所依據(jù)的總量（總長度） animation.by = new double?(totalwidth); //循環(huán)動畫 storyboard.begin(); } private void resize() { //重新繪制顯示區(qū)域 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) { //繼續(xù)動畫 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) { //動畫根據(jù)屏幕大小改變而改變 resize(); }} |
同時還有一個usercontrol用來承載圖片代碼如下：
|
1
2
3
|
<canvas x:name="layoutroot" background="white"> <image x:name="photo" width="320" height="240" stretch="uniformtofill" margin="10" /></canvas> |
c#：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
public partial class uc_pic : usercontrol { public uc_pic() { initializecomponent(); } private string _imgurl; public string imageurl { get { return this._imgurl; } set { //設(shè)置圖片資源屬性 this._imgurl = value; uri uri = new uri(value, urikind.relative); bitmapimage bitimg = new bitmapimage(uri); this.photo.source = bitimg; } } } |
這樣就完成了跑馬燈的效果，如圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/oxiaoxio/article/details/7099138
