ListView swipe/slide animation

Question

I have a ListView control to display items and I want provide a swipe/slide gesture to select an item. I use the GestureRecognizer class to recognize the cross slide gesture but I also want to animate this gesture by moving the seelcted item horizontally.

For example, this should look like on this image from an iOS app:

I searched the web but I cannot find any useful link how to animate this gesture within a ListView control.

Answer 1

You could create a behavior that listens to the ManipulationXYZ events on your items, and than animates a RenderTransform on those items. I wrote you a simple example:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;
using Microsoft.Xaml.Interactivity;

namespace SOTestApp
{
    [TypeConstraint(typeof(FrameworkElement))]
    public class SlideMechanicBehavior : DependencyObject, IBehavior
    {
        public void Attach(DependencyObject associatedObject)
        {
            AssociatedObject = associatedObject;
            var fw = (FrameworkElement) AssociatedObject;
            fw.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.System;
            fw.ManipulationDelta += fw_ManipulationDelta;
            fw.ManipulationCompleted += fw_ManipulationCompleted;
            if (fw.RenderTransform == null || fw.RenderTransform as TranslateTransform == null)
            {
                fw.RenderTransform = new TranslateTransform();
            }
        }

        private const double Threshold = 100.0;
        private bool _canMove = true;

        public ICommand LeftDragCommand
        {
            get { return (ICommand)GetValue(LeftDragCommandProperty); }
            set { SetValue(LeftDragCommandProperty, value); }
        }

        public static readonly DependencyProperty LeftDragCommandProperty =
            DependencyProperty.Register("LeftDragCommand", typeof(ICommand), typeof(SlideMechanicBehavior), new PropertyMetadata(default(ICommand)));

        public ICommand RightDragCommand
        {
            get { return (ICommand)GetValue(RightDragCommandProperty); }
            set { SetValue(RightDragCommandProperty, value); }
        }

        public static readonly DependencyProperty RightDragCommandProperty =
            DependencyProperty.Register("RightDragCommand", typeof(ICommand), typeof(SlideMechanicBehavior), new PropertyMetadata(default(ICommand)));

        void fw_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            var fw = (FrameworkElement)AssociatedObject;
            var tr = (TranslateTransform) fw.RenderTransform;
            if (tr == null) return;
            tr.X = e.Cumulative.Translation.X;
            //call commands
            if (tr.X > Threshold && RightDragCommand != null && RightDragCommand.CanExecute(null)) RightDragCommand.Execute(null); //add params if necessary
            if (tr.X < -1 * Threshold && LeftDragCommand != null && LeftDragCommand.CanExecute(null)) LeftDragCommand.Execute(null); //add params if necessary
            //animate back
            var s = new Storyboard();
            var d = new DoubleAnimation
            {
                To = 0.0,
                EasingFunction = new QuadraticEase(),
                Duration = TimeSpan.FromMilliseconds(300.0)
            };
            Storyboard.SetTarget(d, tr);
            Storyboard.SetTargetProperty(d, "X"); //use nameof() in C# 6.0
            s.Children.Add(d);
            _canMove = false;
            s.Completed += (o, o1) => _canMove = true;
            s.Begin();
        }

        void fw_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            if(!_canMove) return;
            //move item
            var m = e.Delta.Translation.X;
            var fw = (FrameworkElement)AssociatedObject;
            var tr = (TranslateTransform) fw.RenderTransform;
            if (tr != null) tr.X += m;
        }

        public void Detach()
        {
            var fw = (FrameworkElement)AssociatedObject;
            fw.ManipulationCompleted -= fw_ManipulationCompleted;
            fw.ManipulationDelta -= fw_ManipulationDelta;
            AssociatedObject = null;
        }

        public DependencyObject AssociatedObject { get; private set; }
    }
}

You can use it in Xaml like this:

<ItemsControl ItemsSource="{Binding TextList}" HorizontalAlignment="Center">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Background="Red">
                <interactivity:Interaction.Behaviors>
                    <local:SlideMechanicBehavior />
                </interactivity:Interaction.Behaviors>
                <TextBlock FontSize="22" Text="{Binding }" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Don't forget to add the Behaviors SDK in the Project > Add references > Extensions dialog.