WPF - Animate ListBox.ScrollViewer.HorizontalOffset? WPF - Animate ListBox.ScrollViewer.HorizontalOffset? wpf wpf

WPF - Animate ListBox.ScrollViewer.HorizontalOffset?


I don't think you will be able to use a WPF storyboard for the animation because storyboards animate WPF dependency properties. You will need to call ScrollViewer.ScrollToHorizontalOffset(double) to scroll.

You could try creating a custom dependency property that calls SetHorizontalOffset in the OnDependencyPropertyChanged() function. Then you could animate this property.

public static readonly DependencyProperty ScrollOffsetProperty =   DependencyProperty.Register("ScrollOffset", typeof(double), typeof(YOUR_TYPE),   new FrameworkPropertyMetadata(0.0, new PropertyChangedCallback(OnScrollOffsetChanged)));public double ScrollOffset{   get { return (double)GetValue(ScrollOffsetProperty); }   set { SetValue(ScrollOffsetProperty, value); }}private static void OnScrollOffsetChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args){   YOUR_TYPE myObj = obj as YOUR_TYPE;   if (myObj != null)      myObj.SCROLL_VIEWER.ScrollToHorizontalOffset(myObj.ScrollOffset);}

To get the scroll viewer you can use the VisualTreeHelper to search the visual children of the ListBox. Save a reference to the ScrollViewer because you will need it later. Try this:

public static childItem FindVisualChild<childItem>(DependencyObject obj)   where childItem : DependencyObject{   // Iterate through all immediate children   for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)   {      DependencyObject child = VisualTreeHelper.GetChild(obj, i);      if (child != null && child is childItem)         return (childItem)child;      else      {         childItem childOfChild = FindVisualChild<childItem>(child);         if (childOfChild != null)            return childOfChild;      }   }   return null;}

This function returns the first visual child of the parameter type. Call FindVisualChild<ScrollViewer>(ListBox) to get the ScrollViewer.

Finally, try using UIElement.TranslatePoint(Point, UIElement) to get the X position of the item. Call this function on the item, pass in 0,0 for the point, and pass in the ScrollViewer.

Hope this helps.


I'm not sure if my method is good practice but for the limited time I had it seemed to work okay. Instead of using a story board I just used a DispatcherTimer instead.

ScrollLeftButtonCommand = new DelegateCommand(    o =>       {           var scrollViewer = (ScrollViewer)o;           scrollTimer = new DispatcherTimer();           scrollTimer.Start();           scrollTimer.Interval = TimeSpan.FromMilliseconds(30);           scrollTimer.Tick += (s, e) =>           {                         scrollViewer.ScrollToHorizontalOffset(scrollViewer.HorizontalOffset - 50);               if (scrollViewer.HorizontalOffset <= 0)               {                   scrollTimer.Stop();               }           };       });

Make sure it's a DispatchTimer so the thread is able to take control of the UI element

Also remember to bind to your object in your view!

<Button CommandParameter="{Binding ElementName=MyScrollViewer }"        Command="{Binding ScrollLeftButtonCommand }"/>