Mike Ormond's Blog

Musings on mobile development and Windows Phone 7 in particular.

Silverlight 2 Deep Zoom Demo

Silverlight 2 Deep Zoom Demo

  • Comments 5

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.

Picture1

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="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://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: ,,
  • I've updated my Deep Zoom demo to add mouse wheel support for zooming. There is no way to capture mouse

  • I&#39;ve updated my Deep Zoom demo to add mouse wheel support for zooming. There is no way to capture

  • I remember one of my Silverlight discussions with customers was about if it was possible to allow users

  • I remember one of my Silverlight discussions with customers was about if it was possible to allow users

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

Page 1 of 1 (5 items)