从 GridView XAML 添加或删除项目时的动画答案

【问题标题】：Animation when add or remove item from GridView XAML从 GridView XAML 添加或删除项目时的动画
【发布时间】：2013-08-09 21:48:10
【问题描述】：

如何在 GridView 中添加或删除项目时创建自己的动画？例如将颜色从深色变为浅色。
如果项目是一个网格：

<Grid.Transitions>
        --> There can be only predefinied *ThemeTransitions?       
 </Grid.Transitions>

还有其他方法吗？

【问题讨论】：

如何创建自定义动画以添加删除项目。实际我认为使用 xaml 和 winrt 是不可能的。

标签： xaml animation windows-8 winrt-xaml

【解决方案1】：

Tim 是正确的，此时已预先定义了转换。但是，您应该能够使用 Storyboard 来实现您的场景。可能有几种方法可以做到这一点，例如重新模板化 GridViewItem 并添加新的“加载”/“卸载”视觉状态。这是通过在 ItemTemplate 中放置 Storyboard 来实现您的场景的简单方法：

MainPage.xaml：

    <GridView x:Name="MyGV">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid Loaded="Grid_Loaded" x:Name="TemplateRoot" Opacity="0" Background="White">
                    <Grid.Resources>
                        <Storyboard x:Key="LoadedStoryboard">
                            <DoubleAnimation Storyboard.TargetName="TemplateRoot"
                                             Storyboard.TargetProperty="Opacity"
                                             BeginTime="0:0:1"
                                             Duration="0:0:5"
                                             To="1" />
                        </Storyboard>
                    </Grid.Resources>
                    <TextBlock Text="{Binding}" FontSize="24" Foreground="Black" Margin="40" />
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

MainPage.xaml.cs：

    private void Grid_Loaded(object sender, RoutedEventArgs e)
    {
        Storyboard sb = ((Grid)sender).Resources["LoadedStoryboard"] as Storyboard;
        sb.Begin();
    }

示例源代码托管在此处： https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/GridViewItemLoadedUnloadedAnimations

【讨论】：

这似乎不适用于 UnLoaded。到那时，该项目似乎已经超出了视觉树。

【解决方案2】：

如果用作 GridView 的 ItemsSource 的集合是 ObservableCollection 并且您的代码在侦听来自该集合的更改怎么办？然后你就可以通过后面的代码来控制动画了。

【讨论】：

是避免代码隐藏的选项吗？有一种方法可以在 XAML 中定义这个动画吗？
我不确定，但可能。如果在 xaml 中进行，则更难调试。

【解决方案3】：

正确，只能有预定义的过渡。过渡模型目前未公开。

【讨论】：

【解决方案4】：

添加到 GridView 的“父”ListView 的行可以通过多种方式提供，但通常绑定到某个 ObservableCollection。

GridView 的列也由 ObservableCollection 管理，因此上下文应该非常相似。

几天前我发表了一篇关于如何管理栏目管理（带有动画）的文章。或许能帮到你。

http://highfieldtales.wordpress.com/2013/08/08/hacking-the-wpf-gridview-adding-the-animation/

更新：请原谅，但我后来意识到您指的是用于商店应用程序的 XAML。我的参考是 WPF。

【讨论】：