locked
Can you both scroll and drag at the same time? RRS feed

  • 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);

    Thursday, March 3, 2011 8:20 PM

Answers

All replies

  • Wow, this thing really uglifies your code.  If anyone wants a cleaner copy let me know, maybe I can email it?
    Thursday, March 3, 2011 8:23 PM
  • <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);

    Thursday, March 3, 2011 8:25 PM
  • 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);

    Thursday, March 3, 2011 8:28 PM
  • Well, as usually happens, I found the answer right after posting this!

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

    Works perfectly!

    Thursday, March 3, 2011 10:04 PM
  • 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.

    Tuesday, March 8, 2011 2:24 AM