Animation when add or remove item from GridView XA

Question

How create own animation when item add or remove from GridView? For example change colour from dark to light.
If Item is a Grid:

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

Is other way to do this?

Answer 1

Correct, there can only be pre-defined transitions. The transition model is not exposed publically at this time.

Answer 2

The rows added to the "parent" ListView of a GridView could be fed in several ways, but often are bound to a ObservableCollection of something.

The columns of the GridView are governed with a ObservableCollection, as well, so the context should be pretty similar.

I published an article on how to manage the columns' management (with animation) just some days ago. Perhaps could help you.

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

UPDATE: pardon me, but I realized later that you meant the XAML for Store apps. My reference is for WPF, instead.

Answer 3

Tim is correct that the Transitions are pre-defined at this point. However, you should be able to achieve your scenario using Storyboard. There are probably several ways to do this, e.g. retemplating GridViewItem and adding new "Loading"/"Unloading" visual states. Here is a simple way to achieve your scenario by putting a Storyboard in the ItemTemplate:

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

Example source code is hosted here: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/GridViewItemLoadedUnloadedAnimations

Answer 4

What if the set that is used as the GridView's ItemsSource was an ObservableCollection and your code behind listened for changes from that collection? Then from the code behind you could control animations.