ListBox 항목로드 애니메이션

Question

이러한 애니메이션을 사용하여 ListBox (ListView)를 기반으로 사용자 정의 컨트롤을 만들려고합니다. 목록 상자의 항목이 한 번에 모두로드되지 않고 단계별로 (항목별로, 첫 번째, 두 번째, 세 번째 등).

어떻게하면됩니까?

Answer 1

이의 혼합 SDK 동작 사용할 수 있습니다.

<ListBox ItemsSource="{Binding Collection, Source={StaticResource SampleData}}"> 
    <i:Interaction.Behaviors> 
     <b:FadeAnimateItemsBehavior Tick="0:0:0.05"> 
      <b:FadeAnimateItemsBehavior.Animation> 
       <DoubleAnimation From="0" To="1" Duration="0:0:0.3"/> 
      </b:FadeAnimateItemsBehavior.Animation> 
     </b:FadeAnimateItemsBehavior> 
    </i:Interaction.Behaviors> 
</ListBox> 

class FadeAnimateItemsBehavior : Behavior<ListBox> 
{ 
    public DoubleAnimation Animation { get; set; } 
    public TimeSpan Tick { get; set; } 

    protected override void OnAttached() 
    { 
     base.OnAttached(); 
     AssociatedObject.Loaded += new System.Windows.RoutedEventHandler(AssociatedObject_Loaded); 
    } 

    void AssociatedObject_Loaded(object sender, System.Windows.RoutedEventArgs e) 
    { 
     IEnumerable<ListBoxItem> items; 
     if (AssociatedObject.ItemsSource == null) 
     { 
      items = AssociatedObject.Items.Cast<ListBoxItem>(); 
     } 
     else 
     { 
      var itemsSource = AssociatedObject.ItemsSource; 
      if (itemsSource is INotifyCollectionChanged) 
      { 
       var collection = itemsSource as INotifyCollectionChanged; 
       collection.CollectionChanged += (s, cce) => 
        { 
         if (cce.Action == NotifyCollectionChangedAction.Add) 
         { 
          var itemContainer = AssociatedObject.ItemContainerGenerator.ContainerFromItem(cce.NewItems[0]) as ListBoxItem; 
          itemContainer.BeginAnimation(ListBoxItem.OpacityProperty, Animation); 
         } 
        }; 

      } 
      ListBoxItem[] itemsSub = new ListBoxItem[AssociatedObject.Items.Count]; 
      for (int i = 0; i < itemsSub.Length; i++) 
      { 
       itemsSub[i] = AssociatedObject.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem; 
      } 
      items = itemsSub; 
     } 
     foreach (var item in items) 
     { 
      item.Opacity = 0; 
     } 
     var enumerator = items.GetEnumerator(); 
     if (enumerator.MoveNext()) 
     { 
      DispatcherTimer timer = new DispatcherTimer() { Interval = Tick }; 
      timer.Tick += (s, timerE) => 
      { 
       var item = enumerator.Current; 
       item.BeginAnimation(ListBoxItem.OpacityProperty, Animation); 
       if (!enumerator.MoveNext()) 
       { 
        timer.Stop(); 
       } 
      }; 
      timer.Start(); 
     } 
    } 
} 

Tick이 항목에 퇴색하기 시작 될 때까지의 시간을 지정을 Animation는 페이드의 불투명도에 적용되는 애니메이션입니다 Xaml에서 매우 비용 효율적으로 설정할 수 있습니다 (예 : 완화 기능 및 페이드 시간).

편집 :.주의이 같은

(를 사용하여 코드 조각 (ItemsSource를 사용하고 INotifyCollectionChanged를 구현하는 경우에만 작동)에서 모든 경우는,이 코드는 데모 용으로 주로 새로운 항목 페이드 인 추가 어떻게 접근 할 수 있는지에 대한 일반적인 아이디어를 얻을 수 있습니다. Blend 4의 네이티브 FluidMoveBehaviors ()