WPF DoubleAnimation不会减少动画后的值

时间:2010-10-13 17:15:14

标签: wpf

考虑以下简单的WPF表单,我们将尝试为border1的高度设置动画:

alt text

这是border1的XAML:

<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,按钮可以正常工作,而border1内的TextBlock内容显示更改后的值。

现在问题是高度只能增加!例如,按1,高度增加到100,按3增加到300 按2不会改变高度。

如果我将初始border1的高度设置为例如400,则所有按钮都可以将其减小到100,200或300,但在此阶段之后,没有动画可以降低边框的高度。

我是否遗漏了一些关于WPF动画的明显观点?

2 个答案:

答案 0 :(得分:3)

更新

部分问题是DataTrigger中的故事板未被停止,因此(最后定义的DataTrigger)始终保持Height的“动画”值。

在退出操作中添加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>

答案 1 :(得分: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>