F6 Team

之前利用CompositionTarget做一些動畫效果

今天教大家利用DispatcherTimer結合CompositionTarget來做"圖片輪播"的功能

Gallery.xaml

<UserControl x:Class="SilverlightApplication1.Gallery" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> </Grid> </UserControl>

Gallery.xaml.cs
 

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.Windows.Threading; using System.Windows.Media.Imaging; using System.Windows.Browser; namespace SilverlightApplication1 { public partial class Gallery : UserControl { private double _imgWidth = 300; //圖片的寬 private double _imgHeight = 200; //圖片的高 private double _opacity = 0.02; //圖片透明度的增值 private string _path = "./images/img{0}.jpg"; //圖片路徑 private int _imgCount = 5; //圖片數量 private TimeSpan _t = new TimeSpan(0, 0, 4); //Timer的間隔時間 private List<Image> _imgList = new List<Image>(); //圖片的集合 private Rectangle _recImg; private DispatcherTimer _timer; public Gallery() { InitializeComponent(); Init(); } private void Init() { //載入圖片 LoadImage(); App.Current.Host.Settings.MaxFrameRate = 30;//播放速度 CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering); //啓動Timer _timer = new DispatcherTimer(); _timer.Interval = _t; _timer.Tick += new EventHandler(_timer_Tick); _timer.Start(); } private void LoadImage() { for (int i = 0; i < _imgCount; i++) { Image img = new Image(); img.Source = new BitmapImage(new Uri(string.Format(_path, i.ToString()), UriKind.Relative)); img.Width = _imgWidth; img.Height = _imgHeight; _imgList.Add(img);//加入圖片至圖片集合 } //將Rectangle加入至Grid _recImg = new Rectangle(); _recImg.Width = _imgWidth; _recImg.Height = _imgHeight; _recImg.MouseLeftButtonDown += new MouseButtonEventHandler(_recImg_MouseLeftButtonDown);//開啓原始圖 _recImg.Cursor = Cursors.Hand;//Mouse移到Rectangle時出現手指圖示 ToolTipService.SetToolTip(_recImg, "點小圖放大圖");//在Rectangle加入ToolTip功能 LayoutRoot.Children.Add(_recImg); _timer_Tick(this, new EventArgs()); } void _recImg_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { //取得在Rectangle.Tag上的圖片指標,並且呼叫外部的javascript開啓視窗,瀏覽原始圖 string imgIndex = ((Rectangle)e.OriginalSource).Tag.ToString(); ScriptObject script = HtmlPage.Window.GetProperty("openWin") as ScriptObject; script.InvokeSelf(imgIndex); } void CompositionTarget_Rendering(object sender, EventArgs e) { if (_recImg.Opacity < 1) { _recImg.Opacity += _opacity;//增加透明度的值 } } void _timer_Tick(object sender, EventArgs e) { int seed = (int)DateTime.Now.Ticks; Random r = new Random(seed); //隨機選一張圖,利用影像筆刷填入Rectangle,並設定透明為0 int index = (int)(r.Next(0, _imgCount)); ImageBrush imgBrush = new ImageBrush(); imgBrush.ImageSource = ((Image)_imgList[index]).Source; _recImg.Tag = index;//記錄圖片指標 _recImg.Fill = imgBrush; _recImg.Opacity = 0; } } }

gallery.html(javascript部分)

<script type="text/javascript"> function openWin(index) { var url = "./ClientBin/images/img" + index + ".jpg"; window.open(url, "_blank"); } </script>

執行結果：

線上Demo：

http://demo.dotblogs.com.tw/puma/silverlight/gallery.html

參考網址：
http://silverlight.net/forums/t/15725.aspx
http://msdn.microsoft.com/zh-tw/library/system.windows.controls.tooltipservice(VS.95).aspx
http://msdn.microsoft.com/zh-tw/library/system.windows.input.cursor(VS.95).aspx