Нарисуйте прямоугольник в холсте, который находится в ScrollViewer с помощью мыши и нажмите

Question

У меня есть холст внутри ScrollViewer.

<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 кода, я захватить начальную точку и в PointerMoved кода, я рисую прямоугольник как указатель перемещается (также удалить задний прямоугольнику я двигаться, сохраняя только один прямоугольник холста. Я получаю эффект прямоугольной проклейки, используя этот метод). PointerReleased примет последний прямоугольник.

Все работает нормально, используя устройство с сенсорным экраном, но не используя палец. Изображение просто прокручивается, когда я двигаю пальцем.

Пробовал переместить код в холст, как показано ниже. Не удалось нарисовать прямоугольник с помощью мыши и касания.

<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> 

Укажите меня в правильном направлении pls.

Answer 1

Когда ScrollViewer получает основанный на касании PointerPressed, он обращается к Direct Manipulation, чтобы реагировать на панорамирование и масштабирование. Direct Manipulation захватывает вход указателя, поэтому события Canvas 'PointerMoved и PointerReleased не срабатывают. Нет событий -> нет рисунка.

ScrollViewer панорамирование или масштабирование с помощью мыши, поэтому события мыши проходят через Canvas.

Предполагая, что Canvas всегда обрабатывает события указателя, а не прокрутку (возможно, в Grid есть другие элементы управления, которые используют ScrollViewer), вы можете установить 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"/> 

Если вы только иногда хотят Canvas обрабатывать события указателя, то вы можете переключить ManipulationMode обратно в систему, чтобы позволить ScrollViewer справиться с этим. Если вы хотите рисовать на холсте одним касанием и панорамированием/масштабированием с помощью multi-touch, вы можете обрабатывать события Manipulation на Canvas для панорамирования и масштабирования.

Также убедитесь, что холст не прозрачен и позволяет событиям указателя проходить через все, что находится за ним. Если вы хотите нарисовать поверх изображения, вы можете установить ImageBrush с изображением в качестве фона Canvas, а не использовать отдельный элемент управления Image.