今天下午模仿公司的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
}
作者：菩提树下的杨过
