Animation when add or remove item from GridView XAML

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?

How can I create custom animation for add remove items. Actual I think it impossible with xaml and winrt. — JPE, Aug 09 '13 at 22:52

score 1 · Accepted Answer · answered Aug 10 '13 at 20:37

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

This doesn't appear to work for UnLoaded. Looks like the item is already out of the visual tree by that point. — Massif, Oct 27 '14 at 15:32

score 0 · Answer 2 · answered Aug 09 '13 at 22:48

0

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.

answered Aug 09 '13 at 22:48

Tristan

1,466
1
16
24

Is a option to avoid code-behind? Is a way to define this animation in XAML? – JPE Aug 09 '13 at 22:59
I'm not sure, but probably. If you do it in xaml, it's harder to debug. – Tristan Aug 09 '13 at 23:09

score 0 · Answer 3 · answered Aug 09 '13 at 23:52

0

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

answered Aug 09 '13 at 23:52

Tim Heuer

4,301
21
20

Mario Vernari · Answer 4 · 2013-08-10T14:13:29.417

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.

Animation when add or remove item from GridView XAML

4 Answers4

Linked