ListView的刷卡/幻灯片动画 [英] ListView swipe/slide animation
问题描述
我有一个ListView控件显示的项目,我想提供一个刷卡/幻灯片手势选择一个项目。我使用 GestureRecognizer 类承认十字滑板手势,但我也想通过水平移动seelcted项动画这个手势。
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.
例如,这应该看起来像从iOS应用这种图像:
For example, this should look like on this image from an iOS app:
我在网上搜索,但我找不到任何有用的链接如何ListView控件中的动画这个手势。
I searched the web but I cannot find any useful link how to animate this gesture within a ListView control.
推荐答案
您可以创建一个听你的项目ManipulationXYZ事件的行为,比动画就这些项目的RenderTransform。我写你一个简单的例子:
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; }
}
}
您可以用它在XAML是这样的:
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>
不要忘记添加行为SDK在项目>添加引用>扩展对话框。
Don't forget to add the Behaviors SDK in the Project > Add references > Extensions dialog.
这篇关于ListView的刷卡/幻灯片动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!