今天下午模仿公司的Flash版图片广告做了一个silverlight版的图片轮换广告,10秒轮换一次
xaml代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
namespace Ad
12![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
13
public partial class Page : UserControl
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
15![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
int currentIndex = 0;//当前imgData的索引
21
int currentImgIndex = 0;//当前第几张小图为阴影区
22
int _Max = 4;//右侧显示几张小图
23![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
List<ImageItem> listSrc = new List<ImageItem>();
25![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
private DispatcherTimer _timer;
27![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
public Page()
29![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
30
// 需要初始化变量
31
InitializeComponent();
32![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
将Json转化为强类型的List#region 将Json转化为强类型的List<>
34
JsonValue jv = JsonArray.Parse(imgData);
35
for (int i = 0; i < jv.Count; i++)
36![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
37![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
listSrc.Add(new ImageItem()
{ src = jv[i]["src"].ToString().Replace("\\/", "/").Replace("\"", ""), name = jv[i]["name"].ToString().Replace("\\/", "/").Replace("\"", "") });
38
}
39
#endregion
40![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
currentIndex = 0;
42
currentImgIndex = 0;
43
LoadImage();
44![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
启动定时器#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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
void _timer_Tick(object sender, EventArgs e)
54![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
55
down(sender,null);
56
}
57![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
59![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
60
/// 加载图片
61
/// </summary>
62
private void LoadImage()
63![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
64
int _start = currentIndex % listSrc.Count;
65![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
66
for (int i = 0; i < _Max; i++)
67![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
68
if (_start >= listSrc.Count)
69![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
75
if (i == currentImgIndex)
76![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
84
img.Effect = null;
85
}
86
87
_start++;
88
}
89
}
90![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
91![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
92
/// 点击向上翻时的逻辑处理
93
/// </summary>
94
/// <param name="sender"></param>
95
/// <param name="e"></param>
96
private void up(object sender, MouseButtonEventArgs e)
97![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
98
currentIndex--;
99
if (currentIndex <= 0)
100![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
101
currentIndex = listSrc.Count;
102
}
103
LoadImage();
104
}
105![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
106![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
107
/// 点击向下按钮时的逻辑处理
108
/// </summary>
109
/// <param name="sender"></param>
110
/// <param name="e"></param>
111
private void down(object sender, MouseButtonEventArgs e)
112![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
113
currentIndex++;
114
if (currentIndex >= listSrc.Count)
115![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
116
currentIndex = 0;
117
}
118
LoadImage();
119
}
120
121![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
122
/// 单击右侧小图时,同时步更换大图
123
/// </summary>
124
/// <param name="sender"></param>
125
/// <param name="e"></param>
126
private void ImgClick(object sender, MouseButtonEventArgs e)
127![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
128
Image imgSmall = sender as Image;
129![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
130
imgBig.Source = imgSmall.Source;
131
sb_Big.Begin();
132![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
133
for (int i = 1; i <= 4; i++)
134![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
135
Image img = this.pnl2.FindName("img" + i.ToString()) as Image;
136
if (img == imgSmall)
137![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
138
img.Effect = new DropShadowEffect();
139
currentImgIndex = i-1;//重新保存新的小图阴影索引
140
}
141
else
142![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
143
img.Effect = null;
144
}
145
}
146
147
//确定新的currentIndex
148
for (int i = 0; i < listSrc.Count; i++)
149![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
150
if ((imgSmall.Source as BitmapImage).UriSource == new Uri(listSrc[i].src, UriKind.Relative))
151![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
152
currentIndex = i;
153
break;
154
}
155
}
156
txtImg.Text = listSrc[currentIndex].name + " - yjmyzz.cnblogs.com"; ;
157
}
158![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
159![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
160
/// 自定义类
161
/// </summary>
162
public class ImageItem
163![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
164![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
public string src
{ set; get; }
165![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
public string name
{ set; get; }
166
}
167![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
168
private void imgDown_MouseEnter(object sender, MouseEventArgs e)
169![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
170
this._timer.Stop();
171
}
172![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
173
private void imgDown_MouseLeave(object sender, MouseEventArgs e)
174![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
175
this._timer.Start();
176
}
177![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
178![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
179
}
180
}源代码下载:
https://files.cnblogs.com/yjmyzz/ImageAd_src.rar