如何使用触摸将元素拖出可滚动的ListView，而不必保留元素[UWP]

Posted 2021-05-07

就目前而言，将元素拖出ListView的功能意味着用户必须长按或“按住”元素才能激活元素的拖动功能。

问题是我们的实时测试表明这对最终用户来说远非直观。

我发现this question有一些有趣的想法，但评论表明他们最终找不到解决方案，最后一次活动是3年前。

也许有人在此期间找到了解决方案或解决方法？上下文是我目前使用ListView，因为它必须水平滚动，但我需要images内的ListView垂直可拖动并与ListView分离。

答案

@AdamMcMahon从你的帖子的声音，你希望能够让你的列表中的图像项目响应拖动触摸（PointerPressed）本身是可行的，并通过连接列表视图项目模板相当直接下列：

<DataTemplate x:Key="ListViewItemTemplate1" x:DataType="x:String">
     <Grid>
         <Image Source="{x:Bind}" CanDrag="True" PointerPressed="Image_PointerPressed" DragStarting="Image_DragStarting" />
     </Grid>
</DataTemplate>

并添加以下事件处理程序的内容

private async void Image_PointerPressed(object sender, PointerRoutedEventArgs e)
    {            
        var image = sender as Image;
        var pointerPoint = e.GetCurrentPoint(sender as UIElement);
        var dropStatus = await image.StartDragAsync(pointerPoint);
    }

    private void Image_DragStarting(UIElement sender, DragStartingEventArgs args)
    {
        args.Data.Properties.Add("myKey", sender);
    }

并且你的drop目标的处理程序就像

        private async void TargetImage_Drop(object sender, DragEventArgs e)
    {
        Image result = e.DataView.Properties["myKey"] as Image;

        TargetImage.Source = result.Source;
    }

然而，问题的核心是滚动查看器水平滚动和拖动操作相互干扰，您可能在PointerMoved事件中尝试测试移动是否在水平或垂直方向的典型解决方法不是直接实现，因为ScrollViewer吞下了大部分PointerMoved事件，如下所述：https://blogs.msdn.microsoft.com/wsdevsol/2013/02/15/where-did-all-my-gestures-go/

因此，根据用户体验，您最终可能会尝试断开拖动和滚动的两个用户交互。例如，您可以在列表视图的末尾放置左右滚动按钮，以便为用户提供滚动列表的方式，并保留与列表视图的直接触摸交互以触发拖动操作。

可以使用以下代码向左滚动

        private void ScrollLeftButton_Click(object sender, RoutedEventArgs e)
    {
        Border border = VisualTreeHelper.GetChild(ImageListview, 0) as Border;
        ScrollViewer scrollViewer = border.Child as ScrollViewer;
        scrollViewer.HorizontalScrollMode = ScrollMode.Enabled;
        scrollViewer.ChangeView(scrollViewer.HorizontalOffset + 100, null, null);
        scrollViewer.HorizontalScrollMode = ScrollMode.Disabled;
    }

另一个选择可能是引入两种交互模式，一个按钮可以打开和关闭滚动模式。当scrollOn bool为true时，你不会在PointerPressed上启动StartDrag，当它为false时。这将为用户提供列表的平滑滚动以及从列表中的简单拖动，但仅在任何给定时间点以一种方式或另一种方式工作。

也许根据您尝试为用户提供的特定体验，您可能会想到其他方法来为用户分隔两种互动。

HTH。