Can you both scroll and drag at the same time?

Question

I want to be able to drag an image around on the page to look at and zoom in on any part of it.  I also want scrollbars so the user can use keyboard shortcuts to scroll the image and step through the pages.  Consider the following XAML with the subsequent drag logic (only the mouse move event is shown).  As shown, this allows me to drag the image around the canvas, but no matter what I try I can't get the scrollbar to do anything - it's always disabled.

If, on the other hand, I replace all references to "canvas" with "grid" or "viewbox", then I get an operating scrollbar, but I lose the ability to drag the image around, I guess because these controls don't really recognize element.SetValue.

Is there any way to get both operations to work - dragging and scrolling?

<ScrollViewer>
	<Canvas Name="viewDocument">
 
 
 
 
 
 
 </ScrollViewer>	</Canvas>
 
 </Image> <Image Name="imageDocument" Source="{Binding ElementName=imageViewerControl, Path=ImagePath}"  IV:DraggableExtender.CanDrag="True">

 
 
FrameworkElement element = sender as FrameworkElement;
 
 
if (element == null) return;
 
 
//Viewbox canvas = element.Parent as Viewbox;
 
 
Canvas canvas = element.Parent as Canvas;
 
 
if (canvas == null) return;
 
 
// Get the position of the mouse relative to the canvas
System.Windows.
 
Point mousePoint = e.GetPosition(canvas);
 
 
// Offset the mouse position by the original offset position
mousePoint.Offset(-_offset.X, -_offset.Y);
 
 
// Move the element on the canvas
element.SetValue(
 
Canvas.LeftProperty, mousePoint.X);
element.SetValue(
 
Canvas.TopProperty, mousePoint.Y);

Answer 1

Wow, this thing really uglifies your code.  If anyone wants a cleaner copy let me know, maybe I can email it?

Answer 2

<ScrollViewer Name="pnlScroll">
   <Canvas Name="viewDocument">
     <Image Name="imageDocument" Source="{Binding ElementName=imageViewerControl, Path=ImagePath}" 
                IV:DraggableExtender.CanDrag="True">
     </Image>
   </Canvas>
</ScrollViewer>

 
 
FrameworkElement element = sender as FrameworkElement;
 
 
if (element == null) return;
 
 
//Viewbox canvas = element.Parent as Viewbox;
 
 
Canvas canvas = element.Parent as Canvas;
 
 
if (canvas == null) return;
 
 
// Get the position of the mouse relative to the canvas
System.Windows.
 
Point mousePoint = e.GetPosition(canvas);
 
 
// Offset the mouse position by the original offset position
mousePoint.Offset(-_offset.X, -_offset.Y);
 
 
// Move the element on the canvas
element.SetValue(
 
Canvas.LeftProperty, mousePoint.X);
element.SetValue(
 
Canvas.TopProperty, mousePoint.Y);

Answer 3

Geez, oh well, I tried.  Let me try plain text:

<ScrollViewer>
 <Canvas Name="viewDocument">
  <Image Name="imageDocument" Source="{Binding ElementName=imageViewerControl, Path=ImagePath}" 
                                IV:DraggableExtender.CanDrag="True"> 
  </Image>
 </Canvas>
</ScrollViewer>

            FrameworkElement element = sender as FrameworkElement;
            if (element == null) return;

            //Viewbox canvas = element.Parent as Viewbox;
            Canvas canvas = element.Parent as Canvas;
            if (canvas == null) return;

            // Get the position of the mouse relative to the canvas
            System.Windows.Point mousePoint = e.GetPosition(canvas);

            // Offset the mouse position by the original offset position
            mousePoint.Offset(-_offset.X, -_offset.Y);

            // Move the element on the canvas
            element.SetValue(Canvas.LeftProperty, mousePoint.X);
            element.SetValue(Canvas.TopProperty, mousePoint.Y);

Answer 4

Well, as usually happens, I found the answer right after posting this!

Check: http://stackoverflow.com/questions/741956/wpf-pan-zoom-image

Works perfectly!

Answer 5

Hi lianaentdotcom,

So glad to hear that you have resolved your issue, and thank you for sharing your solution here.

 

Best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.