如何使我的矩形像对鼠标/指针事件一样对触摸事件做出反应

Question

在我的主页上，我有一个充满彩色矩形的堆栈面板，它们都以边距设置为 （0,5,0,5） 开头。我想允许用户仅水平移动这些矩形。由于矩形没有鼠标事件，因此我使用指针来实现此目的。流程为：用户点击矩形以选择它，光标更改以向用户提供视觉提示，用户向左或向右拖动矩形。（请注意，如果这很重要，堆栈面板确实有一个垂直滚动查看器）。这是我的 C# 代码：

private void Rectangle_FirstClick(object sender, EventArgs e)
{
    // Give rectangle a white border to imply selection
    Rectangle myControl = sender as Rectangle;
    myControl.StrokeThickness = 1;
    myControl.Stroke = new SolidColorBrush(Color.FromArgb(255, 240, 240, 240));
    // Provide visual cue to mouse users by changing the pointer immediately
    Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.SizeWestEast, 0);
    // Handle mouse leaving/re-entering the track piece
    myControl.PointerEntered += MyControl_PointerEntered;
    myControl.PointerExited += MyControl_PointerExited;
    // Handle the drag event
    myControl.PointerPressed += MyControl_PointerPressed;
    myControl.PointerReleased += MyControl_PointerReleased;
    myControl.PointerMoved += MyControl_PointerMoved;
}

以下是各个事件处理程序

bool PossibleDragStart = false;
Point InitialDragPoint = new Point(0, 0);
private void MyControl_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Arrow, 0);
}
private void MyControl_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.SizeWestEast, 0);
}
private void MyControl_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    PossibleDragStart = true;
    InitialDragPoint = e.GetCurrentPoint(sender as Rectangle).Position;
}
private void MyControl_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    PossibleDragStart = false;
}
private void MyControl_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    // If pointer pressed without release, and then moved, we are dragging
    if (PossibleDragStart)
    {
        Point CurrentDragPoint = e.GetCurrentPoint(AudioTracksRightContainer).Position;
        StatusBar.Text = CurrentDragPoint.X.ToString();
        // Calculate drag offset by subtracting Current Position from Initial Position
        double SegmentMargin = CurrentDragPoint.X - InitialDragPoint.X;
        // Move the Rectangle with the pointer drag
        Rectangle trackSegment = sender as Rectangle;
        trackSegment.Margin = new Thickness(SegmentMargin, 5, 0, 5);
    }
}

这段代码非常适合鼠标，但是当我尝试使用它进行触摸时，我必须按住才能启动拖动，即使这样，矩形也只会移动几个单位，然后保持原位。我不确定为什么行为不同。

此代码的另一个问题是，如果矩形足够窄，以至于当我快速拖动并且矩形跟不上光标时，当光标离开矩形边界时，它会停止拖动。一个比触摸不起作用的小得多的问题，但仍然有点烦人。

Answer 1

听起来ScrollViewer正在捕获触摸事件以进行自己的滚动。在手动处理操作的过程中，您可以使用 Xaml 的操作引擎来注册操作事件。这既更容易编码，也更有效。默认情况下，它将适用于触摸和鼠标。

<Rectangle Margin="5" Fill="Orange" Height="100" Width="200"
           ManipulationMode="TranslateX"
           ManipulationDelta="Rectangle_ManipulationDelta"
           >
    <Rectangle.RenderTransform>
        <CompositeTransform />
    </Rectangle.RenderTransform>
</Rectangle>

在Rectangle_ManipulationDelta方法中，转换矩形：

private void Rectangle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    UIElement elem = sender as UIElement;
    CompositeTransform ct = elem.RenderTransform as CompositeTransform;
    ct.TranslateX += e.Delta.Translation.X;
}

如果您只需要翻译，则可以使用TranslateTransform而不是CompositeTransform，或者可以添加旋转和缩放。

有关使用手势和操作事件的详细信息，请参阅快速入门：触摸输入 （XAML）。

我在我的博客条目中讨论了 ScrollViewer 接管指针处理 我所有的手势都去哪儿了？如果您真的想自己处理指针事件，我将讨论如何在拖动过程中禁用滚动查看器。您可以通过捕获指针来处理手指移动速度快于目标的情况。如果处理操作事件，则不需要这样做。