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">

<RowDefinition Height="0.15*"></RowDefinition>

<Grid Grid.Row="0">

<Image x:Name="imgUp" Source="/gqfc;component/Photos/up.png" MouseLeftButtonDown="up" Cursor="Hand" ToolTipService.ToolTip="上一個圖檔"/>

<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 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 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 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 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 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.Row="7">

<Image x:Name="imgDown" Source="/gqfc;component/Photos/down.png" MouseLeftButtonDown="down" Cursor="Hand" ToolTipService.ToolTip="下一個圖檔"/>

<Border Grid.Column="0" HorizontalAlignment="Center" Grid.Row="0" VerticalAlignment="Center" BorderBrush="#FF54DC18" BorderThickness="1" CornerRadius="5" ToolTipService.ToolTip="灌 區 風 采 " Cursor="Hand" >

<Border.Effect>

</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>

</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();

void _timer_Tick(object sender, EventArgs e)

down(sender, null);

/// 加載圖檔

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++;

/// 點選向上翻時的邏輯處理

/// <param name="sender"></param>

/// <param name="e"></param>

private void up(object sender, MouseButtonEventArgs e)

currentIndex--;

if (currentIndex <= 0)

currentIndex = listSrc.Count;

/// 點選向下按鈕時的邏輯處理

private void down(object sender, MouseButtonEventArgs e)

currentIndex++;

if (currentIndex >= listSrc.Count)

/// 單擊右側小圖時，同時步更換大圖

private void ImgClick(object sender, MouseButtonEventArgs e)

Image imgSmall = sender as Image;

imgBig.Source = imgSmall.Source;

for (int i = 1; i <= 6; i++)

Image img = this.pnl2.FindName("img" + i.ToString()) as Image;

if (img == imgSmall)

currentImgIndex = i-1;//重新儲存新的小圖陰影索引

//确定新的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 ;

/// 自定義類

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();