Silverlight4 幻灯片实现

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

 

 

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

 

[c-sharp:nogutter]  view plain copy

1. <UserControl x:Class="gqfc.MainPage"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
6.     mc:Ignorable="d" >  
7.     <UserControl.Resources>  
8.         <Storyboard x:Name="sb_Big">  
9.             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgBig" Storyboard.TargetProperty="(UIElement.Opacity)">  
10.                 <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.1"/>  
11.                 <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>  
12.             </DoubleAnimationUsingKeyFrames>  
13.         </Storyboard>  
14.     </UserControl.Resources>  
15.     <Grid x:Name="LayoutRoot" Background="White" Margin="0">  
16.         <Grid.ColumnDefinitions>  
17.             <ColumnDefinition Width="0.85*"></ColumnDefinition>  
18.             <ColumnDefinition Width="0.15*"></ColumnDefinition>  
19.         </Grid.ColumnDefinitions>  
20.         <Grid.RowDefinitions>  
21.             <RowDefinition Height="0.05*"></RowDefinition>  
22.             <RowDefinition Height="0.95*"></RowDefinition>  
23.         </Grid.RowDefinitions>  
24.         <Grid Grid.Column="0" Grid.Row="1">  
25.             <Image Name="imgBig" Margin="5,5,1,10" Source="/gqfc;component/Photos/fc1.jpg" Cursor="Hand" Stretch="Fill" >  
26.                 <Image.Effect>  
27.                     <DropShadowEffect/>  
28.                 </Image.Effect>  
29.             </Image>  
30.         </Grid>  
31.         <Grid Grid.Column="1" Grid.RowSpan="2" Width="100" x:Name="pnl2">  
32.             <Grid.RowDefinitions>  
33.                 <RowDefinition Height="0.05*"></RowDefinition>  
34.                 <RowDefinition Height="0.15*"></RowDefinition>  
35.                 <RowDefinition Height="0.15*"></RowDefinition>  
36.                 <RowDefinition Height="0.15*"></RowDefinition>  
37.                 <RowDefinition Height="0.15*"></RowDefinition>  
38.                 <RowDefinition Height="0.15*"></RowDefinition>  
39.                 <RowDefinition Height="0.15*"></RowDefinition>  
40.                 <RowDefinition Height="0.05*"></RowDefinition>  
41.             </Grid.RowDefinitions>  
42.             <Grid Grid.Row="0">  
43.                 <Image  x:Name="imgUp"  Source="/gqfc;component/Photos/up.png" MouseLeftButtonDown="up" Cursor="Hand" ToolTipService.ToolTip="上一个图片"/>  
44.             </Grid>  
45.             <Grid Margin="0,10,0,0" Grid.Row="1" >  
46.                 <Image x:Name="img1"  Source="/gqfc;component/Photos/fc2.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 " />  
47.             </Grid>  
48.             <Grid Margin="0,10,0,0" Grid.Row="2">  
49.                 <Image x:Name="img2" Source="/gqfc;component/Photos/fc3.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/>  
50.             </Grid>  
51.             <Grid Margin="0,10,0,0" Grid.Row="3">  
52.                 <Image x:Name="img3" Source="/gqfc;component/Photos/fc4.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/>  
53.             </Grid>  
54.             <Grid Margin="0,10,0,0" Grid.Row="4">  
55.                 <Image x:Name="img4" Source="/gqfc;component/Photos/fc5.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/>  
56.             </Grid>  
57.             <Grid Margin="0,10,0,0" Grid.Row="5">  
58.                 <Image x:Name="img5" Source="/gqfc;component/Photos/fc6.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/>  
59.             </Grid>  
60.             <Grid Margin="0,10,0,0" Grid.Row="6">  
61.                 <Image x:Name="img6" Source="/gqfc;component/Photos/fc7.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" Stretch="Fill" ToolTipService.ToolTip="灌 区 风 采 "/>  
62.             </Grid>  
63.             <Grid Grid.Row="7">  
64.                 <Image x:Name="imgDown"  Source="/gqfc;component/Photos/down.png"  MouseLeftButtonDown="down" Cursor="Hand" ToolTipService.ToolTip="下一个图片"/>  
65.             </Grid>  
66.         </Grid>  
67.         <Border Grid.Column="0" HorizontalAlignment="Center"  Grid.Row="0" VerticalAlignment="Center" BorderBrush="#FF54DC18" BorderThickness="1" CornerRadius="5" ToolTipService.ToolTip="灌 区 风 采 " Cursor="Hand" >  
68.             <Border.Effect>  
69.                 <DropShadowEffect/>  
70.             </Border.Effect>  
71.             <Border.Background>  
72.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
73.                     <GradientStop Color="Black" Offset="0"/>  
74.                     <GradientStop Color="#FFDAB4B4"/>  
75.                     <GradientStop Color="#FFDABDB4" Offset="0.848"/>  
76.                     <GradientStop Color="#FFB4DAC1" Offset="0.525"/>  
77.                     <GradientStop Color="#FFC9C4B9" Offset="0.362"/>  
78.                 </LinearGradientBrush>  
79.             </Border.Background>  
80.             <TextBlock x:Name="txtImg" Text="灌 区 风 采 图 片" IsHitTestVisible="False" TextAlignment="Center" FontSize="16" Foreground="#FFAB4444" FontWeight="Bold" Height="23" Width="120"/>  
81.         </Border>  
82.     </Grid>  
83. </UserControl>  

 

