마우스와 터치를 사용하여 ScrollViewer에있는 캔버스의 사각형을 그립니다.

Question

ScrollViewer 안에 Canvas가 있습니다. 에서

<ScrollViewer x:Name="svWorkSpace" Visibility="Collapsed" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" 
         Tapped="svWorkSpace_Tapped" 
         PointerPressed="svWorkSpace_PointerPressed" 
         PointerMoved="svWorkSpace_PointerMoved" 
         PointerReleased="svWorkSpace_PointerReleased"> 
      <Grid> 
       <Image x:Name="cvWorkImage"/> 
       <Canvas x:Name="cvWorkSpace"/> 
      </Grid> 
     </ScrollViewer> 

내가 시작점을 포착, 코드를 PointerPressed 및 에 캔버스에 단 하나의 사각형을 유지하고, 또한 내가 이동 직사각형 A를 후행 제거 (I 포인터의 움직임에 따라 사각형을 그립니다, 코드를 PointerMoved. 이 방법을 사용하여 사각형 사이징 효과를 얻습니다.) PointerReleased는 마지막 직사각형을 허용합니다.

터치 지원 장치에서는 마우스 만 사용하고 손가락은 사용하지 않아도됩니다. 손가락을 움직이면 이미지가 스크롤됩니다.

다음과 같이 코드를 Canvas로 이동하려고 시도했습니다. 마우스와 터치를 사용하여 사각형을 그리지 못했습니다.

<ScrollViewer x:Name="svWorkSpace" Visibility="Collapsed" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> 
      <Grid> 
       <Image x:Name="cvWorkImage"/> 
       <Canvas x:Name="cvWorkSpace" 
         Tapped="svWorkSpace_Tapped" 
         PointerPressed="svWorkSpace_PointerPressed" 
         PointerMoved="svWorkSpace_PointerMoved" 
         PointerReleased="svWorkSpace_PointerReleased"/> 

      </Grid> 
     </ScrollViewer> 

올바른 방향으로 나를 안내해주세요.

Answer 1

ScrollViewer가 터치 기반 PointerPressed를 받으면 직접 조작으로 전환하여 반응하여 팬 및 확대/축소를 처리합니다. 직접 조작은 포인터 입력을 캡처하므로 Canvas의 PointerMoved 및 PointerReleased 이벤트는 실행되지 않습니다. 이벤트 없음 -> 그림 없음.

ScrollViewer는 마우스로 팬하거나 확대/축소하므로 마우스 이벤트를 통해 Canvas로 이동합니다.

스크롤이 아닌 포인터 이벤트를 처리하기를 원한다고 가정 할 때 (아마도 ScrollViewer를 사용하는 Grid의 다른 컨트롤이있을 수 있습니다) Canvas 'ManipulationMone을 모두로 설정하여 Canvas에서 처리하도록 할 수 있습니다 에서 ScrollViewer

<Canvas x:Name="cvWorkSpace" 
    Background={ThemeResource WorkSpaceBackgroundBrush} 
    Tapped="svWorkSpace_Tapped" 
    ManipulationMode="All" 
    PointerPressed="svWorkSpace_PointerPressed" 
    PointerMoved="svWorkSpace_PointerMoved" 
    PointerReleased="svWorkSpace_PointerReleased"/> 

에 블록 터치 당신은 때때로 당신이에서 ScrollViewer가 그것을 처리 할 수 ​​있도록 다시 시스템에 ManipulationMode를 전환 할 수 있습니다 캔버스 포인터 이벤트를 처리합니다. 캔버스에서 단일 터치로 그리 고 멀티 터치로 이동/확대/축소하려는 경우 캔버스에서 조작 이벤트를 처리하여 팬 및 확대/축소 할 수 있습니다.

또한 캔버스가 투명하지 않은지 확인하고 포인터 이벤트가 그 뒤에있는 곳으로 전달되도록합니다. 이미지 위에 그릴 경우 별도의 Image 컨트롤을 사용하는 대신 이미지를 Canvas 배경으로 설정할 수 있습니다.