silverlight版的图片轮换广告

今天下午模仿公司的Flash版图片广告做了一个silverlight版的图片轮换广告,10秒轮换一次

xaml代码:

 1<UserControl
 2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4    x:Class="Ad.Page"
 5    >
 6    <UserControl.Resources>
 7        <Storyboard x:Name="sb_Big">
 8            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgBig" Storyboard.TargetProperty="(UIElement.Opacity)">
 9                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.1"/>
10                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
11            </DoubleAnimationUsingKeyFrames>
12        </Storyboard>
13    </UserControl.Resources>
14    
15    <Canvas Background="#efefef" Height="190" Width="270">
16        <StackPanel Height="170" x:Name="pnl1" Width="270" Orientation="Horizontal" >
17            <Image Height="150" Name="imgBig" Stretch="Fill" Width="200" Margin="10" Source="/Ad;component/img/001.jpg" Cursor="Hand" >
18                <Image.Effect>
19                    <DropShadowEffect/>
20                </Image.Effect>
21            </Image>
22            <StackPanel Height="170" x:Name="pnl2" Width="40" Orientation="Vertical" Margin="0,0,10,0">
23                <Image Height="10" Name="imgUp" Stretch="Fill" Width="22" Source="/Ad;component/img/up.png" MouseLeftButtonDown="up" Cursor="Hand"/>
24                <Image Height="30" Name="img1" Stretch="Fill" Width="40" Source="/Ad;component/img/001.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand" />
25                <Image Height="30" Name="img2" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/002.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand">
26
27                </Image>
28                <Image Height="30" Name="img3" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/003.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand"/>
29                <Image Height="30" Name="img4" Stretch="Fill" Width="40" Margin="0,10,0,0" Source="/Ad;component/img/004.jpg" MouseLeftButtonDown="ImgClick" Cursor="Hand"/>
30                <Image Height="10" Name="imgDown" Stretch="Fill" Width="22" Source="/Ad;component/img/down.png"  MouseLeftButtonDown="down" Cursor="Hand"/>
31            </StackPanel>
32        </StackPanel>
33        <TextBlock Name="txtImg" Canvas.Top="170" Canvas.Left="10" Width="200" Text="就绪" HorizontalAlignment="Center" IsHitTestVisible="False" TextAlignment="Center"></TextBlock>
34    </Canvas>
35</UserControl>

Xaml.cs代码:

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

源代码下载