如何在 Silverlight 2 MultiScaleImage 物件拖放
註: 這裡的範例程式碼是針對 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;
}
}
}
