WPF DoubleAnimation не уменьшает значение после анимации

Question

Рассмотрим следующую простую форму WPF, мы попробуем анимировать Высота border1:

Это XAML для border1:

<Border Margin="3" BorderBrush="Black" BorderThickness="1" Name="border1">
    <Border.Style>
        <Style>
            <Setter Property="Control.Height" Value="50" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding X}" Value="1">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="100" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
                <DataTrigger Binding="{Binding X}" Value="2">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="200" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
                <DataTrigger Binding="{Binding X}" Value="3">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="300" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <TextBlock Text="{Binding X}" />
</Border>

X является нормальным DependencyProperty, и кнопки работают без проблем, а содержимое TextBlock внутри border1 показывает измененное значение.

Теперь проблема в Высоте может быть только Увеличение ! Например, при нажатии 1 высота увеличивается до 100, при нажатии 3 она увеличивается до 300 , но при нажатии 2 высота не изменяется.

Если я установлю начальную высоту border1, например, на 400, все кнопки могут уменьшить ее до 100, 200 или 300, но после этого этапа никакая анимация не сможет уменьшить высоту границы.

Я упускаю какой-то очевидный момент, касающийся анимации WPF?

Answer 1

Обновление

Частично проблема заключается в том, что раскадровка в DataTrigger не останавливается, поэтому (последний определенный DataTrigger) всегда содержит «оживленное» значение высоты.

Добавление StopStoryboard в действие выхода исправляет его часть. Теперь вы можете снова переключаться между всеми тремя высотами ... но анимация всегда начинается с базового значения высоты (что явно не то, что вы хотите). Вы хотите, чтобы он начинался с того места, где он был установлен в последний раз.

Следующая статья MSDN довольно хорошо объясняет вторую проблему: http://msdn.microsoft.com/en-us/library/aa970493.aspx

Хорошее решение -

Кажется, что EventTriggers на ваших трех кнопках работают лучше и не имеют проблем, с которыми сталкивается DataTrigger (плюс вам даже больше не нужно свойство зависимости 'X'!)

<Border Margin="3" BorderBrush="Black" BorderThickness="1" Name="border1"> 
    <Border.Style> 
        <Style> 
            <Setter Property="Control.Height" Value="50" /> 
        </Style> 
    </Border.Style> 
    <TextBlock Text="{Binding X}" /> 
</Border> 

и

<StackPanel Orientation="Horizontal">
    <Button Content="1" Width="50">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="border1" Storyboard.TargetProperty="Height" To="100"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
    <Button Content="2" Width="50">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="border1" Storyboard.TargetProperty="Height" To="200"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
    <Button Content="3" Width="50">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="border1" Storyboard.TargetProperty="Height" To="300"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</StackPanel>

Answer 2

Должен быть более простой способ сделать это, но я не могу вспомнить, есть ли в данный момент.

В противном случае это будет работать.Вы можете установить ExitAction ваших триггеров, чтобы установить значение по умолчанию.Сделайте это, используя DoubleAnimation без значения To.

, т. Е.

<DataTrigger Binding="{Binding X}" Value="1">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.2" To="100" />
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
    <DataTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.2" />
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.ExitActions>
</DataTrigger>