Silverlight4 幻灯片实现

首先看效果图，然后给出代码。

每10秒自动切换图片，点击右侧图片列表，左侧自动显示该图片。

<UserControl x:Class="gqfc.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" > <UserControl.Resources> <Storyboard x:Name="sb_Big"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgBig" Storyboard.TargetProperty="(UIElement.Opacity)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.1"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" Margin="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.85*"></ColumnDefinition> <ColumnDefinition Width="0.15*"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="0.05*"></RowDefinition> <RowDefinition Height="0.95*"></RowDefinition> </Grid.RowDefinitions> <Grid Grid.Column="0" Grid.Row="1"> <Image Name="imgBig" Margin="5,5,1,10" Source="/gqfc;component/Photos/fc1.jpg" Cursor="Hand" Stretch="Fill" > <Image.Effect> <DropShadowEffect/> </Image.Effect> </Image> </Grid> <Grid Grid.Column="1" Grid.RowSpan="2" Width="100" x:Name="pnl2"> <Grid.RowDefinitions> <RowDefinition Height="0.05*"></RowDefinition> <RowDefinition Height="0.15*"></RowDefinition> <RowDefinition Height="0.15*"></RowDefinition> <RowDefinition Height="0.15*"></RowDefinition> <RowDefinition Height="0.15*"></RowDefinition> <RowDefinition Height="0.15*"></RowDefinition> <RowDefinition Height="0.15*"></RowDefinition> <RowDefinition Height="0.05*"></RowDefinition> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Image x:Name="imgUp" Source="/gqfc;component/Photos/up.png" MouseLeftButtonDown="up" Cursor="Hand" ToolTipService.ToolTip="上一个图片"/> </Grid> <Grid Margin="0,10,0,0" Grid.Row="1" > <Image x:Name="img1" Source="/gqfc;component/Photos/fc2.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 " /> </Grid> <Grid Margin="0,10,0,0" Grid.Row="2"> <Image x:Name="img2" Source="/gqfc;component/Photos/fc3.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/> </Grid> <Grid Margin="0,10,0,0" Grid.Row="3"> <Image x:Name="img3" Source="/gqfc;component/Photos/fc4.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/> </Grid> <Grid Margin="0,10,0,0" Grid.Row="4"> <Image x:Name="img4" Source="/gqfc;component/Photos/fc5.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/> </Grid> <Grid Margin="0,10,0,0" Grid.Row="5"> <Image x:Name="img5" Source="/gqfc;component/Photos/fc6.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/> </Grid> <Grid Margin="0,10,0,0" Grid.Row="6"> <Image x:Name="img6" Source="/gqfc;component/Photos/fc7.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/> </Grid> <Grid Grid.Row="7"> <Image x:Name="imgDown" Source="/gqfc;component/Photos/down.png" MouseLeftButtonDown="down" Cursor="Hand" ToolTipService.ToolTip="下一个图片"/> </Grid> </Grid> <Border Grid.Column="0" HorizontalAlignment="Center" Grid.Row="0" VerticalAlignment="Center" BorderBrush="#FF54DC18" BorderThickness="1" CornerRadius="5" ToolTipService.ToolTip="灌 区 风 采 " Cursor="Hand" > <Border.Effect> <DropShadowEffect/> </Border.Effect> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="#FFDAB4B4"/> <GradientStop Color="#FFDABDB4" Offset="0.848"/> <GradientStop Color="#FFB4DAC1" Offset="0.525"/> <GradientStop Color="#FFC9C4B9" Offset="0.362"/> </LinearGradientBrush> </Border.Background> <TextBlock x:Name="txtImg" Text="灌 区 风 采 图 片" IsHitTestVisible="False" TextAlignment="Center" FontSize="16" Foreground="#FFAB4444" FontWeight="Bold" Height="23" Width="120"/> </Border> </Grid> </UserControl>

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Json; using System.Windows.Media.Effects; using System.Windows.Media.Imaging; using System.Windows.Threading; namespace gqfc { public partial class MainPage : UserControl { /// <summary> /// Json数据源 /// </summary> string imgData = "[{src:'/gqfc;component/Photos/fc1.jpg',name:'灌区风采图片1'},{src:'/gqfc;component/Photos/fc2.jpg',name:'灌区风采图片2'},{src:'/gqfc;component/Photos/fc3.jpg',name:'灌区风采图片3'},{src:'/gqfc;component/Photos/fc4.jpg',name:'灌区风采图片4'},{src:'/gqfc;component/Photos/fc5.jpg',name:'灌区风采图片5'},{src:'/gqfc;component/Photos/fc6.jpg',name:'灌区风采图片6'},{src:'/gqfc;component/Photos/fc7.jpg',name:'灌区风采图片7'},{src:'/gqfc;component/Photos/fc8.jpg',name:'灌区风采图片8'},{src:'/gqfc;component/Photos/fc9.jpg',name:'灌区风采图片9'},{src:'/gqfc;component/Photos/fc10.jpg',name:'灌区风采图片10'},{src:'/gqfc;component/Photos/fc11.jpg',name:'灌区风采图片11'},{src:'/gqfc;component/Photos/fc12.jpg',name:'灌区风采图片12'},{src:'/gqfc;component/Photos/fc13.jpg',name:'灌区风采图片13'}]"; int currentIndex = 0;//当前imgData的索引 int currentImgIndex = 0;//当前第几张小图为阴影区 int _Max = 6;//右侧显示几张小图 List<ImageItem> listSrc = new List<ImageItem>(); private DispatcherTimer _timer; public MainPage() { InitializeComponent(); #region 将Json转化为强类型的List<> JsonValue jv = JsonArray.Parse(imgData); for (int i = 0; i < jv.Count; i++) { listSrc.Add(new ImageItem() { src = jv[i]["src"].ToString().Replace("///", "/").Replace("/"", ""), name = jv[i]["name"].ToString().Replace("///", "/").Replace("/"", "") }); } #endregion currentIndex = 0; currentImgIndex = 0; LoadImage(); #region 启动定时器 _timer = new DispatcherTimer(); _timer.Interval = new TimeSpan(0, 0, 10); _timer.Tick += new EventHandler(_timer_Tick); _timer.Start(); #endregion } void _timer_Tick(object sender, EventArgs e) { down(sender, null); } /// <summary> /// 加载图片 /// </summary> private void LoadImage() { int _start = currentIndex % listSrc.Count; for (int i = 0; i < _Max; i++) { if (_start >= listSrc.Count) { _start = _start % listSrc.Count; } Image img = this.pnl2.FindName("img" + (i + 1).ToString()) as Image; img.Source = new BitmapImage(new Uri(listSrc[_start].src, UriKind.Relative)); if (i == currentImgIndex) { img.Effect = new DropShadowEffect(); imgBig.Source = img.Source; sb_Big.Begin(); txtImg.Text = listSrc[_start].name; } else { img.Effect = null; } _start++; } } /// <summary> /// 点击向上翻时的逻辑处理 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void up(object sender, MouseButtonEventArgs e) { currentIndex--; if (currentIndex <= 0) { currentIndex = listSrc.Count; } LoadImage(); } /// <summary> /// 点击向下按钮时的逻辑处理 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void down(object sender, MouseButtonEventArgs e) { currentIndex++; if (currentIndex >= listSrc.Count) { currentIndex = 0; } LoadImage(); } /// <summary> /// 单击右侧小图时，同时步更换大图 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void ImgClick(object sender, MouseButtonEventArgs e) { Image imgSmall = sender as Image; imgBig.Source = imgSmall.Source; sb_Big.Begin(); for (int i = 1; i <= 6; i++) { Image img = this.pnl2.FindName("img" + i.ToString()) as Image; if (img == imgSmall) { img.Effect = new DropShadowEffect(); currentImgIndex = i-1;//重新保存新的小图阴影索引 } else { img.Effect = null; } } //确定新的currentIndex for (int i = 0; i < listSrc.Count; i++) { if ((imgSmall.Source as BitmapImage).UriSource == new Uri(listSrc[i].src, UriKind.Relative)) { currentIndex = i; break; } } txtImg.Text = listSrc[currentIndex].name ; } /// <summary> /// 自定义类 /// </summary> public class ImageItem { public string src { set; get; } public string name { set; get; } } private void imgDown_MouseEnter(object sender, MouseEventArgs e) { this._timer.Stop(); } private void imgDown_MouseLeave(object sender, MouseEventArgs e) { this._timer.Start(); } } }