註: 這裡的範例程式碼是針對 Silverlight 2 Beta1, 在 beta2 中, MultiScaleImage 的 Source 的型態有些改變。
Silverlight 2 的一些範例如: Hardrock (http://memorial.hardrock.com/), 故宮清明上河圖 (http://learnet.npm.gov.tw/silverlight/) 都使用到滑鼠拖放圖片, 這是一個常用的功能, 因為常被問到, 所以把相關程式碼提供出來讓大家參考:
Page.xaml
<UserControl x:Class="SilverlightApplication3.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid x:Name="LayoutRoot" Background="White"> <MultiScaleImage x:Name="dz" Source="deepzoomtest1/info.bin" UseSprings="False" MouseLeftButtonDown="MultiScaleImage_MouseLeftButtonDown" MouseMove="MultiScaleImage_MouseMove" MouseLeftButtonUp="MultiScaleImage_MouseLeftButtonUp" /> </Grid> </UserControl>
Page.xaml.cs
using System; using System.Collections.Generic; using System.Linq; 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;
namespace SilverlightApplication3 { public partial class Page : UserControl { public Page() { InitializeComponent(); }
public partial class Page : UserControl {
bool dragging = false; Point dragOffset; Point currentPosition;
private void MultiScaleImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { dragging = true; dragOffset = e.GetPosition(this); currentPosition = dz.ViewportOrigin; }
private void MultiScaleImage_MouseMove(object sender, MouseEventArgs e) { if (dragging) { Point newOrigin = new Point(); Point pMouse = e.GetPosition(this); double ratio = dz.ViewportWidth / dz.ActualWidth; newOrigin.X = currentPosition.X - (pMouse.X - dragOffset.X) * ratio; newOrigin.Y = currentPosition.Y - (pMouse .Y - dragOffset.Y) * ratio; dz.ViewportOrigin = newOrigin; } }
private void MultiScaleImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { dragging = false; }
}