我一直在使用这篇伟大的文章作为显示和隐藏具有过渡效果的元素的基础。它的工作原理非常巧妙，它让你绑定Visibility属性，就像平常一样，然后定义当可见性改变时会发生什么(例如，动画其不透明度或触发故事板)。当你隐藏一个元素时，它会使用值强制转换来保持它的可见性，直到转换完成。
我正在寻找与ItemsControl和ObservableCollection使用的类似解决方案。换句话说，我想像往常一样将ItemsSource绑定到ObservableCollection，但要控制添加和删除项目并触发动画时发生的情况。我不认为在这里使用值强制转换会起作用，但显然，项目仍然需要留在列表中，直到它们的转换完成。有没有人知道现有的解决方案可以使这个问题变得简单?
我希望任何解决方案都是合理通用的，并且易于应用于任何类型的项目列表。理想情况下，样式和动画行为应该是分开的，并且将其应用于特定的列表将是一个简单的任务，例如给它一个附加属性。
淡入很容易，但是对于淡入，项目将需要留在源列表中，直到动画完成(如您所说)。
如果我们仍然希望能够正常使用源ObservableCollection(添加/删除等)，那么我们必须创建一个镜像集合，该镜像集合始终与源集合同步，并延迟删除，直到动画完成。这可以通过CollectionChanged事件来完成。
这是我做的一个实现，使用附加的行为。它可以用于ItemsControl, ListBox, DataGrid或从ItemsControl派生的任何其他内容。
不是绑定ItemsSource，而是绑定附加属性ItemsSourceBehavior.ItemsSource。它将使用反射创建镜像ObservableCollection，使用镜像作为ItemsSource，并处理FadeIn/FadeOut动画。
请注意，我还没有进行广泛的测试，可能会有错误和一些改进，但它在我的场景中工作得很好。
<ListBox behaviors:ItemsSourceBehavior.ItemsSource="{Binding MyCollection}">
<behaviors:ItemsSourceBehavior.FadeInAnimation>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0"
To="1.0"
Duration="0:0:3"/>
</Storyboard>
</behaviors:ItemsSourceBehavior.FadeInAnimation>
<behaviors:ItemsSourceBehavior.FadeOutAnimation>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.0"
Duration="0:0:1"/>
</Storyboard>
</behaviors:ItemsSourceBehavior.FadeOutAnimation>
<!--...-->
</ListBox>
ItemsSourceBehavior
public class ItemsSourceBehavior
{
public static readonly DependencyProperty ItemsSourceProperty =
DependencyProperty.RegisterAttached("ItemsSource",
typeof(IList),
typeof(ItemsSourceBehavior),
new UIPropertyMetadata(null, ItemsSourcePropertyChanged));
public static void SetItemsSource(DependencyObject element, IList value)
{
element.SetValue(ItemsSourceProperty, value);
}
public static IList GetItemsSource(DependencyObject element)
{
return (IList)element.GetValue(ItemsSourceProperty);
}
private static void ItemsSourcePropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
ItemsControl itemsControl = source as ItemsControl;
IList itemsSource = e.NewValue as IList;
if (itemsControl == null)
{
return;
}
if (itemsSource == null)
{
itemsControl.ItemsSource = null;
return;
}
Type itemsSourceType = itemsSource.GetType();
Type listType = typeof(ObservableCollection<>).MakeGenericType(itemsSourceType.GetGenericArguments()[0]);
IList mirrorItemsSource = (IList)Activator.CreateInstance(listType);
itemsControl.SetBinding(ItemsControl.ItemsSourceProperty, new Binding{ Source = mirrorItemsSource });
foreach (object item in itemsSource)
{
mirrorItemsSource.Add(item);
}
FadeInContainers(itemsControl, itemsSource);
(itemsSource as INotifyCollectionChanged).CollectionChanged +=
(object sender, NotifyCollectionChangedEventArgs ne) =>
{
if (ne.Action == NotifyCollectionChangedAction.Add)
{
foreach (object newItem in ne.NewItems)
{
mirrorItemsSource.Add(newItem);
}
FadeInContainers(itemsControl, ne.NewItems);
}
else if (ne.Action == NotifyCollectionChangedAction.Remove)
{
foreach (object oldItem in ne.OldItems)
{
UIElement container = itemsControl.ItemContainerGenerator.ContainerFromItem(oldItem) as UIElement;
Storyboard fadeOutAnimation = GetFadeOutAnimation(itemsControl);
if (container != null && fadeOutAnimation != null)
{
Storyboard.SetTarget(fadeOutAnimation, container);
EventHandler onAnimationCompleted = null;
onAnimationCompleted = ((sender2, e2) =>
{
fadeOutAnimation.Completed -= onAnimationCompleted;
mirrorItemsSource.Remove(oldItem);
});
fadeOutAnimation.Completed += onAnimationCompleted;
fadeOutAnimation.Begin();
}
else
{
mirrorItemsSource.Remove(oldItem);
}
}
}
};
}
private static void FadeInContainers(ItemsControl itemsControl, IList newItems)
{
EventHandler statusChanged = null;
statusChanged = new EventHandler(delegate
{
if (itemsControl.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
{
itemsControl.ItemContainerGenerator.StatusChanged -= statusChanged;
foreach (object newItem in newItems)
{
UIElement container = itemsControl.ItemContainerGenerator.ContainerFromItem(newItem) as UIElement;
Storyboard fadeInAnimation = GetFadeInAnimation(itemsControl);
if (container != null && fadeInAnimation != null)
{
Storyboard.SetTarget(fadeInAnimation, container);
fadeInAnimation.Begin();
}
}
}
});
itemsControl.ItemContainerGenerator.StatusChanged += statusChanged;
}
public static readonly DependencyProperty FadeInAnimationProperty =
DependencyProperty.RegisterAttached("FadeInAnimation",
typeof(Storyboard),
typeof(ItemsSourceBehavior),
new UIPropertyMetadata(null));
public static void SetFadeInAnimation(DependencyObject element, Storyboard value)
{
element.SetValue(FadeInAnimationProperty, value);
}
public static Storyboard GetFadeInAnimation(DependencyObject element)
{
return (Storyboard)element.GetValue(FadeInAnimationProperty);
}
public static readonly DependencyProperty FadeOutAnimationProperty =
DependencyProperty.RegisterAttached("FadeOutAnimation",
typeof(Storyboard),
typeof(ItemsSourceBehavior),
new UIPropertyMetadata(null));
public static void SetFadeOutAnimation(DependencyObject element, Storyboard value)
{
element.SetValue(FadeOutAnimationProperty, value);
}
public static Storyboard GetFadeOutAnimation(DependencyObject element)
{
return (Storyboard)element.GetValue(FadeOutAnimationProperty);
}
}
@Fredrik Hedblad很好地完成。我还有几句话要说。
-
当添加一个项目时，动画有时会从先前添加的项目开始。
-
将项目插入列表，将它们全部添加到底部(因此不支持排序列表)
- (个人问题:每个项目需要单独的动画)
在下面的代码中有一个改编的版本，它解决了上面列出的问题。
public class ItemsSourceBehavior
{
public static void SetItemsSource(DependencyObject element, IList value)
{
element.SetValue(ItemsSourceProperty, value);
}
public static IList GetItemsSource(DependencyObject element)
{
return (IList) element.GetValue(ItemsSourceProperty);
}
private static void ItemsSourcePropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
//If animations need to be run together set this to 'false'.
const bool separateAnimations = true;
var itemsControl = source as ItemsControl;
var itemsSource = e.NewValue as IList;
if (itemsControl == null)
{
return;
}
if (itemsSource == null)
{
itemsControl.ItemsSource = null;
return;
}
var itemsSourceType = itemsSource.GetType();
var listType = typeof (ObservableCollection<>).MakeGenericType(itemsSourceType.GetGenericArguments()[0]);
var mirrorItemsSource = (IList) Activator.CreateInstance(listType);
itemsControl.SetBinding(ItemsControl.ItemsSourceProperty, new Binding {Source = mirrorItemsSource});
foreach (var item in itemsSource)
{
mirrorItemsSource.Add(item);
if (separateAnimations)
StartFadeInAnimation(itemsControl, new List<object> {item});
}
if (!separateAnimations)
{
StartFadeInAnimation(itemsControl, itemsSource);
}
(itemsSource as INotifyCollectionChanged).CollectionChanged +=
(object sender, NotifyCollectionChangedEventArgs ne) =>
{
if (ne.Action == NotifyCollectionChangedAction.Add)
{
foreach (var newItem in ne.NewItems)
{
//insert the items instead of just adding them
//this brings support for sorted collections
mirrorItemsSource.Insert(ne.NewStartingIndex, newItem);
if (separateAnimations)
{
StartFadeInAnimation(itemsControl, new List<object> {newItem});
}
}
if (!separateAnimations)
{
StartFadeInAnimation(itemsControl, ne.NewItems);
}
}
else if (ne.Action == NotifyCollectionChangedAction.Remove)
{
foreach (var oldItem in ne.OldItems)
{
var container = itemsControl.ItemContainerGenerator.ContainerFromItem(oldItem) as UIElement;
var fadeOutAnimation = GetFadeOutAnimation(itemsControl);
if (container != null && fadeOutAnimation != null)
{
Storyboard.SetTarget(fadeOutAnimation, container);
EventHandler onAnimationCompleted = null;
onAnimationCompleted = ((sender2, e2) =>
{
fadeOutAnimation.Completed -= onAnimationCompleted;
mirrorItemsSource.Remove(oldItem);
});
fadeOutAnimation.Completed += onAnimationCompleted;
fadeOutAnimation.Begin();
}
else
{
mirrorItemsSource.Remove(oldItem);
}
}
}
};
}
private static void StartFadeInAnimation(ItemsControl itemsControl, IList newItems)
{
foreach (var newItem in newItems)
{
var container = itemsControl.ItemContainerGenerator.ContainerFromItem(newItem) as UIElement;
var fadeInAnimation = GetFadeInAnimation(itemsControl);
if (container != null && fadeInAnimation != null)
{
Storyboard.SetTarget(fadeInAnimation, container);
fadeInAnimation.Begin();
}
}
}
public static void SetFadeInAnimation(DependencyObject element, Storyboard value)
{
element.SetValue(FadeInAnimationProperty, value);
}
public static Storyboard GetFadeInAnimation(DependencyObject element)
{
return (Storyboard) element.GetValue(FadeInAnimationProperty);
}
public static void SetFadeOutAnimation(DependencyObject element, Storyboard value)
{
element.SetValue(FadeOutAnimationProperty, value);
}
public static Storyboard GetFadeOutAnimation(DependencyObject element)
{
return (Storyboard) element.GetValue(FadeOutAnimationProperty);
}
public static readonly DependencyProperty ItemsSourceProperty =
DependencyProperty.RegisterAttached("ItemsSource",
typeof (IList),
typeof (ItemsSourceBehavior),
new UIPropertyMetadata(null, ItemsSourcePropertyChanged));
public static readonly DependencyProperty FadeInAnimationProperty =
DependencyProperty.RegisterAttached("FadeInAnimation",
typeof (Storyboard),
typeof (ItemsSourceBehavior),
new UIPropertyMetadata(null));
public static readonly DependencyProperty FadeOutAnimationProperty =
DependencyProperty.RegisterAttached("FadeOutAnimation",
typeof (Storyboard),
typeof (ItemsSourceBehavior),
new UIPropertyMetadata(null));
}
目前的框架做了类似的事情。这里有一个演示。你可以利用它或者用VisualStateManager做类似的事情。