如何在 Silverlight 2 MultiScaleImage 物件拖放

  • Article

註: 這裡的範例程式碼是針對 Silverlight 2 Beta1, 在 beta2 中, MultiScaleImage 的 Source 的型態有些改變。

Silverlight 2 的一些範例如: Hardrock (https://memorial.hardrock.com/), 故宮清明上河圖 (https://learnet.npm.gov.tw/silverlight/) 都使用到滑鼠拖放圖片, 這是一個常用的功能, 因為常被問到, 所以把相關程式碼提供出來讓大家參考:

Page.xaml

<UserControl x:Class="SilverlightApplication3.Page"
    xmlns="https://schemas.microsoft.com/client/2007"
    xmlns:x="https://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;
        }

    }

}

Comments

  • Anonymous
    April 14, 2008
    PingBack from http://microsoftnews.askpcdoc.com/?p=2492

  • Anonymous
    April 14, 2008
    旺旺大大今天課程內容的 Lab 包含手冊資相關的資訊真的不錯。讚！滿意度給 10 分。

  • Anonymous
    April 23, 2008
    請教周老師: 我是您4/15『Silverlight 2.0 開發預覽專班』的學員之一,上完課後我心中一直有個疑問,ASP.NET辦得到的Silverlight也辦得到(如果它的控件越來越多時,會更容易),但是ASP.NET要做到Silverlight的影音、向量等美倫美奐效果,實在很困難. 是否再過幾年Silverlight會完全取代掉ASP.NET? 如果是,那麼大型的Web專案開發(例:ERP),是否等Silverlight成熟後再進行? 才不致於將來又得改寫成Silverlight版本? 謝謝您

  • Anonymous
    April 23, 2008
    如果目標是 ERP 類型的應用程式, 確實 Silverlight 會比 ASP.NET + AJAX 容易許多, 長遠來看在 RIA 的領域, 很多應用程式會改用的新的技術來開發。關鍵還是在"何時"開始使用, Silverlight 是微軟傾全力開發的技術, 我不知道何時才會停下來, 很難說什麼時候 Silverlight 才會成熟。 重點是貴公司預估什麼時候才會引進 Silverlight, 再計入產品開發週期, 假如是兩年, 那就應該提前兩年啟用 Silverlight 技術, 這樣才能如期推出適當的技術。

  • Anonymous
    May 12, 2008
    上次介紹 Deep Zoom composer 後，有些朋友之前沒有接觸過 Silverlight，故筆者整理相關工具如下： 開發工具(Code)： &#8226; Visual Studio 2008