如何在 Win10 的新 Outlook 应用中实现滑动手势？答案

【问题标题】：How to implement the swipe gesture as in new Outlook app for Win10?如何在 Win10 的新 Outlook 应用中实现滑动手势？
【发布时间】：2015-01-29 09:24:48
【问题描述】：

适用于 Windows 10 的新 Outlook 应用实现了滑动手势以删除或编辑项目。我想使用 C# 和 XAML 在我的通用应用中为 Listview 项目实现此功能。

到目前为止，我正在尝试以下方法：

XAML

                <Grid Name="EditTestGrid" Height="50" Width="100" HorizontalAlignment="Right">
                    <Grid Name="EditGrid" Background="Black" Height="50" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                    </Grid>
                </Grid>

            </Grid>

            <Grid Name="DataGrid" Visibility="Visible" Background="GhostWhite">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="TranslateGrid"
                                        X="0"/>
                </Grid.RenderTransform>
                <Grid>
                    <Path Data="{Binding Art}" 
                          Stretch="Uniform" Fill="{Binding Colour}" 
                          Width="26" Height="26" 
                          HorizontalAlignment="Center"
                          Opacity="0.5"/>
                    <Rectangle Height="30" 
                               Width="3"
                               HorizontalAlignment="Right"
                               Fill="Teal"/>
                </Grid>
            </Grid>


        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

private void TestList_ManipulationCompleted(object sender,ManipulationCompletedRoutedEventArgs e)
{
  Grid dataGrid = findElementInItemsControlItemAtIndex(TransactionList, TransactionList.SelectedIndex, "DataGrid") as Grid;

  if (dataGrid != null)
  {
    TranslateTransform myTranslate = new TranslateTransform();
    double dist = e.Cumulative.Translation.X;
    if (dist < -80)
    {
        myTranslate.X = -100;
        dataGrid.RenderTransform = myTranslate;
    }

    if (dist > 40)
    {
        myTranslate.X = 0;
        dataGrid.RenderTransform = myTranslate;
    }

  }
}

private void TestList_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
  Grid dataGrid = findElementInItemsControlItemAtIndex(TransactionList, TransactionList.SelectedIndex, "DataGrid") as Grid;

if (dataGrid != null)
{
    TranslateTransform myTranslate = new TranslateTransform();
    double dist = e.Cumulative.Translation.X;
    var manipulation = e.Delta;
    myTranslate.X += manipulation.Translation.X;
    dataGrid.RenderTransform = myTranslate;
    if (dist < -40)
    {
        myTranslate.X = -100;
        dataGrid.RenderTransform = myTranslate;
    }

    if (dist > 70)
    {
        myTranslate.X = 0;
        dataGrid.RenderTransform = myTranslate;

    }
}

}

此方法仅在用户选择列表视图中的项目然后向左或向右滑动时有效。findElementInItemsControlItemAtIndex() 方法仅返回选定的控件，而不是正在发生操作的控件。

那么有什么方法可以在对项目进行操作后立即选择项目？还有没有任何库可以在列表视图中实现滑动以编辑或删除？

【问题讨论】：

标签： c# windows windows-runtime winrt-xaml win-universal-app

【解决方案1】：

使用 UIElement.PointerPressed

private void Target_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    var ptr = e.Pointer;
    if (ptr.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
    {
        var ptrPt = e.GetCurrentPoint(Target);
    }
    e.Handled = true;
}

更多关于PointerRoutedEventArgs。

指针事件适用于您对多个指针及其关系感兴趣的场景，或者当您检查每个指针的细节（例如精确坐标位置）时。

使用GetCurrentPoint 后，您可以协调用户指向的位置以及屏幕上该位置的内容。为此，您可以在VisualTreeHelper 中使用FindElementsInHostCoordinates。

好的，我想你已经掌握了所有你需要弄清楚的部分。

祝你好运！

【讨论】：