ListView滑動/滑動動畫

Question

我有一個ListView控件來顯示項目，我想提供一個滑動/滑動手勢來選擇一個項目。我使用GestureRecognizer類來識別交叉滑動手勢，但我也想通過水平移動分割項來爲此手勢設置動畫。

例如，這應該看起來像從iOS應用這個形象：

我在網上搜索，但我無法找到任何有用的鏈接如何ListView控件內的動畫這個手勢。

Answer 1

您可以創建一個行爲來監聽項目上的ManipulationXYZ事件，並在這些項目上對RenderTransform進行動畫處理。我給你寫了一個簡單的例子：

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這樣的：

<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在項目>添加引用>擴展對話框。