如何在Windows 10 UWP中為網格添加觸摸操作事件？

Question

我目前正在使用Windows 10，我想為用戶添加滑動手勢。 所以我做了一些研究並遇到了操縱事件 。 我嘗試了下面的代碼，但是當我使用鼠標指針而不是使用觸摸滑動手勢時，它可以工作。

 pageLayoutGrid.ManipulationMode = ManipulationModes.TranslateX;
 pageLayoutGrid.ManipulationDelta += PageLayoutGrid_ManipulationDelta;
 pageLayoutGrid.ManipulationCompleted += LayoutManipulationCompleted;

 private void PageLayoutGrid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        e.Handled = true;
    }

    private void LayoutManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        var velocities = e.Velocities.Linear;
        Double swipeLeftRight = velocities.X;
        Double swipeUpDown = velocities.Y;
        // A negative value means swiping to the left
        if (swipeLeftRight < 0)
        {
            navigateToNextPage();
        }
        // a positive value is a swipe to the right.
        else if (swipeLeftRight > 0)
        {
            navigateToPreviousPage();
        }
    }

此Grid的子元素是ScrollViewer。

有人可以建議代碼有什么問題嗎？

Answer 1

作為鏈接的參考，這里是解決方案

我禁用ScrollViewer VerticalScrollMode在PointerEntered事件ScrollViewer使電網操作事件將被調用。 啟用VerticalScrollMode完成操作后，即在ManipulationCompleted事件中

ScrollViewer scroolviewr;
        private void ScrollViewer_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            scroolviewr = (sender as ScrollViewer); 
            (sender as ScrollViewer).VerticalScrollMode = ScrollMode.Disabled;
        }
private void PageLayoutGrid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        e.Handled = true;
    }

    private void LayoutManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        scroolviewr.VerticalScrollMode = ScrollMode.Enabled;
        var velocities = e.Velocities.Linear;
        Double swipeLeftRight = velocities.X;
        Double swipeUpDown = velocities.Y;
        // A negative value means swiping to the left
        if (swipeLeftRight < 0)
        {
            navigateToNextPage();
        }
        // a positive value is a swipe to the right.
        else if (swipeLeftRight > 0)
        {
            navigateToPreviousPage();
        }
    }




 <Grid ManipulationMode="TranslateX" ManipulationDelta="Grid_ManipulationDelta" ManipulationCompleted="Grid_ManipulationCompleted">
    <ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" PointerEntered="ScrollViewer_PointerEntered">
    .....
    </ScrollViewer>

</Grid>

Answer 2

默認情況下，ScrollViewer將淺顯任何觸摸輸入。 如果您希望處理觸摸手勢，則滾動功能將丟失。

解決方案可能因您的需要而異。 如果您需要完全控制處理觸摸手勢，ScollViewer不適合您，請將其替換為其他Panel。

如果您只需要部分手勢處理，則可以將ManipulationMode設置為類似TranslateX, System 。 結果是您可以沿X軸處理手勢，其余部分由ScrollViewer處理。

代碼示例

xaml文件：

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

    <Page.Resources>
        <Style x:Key="ListViewStyle1" TargetType="ListView">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="IsSwipeEnabled" Value="True"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
            <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
            <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
            <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
            <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
            <Setter Property="ItemContainerTransitions">
                <Setter.Value>
                    <TransitionCollection>
                        <AddDeleteThemeTransition/>
                        <ContentThemeTransition/>
                        <ReorderThemeTransition/>
                        <EntranceThemeTransition IsStaggeringEnabled="False"/>
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <ItemsStackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListView">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" >
                            <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}" ManipulationMode="TranslateX, System"/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" ManipulationMode="TranslateX" ManipulationDelta="Grid_ManipulationDelta">

        <ListView Style="{StaticResource ListViewStyle1}">
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
            <ListViewItem>A</ListViewItem>
        </ListView>

    </Grid>
</Page>

代碼背后：

using System;
using System.Collections.Generic;
using System.Diagnostics;
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;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Sample
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class TestTextBox : Page
    {
        public TestTextBox()
        {
            this.InitializeComponent();
        }

        private void Grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {

        }
    }
}

在X軸上拖動列表視圖時將觸發onManipulationStarted 。