Home
Manage Your Code
Snippet: DeepZoom: MultiScaleImage with panning and zooming (C#)
Title: DeepZoom: MultiScaleImage with panning and zooming Language: C#
Description: How to use the DeepZoom feature of Silverlight and the MultiScaleImage control to create an image that can be panned and zoomed. Views: 99
Author: Simon Kendall Date Added: 8/5/2008
Copy Code  
1<UserControl x:Class="SilverlightPanoramaApplication.Page"
2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
4    Width="760" Height="600">
5    <Grid x:Name="LayoutRoot" Background="White">
6        <MultiScaleImage x:Name="PanoramaMultiScaleImage" Source="/HawaiiPanorama/dzc_output.xml"
7                         Width="600" Height="600" 
8                         MouseMove="PanoramaMultiScaleImage_MouseMove"
9                         MouseLeftButtonDown="PanoramaMultiScaleImage_MouseLeftButtonDown"
10                         MouseLeftButtonUp="PanoramaMultiScaleImage_MouseLeftButtonUp"
11                         MouseLeave="PanoramaMultiScaleImage_MouseLeave">
12        </MultiScaleImage>
13        <RepeatButton x:Name="ZoomIn" Width="80" Height="30" HorizontalAlignment="Left"
14                      Content="Zoom In" Click="ZoomIn_Click"></RepeatButton>
15        <RepeatButton x:Name="ZoomOut" Background="DarkCyan" Width="80" Height="30" 
16                      HorizontalAlignment="Right" Content="Zoom Out"
17                      Click="ZoomOut_Click"></RepeatButton>
18    </Grid>
19</UserControl>
20
21using System;
22using System.Collections.Generic;
23using System.Linq;
24using System.Net;
25using System.Windows;
26using System.Windows.Controls;
27using System.Windows.Documents;
28using System.Windows.Input;
29using System.Windows.Media;
30using System.Windows.Media.Animation;
31using System.Windows.Shapes;
32
33namespace SilverlightPanoramaApplication
34{
35    public partial class Page : UserControl
36    {
37        Point lastMousePosition = new Point();
38        Point dragOffset;
39        Point currentPosition;
40        bool dragInProgress = false;
41
42        public Page()
43        {
44            InitializeComponent();
45
46            new MouseWheelHelper(PanoramaMultiScaleImage).Moved += delegate(object sender,
47                MouseWheelEventArgs e)
48                {
49                    double zoomFactor = 1;
50
51                    e.Handled = true;
52
53                    if (e.Delta > 0)
54                        zoomFactor = 1.1;
55                    else
56                        zoomFactor = 0.9;
57
58                    Point p = PanoramaMultiScaleImage.ElementToLogicalPoint(lastMousePosition);
59
60                    PanoramaMultiScaleImage.ZoomAboutLogicalPoint(zoomFactor, p.X, p.Y);
61                };
62
63        }
64
65        private void ZoomIn_Click(object sender, RoutedEventArgs e)
66        {
67            //Zoom about the centre of the image
68            Point p = PanoramaMultiScaleImage.ElementToLogicalPoint(new Point(
69                PanoramaMultiScaleImage.Width / 2, (PanoramaMultiScaleImage.Width / 
70                PanoramaMultiScaleImage.AspectRatio) / 2));
71
72            PanoramaMultiScaleImage.ZoomAboutLogicalPoint(1.1, p.X, p.Y);
73        }
74
75        private void ZoomOut_Click(object sender, RoutedEventArgs e)
76        {
77            //Zoom about the centre of the image
78            Point p = PanoramaMultiScaleImage.ElementToLogicalPoint(new Point(
79                PanoramaMultiScaleImage.Width / 2, (PanoramaMultiScaleImage.Width /
80                PanoramaMultiScaleImage.AspectRatio) / 2));
81
82            PanoramaMultiScaleImage.ZoomAboutLogicalPoint(0.9, p.X, p.Y);
83        }
84
85        private void PanoramaMultiScaleImage_MouseMove(object sender, MouseEventArgs e)
86        {
87            //Capture mouse position to use as zoom centre with mouse wheel
88            lastMousePosition = e.GetPosition(PanoramaMultiScaleImage);
89
90            //Pan the image
91            if (dragInProgress)
92            {
93                Point newOrigin = new Point();
94
95                newOrigin.X = currentPosition.X - (((e.GetPosition(
96                    PanoramaMultiScaleImage).X - dragOffset.X) /
97                    PanoramaMultiScaleImage.ActualWidth) *
98                    PanoramaMultiScaleImage.ViewportWidth);
99
100                newOrigin.Y = currentPosition.Y - (((e.GetPosition(
101                    PanoramaMultiScaleImage).Y - dragOffset.Y) /
102                    PanoramaMultiScaleImage.ActualHeight) *
103                    PanoramaMultiScaleImage.ViewportWidth);
104
105                PanoramaMultiScaleImage.ViewportOrigin = newOrigin;
106            }
107        }
108
109        private void PanoramaMultiScaleImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
110        {
111            dragInProgress = true;
112            dragOffset = e.GetPosition(PanoramaMultiScaleImage);
113            currentPosition = PanoramaMultiScaleImage.ViewportOrigin;
114        }
115
116        private void PanoramaMultiScaleImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
117        {
118            dragInProgress = false;
119        }
120
121        private void PanoramaMultiScaleImage_MouseLeave(object sender, MouseEventArgs e)
122        {
123            dragInProgress = false;
124        }
125    }
126}
Usage
Use DeepZoom Composer to export images.
Copy output to ClientBin folder of SilverLight web.
Notes
Credit goes to Wilfred Pinto for this code. See http://projectsilverlight.blogspot.com/2008/04/dissecting-hard-rock-memorabilia-part-9.html