在C＃ScrollViewer中拖放

Question

在用C＃开发Metro应用程序的过程中，我发现了以下问题：我定义了一个可拖动的椭圆，并将其添加为scrollviewer内部的画布的子级。 当我拖动椭圆而不滚动（在我的情况下没有水平滚动）时，没有问题：椭圆保持在指针下方。 但是，当我垂直滚动滚动查看器，然后尝试移动可拖动椭圆时，后者不会停留在指针上。 以下是我开发的代码，您可以看到此问题。

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"然后在ManipulationStarted中调用CancelDirectManipulations(e) 。 我认为使用touch时，指针事件在ScrollViewer不起作用。 我认为您可能还需要在SV上设置Vertical/HorizontalScrollMode 。