SliverLight2 Beta Quick Tip Panning: Implement MultiScaleImage behavior like in Image Control
In my previous post on implementing MultiScaleImage behavior like I have mentioned that I will demonstrate on how to implement a panning behavior like to an Image on SilverLight2 Beta.
In this post I will implement panning behavior like on Image control.
Step 1:
First we have to Subscribe to the following events, MouseLeftButtonUp, MouseLeftButtonDown, MouseMove. We also need to declare two variables that will save the mouse down position and the status of the mouse button(Up/Down).
Variables:
Point lastMousePos = new Point();
bool startPanning = false;
events:
this.MouseLeftButtonUp += new MouseButtonEventHandler(Page_MouseLeftButtonUp);
this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
this.MouseMove += new MouseEventHandler(Page_MouseMove);
Step 2:
In the MouseLeftButtonDown event we need to save the status of our two newly added variables:
void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
startPanning = true;
lastMouseDownPos = e.GetPosition(this.MainImage);
}
Step 3:
The MouseMove event, in this event we will have to handle the Transform of the Image while the mouse is still moving. Since the code also support Zooming there are two cases of Transformation, when there is ZoomIn/ZoomOut and no zooming. The no zooming section of is the basic of our transformation and it will handle moving the Image around the page. It looks something like this:
void Page_MouseMove(object sender, MouseEventArgs e)
{
if (!startPanning)
{
return;
}
Transform currentTransform;
currentTransform = new TranslateTransform();
((TranslateTransform)currentTransform).X = (e.GetPosition(this).X - lastMouseDownPos.X);
((TranslateTransform)currentTransform).Y = (e.GetPosition(this).Y - lastMouseDownPos.Y);
You may have noticed that we have to subtract the current mouse position - e.GetPosition(this) with the mouse original left button position - lastMouseDownPos. This is needed to keep the relative position of inside the Image control.
Now we have to handle the mouse position in ZoomIn/ZoomOut mode:
if (zoom != 1)
{
TransformGroup group = new TransformGroup();
ScaleTransform scaleTransform = new ScaleTransform();
((ScaleTransform)scaleTransform).CenterY = lastMouseDownPos.Y;
((ScaleTransform)scaleTransform).CenterX = lastMouseDownPos.X;
((ScaleTransform)scaleTransform).ScaleX = zoom;
((ScaleTransform)scaleTransform).ScaleY = zoom;
group.Children.Add(scaleTransform);
group.Children.Add(currentTransform);
currentTransform = group;
}
In ZoomIn/ZoomOut we need to add the special Transform to a TransformGroup since we are using two Transformation one for the location of the Image and one for the Zooming.
Apply the Transformation to the Image :
MainImage.RenderTransform = currentTransform;
Step 4:
On the MouseLeftButtonUp event we need to clear the Variables - set the lastMousePos to empty and the startPanning to false.
That's it.
I have added the source code.
Enjoy!