Question

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

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

我目前正在使用7.1版。

有什么方法可以让它发挥作用吗？

谢谢，辛

Answer 1

为此，我使用了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;
    }
}

WP7 - 动画添加/删除ListBox中的项目

1 个答案: