在WP7中实现ListBox的添加/删除项动画效果

Question

在WP7中实现ListBox的添加/删除项动画效果

silverlightwindows-phone-7animationlistboxlistboxitem

7

我知道在Silverlight 4中，可以通过调整ListBoxItem样式的LayoutStates（即BeforeUnloaded、BeforeLoaded和AfterLoaded）来实现这一点。

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

我目前使用的是7.1版本。

有没有办法让它工作？

谢谢， Xin

- Justin XL

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user824249 · Accepted Answer

为此，我使用了Artefact Animator，它是用于Silverlight的，但对于WP7也非常适用。代码仅显示添加部分。整个代码来自项目示例页面。

MainPage.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;
    }
}