今天下午模仿公司的Flash版图片广告做了一个silverlight版的图片轮换广告,10秒轮换一次
xaml代码:
xaml
1
<UserControl
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 x:Class="Ad.Page"
5 >
6 <UserControl.Resources>
7 <Storyboard x:Name="sb_Big">
8 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgBig" Storyboard.TargetProperty="(UIElement.Opacity)">
9 <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.1"/>
10 <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
11 </DoubleAnimationUsingKeyFrames>
12 </Storyboard>
13 </UserControl.Resources>
14
15 <Canvas Background="#efefef" Height="190" Width="270">
16 <StackPanel Height="170" x:Name="pnl1" Width="270" Orientation="Horizontal" >
17 <Image Height="150" Name="imgBig" Stretch="Fill" Width="200" Margin="10" Source="/Ad;component/img/001.jpg" Cursor="Hand" >
18 <Image.Effect>
19 <DropShadowEffect/>
20 </Image.Effect>
21 </Image>
22 <StackPanel Height="170" x:Name="pnl2" Width="40" Orientation="Vertical" Margin="0,0,10,0">
23 <Image Height="10" Name="imgUp" Stretch="Fill" Width="22" Source="/Ad;component/img/up.png" MouseLeftButtonDown="up" Cursor="Hand"/>
24 <Image Height="30" Name="img1" Stretch="Fill" Width="40" Source="/Ad;component/img/001.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" />
25 <Image Height="30" Name="img2" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/002.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand">
26
27 </Image>
28 <Image Height="30" Name="img3" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/003.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand"/>
29 <Image Height="30" Name="img4" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/004.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand"/>
30 <Image Height="10" Name="imgDown" Stretch="Fill" Width="22" Source="/Ad;component/img/down.png" MouseLeftButtonDown="down" Cursor="Hand"/>
31 </StackPanel>
32 </StackPanel>
33 <TextBlock Name="txtImg" Canvas.Top="170" Canvas.Left="10" Width="200" Text="就绪" HorizontalAlignment="Center" IsHitTestVisible="False" TextAlignment="Center"></TextBlock>
34 </Canvas>
35</UserControl>
Xaml.cs代码:
Xaml.Cs
1using System;
2using System.Collections.Generic;
3using System.Json;
4using System.Windows.Controls;
5using System.Windows.Input;
6using System.Windows.Media.Effects;
7using System.Windows.Media.Imaging;
8using System.Windows.Threading;
9
10
11namespace Ad
12
{
13
public partial class Page : UserControl
14
{
15 /**//// <summary>
16 /// Json数据源
17
/// </summary>
18 string imgData = "[{src:'/Ad;component/img/001.jpg',name:'图片1'},{src:'/Ad;component/img/002.jpg',name:'图片2'},{src:'/Ad;component/img/003.jpg',name:'图片3'},{src:'/Ad;component/img/004.jpg',name:'图片4'},{src:'/Ad;component/img/005.jpg',name:'图片5'},{src:'/Ad;component/img/006.jpg',name:'图片6'},{src:'/Ad;component/img/007.jpg',name:'图片7'}]";
19
20 int currentIndex = 0;//当前imgData的索引
21 int currentImgIndex = 0;//当前第几张小图为阴影区
22 int _Max = 4;//右侧显示几张小图
23
24 List<ImageItem> listSrc = new List<ImageItem>();
25
26 private DispatcherTimer _timer;
27
28 public Page()
29 {
30 // 需要初始化变量
31 InitializeComponent();
32
33 将Json转化为强类型的List#region 将Json转化为强类型的List<>
34 JsonValue jv = JsonArray.Parse(imgData);
35 for (int i = 0; i < jv.Count; i++)
36 {
37 listSrc.Add(new ImageItem() { src = jv[i]["src"].ToString().Replace("\\/", "/").Replace("\"", ""), name = jv[i]["name"].ToString().Replace("\\/", "/").Replace("\"", "") });
38 }
39 #endregion
40
41 currentIndex = 0;
42 currentImgIndex = 0;
43 LoadImage();
44
45 启动定时器#region 启动定时器
46 _timer = new DispatcherTimer();
47 _timer.Interval = new TimeSpan(0, 0, 10);
48 _timer.Tick += new EventHandler(_timer_Tick);
49 _timer.Start();
50#endregion
51 }
52
53 void _timer_Tick(object sender, EventArgs e)
54 {
55 down(sender,null);
56 }
57
58
59 /**//// <summary>
60 /// 加载图片
61 /// </summary>
62 private void LoadImage()
63 {
64 int _start = currentIndex % listSrc.Count;
65
66 for (int i = 0; i < _Max; i++)
67 {
68 if (_start >= listSrc.Count)
69 {
70 _start = _start % listSrc.Count;
71 }
72 Image img = this.pnl2.FindName("img" + (i + 1).ToString()) as Image;
73 img.Source = new BitmapImage(new Uri(listSrc[_start].src, UriKind.Relative));
74
75 if (i == currentImgIndex)
76 {
77 img.Effect = new DropShadowEffect();
78 imgBig.Source = img.Source;
79 sb_Big.Begin();
80 txtImg.Text = listSrc[_start].name + " - yjmyzz.cnblogs.com";
81 }
82 else
83 {
84 img.Effect = null;
85 }
86
87 _start++;
88 }
89 }
90
91 /**//// <summary>
92 /// 点击向上翻时的逻辑处理
93 /// </summary>
94 /// <param name="sender"></param>
95 /// <param name="e"></param>
96 private void up(object sender, MouseButtonEventArgs e)
97 {
98 currentIndex--;
99 if (currentIndex <= 0)
100 {
101 currentIndex = listSrc.Count;
102 }
103 LoadImage();
104 }
105
106 /**//// <summary>
107 /// 点击向下按钮时的逻辑处理
108 /// </summary>
109 /// <param name="sender"></param>
110 /// <param name="e"></param>
111 private void down(object sender, MouseButtonEventArgs e)
112 {
113 currentIndex++;
114 if (currentIndex >= listSrc.Count)
115 {
116 currentIndex = 0;
117 }
118 LoadImage();
119 }
120
121 /**//// <summary>
122 /// 单击右侧小图时，同时步更换大图
123 /// </summary>
124 /// <param name="sender"></param>
125 /// <param name="e"></param>
126 private void ImgClick(object sender, MouseButtonEventArgs e)
127 {
128 Image imgSmall = sender as Image;
129
130 imgBig.Source = imgSmall.Source;
131 sb_Big.Begin();
132
133 for (int i = 1; i <= 4; i++)
134 {
135 Image img = this.pnl2.FindName("img" + i.ToString()) as Image;
136 if (img == imgSmall)
137 {
138 img.Effect = new DropShadowEffect();
139 currentImgIndex = i-1;//重新保存新的小图阴影索引
140 }
141 else
142 {
143 img.Effect = null;
144 }
145 }
146
147 //确定新的currentIndex
148 for (int i = 0; i < listSrc.Count; i++)
149 {
150 if ((imgSmall.Source as BitmapImage).UriSource == new Uri(listSrc[i].src, UriKind.Relative))
151 {
152 currentIndex = i;
153 break;
154 }
155 }
156 txtImg.Text = listSrc[currentIndex].name + " - yjmyzz.cnblogs.com"; ;
157 }
158
159 /**//// <summary>
160 /// 自定义类
161 /// </summary>
162 public class ImageItem
163 {
164 public string src { set; get; }
165 public string name { set; get; }
166 }
167
168 private void imgDown_MouseEnter(object sender, MouseEventArgs e)
169 {
170 this._timer.Stop();
171 }
172
173 private void imgDown_MouseLeave(object sender, MouseEventArgs e)
174 {
175 this._timer.Start();
176 }
177
178
179 }
180
}
源代码下载： http://files.cnblogs.com/yjmyzz/ImageAd_src.rar
xaml代码:
xaml
1
<UserControl2
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4
x:Class="Ad.Page"5
>6
<UserControl.Resources>7
<Storyboard x:Name="sb_Big">8
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgBig" Storyboard.TargetProperty="(UIElement.Opacity)">9
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.1"/>10
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>11
</DoubleAnimationUsingKeyFrames>12
</Storyboard>13
</UserControl.Resources>14
15
<Canvas Background="#efefef" Height="190" Width="270">16
<StackPanel Height="170" x:Name="pnl1" Width="270" Orientation="Horizontal" >17
<Image Height="150" Name="imgBig" Stretch="Fill" Width="200" Margin="10" Source="/Ad;component/img/001.jpg" Cursor="Hand" >18
<Image.Effect>19
<DropShadowEffect/>20
</Image.Effect>21
</Image>22
<StackPanel Height="170" x:Name="pnl2" Width="40" Orientation="Vertical" Margin="0,0,10,0">23
<Image Height="10" Name="imgUp" Stretch="Fill" Width="22" Source="/Ad;component/img/up.png" MouseLeftButtonDown="up" Cursor="Hand"/>24
<Image Height="30" Name="img1" Stretch="Fill" Width="40" Source="/Ad;component/img/001.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" />25
<Image Height="30" Name="img2" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/002.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand">26
27
</Image>28
<Image Height="30" Name="img3" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/003.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand"/>29
<Image Height="30" Name="img4" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/004.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand"/>30
<Image Height="10" Name="imgDown" Stretch="Fill" Width="22" Source="/Ad;component/img/down.png" MouseLeftButtonDown="down" Cursor="Hand"/>31
</StackPanel>32
</StackPanel>33
<TextBlock Name="txtImg" Canvas.Top="170" Canvas.Left="10" Width="200" Text="就绪" HorizontalAlignment="Center" IsHitTestVisible="False" TextAlignment="Center"></TextBlock>34
</Canvas>35
</UserControl>
Xaml.cs代码:
Xaml.Cs
1
using System;2
using System.Collections.Generic;3
using System.Json;4
using System.Windows.Controls;5
using System.Windows.Input;6
using System.Windows.Media.Effects;7
using System.Windows.Media.Imaging;8
using System.Windows.Threading;9
10
11
namespace Ad12
{13
public partial class Page : UserControl14
{15
/**//// <summary>16
/// Json数据源17
/// </summary>18
string imgData = "[{src:'/Ad;component/img/001.jpg',name:'图片1'},{src:'/Ad;component/img/002.jpg',name:'图片2'},{src:'/Ad;component/img/003.jpg',name:'图片3'},{src:'/Ad;component/img/004.jpg',name:'图片4'},{src:'/Ad;component/img/005.jpg',name:'图片5'},{src:'/Ad;component/img/006.jpg',name:'图片6'},{src:'/Ad;component/img/007.jpg',name:'图片7'}]";19
20
int currentIndex = 0;//当前imgData的索引21
int currentImgIndex = 0;//当前第几张小图为阴影区22
int _Max = 4;//右侧显示几张小图23
24
List<ImageItem> listSrc = new List<ImageItem>();25
26
private DispatcherTimer _timer;27
28
public Page()29
{30
// 需要初始化变量31
InitializeComponent();32
33
将Json转化为强类型的List#region 将Json转化为强类型的List<>34
JsonValue jv = JsonArray.Parse(imgData);35
for (int i = 0; i < jv.Count; i++)36
{37
listSrc.Add(new ImageItem() { src = jv[i]["src"].ToString().Replace("\\/", "/").Replace("\"", ""), name = jv[i]["name"].ToString().Replace("\\/", "/").Replace("\"", "") });38
} 39
#endregion40
41
currentIndex = 0;42
currentImgIndex = 0;43
LoadImage();44
45
启动定时器#region 启动定时器46
_timer = new DispatcherTimer();47
_timer.Interval = new TimeSpan(0, 0, 10);48
_timer.Tick += new EventHandler(_timer_Tick);49
_timer.Start();50
#endregion51
}52
53
void _timer_Tick(object sender, EventArgs e)54
{55
down(sender,null);56
}57
58
59
/**//// <summary>60
/// 加载图片61
/// </summary> 62
private void LoadImage()63
{ 64
int _start = currentIndex % listSrc.Count; 65
66
for (int i = 0; i < _Max; i++)67
{68
if (_start >= listSrc.Count)69
{70
_start = _start % listSrc.Count;71
}72
Image img = this.pnl2.FindName("img" + (i + 1).ToString()) as Image;73
img.Source = new BitmapImage(new Uri(listSrc[_start].src, UriKind.Relative));74
75
if (i == currentImgIndex)76
{77
img.Effect = new DropShadowEffect();78
imgBig.Source = img.Source;79
sb_Big.Begin();80
txtImg.Text = listSrc[_start].name + " - yjmyzz.cnblogs.com";81
}82
else 83
{84
img.Effect = null;85
}86
87
_start++;88
} 89
}90
91
/**//// <summary>92
/// 点击向上翻时的逻辑处理 93
/// </summary>94
/// <param name="sender"></param>95
/// <param name="e"></param>96
private void up(object sender, MouseButtonEventArgs e)97
{98
currentIndex--;99
if (currentIndex <= 0) 100
{101
currentIndex = listSrc.Count;102
}103
LoadImage();104
}105
106
/**//// <summary>107
/// 点击向下按钮时的逻辑处理108
/// </summary>109
/// <param name="sender"></param>110
/// <param name="e"></param>111
private void down(object sender, MouseButtonEventArgs e)112
{113
currentIndex++;114
if (currentIndex >= listSrc.Count) 115
{116
currentIndex = 0;117
}118
LoadImage();119
}120
121
/**//// <summary>122
/// 单击右侧小图时，同时步更换大图123
/// </summary>124
/// <param name="sender"></param>125
/// <param name="e"></param>126
private void ImgClick(object sender, MouseButtonEventArgs e)127
{128
Image imgSmall = sender as Image; 129
130
imgBig.Source = imgSmall.Source;131
sb_Big.Begin();132
133
for (int i = 1; i <= 4; i++)134
{135
Image img = this.pnl2.FindName("img" + i.ToString()) as Image;136
if (img == imgSmall)137
{138
img.Effect = new DropShadowEffect();139
currentImgIndex = i-1;//重新保存新的小图阴影索引140
}141
else142
{143
img.Effect = null;144
}145
}146
147
//确定新的currentIndex148
for (int i = 0; i < listSrc.Count; i++)149
{150
if ((imgSmall.Source as BitmapImage).UriSource == new Uri(listSrc[i].src, UriKind.Relative))151
{152
currentIndex = i;153
break;154
}155
}156
txtImg.Text = listSrc[currentIndex].name + " - yjmyzz.cnblogs.com"; ;157
}158
159
/**//// <summary>160
/// 自定义类161
/// </summary>162
public class ImageItem163
{164
public string src { set; get; }165
public string name { set; get; }166
}167
168
private void imgDown_MouseEnter(object sender, MouseEventArgs e)169
{170
this._timer.Stop();171
}172
173
private void imgDown_MouseLeave(object sender, MouseEventArgs e)174
{175
this._timer.Start();176
}177
178
179
}180
}
源代码下载： http://files.cnblogs.com/yjmyzz/ImageAd_src.rar
