Storyboard targeting GridLength for WP8

Question

I want to make a storyboard for RowDefinition changing the Height, and I found this to help me. The only problem when I want to create the class GridLengthAnimation, I cannot make it a AnimationTimeline. Is this because windows phone 8 does not support this?

In this case is there another work around for making a storyboard for RowDefinition?

score 1 · Answer 1 · answered Jul 04 '14 at 11:05

Easiest way may be that you put grids to the rows, and animate their Height-property like this.

Here is the xaml:

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid Background="AliceBlue"
          Grid.Row="0"
          Height="100"
          Tap="Grid_Tap"
          CacheMode="BitmapCache" />
    <Grid Background="AntiqueWhite"
          Grid.Row="1"
          Height="100"
          Tap="Grid_Tap"
          CacheMode="BitmapCache" />
    <Grid Background="Aqua"
          Grid.Row="2"
          Height="100"
          Tap="Grid_Tap"
          CacheMode="BitmapCache" />
    <Grid Background="Aquamarine"
          Grid.Row="3"
          Height="100"
          Tap="Grid_Tap"
          CacheMode="BitmapCache" />

</Grid>

And the cs:

private void AnimateHeight(Grid grid)
{
    double newHeight = grid.ActualHeight == 100 ? 300 : 100; //select the height we want to animate

    Storyboard story = new Storyboard();
    DoubleAnimation animation = new DoubleAnimation();
    animation.To = newHeight;
    animation.Duration = TimeSpan.FromSeconds(0.5);

    Storyboard.SetTarget(animation, grid);
    Storyboard.SetTargetProperty(animation, new PropertyPath(Grid.HeightProperty));

    story.Children.Add(animation);
    story.Begin();
}

private void Grid_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    Grid grid = sender as Grid; //select the grid we tapped
    AnimateHeight(grid);
}

Notice that I putted cachemode to bitmapcache all of the grids. That's not necessary, but gives more fluent animation, because static grids won't be redrawed again in each frame.

I'm trying to implement your idea, the only problem is that I one of the rows has a rowspan of two. Instead of the first row just goes a little into the second, it seems that the first row and second row are one, got any idea why? — JonasN89, Aug 26 '14 at 13:22

Storyboard targeting GridLength for WP8

1 Answers1