ListView滑动/滑动动画

我有一个ListView控件来显示项目，我想提供一个滑动/滑动手势来选择项目。我使用该类来识别交叉滑动手势，但我还希望通过水平移动seelcted项来设置该手势的动画

例如，在iOS应用程序的此图像上应该是这样的：

---

我搜索了web，但找不到任何有用的链接，如何在ListView控件中设置此手势的动画。

您可以创建一个行为，侦听项目上的操纵XYZ事件，然后在这些项目上设置渲染转换的动画。我给你写了一个简单的例子：

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

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用系统文本；
使用System.Threading.Tasks；
使用System.Windows.Input；
使用Windows.UI.Xaml；
使用Windows.UI.Xaml.Input；
使用Windows.UI.Xaml.Media；
使用Windows.UI.Xaml.Media.Animation；
使用Microsoft.Xaml.Interactivity；
名称空间SOTestApp
{
[TypeConstraint（typeof（FrameworkElement））]
公共类SlideMechanicBehavior:DependencyObject，IBehavior
{
公共无效附加（DependencyObject associatedObject）
{
AssociatedObject=AssociatedObject；
var fw=（FrameworkElement）AssociatedObject；
fw.manufactionmode=manufactionmodes.TranslateX | manufactionmodes.System；
fw.manipionDelta+=fw_manipionDelta；
fw.ManipulationCompleted+=fw_ManipulationCompleted；
if（fw.RenderTransform==null | | fw.RenderTransform as TranslateTransform==null）
{
fw.RenderTransform=新的TranslateTransform（）；
}
}
私有常数双阈值=100.0；
私有bool_canMove=true；
公共ICommand LeftDragCommand
{
获取{return（ICommand）GetValue（LeftDragCommandProperty）；}
set{SetValue（LeftDragCommandProperty，value）；}
}
公共静态只读从属属性LeftDragCommandProperty=
DependencyProperty.Register（“LeftDragCommand”、typeof（ICommand）、typeof（SlideMechanicBehavior）、new PropertyMetadata（默认值（ICommand））；
公共ICommand RightDragCommand
{
获取{return（ICommand）GetValue（RightDragCommandProperty）；}
set{SetValue（RightDragCommandProperty，value）；}
}
公共静态只读从属属性RightDragCommandProperty=
DependencyProperty.Register（“RightDragCommand”、typeof（ICommand）、typeof（SlideMechanicBehavior）、new PropertyMetadata（default（ICommand））；
void fw_操纵已完成（对象发送方，操纵已完成路由目标e）
{
var fw=（FrameworkElement）AssociatedObject；
var tr=（TranslateTransform）fw.RenderTransform；
如果（tr==null）返回；
tr.X=e.累积翻译.X；
//调用命令
如果（tr.X>Threshold&&RightDragCommand！=null&&RightDragCommand.CanExecute（null））RightDragCommand.Execute（null）；//必要时添加参数
如果（tr.X<-1*阈值和LeftDragCommand！=null和LeftDragCommand.CanExecute（null））LeftDragCommand.Execute（null）；//必要时添加参数
//使返回动画
var s=新故事板（）；
var d=新的双动画
{
To=0.0，
EasingFunction=新的平方基（），
持续时间=时间跨度。从毫秒（300.0）
};
故事板.SetTarget（d，tr）；
Storyboard.SetTargetProperty（d，“X”）；//在C#6.0中使用nameof（）
s、 儿童。添加（d）；
_canMove=false；
s、 已完成+=（o，o1）=>\u canMove=true；
s、 Begin（）；
}
void fw_操纵delta（对象发送方，操纵deltaroutedventargs e）
{
如果（！\u canMove）返回；
//移动项目
var m=e.Delta.Translation.X；
var fw=（FrameworkElement）AssociatedObject；
var tr=（TranslateTransform）fw.RenderTransform；
如果（tr！=null）tr.X+=m；
}
公共图书馆
{
var fw=（FrameworkElement）AssociatedObject；
fw.ManipulationCompleted-=fw_ManipulationCompleted；
fw.manipionDelta-=fw_manipionDelta；
AssociatedObject=null；
}
public DependencyObject AssociatedObject{get；private set；}
}
}

您可以在Xaml中使用它，如下所示：

<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>

---

不要忘了在“项目>添加引用>扩展”对话框中添加行为SDK。

感谢您提供了一个很好的示例！