WP7 - 动画添加/在ListBox中删除项 [英] WP7 - Animating add/remove item in a ListBox

问题描述

我知道你可以在Silverlight 4通过与ListBoxItem的风格的LayoutStates，即BeforeUnloaded，BeforeLoaded和AfterLoaded玩做到这一点。

I know you can achieve this in Silverlight 4 by playing with the ListBoxItem style's LayoutStates, i.e. BeforeUnloaded, BeforeLoaded and AfterLoaded.

这似乎并没有被虽然在默认样式存在这些国家在WP7的所有工作。

It doesn't seem to be working at all in WP7 although these states exist in the default style.

我目前使用的7.1版本。

I am currently using version 7.1.

有什么办法，我可以得到这个工作？

Is there any way I can get this working?

谢谢，
鑫

推荐答案

为此我使用人工制品动画，它是Silverlight的，但完全适用于WP7也。在code只显示除。整个code从该项目的样本页面。

for this I used Artefact Animator, it's for Silverlight but works perfectly for WP7 also. The code shows only the addition. Whole code from the project's sample page.

MainPage.xaml中

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中

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

这篇关于WP7 - 动画添加/在ListBox中删除项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！