Wpf - анимация высоты снизу вверх

Question

Я пытаюсь создать что-то похожее по стилю на уведомления Скайпов, но у меня возникают некоторые проблемы с анимацией.

Мне бы хотелось, чтобы все окно отображалось с границей вверху и внизу, а затем чтобы содержимое в середине увеличивалось, "расталкивая" границы с ним. Мне удалось создать что-то, что делает почти то, что я хочу, но оно растет сверху вниз, где, как я хотел бы, чтобы оно двигалось вверх с помощью канцелярских принадлежностей с нижней границей.

Я использую следующую анимацию в средней части, которую я хотел бы видеть

<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>

Answer 1

Поведение, которое вы видите, определяется элементом UIElement, содержащим вашу сетку <Grid Name="notificationPanel">.

Если эта сетка находится внутри элемента с высотой, установленной на «Авто», она будет анимироваться изсверху вниз, а это не то, что вам нужно.

Если эта Сетка находится внутри контейнера с фиксированной высотой или с высотой, установленной на *, и вы установили для VerticalAlignment вашей сетки уведомлений значение«Bottom», тогда вы получите правильное поведение анимации, при этом ваша «contentGrid» будет расти и поднимать верхнюю границу, а нижняя граница останется неподвижной.

Это одна из тех вещей, которая заняла WPFмне долго учиться :) Содержащий элемент часто контролирует поведение и / или внешний вид его дочерних элементов.

Answer 2

Я не получил ваш вопрос точно, но из вашего вопроса я понял, что в настоящее время вы можете анимировать высоту contentGrid от 0 до 15, которая идет снизу вверх, и вы также хотите сделать ее сверху вниз, чтобы вы моглипопробуйте следующий код

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

Вы также можете попробовать AutoReverse = "True", если вы хотите анимировать высоту от 0 до 15 и обратно до 0.

Если что-то еще вы ожидаете в этом ответепожалуйста, объясните свой вопрос более четко.