Wpf - 从底部向上动画高度

Question

我正在尝试创建类似Skype通知的风格，但是动画方面遇到了一些问题。我希望整个窗口在顶部和底部都有一个边框，然后中间的内容会随着增长而“推”动边框。我已经成功地创建了几乎符合我的要求的东西，但它从上往下增长，而我希望它能够向上推动保持底部边框不动。我正在使用以下动画来呈现中间部分。

<DoubleAnimation 
     Storyboard.TargetName="contentGrid" 
     BeginTime="00:00:0.2" 
     Storyboard.TargetProperty="(FrameworkElement.Height)" 
     From="0" 
     Duration="0:0:0.5"/>

有什么想法吗？谢谢。

XAML的其余部分：

<Grid Name="notificationPanel">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>        
    <Grid.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="contentGrid" Storyboard.TargetProperty="(FrameworkElement.Height)" From="0" Duration="0:0:0.5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Grid Grid.Row="0" Background="CornflowerBlue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <TextBlock Name="notificationTitle" Padding="5" FontSize="14" Foreground="White">
            Call Manager - Incoming Call
        </TextBlock>

        <Path Name="closeButton"  Grid.Column="1" Margin="5,10,10,0" Fill="White" Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " />
    </Grid>

    <Grid Name="contentGrid" Grid.Row="1" Background="White" Height="15" VerticalAlignment="Bottom" >  
    </Grid>

    <Rectangle Grid.Row="2" Fill="CornflowerBlue" Height="5" />
</Grid>

- gr-eg

---

你把VerticalAlignment设置为底部了吗？ - softwaredeveloper

@softwaredeveloper 我试过了，似乎没有什么区别。 - gr-eg

你能发一下你的Xaml吗？这可能与父容器有关，而不是你的动画。 - Dan Puzey

如果您正在使用Canvas，您还可以同时动画化元素的位置。 - softwaredeveloper

由于您正在使用网格，因此您还可以在此动画中使用翻译转换。让我为您提供这个动画。 - softwaredeveloper

Answer 1

您所见到的行为是由包含<Grid Name="notificationPanel">网格的UIElement决定的。

如果此网格放置在高度设置为“自动”的元素内，则它将从上往下动画，这不是您想要的。

如果此网格放置在具有固定高度或高度设置为*的容器中，并且您已将“notificationPanel”网格的VerticalAlignment设置为“Bottom”，则您将获得正确的动画行为，使得您的“contentGrid”向上增长并推动顶部边框，而底部边框保持不动。

这是关于WPF的一个让我学习了很长时间的事情 :) 包含元素通常控制其子元素的行为和/或外观。

- Stewbob

---

这个完美地解决了，谢谢！我之前打算同时使用两个动画，一个用来动态改变高度，另一个用来动态改变位置，但是当这两个动画同时运行时，底部会有一点“抖动”，效果不是很完美。现在这种方式更加流畅，你知道了就非常显而易见！ - gr-eg

Answer 2

我没有完全理解你的问题，但是从你的问题中我理解到你目前可以将contentGrid的高度从0动画到15，这是从底部到顶部的，而你也想让它从顶部到底部，那么你可以尝试以下代码：

<DoubleAnimation    Storyboard.TargetName="contentGrid"
                    Storyboard.TargetProperty="(FrameworkElement.Height)" 
                    To="0" 
                    Duration="0:0:0.5"/>

如果你想将高度从0动画到15，然后再返回0，你也可以尝试使用AutoReverse="True"。

如果您对此答案有其他期望，请更清楚地解释您的问题。

- Mitesh