CODEWITHSUNDEEP
xamlwindows-8microsoft-metrowindows-8.1
MBZ
MBZ

Reputation: 27592

Capturing Pointer Move Events for Canvas inside ScrollViewer

I have a Canvas that overrides PointerMoved event do some stuff if the user "paints" on it. Now I'm trying to move this Canvas inside a ScrollViewer to add Zoom and Scroll effects which works perfectly. 

    <ScrollViewer x:Name="MainScrollViewer" Grid.Column="1"
                  VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" 
                  ZoomMode="Enabled" MinZoomFactor="0.5" MaxZoomFactor="2.0" >
        <Canvas x:Name="MainCanvas" Background="#000000" 
                HorizontalAlignment="Left" VerticalAlignment="Top" 
                PointerMoved="MainCanvas_PointerMoved" />
    </ScrollViewer>

However, the ScrollViewer captures all the Pointer move Events and this caused the main paint procedure not working anymore.

Any idea on how to fix this?

Upvotes: 0

Views: 995

Answers (2)

T3sTR
T3sTR

Reputation: 71

There is a trick! You can add a tool button (like hand) to switch in two conditions.

  1. First condition enable drawing: you can disable HorizontalScrollMode and VerticalScrollMode of ScrollViewer which gives you ability to use pointer events of Canvas.
  2. In second one you should enable the HorizontalScrollMode and VerticalScrollMode for ScrollViewer, and it works!

To change ScrollViewer properties programmatically: 

 MainScrollViewer.HorizontalScrollMode = ScrollMode.Auto;
 MainScrollViewer.VerticalScrollMode = ScrollMode.Auto;
 MainScrollViewer.ZoomMode = ZoomMode.Enabled;

Upvotes: 0

Han Tran
Han Tran

Reputation: 2093

Drawing with touch while still allowing zooming/panning - this is currently not supported in XAML. You will need to turn OFF zooming/panning in order to be able to draw with Pointer events and it is not possible to obtain system zooming and panning behaviors simultaneously with custom manipulations. You can however try to use Manipulation events by setting ManipulationMode=All and handle two finger scrolling and pinch zoom using Scale and Translate values manually.

See more at: Touch based drawing app with a Canvas inside a ScrollViewer

I didn't work with canvas and scrollview but I think which I found will help you :)

Upvotes: 2

Related Questions