How to implement the swipe gesture as in new Outlook app for Win10?

Question

The new Outlook app for Windows 10 implements swipe gesture to delete or edit Items.I want to implement this functionality for Listview items in my universal app using C# and XAML.

So far I am trying the following approach :

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>

C#

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;

    }
}

}

This approach works only when user selects an item in listview and then swipes to left or right.The findElementInItemsControlItemAtIndex() method returns only the selected control and not the control on which manipulation is happening.

So is there any way to select an item as soon as manipulation starts on an item ? Also is there any library for implementing swipe to edit or delete in listview ?

Answer 1

Using 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;
}

More on PointerRoutedEventArgs.

Pointer events are intended for scenarios where you're interested in multiple pointers and their relationships, or when you are examining specifics of each pointer such as exact coordinate position.

Once you have used GetCurrentPoint, you can coordinate where the user is pointing and what is on the screen at that position.To accomplish this, you would use FindElementsInHostCoordinates in the VisualTreeHelper.

Okay, I think you have all the pieces you need to figure it out.

Best of luck!