[c-sharp:nogutter]  view plain copy

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Net;  
5. using System.Windows;  
6. using System.Windows.Controls;  
7. using System.Windows.Documents;  
8. using System.Windows.Input;  
9. using System.Windows.Media;  
10. using System.Windows.Media.Animation;  
11. using System.Windows.Shapes;  
12. using System.Json;  
13. using System.Windows.Media.Effects;  
14. using System.Windows.Media.Imaging;  
15. using System.Windows.Threading;  
16. namespace gqfc  
17. {  
18.     public partial class MainPage : UserControl  
19.     {  
20.         /// <summary>  
21.         /// Json数据源  
22.         /// </summary>  
23.         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'}]";  
24.         int currentIndex = 0;//当前imgData的索引  
25.         int currentImgIndex = 0;//当前第几张小图为阴影区  
26.         int _Max = 6;//右侧显示几张小图  
27.         List<ImageItem> listSrc = new List<ImageItem>();  
28.         private DispatcherTimer _timer;  
29.         public MainPage()  
30.         {  
31.             InitializeComponent();  
32.             #region 将Json转化为强类型的List<>  
33.             JsonValue jv = JsonArray.Parse(imgData);  
34.             for (int i = 0; i < jv.Count; i++)  
35.             {  
36.                 listSrc.Add(new ImageItem() { src = jv[i]["src"].ToString().Replace("///", "/").Replace("/"", ""), name = jv[i]["name"].ToString().Replace("///", "/").Replace("/"", "") });  
37.             }  
38.             #endregion  
39.             currentIndex = 0;  
40.             currentImgIndex = 0;  
41.             LoadImage();  
42.             #region 启动定时器  
43.             _timer = new DispatcherTimer();  
44.             _timer.Interval = new TimeSpan(0, 0, 10);  
45.             _timer.Tick += new EventHandler(_timer_Tick);  
46.             _timer.Start();  
47.             #endregion  
48.         }  
49.         void _timer_Tick(object sender, EventArgs e)  
50.         {  
51.             down(sender, null);  
52.         }  
53.         /// <summary>  
54.          /// 加载图片  
55.          /// </summary>  
56.          private void LoadImage()  
57.          {              
58.              int _start = currentIndex % listSrc.Count;  
59.    
60.              for (int i = 0; i < _Max; i++)  
61.              {  
62.                  if (_start >= listSrc.Count)  
63.                  {  
64.                      _start = _start % listSrc.Count;  
65.                  }  
66.                  Image img = this.pnl2.FindName("img" + (i + 1).ToString()) as Image;  
67.                  img.Source = new BitmapImage(new Uri(listSrc[_start].src, UriKind.Relative));  
68.    
69.                  if (i == currentImgIndex)  
70.                  {  
71.                      img.Effect = new DropShadowEffect();  
72.                      imgBig.Source = img.Source;  
73.                      sb_Big.Begin();  
74.                      txtImg.Text = listSrc[_start].name;  
75.                  }  
76.                  else   
77.                  {  
78.                      img.Effect = null;  
79.                  }  
80.                  _start++;  
81.              }  
82.          }  
83.    
84.          /// <summary>  
85.          /// 点击向上翻时的逻辑处理   
86.          /// </summary>  
87.          /// <param name="sender"></param>  
88.          /// <param name="e"></param>  
89.          private void up(object sender, MouseButtonEventArgs e)  
90.          {  
91.              currentIndex--;  
92.              if (currentIndex <= 0)   
93.             {  
94.                 currentIndex = listSrc.Count;  
95.             }  
96.             LoadImage();  
97.         }  
98.         /// <summary>  
99.         /// 点击向下按钮时的逻辑处理  
100.         /// </summary>  
101.         /// <param name="sender"></param>  
102.         /// <param name="e"></param>  
103.         private void down(object sender, MouseButtonEventArgs e)  
104.         {  
105.             currentIndex++;  
106.             if (currentIndex >= listSrc.Count)   
107.             {  
108.                 currentIndex = 0;  
109.             }  
110.             LoadImage();  
111.         }  
112.           
113.         /// <summary>  
114.         /// 单击右侧小图时，同时步更换大图  
115.         /// </summary>  
116.         /// <param name="sender"></param>  
117.         /// <param name="e"></param>  
118.         private void ImgClick(object sender, MouseButtonEventArgs e)  
119.         {  
120.             Image imgSmall = sender as Image;  
121.             imgBig.Source = imgSmall.Source;  
122.             sb_Big.Begin();  
123.             for (int i = 1; i <= 6; i++)  
124.             {  
125.                 Image img = this.pnl2.FindName("img" + i.ToString()) as Image;  
126.                 if (img == imgSmall)  
127.                 {  
128.                     img.Effect = new DropShadowEffect();  
129.                     currentImgIndex = i-1;//重新保存新的小图阴影索引  
130.                 }  
131.                 else  
132.                 {  
133.                     img.Effect = null;  
134.                 }  
135.             }  
136.               
137.             //确定新的currentIndex  
138.             for (int i = 0; i < listSrc.Count; i++)  
139.             {  
140.                 if ((imgSmall.Source as BitmapImage).UriSource == new Uri(listSrc[i].src, UriKind.Relative))  
141.                 {  
142.                     currentIndex = i;  
143.                     break;  
144.                 }  
145.             }  
146.             txtImg.Text = listSrc[currentIndex].name ;  
147.         }  
148.         /// <summary>  
149.         /// 自定义类  
150.         /// </summary>  
151.         public class ImageItem  
152.         {  
153.             public string src { set; get; }  
154.             public string name { set; get; }  
155.         }  
156.         private void imgDown_MouseEnter(object sender, MouseEventArgs e)  
157.         {  
158.             this._timer.Stop();  
159.         }  
160.         private void imgDown_MouseLeave(object sender, MouseEventArgs e)  
161.         {  
162.             this._timer.Start();  
163.         }  
164.     }  
165. }