Silverlight4 幻灯片实现

来源:互联网 时间:1970-01-01

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

 

每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">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.05*"></RowDefinition>
                <RowDefinition Height="0.15*"></RowDefinition>
                <RowDefinition Height="0.15*"></RowDefinition>
                <RowDefinition Height="0.15*"></RowDefinition>
                <RowDefinition Height="0.15*"></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,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,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>
            <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>
            <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>
            <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>
            <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 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>

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();
            #endregion
        }
        void _timer_Tick(object sender, EventArgs e)
        {
            down(sender, null);
        }
        /// <summary>
         /// 加载图片
         /// </summary>
         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++;
             }
         }
 
         /// <summary>
         /// 点击向上翻时的逻辑处理 
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="e"></param>
         private void up(object sender, MouseButtonEventArgs e)
         {
             currentIndex--;
             if (currentIndex <= 0) 
            {
                currentIndex = listSrc.Count;
            }
            LoadImage();
        }
        /// <summary>
        /// 点击向下按钮时的逻辑处理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void down(object sender, MouseButtonEventArgs e)
        {
            currentIndex++;
            if (currentIndex >= listSrc.Count) 
            {
                currentIndex = 0;
            }
            LoadImage();
        }
        
        /// <summary>
        /// 单击右侧小图时,同时步更换大图
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ImgClick(object sender, MouseButtonEventArgs e)
        {
            Image imgSmall = sender as Image;
            imgBig.Source = imgSmall.Source;
            sb_Big.Begin();
            for (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
            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 ;
        }
        /// <summary>
        /// 自定义类
        /// </summary>
        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();
        }
    }
}

本文来自taomanman的博客,原文地址:http://blog.csdn.net/taomanman/archive/2011/06/29/6575189.aspx


相关阅读:
Top