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代码:
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
}源代码下载:https://files.cnblogs.com/yjmyzz/ImageAd_src.rar