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?

user3777939 user3777939 · Accepted Answer · 2014-07-04T11:05:08

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.

Storyboard targeting GridLength for WP8

1 Answers