[C#] ListView/ListBox ItemsSource Animation

    • XAML: WPF
    • .NET (FX) 4.5–4.8

    Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von VincentTB.

      [C#] ListView/ListBox ItemsSource Animation

      Hi,
      habe mir gestern überlegt, dass so eine Item-Animation schon was feines wäre. Folgende Idee: Immer, wenn ich den ItemsSource einer ListView/ListBox verändere, werden die Items des neuen ItemsSources schön eingeblendet.

      Ich habe mir dafür ein Behavior geschrieben. Dieses funktioniert, wie schon gesagt, mit einer ListBox oder einem ListView. Sollte der Benutzer scrollen, wird die Animation gestoppt und alle Items werden sofort sichtbar, sodass es nicht komisch aussieht, weil eben nur die Items animiert werden, die der Benutzer zuerst sieht. Das ganze ist vollständig MVVM kompatibel und läuft auch super mit Data Visualisierung. So sieht dann das Resultat aus:


      Die Animation könnt ihr ganz einfach ändern, ihr müsst nur die TODO-Kommentare suchen.

      Hier ist der Code des Animation-Behaviors:
      Spoiler anzeigen

      C#-Quellcode

      1. class ItemsControlAnimationBehavior
      2. {
      3. public static readonly DependencyProperty IsAnimationEnabledProperty = DependencyProperty.RegisterAttached(
      4. "IsAnimationEnabled", typeof (bool), typeof (ItemsControlAnimationBehavior), new PropertyMetadata(false, PropertyChangedCallback));
      6. private static void PropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
      7. {
      8. var itemsControl = dependencyObject as ItemsControl;
      9. if (itemsControl == null)
      10. throw new ArgumentException("The dependencyObject isn't an ItemsControl");
      12. var dependencyPropertyDescriptor = DependencyPropertyDescriptor.FromProperty(ItemsControl.ItemsSourceProperty, typeof(ItemsControl));
      13. if ((bool)dependencyPropertyChangedEventArgs.NewValue)
      14. {
      15. dependencyPropertyDescriptor.AddValueChanged(dependencyObject, ItemsSourceChanged);
      16. }
      17. else
      18. {
      19. dependencyPropertyDescriptor.RemoveValueChanged(itemsControl, ItemsSourceChanged);
      20. }
      21. }
      23. private static readonly Dictionary<ItemsControl, DispatcherTimer> Timers = new Dictionary<ItemsControl, DispatcherTimer>();
      25. private async static void ItemsSourceChanged(object sender, EventArgs eventArgs)
      26. {
      27. var itemsControl = (ItemsControl) sender;
      28. //TODO: Hier die Animationen ändern
      29. var opacityAnimation = new DoubleAnimation(0, 1, TimeSpan.FromMilliseconds(260), FillBehavior.Stop);
      30. var marginAnimation = new ThicknessAnimation(new Thickness(-20, 0, 20, 0), new Thickness(0),
      31. TimeSpan.FromMilliseconds(240), FillBehavior.Stop)
      32. {
      33. EasingFunction = new CircleEase {EasingMode = EasingMode.EaseOut}
      34. };
      36. if (Timers.ContainsKey(itemsControl)) //Wenn der Timer bereits gestartet ist, stoppen wir diesen
      37. {
      38. Timers[itemsControl].Stop();
      39. Timers.Remove(itemsControl);
      40. }
      42. List<ListBoxItem> visibleItems;
      44. while (true)
      45. {
      46. visibleItems = ListBoxExtensions.GetVisibleItemsFromItemsControl(itemsControl,
      47. Window.GetWindow(itemsControl));
      48. if (visibleItems.Count > 0 || itemsControl.Items.Count == 0)
      49. break;
      50. await Task.Delay(1); //Das Problem ist, dass das Event ausgelöst wird, bevor die Items gerendert wurden. Also warten wir, bis welche da sind
      51. }
      53. foreach (var item in visibleItems)
      54. {
      55. item.Opacity = 0; //Wir setzten bei allen die Transparenz auf 0, damit die noch nicht animierten nicht sichtbar sind
      56. }
      58. DispatcherTimer dispatcherTimer;
      60. var enumerator = visibleItems.GetEnumerator();
      61. if (enumerator.MoveNext())
      62. {
      63. ScrollChangedEventHandler scrollChangedEventHandler = null;
      64. scrollChangedEventHandler = (o, args) =>
      65. {
      66. var handler = scrollChangedEventHandler; //Wir holen uns den Handler hier rein
      68. if (handler != null) //Wir löschen diesen, damit sich hier nichts überschneidet
      69. itemsControl.RemoveHandler(ScrollViewer.ScrollChangedEvent, handler);
      71. if (!Timers.ContainsKey(itemsControl) || !Timers[itemsControl].IsEnabled) //Wenn der Timer für das für diesen Handler bestimmten ItemsControl nicht existiert oder deaktiviert ist, wurde die Animation wohl schon beendet. Da wollen wir nicht dazwischen funken.
      72. return;
      74. var timer = Timers[itemsControl]; //Wir holen uns erstmal den Timer...
      75. timer.Stop(); //... und stoppen diesen
      77. while (true) //Anschließend gehen wir alle noch nicht animierte Elemente durch und machen sie sichtbar
      78. {
      79. var item = enumerator.Current;
      80. if (item == null)
      81. break;
      82. item.Opacity = 1;
      83. if (!enumerator.MoveNext()) break;
      84. }
      85. };
      87. dispatcherTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(30) }; //TODO: Hier könnt ihr die Zeitspanne zwischen den Animationen für die Element einstellen
      88. dispatcherTimer.Tick += (s, timerE) =>
      89. {
      90. var item = enumerator.Current; //Bei jedem Tick animieren wir das nächte Item
      91. if (item == null) return;
      92. item.BeginAnimation(FrameworkElement.MarginProperty, marginAnimation);
      93. item.BeginAnimation(UIElement.OpacityProperty, opacityAnimation);
      94. item.Opacity = 1;
      95. if (!enumerator.MoveNext()) //Wenn keines mehr da ist, stoppen wir den Timer und löschen den Handler für das Scroll-Event
      96. {
      97. dispatcherTimer.Stop();
      98. itemsControl.RemoveHandler(ScrollViewer.ScrollChangedEvent, scrollChangedEventHandler);
      99. }
      100. };
      102. Timers.Add(itemsControl, dispatcherTimer);
      103. dispatcherTimer.Start();
      105. itemsControl.AddHandler(ScrollViewer.ScrollChangedEvent, scrollChangedEventHandler);
      106. }
      107. }
      109. public static void SetIsAnimationEnabled(DependencyObject element, bool value)
      110. {
      111. element.SetValue(IsAnimationEnabledProperty, value);
      112. }
      114. public static bool GetIsAnimationEnabled(DependencyObject element)
      115. {
      116. return (bool) element.GetValue(IsAnimationEnabledProperty);
      117. }
      118. }


      und hier noch die ListBox-Extensions: (Weil das ListViewItem von ListBoxItem erbt, funktionieren die mit der ListView auch)
      Spoiler anzeigen

      C#-Quellcode

      1. static class ListBoxExtensions
      2. {
      3. private static bool IsUserVisible(FrameworkElement element, FrameworkElement container)
      4. {
      5. if (!element.IsVisible)
      6. return false;
      8. Rect bounds =
      9. element.TransformToAncestor(container).TransformBounds(new Rect(0.0, 0.0, element.ActualWidth, element.ActualHeight));
      10. var rect = new Rect(0.0, 0.0, container.ActualWidth, container.ActualHeight);
      11. return rect.Contains(bounds.TopLeft) || rect.Contains(bounds.BottomRight);
      12. }
      14. public static List<ListBoxItem> GetVisibleItemsFromItemsControl(ItemsControl itemsControl, FrameworkElement parentToTestVisibility)
      15. {
      16. var items = new List<ListBoxItem>();
      18. foreach (var item in itemsControl.ItemsSource)
      19. {
      20. var lvItem = (ListBoxItem)itemsControl.ItemContainerGenerator.ContainerFromItem(item);
      21. if (lvItem == null)
      22. continue;
      24. if (IsUserVisible(lvItem, parentToTestVisibility))
      25. {
      26. items.Add(lvItem);
      27. }
      28. else if (items.Any())
      29. {
      30. break;
      31. }
      32. }
      34. return items;
      35. }
      36. }


      Um das dann zum laufen zu bekommen, müsst ihr in XAML einfach nur den Namespace importieren, in der die ItemsControlAnimationExtension-Klasse liegt und dann die Eigenschaft IsAnimationEnabled der Klasse auf true setzen:

      XML-Quellcode

      1. local:ItemsControlAnimationExtension.IsAnimationEnabled="true"


      Ein Beispielprojekt findet ihr im Anhang. Viel Spaß :)


      PS: Die Idee stammt von @GimpTutWorks :D
      Dateien
      Mfg
      Vincent

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „VincentTB“ ()

      @nafets
      Also? Die Items fliegen 20 Einheiten von links nach rechts in 200 ms ein und werden in 255 ms Sichtbar. Alle 25 ms startet die Animation für das nächste Item. Was würde man dann deiner Meinung nach verändern?
      Mfg
      Vincent

      So meinte ich es nicht. Ich hatte gedacht, dass das Einblenden (Opacity & Bewegung von links) mit "Easing" halt: Erst beschleunigt die Bewegung und dann wird sie am Ende wieder langsamer. Dadurch sieht die Bewegung viel natürlicher aus.

      @Artentus
      Ich habe mich bei WPF noch nie damit beschäftigt aber das scheint passend zu sein. Ich hatte mal die meisten Funktionen selbst implementiert - interessant dass ich übersehen hatte, dass es schon was dafür im Framework gibt :D

      @nafets
      Ach so, das meinst du :)
      Habe das mal (Dank @Artentus) hinzugefügt. Kannte das noch gar nicht (also, dass das einfach so geht), werde das jetzt häufiger benutzen, wieder was gelernt.

      @ErfinderDesRades
      Danke, man lernt immer dazu :) Habe das geändert.
      Mfg
      Vincent

    Facebook
    Telefonspende