Click here to Skip to main content
15,881,709 members
Articles / Programming Languages / C#

Silverlight Database Deep Zoom

Rate me:
Please Sign up or sign in to vote.
4.96/5 (40 votes)
26 Mar 2009CPOL11 min read 122.3K   1.7K   84  
The article describes how to create a Deep Zoom image and store the tiles in a database, and how to read the image from the database and display it in the browser.
using System;
using System.Collections.Generic;
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 DeepZoomSilverlightProject.ImageListClient;

namespace DeepZoomSilverlightProject
{
    public partial class Page : UserControl
    {
        //
        // Based on prior work done by Lutz Gerhard, Peter Blois, and Scott Hanselman
        //

        double zoom = 1;
        bool duringDrag = false;
        bool mouseDown = false;
        Point lastMouseDownPos = new Point();
        Point lastMousePos = new Point();
        Point lastMouseViewPort = new Point();


        public double ZoomFactor
        {
            get { return zoom; }
            set { zoom = value; }
        }

        public Page()
        {
            InitializeComponent();

            // Setting the datasource for the list using the ImageListService
            var imageListClient = ServiceClientFactory.GetImageListServiceClient();
            imageListClient.GetImageListCompleted += new EventHandler<DeepZoomSilverlightProject.ImageListClient.GetImageListCompletedEventArgs>(imageListCliet_GetImageListCompleted);
            imageListClient.GetImageListAsync();

            //
            // Firing an event when the MultiScaleImage is Loaded
            //
            this.msi.Loaded += new RoutedEventHandler(msi_Loaded);

            //
            // Firing an event when all of the images have been Loaded
            //
            this.msi.ImageOpenSucceeded += new RoutedEventHandler(msi_ImageOpenSucceeded);

            //
            // Handling all of the mouse and keyboard functionality
            //
            msi.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
            {
                lastMouseDownPos = e.GetPosition(msi);
                lastMouseViewPort = msi.ViewportOrigin;

                mouseDown = true;

                msi.CaptureMouse();
            };

            msi.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
            {
                if (!duringDrag)
                {
                    bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
                    double newzoom = zoom;

                    if (shiftDown)
                    {
                        newzoom /= 2;
                    }
                    else
                    {
                        newzoom *= 2;
                    }

                    Zoom(newzoom, msi.ElementToLogicalPoint(this.lastMousePos));
                }
                duringDrag = false;
                mouseDown = false;

                msi.ReleaseMouseCapture();
            };

            msi.MouseMove += delegate(object sender, MouseEventArgs e)
            {
                lastMousePos = e.GetPosition(msi);
                if (mouseDown && !duringDrag)
                {
                    duringDrag = true;
                    double w = msi.ViewportWidth;
                    Point o = new Point(msi.ViewportOrigin.X, msi.ViewportOrigin.Y);
                    msi.UseSprings = false;
                    msi.ViewportOrigin = new Point(o.X, o.Y);
                    msi.ViewportWidth = w;
                    zoom = 1/w;
                    msi.UseSprings = true;
                }

                if (duringDrag)
                {
                    Point newPoint = lastMouseViewPort;
                    newPoint.X += (lastMouseDownPos.X - lastMousePos.X) / msi.ActualWidth * msi.ViewportWidth;
                    newPoint.Y += (lastMouseDownPos.Y - lastMousePos.Y) / msi.ActualWidth * msi.ViewportWidth;
                    msi.ViewportOrigin = newPoint;
                }

            };

            new MouseWheelHelper(msi).Moved += delegate(object sender, MouseWheelEventArgs e)
            {
                e.Handled = true;

                double newzoom = zoom;

                if (e.Delta < 0)
                    newzoom /= 1.3;
                else
                    newzoom *= 1.3;

                Zoom(newzoom, msi.ElementToLogicalPoint(this.lastMousePos));
                msi.CaptureMouse();
            };
        }

        /// <summary>
        /// Handles the GetImageListCompleted event of the imageListCliet control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="DeepZoomSilverlightProject.ImageListClient.GetImageListCompletedEventArgs"/> instance containing the event data.</param>
        void imageListCliet_GetImageListCompleted(object sender, DeepZoomSilverlightProject.ImageListClient.GetImageListCompletedEventArgs e)
        {
            // Set the datasource for the image list control
            imageList.ItemsSource = e.Result;

            if (imageList.Items.Count > 0)
                imageList.SelectedIndex = 0;
        }

