Question

我想为网格行高度更改设置动画，但如何使用动态“星”高度值进行设置？

我有以下网格：

<Grid x:Name="baseGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="3*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="grid0" Grid.Row="0" Tap="grid0_Tap">
        // Content
    </Grid>
    <Grid x:Name="grid1" Grid.Row="1" Tap="grid1_Tap">
        // Content
    </Grid>
    <Grid x:Name="grid2" Grid.Row="2">
        // Content
    </Grid>
</Grid>

在代码背后我有逻辑，如果用户点击grid0，grid2会被隐藏。再次，如果用户单击grid1，grid2将恢复其大小。

private void grid0_Tap(object sender, RoutedEventArgs e)
{
    this.LayoutRoot.RowDefinitions[2].Height = new GridLength(0);
}

private void grid1_Tap(object sender, RoutedEventArgs e)
{
    this.LayoutRoot.RowDefinitions[2].Height = new GridLength(3, GridUnitType.Star);
}

现在效果很好，但如何制作动画呢？我认为Storyboard需要从/到值，因为我使用动态大小我不能使用Storyboard？

Answer 1

（已编辑以解决Windows Phone 8动画故事板问题）

任何XAML库中都不存在GridLength的动画类。

但是你可以接近，或者你可以转向第三方控制，你可以做你想要的。

而且，对于这个用例，非常需要代码隐藏，而不是定义XAML资源，因为您在运行时发现了元素的ActualHeight：

private double storedHeight = 0.0;
    private void grid0_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        //ListBox1.Visibility = Visibility.Visible; 
        if (storedHeight == 0.0) return;
        var d = new DoubleAnimation();
        d.From = 0.0;
        d.To = storedHeight;
        d.Duration = TimeSpan.FromMilliseconds(200);
        storedHeight = 0.0;
        var s = new Storyboard();
        Storyboard.SetTarget(d, grid2);
        Storyboard.SetTargetProperty(d, new PropertyPath("Height"));
        s.Children.Add(d);
        s.Begin();

    }

    private void grid1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        //ListBox1.Visibility = Visibility.Hidden;
        if (storedHeight > 0.0) return;
        storedHeight = ListBox1.ActualHeight;
        var d = new DoubleAnimation();
        d.From = storedHeight;
        d.To = 0.0;
        d.Duration = TimeSpan.FromMilliseconds(200);

        var s = new Storyboard();
        Storyboard.SetTarget(d, grid2);
        Storyboard.SetTargetProperty(d, new PropertyPath("Height"));
        s.Children.Add(d);
        s.Begin();
    }

Answer 2

这似乎不是一件明智的事情，这样的网格动画看起来很糟糕，因为它不在合成器上，但是：

private void grid0_Tap(object sender, RoutedEventArgs e)
{
    this.LayoutRoot.RowDefinitions[2].Height = new GridLength(0);
}

private void grid1_Tap(object sender, RoutedEventArgs e)
{
    double fromHeight = this.LayoutRoot.RowDefinitions[2].ActualHeight;

    this.LayoutRoot.RowDefinitions[2].Height = new GridLength(3, GridUnitType.Star);
    this.LayoutRoot.Measure(new Size(this.Width, this.Height));

    double toHeight = this.LayoutRoot.RowDefinitions[2].DesiredSize.Height;

    MyStoryboard.From = fromHeight;
    MyStoryboard.To = toHeight;
    MyStoryboard.Begin();
}

WP中的动画网格行高度更改

2 个答案: