Silverlight4 幻灯片实现

概述首先看效果图，然后给出代码。     每10秒自动切换图片，点击右侧图片列表，左侧自动显示该图片。   [c-sharp:nogutter]  view plain copy <UserControl x:Class="gqfc.MainPage"       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

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

 

 

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

 

[c-sharp:nogutter]  view plain copy <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.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" 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,0" GrID.Row="2">                   <Image x:name="img2" Source="/gqfc;component/Photos/fc3.jpg" MouseleftbuttonDown="imgClick" Cursor="Hand" Stretch="Fill" tooltipService.tooltip="灌 区 风 采 "/>    GrID.Row="3">                   <Image x:name="img3" Source="/gqfc;component/Photos/fc4.jpg" MouseleftbuttonDown="imgClick" Cursor="Hand" Stretch="Fill" tooltipService.tooltip="灌 区 风 采 "/>               </GrID>    GrID.Row="4">                   <Image x:name="img4" Source="/gqfc;component/Photos/fc5.jpg" MouseleftbuttonDown="imgClick" Cursor="Hand" Stretch="Fill" tooltipService.tooltip="灌 区 风 采 "/>    GrID.Row="5">                   <Image x:name="img5" Source="/gqfc;component/Photos/fc6.jpg" MouseleftbuttonDown="imgClick" Cursor="Hand" Stretch="Fill" tooltipService.tooltip="灌 区 风 采 "/>               </GrID>    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>  

 

copy 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       {           @H_403_982@/// <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;       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>            voID up(         {                currentIndex--;   if (currentIndex <= 0)                {                   currentIndex = ListSrc.Count;               }               LoadImage();           }   /// 点击向下按钮时的逻辑处理   /// </summary>           /// <param name="e"></param>           voID down(         {               currentIndex++;   if (currentIndex >= ListSrc.Count)                {                   currentIndex = 0;               }                      /// 单击右侧小图时，同时步更换大图           /// <param name="sender"></param>           /// <param name="e"></param>   voID imgClick(        {               Image imgSmall = sender as Image;               imgBig.source = imgSmall.source;               sb_Big.Begin();               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   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           {               string src { set; get; }   string name { get; }           }   voID imgDown_MouseEnter(        {   this._timer.Stop();           }   voID imgDown_MouseLeave(this._timer.Start();           }       }   }   总结

以上是内存溢出为你收集整理的Silverlight4 幻灯片实现全部内容，希望文章能够帮你解决Silverlight4 幻灯片实现所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。