        /// <summary>
        /// After the Image is opened, calculate the correct size to display the full image.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void msi_ImageOpenSucceeded(object sender, RoutedEventArgs e)
        {
            ImageInfo imageInfo = imageList.SelectedItem as ImageInfo;
            if (imageInfo != null)
            {
                // Calculate the aspect ratios of the multi scale image control and the image to be displayed
                double ar_msi = msi.ActualWidth / msi.ActualHeight;
                double ar_image = (double)imageInfo.Width / imageInfo.Height;
                
                // Reset the zoom factor
                ZoomFactor = 1;

                // if the aspect ratio of the control is larger that that of the image
                // we must zoom out the image, so that the full height is shown
                // else we can zoom to full width of image (ViewportWidth = 1)
                if (ar_msi > ar_image)
                    msi.ViewportWidth = ar_msi / ar_image;
                else
                    msi.ViewportWidth = 1;
                msi.ViewportOrigin = new Point(0, 0);
            }
        }

        void msi_Loaded(object sender, RoutedEventArgs e)
        {
            // Hook up any events you want when the image has successfully been opened
        }

        private void Zoom(double newzoom, Point p)
        {
            if (newzoom < 0.1)
            {
                newzoom = 0.1;
            }

            msi.ZoomAboutLogicalPoint(newzoom / zoom, p.X, p.Y);
            zoom = newzoom;
        }

        private void ZoomInClick(object sender, System.Windows.RoutedEventArgs e)
        {
            Zoom(zoom * 1.3, msi.ElementToLogicalPoint(new Point(.5 * msi.ActualWidth, .5 * msi.ActualHeight)));
        }

        private void ZoomOutClick(object sender, System.Windows.RoutedEventArgs e)
        {
            Zoom(zoom / 1.3, msi.ElementToLogicalPoint(new Point(.5 * msi.ActualWidth, .5 * msi.ActualHeight)));
        }

        private void GoHomeClick(object sender, System.Windows.RoutedEventArgs e)
        {
        	this.msi.ViewportWidth = 1;
			this.msi.ViewportOrigin = new Point(0,0);
            ZoomFactor = 1;
        }

        private void GoFullScreenClick(object sender, System.Windows.RoutedEventArgs e)
        {
        	if (!Application.Current.Host.Content.IsFullScreen) 
			{ 
				Application.Current.Host.Content.IsFullScreen = true; 
			} 
			else 
			{ 
				Application.Current.Host.Content.IsFullScreen = false; 
			} 
        }

        // Handling the VSM states
        private void LeaveMovie(object sender, System.Windows.Input.MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "FadeOut", true);
        }

        private void EnterMovie(object sender, System.Windows.Input.MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "FadeIn", true);
        }


        // unused functions that show the inner math of Deep Zoom
        public Rect getImageRect()
        {
            return new Rect(-msi.ViewportOrigin.X / msi.ViewportWidth, -msi.ViewportOrigin.Y / msi.ViewportWidth, 1 / msi.ViewportWidth, 1 / msi.ViewportWidth * msi.AspectRatio);
        }

        public Rect ZoomAboutPoint(Rect img, double zAmount, Point pt)
        {
            return new Rect(pt.X + (img.X - pt.X) / zAmount, pt.Y + (img.Y - pt.Y) / zAmount, img.Width / zAmount, img.Height / zAmount);
        }

        public void LayoutDZI(Rect rect)
        {
            double ar = msi.AspectRatio;
            msi.ViewportWidth = 1 / rect.Width;
            msi.ViewportOrigin = new Point(-rect.Left / rect.Width, -rect.Top / rect.Width);
        }

        /// <summary>
        /// When the user selects another image, init a new DeepZoomTileSource object
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void imageList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ImageInfo imageInfo = imageList.SelectedItem as ImageInfo;

            if (imageInfo != null)
            {
                // Setting the source of the multi scale image
                msi.Source = new DeepZoomTileSource(imageInfo.ImageId, imageInfo.Width, imageInfo.Height, imageInfo.TileSize, imageInfo.Overlap, imageInfo.MimeType);
            }
        }
    }
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO
Switzerland Switzerland
I have my own software company called Evelix (www.evelix.ch). The company is located in Liestal, Switzerland. I develop software for the web and the desktop. Every now and then I give computer classes in a learning institution.

I was born in 1966, am married and have one kid. Hobbies are Fasnacht (www.bmg.bs), skiing and of course computers.

Actually I studied mechanical engineering and have a bachelors degree in it, but computers interested me since I had a Commodore C128. In the meantime my mobile has a thousand times more memory than my computers back then. First I started programming in Basic. After that I did use Pascal for a while, but the real (commercial) programming started with VB3. Now I do programming in C# and sometimes still in VB6 when I have to support an older application.

Currently I'm working towards my Microsoft Certified Trainer status.

Comments and Discussions