Di chuyển hình động

Question

Làm cách nào để tạo hiệu ứng cuộn cho ListBox? Tôi biết tôi có thể sử dụng scrollIntoView nhưng làm thế nào tôi có thể animate nó? Tôi muốn nhấn các phím mũi tên để di chuyển từ một listBoxItem này sang một danh sách khác.

Answer 1

Đây là một thực hiện thô dựa trên phương pháp tương tự như liên kết sau
http://aniscrollviewer.codeplex.com/

Thuộc tính VerticalOffset là read-only để thay vào đó bạn có thể sử dụng một tài sản VerticalOffset gắn trên ScrollViewer mà lần lượt làm ScrollToVerticalOffset. Thuộc tính đính kèm này có thể được làm động.

Bạn cũng có thể tạo phương thức tiện ích mở rộng cho ItemsControl được gọi là AnimateScrollIntoView.

Gọi nó như

listBox.AnimateScrollIntoView(yourItem); 

ScrollViewerBehavior

này

public class ScrollViewerBehavior 
{ 
    public static DependencyProperty VerticalOffsetProperty = 
     DependencyProperty.RegisterAttached("VerticalOffset", 
              typeof(double), 
              typeof(ScrollViewerBehavior), 
              new UIPropertyMetadata(0.0, OnVerticalOffsetChanged)); 

    public static void SetVerticalOffset(FrameworkElement target, double value) 
    { 
     target.SetValue(VerticalOffsetProperty, value); 
    } 
    public static double GetVerticalOffset(FrameworkElement target) 
    { 
     return (double)target.GetValue(VerticalOffsetProperty); 
    } 
    private static void OnVerticalOffsetChanged(DependencyObject target, DependencyPropertyChangedEventArgs e) 
    { 
     ScrollViewer scrollViewer = target as ScrollViewer; 
     if (scrollViewer != null) 
     { 
      scrollViewer.ScrollToVerticalOffset((double)e.NewValue); 
     } 
    } 
} 

ItemsControlExtensions

public static class ItemsControlExtensions 
{ 
    public static void AnimateScrollIntoView(this ItemsControl itemsControl, object item) 
    { 
     ScrollViewer scrollViewer = VisualTreeHelpers.GetVisualChild<ScrollViewer>(itemsControl); 

     UIElement container = itemsControl.ItemContainerGenerator.ContainerFromItem(item) as UIElement; 
     int index = itemsControl.ItemContainerGenerator.IndexFromContainer(container); 
     double toValue = scrollViewer.ScrollableHeight * ((double)index/itemsControl.Items.Count); 
     Point relativePoint = container.TranslatePoint(new Point(0.0, 0.0), Window.GetWindow(container)); 

     DoubleAnimation verticalAnimation = new DoubleAnimation(); 
     verticalAnimation.From = scrollViewer.VerticalOffset; 
     verticalAnimation.To = toValue; 
     verticalAnimation.DecelerationRatio = .2; 
     verticalAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1000)); 
     Storyboard storyboard = new Storyboard(); 
     storyboard.Children.Add(verticalAnimation); 
     Storyboard.SetTarget(verticalAnimation, scrollViewer); 
     Storyboard.SetTargetProperty(verticalAnimation, new PropertyPath(ScrollViewerBehavior.VerticalOffsetProperty)); 
     storyboard.Begin(); 
    } 
} 

Và kể từ khi bạn cũng cần phải được một tổ chức của ScrollViewer bạn sẽ cần

public static class VisualTreeHelpers 
{ 
    public static T GetVisualChild<T>(DependencyObject parent) where T : Visual 
    { 
     T child = default(T); 

     int numVisuals = VisualTreeHelper.GetChildrenCount(parent); 
     for (int i = 0; i < numVisuals; i++) 
     { 
      Visual v = (Visual)VisualTreeHelper.GetChild(parent, i); 
      child = v as T; 
      if (child == null) 
      { 
       child = GetVisualChild<T>(v); 
      } 
      if (child != null) 
      { 
       break; 
      } 
     } 
     return child; 
    } 
} 

Answer 2

Hãy xem article này, nó giải thích cách cuộn động và thêm cử chỉ cảm ứng. Tải xuống nguồn ở cuối trang và xem giải pháp WpfScrollContent. Tôi sẽ mở rộng ListBox WPF và thêm các hình ảnh động cuộn cho nó theo cách đó bạn có thể tái sử dụng kiểm soát.