学步园

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

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

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

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