Silverlight 2 Deep Zoom Demo

With inspiration and a bit of help from MikeT, Daniel and Yasser (and John in his comments) I had a crack at a simple Silverlight 2 demo with Deep Zoom. You'll find links to all the tools etc in the linked posts but essentially I took some images and imported them into the Deep Zoom Composer before applying some layout in the compose tab and exporting the results. There is a user guide but TBH I didn't need it for what I wanted to achieve, the info in Mike's post was enough.

The net result is a set of files you need to add to the ClientBin folder of the site hosting your Silverlight application (or the folder where the xap is deployed). You can then reference this in the MultiScaleImage control (the Deep Zoom host control in effect). Set the Source property of the MultiScaleImage control to the info.bin file in the Deep Zoom composer project and you're pretty much good to go. Here's my Page.xaml:

 <UserControl x:Class="DeepZoom911.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="msi"
      ViewportWidth="1.0"
      Source="Images/911/info.bin"
            MouseLeftButtonDown="msi_MouseLeftButtonDown" 
            MouseLeftButtonUp="msi_MouseLeftButtonUp"
            MouseMove="msi_MouseMove"
            MouseLeave="msi_MouseLeave"/>

    </Grid>
</UserControl>

And here's the code-behind

 using System.Windows.Controls;
using System.Windows;
using System.Windows.Input;

namespace DeepZoom911
{
    public partial class Page : UserControl
    {
        private bool dragging = false;
        private bool dragged = false;
        Point dragStart;
        Point currentOrigin;

        public Page()
        {
            InitializeComponent();
        }

        private void msi_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            dragging = true; // We might be dragging
            dragged = false; // We haven't dragged yet
            dragStart = e.GetPosition(msi); // If we start dragging, record where we start

            // Same for the MultiScaleImage control
            currentOrigin = msi.LogicalToElementPoint(msi.ViewportOrigin); 
        }

        private void msi_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            // If we haven't dragged, we must want to zoom
            if (dragged == false)
            {
                if (Keyboard.Modifiers == ModifierKeys.Control)
                    Zoom(e.GetPosition(msi), 0.9);
                else
                    Zoom(e.GetPosition(msi), 1.1);
            }

            // Whatever happens, we're no longer dragging or dragged
            dragging = false;
            dragged = false;
        }

        private void Zoom(Point P, double ZoomFactor)
        {
            // Take the point from our MouseEventArgs and convert to a
            // logical point in our MultiScaleImage object
            // Then zoom about that logical point
            P = msi.ElementToLogicalPoint(P);
            this.msi.ZoomAboutLogicalPoint(ZoomFactor, P.X, P.Y);
        }

        private void msi_MouseMove(object sender, MouseEventArgs e)
        {
            // If we're dragging, work out the new ViewportOrigin for 
            // the MultiScaleImage control from the current mouse position
            // and our recorded position
            if (dragging == true)
            {
                dragged = true;
                Point p = new Point();

                p.X = currentOrigin.X - (e.GetPosition(msi).X - dragStart.X);
                p.Y = currentOrigin.Y - (e.GetPosition(msi).Y - dragStart.Y);

                // Everything is currently in Element Points - convert to Logical
                msi.ViewportOrigin = msi.ElementToLogicalPoint(p); ;
            }
        }

        private void msi_MouseLeave(object sender, MouseEventArgs e)
        {
            // Make sure we tidy up our drag status if we leave the control
            dragging = false;
            dragged = false;
        }
    }
}
 

Click here or on the image above to see the app in action.

Technorati Tags: silverlight,deep zoom,mix08

Comments

• Anonymous
  March 07, 2008
  I've updated my Deep Zoom demo to add mouse wheel support for zooming. There is no way to capture mouse

• Anonymous
  March 07, 2008
  I've updated my Deep Zoom demo to add mouse wheel support for zooming. There is no way to capture

• Anonymous
  March 12, 2008
  I remember one of my Silverlight discussions with customers was about if it was possible to allow users

• Anonymous
  March 12, 2008
  I remember one of my Silverlight discussions with customers was about if it was possible to allow users

• Anonymous
  March 26, 2008
  It has been three weeks since we annouced Silverlight 2 at MIX08. Many of you are excited to getting