Hinzufügen von Farbübergang auf neu hinzugefügte Listview Artikel

Question

ich ein Fenster Universal-App unter Windows geschrieben haben 10, die eine ListView hat.

Diese ListView aktualisiert alle fünf Sekunden, wenn neue Daten verfügbar sind. Seine Datenquelle ist eine ObservableCollection, die nur maximal zehn Elemente anzeigen kann, wobei die neuesten an der Vorderseite der Sammlung eingefügt werden. Dies scheint gut zu funktionieren, wie Sie die ListView mit Elementen langsam scrollen auf dem Bildschirm sehen.

Was ich tun möchte, ist eine Art Farbübergang zu den neuen Elementen in der ListView hinzufügen, so dass, wenn sie erscheinen, der Hintergrund des Elements grau beginnt und zu weiß verblasst. Ich möchte diesen Effekt, damit ein Benutzer das neue Element oder die Elemente, die gerade in ListView erschienen sind, problemlos anzeigen kann.

Die neuen Objekte der Sammlung hinzugefügt haben ein Flag setzen, sie sind neu anzuzeigen. Ich dachte, das könnte als Indikator verwendet werden, wenn der Animationsprozess dieses Flag nach der Animation zurücksetzen konnte? Oder sollte ich versuchen, ein Ereignis aus der ListView zu verwenden, wenn es eines gibt?

Ich bin neu in Storyboards so bin nicht sicher, der beste Ansatz. Kann jemand über die Bereiche beraten, die ich erforschen sollte, um die Animation zu bekommen, oder sogar, wenn es unter der UWP möglich ist?

Answer 1

Grundsätzlich, wenn ein neues Element hinzugefügt wurde, möchten Sie seine Farbe zu hellgrau animieren und dann gleich wieder animieren.

Also das Wichtigste ist, um das Ereignis zu finden, die während der Elementcontainer Schöpfung aufgerufen wird. In diesem Fall ist ContainerContentChanging dein Freund.

Da Sie die Farbe während einer Animation einige Male animieren müssen, benötigen Sie ColorAnimationUsingKeyFrames anstelle einer normalen ColorAnimation. Die ganze Timeline und Storyboard Syntax kann manchmal etwas verwirrend sein, also habe ich hier eine einfache Demo für Sie erstellt. Ich hoffe es hilft. :)

private void OnListViewContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args) 
{ 
    if (args.ItemContainer != null && !args.InRecycleQueue && args.Phase == 0) 
    { 
     var colorAnimation = new ColorAnimationUsingKeyFrames 
     { 
      // 'cause the new item comes in with an animation of which duration is about 300s, we add a little delay here to only 
      // animate the color after it appears. 
      BeginTime = TimeSpan.FromMilliseconds(300) 
     }; 
     var keyFrame1 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0)), Value = Colors.White }; 
     var keyFrame2 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(400)), Value = Colors.LightGray }; 
     var keyFrame3 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1200)), Value = Colors.White }; 
     colorAnimation.KeyFrames.Add(keyFrame1); 
     colorAnimation.KeyFrames.Add(keyFrame2); 
     colorAnimation.KeyFrames.Add(keyFrame3); 

     Storyboard.SetTarget(colorAnimation, args.ItemContainer); 
     Storyboard.SetTargetProperty(colorAnimation, "(Control.Background).(SolidColorBrush.Color)"); 

     var storyboard = new Storyboard(); 
     storyboard.Children.Add(colorAnimation); 
     storyboard.Begin(); 
    } 
} 

So sieht es in einer demo App aus.