901217 - how to pan in Silverlight?

Question

0.00/5 (No votes)

See more:

hi i've an Image in the UserControl which Source is a BitmapImage. i need to pan what is shown in the Image control. how can i do that? in another words, how can i create another BitmapImage source which content be a shift of the original BitmapImage or how can i draw in the Image a shifted version of what is currently in BitmapImage?

Posted 6-Mar-12 22:42pm

ilostmyid2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete O'Hanlon · Answer 1 · 2012-03-06T23:04:00

Solution 1

Here's an idea of how to get started with this

HTML

<Canvas x:Name="ImageCanvas" MouseMove="Canvas_MouseMove" MouseLeftButtonDown="Canvas_MouseDown" MouseLeftButtonUp="Canvas_MouseUp">
  <Image x:Name="moveImage" Source="...." />
</Canvas>

Here we've created a Canvas that we are going to use to pan the image around. Next we need to hook up to some code in the code behind. Don't worry if this doesn't seem to be MVVM - the point of MVVM is not to abstract display code from the code behind:

C#

Point mousePos = new Point();
Point currentPos = new Point();

double moveAmountX = 1;
double moveAmountY = 1;

bool isMouseDown = false;
private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
  if (!isMouseDown) return;
  currentPos = e.GetPosition(ImageCanvas);
  if (mousePos.X > currentPos.X)
  {
    moveAmountX--;
  }
  else if (mousePos.X < currentPos.X)
  {
    moveAmountX++;
  }
  if (mousePos.Y > currentPos.Y)
  {
    moveAmountY--;
  }
  else if (mousePos.Y < currentPos.Y)
  {
    moveAmountY++;
  }
  moveImage.SetValue(Canvas.LeftProperty, moveAmountX);
  moveImage.SetValue(Canvas.TopProperty, moveAmountY);
  mousePos = currentPos;
}

private void Canvas_MouseDown(object sender, MouseEventArgs e)
{
  mousePos = e.GetPosition(ImageCanvas);
  isMouseDown = true; 
}

private void Canvas_MouseUp(object sender, MouseEventArgs e)
{
  isMouseDown = false;
}

In this, we capture the mouse in the MouseLeftButtonUp event and release it in the MouseLeftButtonUp event. Finally, we compare mouse positions in the mouse move and adjust the image accordingly. I've just knocked this together in the editor here on Code Project, so you may need to adjust the direction of the tests, but this should get you started.

Posted 6-Mar-12 23:04pm

Pete O'Hanlon

Comments

ilostmyid2 7-Mar-12 5:28am

hithank u for replying
i think the most important part of ur code is calling SetValue of image. what does it do? i referred to MSDN and couldn't figure out what it really does. besides, i've used a Grid instead of Canvas for holding my image. i'm not going to persist on grid, but i thought it's more proper for my usage. indeed the image size is set automatically so that the entire surface of user control be filled. Stretch is set to None, but the image is created with the same size as the user control.
what method did u use in this code? moving the image control in canvas? if so, i can't move the image control, because it's the same size as the user control.
please describe more about it.
thx

Pete O'Hanlon 7-Mar-12 7:52am

SetValue sets the value of a Dependency Property, in this case, the Top (or Left) Property of the Canvas. The thing about the Canvas is that it gives you much more control; in other words, you are not constrained by the bounds of a container such as a grid. Yes - I move the image in the canvas; I would suggest that you change from a Grid to using the Canvas here.

ilostmyid2 7-Mar-12 9:13am

but i need the user control to be resizable and the image be resized if the user control is resized.

ilostmyid2 8-Mar-12 3:15am

ok, i changed grid to canvas and changed the code as below:
Point mousePos = new Point();
Point currentPos = new Point();

bool isMouseDown = false;

private void image1_MouseMove(object sender, MouseEventArgs e)
{
if (!isMouseDown) return;
currentPos = e.GetPosition(null);
image1.SetValue(Canvas.LeftProperty, currentPos.X - mousePos.X);
image1.SetValue(Canvas.TopProperty, currentPos.Y - mousePos.Y);
}

private void image1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
mousePos = e.GetPosition(null);
isMouseDown = true;
}

private void image1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
isMouseDown = false;
}
now i can change the image location. thx. now let's discuss about the following issues:
1. what differ what i pass to e.GetPosition?
2. how can i capture the mouse so that if its location exceeds beyond the boundaries of the canvas the MouseMove event still be sent to the image?
i used CaptureMouse and it has a different behavior from what i see in C++. in C++ when i call SetCapture all mouse events are received by the control that has called it. but here after calling CaptureMouse MouseMove event is not received by the control that has called it! as u used a bool variable for this purpose i should use one like isMouseDown. but it doesn't cause mouse events to be received by the control when the mouse cursor gets out of boundaries of the user control. what can i do to still receive mouse events in such a case?
3. after i release the mouse button, the image that has been moved successfully remains at its last location and this is a right behavior as i expect. but if i click on the image again to move it again, it begins moving from top left corner of canvas, not from where it currently is. why is that?
thx