WPF MVVM属性更改动画 [英] WPF MVVM Property Change Animation

问题描述

我要寻找一个干净的方式开始的动画，将有动态值。基本上我想要做的其中元素宽度变化基于另一个单元的数据的动画。说我有一个TextBlock这就是Text属性绑定。当此属性更改我想要的视觉元素说一个Rectangle为了我们做了一个DoubleAnimation是改变从previous值宽度为新值。

I am looking for a clean way to start an animation that will have dynamic values. Basically I want to do an animation where an element changes width based on the data of another element. Say I have a TextBlock that's Text Property is Binding. When this property changes I want a visual element say a Rectangle for our sake to do a DoubleAnimation changing the width from previous value to the new value.

我试图远离将code中如果有可能我的观点了。我看着DataTriggers但他们似乎需要你知道什么价值将如枚举。在我的情况下，它只是值变更需要触发故事板和动画就需要开始在当前（previous）值，很好地移动到新的价值。

I am trying to stay away from putting code in my view if possible. I've looked into DataTriggers but they seem to require that you know what the value would be such as an Enum. In my case it is just the value changing that needs to trigger a storyboard and the animation would need to start at the current(previous) value and move nicely to the new value.

任何想法。也许我只是错过了一个属性。

Any ideas. Maybe I just missed a property.

推荐答案

下面是我最终的解决方案。要根据我的视图模型我使用了DataTrigger数据做动画。下面是我的风格的控制。

Here is the solution I ended up with. To do the Animation based on data in my ViewModel I used a DataTrigger. Below is my Style for the control.

<Style TargetType="Grid" x:Key="DetailRotation" >
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=AnimationState}" Value="New">
            <DataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="EndAnimation" />
                <BeginStoryboard Name="NewAnimation">
                    <Storyboard>
                        <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,30,0,0" To="0,0,0,0" Duration="0:0:1" />
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>

            </DataTrigger.ExitActions>

        </DataTrigger>
        <DataTrigger Binding="{Binding Path=AnimationState}" Value="End">
            <DataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="NewAnimation" />
                <BeginStoryboard Name="EndAnimation">
                    <Storyboard>
                        <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,0,0,0" To="0,-20,0,0" Duration="0:0:1"/>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>

    </Style.Triggers>
</Style>

这篇关于WPF MVVM属性更改动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！