itemsControl 项目插入动画答案

【问题标题】：itemsControl item insertion animationitemsControl 项目插入动画
【发布时间】：2013-06-03 09:13:05
【问题描述】：

我在我的 windows phone 7 应用程序中使用 itemsControl 显示一个种类列表，但我对 animation 和 storyBoard 等很陌生所以我的itemsControl 在下面给出

    <ItemsControl x:Name="ListContainer">

                        <ItemsControl.ItemTemplate>                        
                            <DataTemplate x:Name="listTemplate">                                
                                    <StackPanel Margin="25,0,0,0" MaxHeight="100">
                                        <TextBlock Text="{Binding DisplayName}" FontSize="21"></TextBlock>                            
                                        <Button Name="btn" Tag="{Binding ID}" Content="request" FontSize="21" Width="183" Click="btn_Click" Padding="0"></Button>
                                    </StackPanel>                                
                            </DataTemplate>                            
                        </ItemsControl.ItemTemplate>

                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>

    </ItemsControl>

现在我想添加一个animation，这样每当一个项目被添加到这个itemsControl时，它（item）应该从bottom移动到up，而不是add

我用谷歌搜索了很多，但没有找到任何令人满意的答案，所以如果有人对故事板和动画有知识，请回答-：谢谢

【问题讨论】：

标签： windows-phone-7 xaml animation storyboard

【解决方案1】：

要实现这样的动画，您需要： 1. 将TranslateTransform 添加到项目StackPanel 并将Y 设置为900； 2.为StackPanel的Loaded事件添加事件处理函数；您的 XAML 现在将如下所示：

<ItemsControl x:Name="ListContainer" VerticalAlignment="Top">
                <ItemsControl.ItemTemplate>
                    <DataTemplate x:Name="listTemplate">
                        <StackPanel Margin="25,0,0,0" MaxHeight="100" Loaded="FrameworkElement_OnLoaded">
                            <StackPanel.RenderTransform>
                                <TranslateTransform Y="900"/>
                            </StackPanel.RenderTransform>
                            <TextBlock Text="{Binding}" FontSize="21"></TextBlock>
                            <Button Name="btn" Content="request" FontSize="21" Width="183" Padding="0"></Button>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>

3。在Loaded 事件处理程序中，您需要创建一个Storyboard 来移动一个新项目：

private void FrameworkElement_OnLoaded(object sender, RoutedEventArgs e)
    {
        var storyboard = new Storyboard();
        var animation = new DoubleAnimation
                            {
                                From = 900, 
                                To = 0
                            };

        var translatTransform = new TranslateTransform
                                    {
                                        Y = 900
                                    };

        var panel = (StackPanel) sender;
        panel.RenderTransform = translatTransform;

        Storyboard.SetTarget(animation, translatTransform);
        Storyboard.SetTargetProperty(animation, new PropertyPath("Y"));
        storyboard.Children.Add(animation);
        storyboard.Begin();
    }

【讨论】：

优秀的答案！，正是我一直在寻找的谢谢@uer2429991

【解决方案2】：

现在只需查看这个混合动画教程并应用您自己的想法。在混合中做动画是非常好的。 Animating a card in windows phone

而对于项目控制的动画，这个工作：Item control animation

【讨论】：

好吧，这不是我想要的。但是谢谢你的回答@max