WP7 - 在列表框中添加/删除项目的动画

我知道您可以在 Silverlight 4 中通过使用 ListBoxItem 样式的 LayoutStates（即 BeforeUnloaded、BeforeLoaded 和 AfterLoaded）来实现此目的。

尽管这些状态以默认样式存在，但它似乎在 WP7 中根本不起作用。

我目前使用的是7.1版本。

有什么办法可以让它工作吗？

谢谢， 辛

为此我用了人工制品动画师，它适用于 Silverlight，但也适用于 WP7。代码仅显示了添加内容。来自项目示例页面的完整代码。

主页.xaml

<UserControl.Resources>

    <!-- ADDS SMOOTH SCROLL -->
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
        <StackPanel/>
    </ItemsPanelTemplate>

</UserControl.Resources>
<Grid>
    <ListBox x:Name="lb" Height="247" Width="100" ItemsPanel="{StaticResource ItemsPanelTemplate}" />
    <Button x:Name="addBtn" Content="Add" Height="72" HorizontalAlignment="Left" Margin="159,145,0,0"  VerticalAlignment="Top" Width="160" />
</Grid>

MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage
{
    private static ScrollViewer _scrollViewer;
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        Loaded += MainPage_Loaded;
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        // INIT
        lb.Items.Clear();
        lb.UpdateLayout();

        // SCROLL INTERACTION
        _scrollViewer = FindVisualChild<ScrollViewer>(lb);
        var bar = FindVisualChild<ScrollBar>(_scrollViewer);
        if (bar != null)
            bar.ValueChanged += (s, args) => SetValue(ListBoxScrollOffsetProperty, args.NewValue);

        // INPUT
        addBtn.Click += (s, args) => AddItem();
    }

    private void AddItem()
    {
        // Create New ListBoxItem
        var lbi = new ListBoxItem
        {
            Content = "Item " + lb.Items.Count,
            RenderTransform = new CompositeTransform
            {
                TranslateX = -lb.Width
            },
        };

        // Add ListBoxItem
        lb.Items.Add(lbi);
        lb.UpdateLayout();

        // Animate In Item
        ArtefactAnimator.AddEase(lbi.RenderTransform, CompositeTransform.TranslateXProperty, 0, 1, AnimationTransitions.CubicEaseOut, 0);
        ArtefactAnimator.AddEase(this, ListBoxScrollOffsetProperty, _scrollViewer.ScrollableHeight, .8, AnimationTransitions.CubicEaseOut, 0);
    }


    // LISTBOX SCROLL OFFSET
    public static readonly DependencyProperty ListBoxScrollOffsetProperty =
    DependencyProperty.Register("ListBoxScrollOffset", typeof(double), typeof(MainPage), new PropertyMetadata(0.0, OnListBoxScrollOffsetChanged));

    private static void OnListBoxScrollOffsetChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        _scrollViewer.ScrollToVerticalOffset((double)e.NewValue);
    }

    public double ListBoxScrollOffset
    {
        get
        {
            return (double)GetValue(ListBoxScrollOffsetProperty);
        }
        set
        {
            SetValue(ListBoxScrollOffsetProperty, value);
        }
    }

    // VISUAL HELPER
    public static childItem FindVisualChild<childItem>(DependencyObject obj) where childItem : DependencyObject
    {
        for (var i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
        {
            var child = VisualTreeHelper.GetChild(obj, i);
            if (child != null && child is childItem)
            {
                return (childItem)child;
            }
            else
            {
                var childOfChild = FindVisualChild<childItem>(child);
                if (childOfChild != null)
                {
                    return childOfChild;
                }
            }
        }
        return null;
    }
}