There are a lot of ways how to manipulate Deep Zoom depending on your needs. Before anything else I give you a short description of what is Deep Zoom. Deep Zoom provides the ability to interactively view high-resolution images in Silverlight. You can zoom in and out of images rapidly without affecting the performance of your application. This Quickstart shows you how to create a Deep Zoom image, load a Deep Zoom image, and add interactivity. Learn More
In order to build Deep Zoom applications, you need to download Microsoft's Deep Zoom Composer . And before we going into the mouse interactive code we should first have a short steps on how to create/build a Deep Zoom Application. So lets say you already has the DeepZoom Composer, open and create a new project.
1. Create new Project and Import Images
You see it has three different parts: Import, Compose and Export. The first thing we do is to import our images. See on the right side there is an Add Image button.
2. Compose the Imported Images
Click on the composed tab then just drag and drop all the images you had imported into the canvas. You see also all of it on the right side.
To arrange all of those, select all images and right click to bring up "Arrange Into Grid" dialog.
Define the number of rows and padding.
Once you click OK on that dialog, Deep Zoom Composer will arrange the images exactly like they're supposed to be.
3. Export Deep Zoom Project
Export them so that we can used it in our Silverlight application.
It generates a couple of different things. First it will create a folder called "GeneratedImages". This folder contains hundreds of images that Silverlight will request and combine when a user is using the Deep Zoom application. Inside this folder is also a file called "dzc_output.xml". This file will be the actual source of the MultiScaleImage object that will be used when building our app.
4. Silverlight Application
Locate the file where you saved your exported Deep Zoom project, and get the GeneratedImages folder and add it in the ClientBin forder of the ASP.net project. 
The first piece of code we need to write will create the multiscale image object and set it's source to our Deep Zoom Composer output.
<UserControl x:Class="deepZoom.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="Black">
<MultiScaleImage x:Name="msi" Source="../GeneratedImages/dzc_output.xml"/>
</Grid>
</UserControl>
If you run the application you can actually see the the images..how they we're arranged. However there is no mouse interaction happen, you cant zoom in and zoom out those images using your mouse. Now we're down to the good stuff..the code behind of it.
5. Code Behind. Zoom In and Zoom Out
Most of it was being provided by Microsoft I guess, but there are lots of versions on this code it depends what version of Silverlight your using. There are plenty of code but aint working for me. The code-behind for this application:
using System;
using System.Collections.Generic;
using System.Linq;
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;
namespace deepZoom
{
public partial class MainPage : UserControl
{
//
// Based on prior work done by Lutz Gerhard, Peter Blois, and Scott Hanselman
//
Point lastMousePos = new Point();
double _zoom = 1;
bool mouseButtonPressed = false;
bool mouseIsDragging = false;
Point dragOffset;
Point currentPosition;
public double ZoomFactor
{
get { return _zoom; }
set { _zoom = value; }
}
public MainPage()
{
InitializeComponent();
this.MouseMove += delegate(object sender, MouseEventArgs e)
{
if (mouseButtonPressed)
{
mouseIsDragging = true;
}
this.lastMousePos = e.GetPosition(this.msi);
};
this.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
{
mouseButtonPressed = true;
mouseIsDragging = false;
dragOffset = e.GetPosition(this);
currentPosition = msi.ViewportOrigin;
};
this.msi.MouseLeave += delegate(object sender, MouseEventArgs e)
{
mouseIsDragging = false;
};
this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
{
mouseButtonPressed = false;
if (mouseIsDragging == false)
{
bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
ZoomFactor = 2.0;
if (shiftDown) ZoomFactor = 0.5;
Zoom(ZoomFactor, this.lastMousePos);
}
mouseIsDragging = false;
};
this.MouseMove += delegate(object sender, MouseEventArgs e)
{
if (mouseIsDragging)
{
Point newOrigin = new Point();
newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffset.X) / msi.ActualWidth) * msi.ViewportWidth);
newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffset.Y) / msi.ActualHeight) * msi.ViewportWidth);
msi.ViewportOrigin = newOrigin;
}
};
new MouseWheelHelper(this).Moved += delegate(object sender, MouseWheelEventArgs e)
{
e.Handled = true;
if (e.Delta > 0)
ZoomFactor = 1.2;
else
ZoomFactor = .80;
Zoom(ZoomFactor, this.lastMousePos);
};
}
public void Zoom(double zoom, Point pointToZoom)
{
Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
}
}
}
Create a new class MouseWheelHelper.cs and have this code.
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace deepZoom
{
// Courtesy of Pete Blois
public class MouseWheelEventArgs : EventArgs
{
private double delta;
private bool handled = false;
public MouseWheelEventArgs(double delta)
{
this.delta = delta;
}
public double Delta
{
get { return this.delta; }
}
// Use handled to prevent the default browser behavior!
public bool Handled
{
get { return this.handled; }
set { this.handled = value; }
}
}
public class MouseWheelHelper
{
public event EventHandler<MouseWheelEventArgs> Moved;
private static Worker worker;
private bool isMouseOver = false;
public MouseWheelHelper(FrameworkElement element)
{
if (MouseWheelHelper.worker == null)
MouseWheelHelper.worker = new Worker();
MouseWheelHelper.worker.Moved += this.HandleMouseWheel;
element.MouseEnter += this.HandleMouseEnter;
element.MouseLeave += this.HandleMouseLeave;
element.MouseMove += this.HandleMouseMove;
}
private void HandleMouseWheel(object sender, MouseWheelEventArgs args)
{
if (this.isMouseOver)
this.Moved(this, args);
}
private void HandleMouseEnter(object sender, EventArgs e)
{
this.isMouseOver = true;
}
private void HandleMouseLeave(object sender, EventArgs e)
{
this.isMouseOver = false;
}
private void HandleMouseMove(object sender, EventArgs e)
{
this.isMouseOver = true;
}
private class Worker
{
public event EventHandler<MouseWheelEventArgs> Moved;
public Worker()
{
if (HtmlPage.IsEnabled)
{
HtmlPage.Window.AttachEvent("DOMMouseScroll", this.HandleMouseWheel);
HtmlPage.Window.AttachEvent("onmousewheel", this.HandleMouseWheel);
HtmlPage.Document.AttachEvent("onmousewheel", this.HandleMouseWheel);
}
}
private void HandleMouseWheel(object sender, HtmlEventArgs args)
{
double delta = 0;
ScriptObject eventObj = args.EventObject;
if (eventObj.GetProperty("wheelDelta") != null)
{
delta = ((double)eventObj.GetProperty("wheelDelta")) / 120;
if (HtmlPage.Window.GetProperty("opera") != null)
delta = -delta;
}
else if (eventObj.GetProperty("detail") != null)
{
delta = -((double)eventObj.GetProperty("detail")) / 3;
if (HtmlPage.BrowserInformation.UserAgent.IndexOf("Macintosh") != -1)
delta = delta * 3;
}
if (delta != 0 && this.Moved != null)
{
MouseWheelEventArgs wheelArgs = new MouseWheelEventArgs(delta);
this.Moved(this, wheelArgs);
if (wheelArgs.Handled)
args.PreventDefault();
}
}
}
}
}
ciao.
Read More...
Custom Search
Showing posts with label Silverlight. Show all posts
Showing posts with label Silverlight. Show all posts
Deep Zoom - Mouse wheel to zoom in & zoom out.
Add Silverlight in Web page .aspx
I just had my training about Silverlight, and one of the few important things i have learned and want to share it with you all is to how to add/integrate your silverlight application in the web page.
You can embed the Silverlight plug-in in your Web page in two ways:
● Using the HTML object element.
● Using JavaScript, Silverlight.js helper file.
I never try to used JavaScript but i found a very simple way on how to do it. See How to: Add Silverlight to a Web Page by Using JavaScript. For more information about Silverlight.js, see Silverlight.js Reference. So we have to focus more on HTML object element.
The HTML object element is the simplest way to embed the Silverlight plug-in, and is the recommended way. This is the default approach that is used by Visual Studio when you create a new Silverlight-based application and choose to host it in a dynamically generated HTML page.
You can use the object element to integrate Silverlight with JavaScript code in your Web page. However, JavaScript is not required to embed the control. This is useful if JavaScript is disabled on the client or prohibited on the server.
Question is where to find object element that being generated. You can find those in your Testpage both in .aspx and .html
In silverlight 2.0 Testpage.aspx has a different code, it never uses object but still you can make used of those, either way. Code looks like this.
<asp:ScriptManager runat="server" ID="ScriptManager" />
<asp:Silverlight runat="server" ID="silverlightLayout" InstallationMode="Inline"
Version="1.1" Source="MVC_silverlight.xap" EnableHtmlAccess="true" Windowless="true"
Width="844" Height="472" PluginBackColor="Transparent" />
And the object element im preferring too is this:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/MVC_silverlight.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
NOTE: You have to build your project in order to have those object.
Take a look on the first param, name="source" value="ClientBin/MVC_silverlight.xap" it pointed to the xap file. Xap file is the compressed output file for the Silverlight application. The .xap file includes AppManifest.xaml, compiled output assembly of the Silverlight project (.dll) and any other resource files referred by the Silverlight application.
You can actually just add that xap file in your Web project and point it right on the param source value.
For more information, see How to: How to: Add Silverlight to a Web Page by Using HTML
Read More...
Subscribe to:
Posts (Atom)