在C＃中拖放内容ScrollViewer

Question

在c＃中开发地铁应用程序期间，我发现了以下问题： 我定义了一个可拖动的椭圆，并将其添加为scrollviewer内部画布的子项。当我拖动椭圆而不滚动（在没有orizo​​ntal滚动的情况下）没有问题：椭圆保持在指针下面。但是当我滚动scrollviewer orizo​​ntally，然后尝试移动可拖动的椭圆，这后者不停留在指针。 以下是我开发的代码，以便您可以看到问题。

MainPage.xaml中

<Page 
    x:Class="draggableEllipse.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:draggableEllipse" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Visible" Canvas.Left="1325" Canvas.Top="12"> 
      <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="800" VerticalAlignment="Top" Width="3311" Background="#FF60666A"> 
      </Canvas> 
     </ScrollViewer> 
    </Grid> 
</Page> 

MainPage.cs

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Runtime.InteropServices.WindowsRuntime; 
using Windows.Foundation; 
using Windows.Foundation.Collections; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation; 

// Il modello di elemento per la pagina vuota è documentato all'indirizzo http://go.microsoft.com/fwlink/?LinkId=234238 

namespace draggableEllipse 
{ 
    /// <summary> 
    /// Pagina vuota che può essere utilizzata autonomamente oppure esplorata all'interno di un frame. 
    /// </summary> 
    public sealed partial class MainPage : Page 
    { 
     public MainPage() 
     { 
      this.InitializeComponent(); 

      draggableEllipse d = new draggableEllipse(300, 300, canvas); 
     } 
    } 
} 

draggableEllipse.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using Windows.UI; 
using Windows.UI.Input; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Shapes; 

namespace draggableEllipse 
{ 
    class draggableEllipse 
    { 
     Ellipse e; 

     public draggableEllipse(double x, double y,Canvas canvas) 
     { 
      e = new Ellipse(); 
      e.Width = 20; 
      e.Height = 20; 
      e.StrokeThickness = 2; 
      e.Fill = new SolidColorBrush(Colors.White); 
      e.Stroke = new SolidColorBrush(Colors.White); 

      e.PointerPressed += Shape_PointerPressed; 
      e.PointerMoved += Shape_PointerMoved; 
      e.PointerReleased += Shape_PointerReleased; 

      canvas.Children.Add(e); 
      Canvas.SetLeft(e, x); 
      Canvas.SetTop(e, y); 

     } 

     void Shape_PointerPressed(object sender, PointerRoutedEventArgs e) 
     { 
      Ellipse el = (Ellipse)sender; 

      el.CapturePointer(e.Pointer); 
     } 

     void Shape_PointerMoved(object sender, PointerRoutedEventArgs e) 
     { 
      Ellipse el = (Ellipse)sender; 

      // Only move the shape if one pointer is currently pressed 
      if (el.PointerCaptures != null && el.PointerCaptures.Count == 1) 
      { 
       PointerPoint point = e.GetCurrentPoint(null); 

       // Center the shape under the pointer 
       Canvas.SetLeft(el, point.Position.X - (el.ActualWidth/2)); 
       Canvas.SetTop(el, point.Position.Y - (el.ActualHeight/2)); 

      } 
     } 

     void Shape_PointerReleased(object sender, PointerRoutedEventArgs e) 
     { 
      Ellipse el = (Ellipse)sender; 

      el.ReleasePointerCapture(e.Pointer); 
     } 

    } 
} 

预先感谢您：d

Answer 1

我会考虑使用操作事件。我会设置ManipulationMode="TranslateX,TranslateY,System"，并在操纵开始，我会打电话CancelDirectManipulations(e)。我认为使用触摸时指针事件在ScrollViewer中不起作用。我想你可能还需要在SV上设置Vertical/HorizontalScrollMode。