Wpf - 自下而上的动画高度 [英] Wpf - Animate height from bottom up

问题描述

我正在尝试创建与 Skypes 通知风格相似的内容，但在动画方面遇到了一些问题.

I am trying to create something similar in style to Skypes notifications but am having some problems with the animation.

我希望整个窗口的顶部和底部都有一个边框，然后中间的内容会随着它推动"边框而增长.我设法创造了一些几乎可以满足我想要的东西，但是它从上到下生长，我希望它与底部边框文具一起向上推.

I would like the entire window to appear with a border at the top and bottom and then for the content in the middle to grow "pushing" the borders with it. I have managed to create something that does almost what I want however it grows from the top down where as I would like it to push up with the bottom border stationery.

我在想要出现的中间部分使用以下动画

I am using the following animation on the middle section that I would like to appear

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

有什么想法吗?谢谢

XAMl 的其余部分:

Rest of the 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>

推荐答案

您所看到的行为由包含您的 网格的 UIElement 决定.

The behavior you are seeing is being determined by the UIElement that contains your <Grid Name="notificationPanel"> grid.

如果将此网格放置在高度设置为自动"的元素内，它将从上到下动画，这不是您想要的.

If this Grid is placed inside an element with the height set to 'Auto', it will animate from the top down, which is not what you want.

如果将此网格放置在具有固定高度或高度设置为 * 的容器内，并且您已将notificationPanel"网格的 VerticalAlignment 设置为底部"，那么您将获得正确的动画行为，随着您的contentGrid"长大并向上推动顶部边框，而底部边框保持静止.

If this Grid is placed inside a container with either a fixed height, or the height set to *, and you have set the VerticalAlignment of your 'notificationPanel' Grid to 'Bottom', then you will get the correct animation behavior, with your 'contentGrid' growing up and pushing up the top border also, while the bottom border remains stationary.

这是我花了很长时间来学习 WPF 的其中一件事:) 包含元素通常控制其子元素的行为和/或外观.

It's one of those things about WPF that took me a long time to learn :) The containing element often controls the behavior and/or appearance of its child elements.

这篇关于Wpf - 自下而上的动画高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！