Tag Archive for 'Silverlight'

DeepZoom is neeeat And neat indeed is also Scott Hanselman’s post about mouse wheel zoom handling for MultiScaleImages.

In his sample, clicking on the MultiScaleImage zooms in by a certain amount and shift-clicking zooms out. I modified the MouseLeftButtonUp handler so that instead of zooming, the point where the click occured is moved to the center.

A sample which uses Scott’s implementation(and can be adapted to center instead of zooming) is found in the Expression Blend Team Blog.

Heres the XAML:

<UserControl x:Class="MoveClickPositionToCenter.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="Black">
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,50" VerticalAlignment="Stretch" x:Name="GridMain">
<MultiScaleImage Source="voodude/items.bin" x:Name="msi"/>
</Grid>
</Grid>
</UserControl>

And here the handler code:

public partial class Page : UserControl
{
public Page()
{
InitializeComponent();

this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
{
Point newOrigin = new Point();

//width and height of the actual viewport
double viewportWidth = msi.ViewportWidth;
double viewportHeight = msi.ViewportWidth * msi.ActualHeight / msi.ActualWidth;

//the current origin
double currX = -msi.ViewportOrigin.X;
double currY = -msi.ViewportOrigin.Y;

//click position relative to the viewport
double clickX = viewportWidth * e.GetPosition(msi).X / msi.ActualWidth;
double clickY = viewportHeight * e.GetPosition(msi).Y / msi.ActualHeight;

//the center of the viewport
double centerX = viewportWidth / 2;
double centerY = viewportHeight / 2;

//calculate new origin
double newX = currX + centerX - clickX;
double newY = currY + centerY - clickY;

newOrigin.X = -newX;
newOrigin.Y = -newY;

msi.ViewportOrigin = newOrigin;
};
}
}