WPF MVVM属性更改动画

Question

我正在寻找一种干净的方式来启动一个具有动态值的动画.基本上我想做一个动画,其中一个元素根据另一个元素的数据改变宽度.假设我有一个文本属性为绑定的TextBlock.当这个属性改变时,我想要一个视觉元素说一个Rectangle,为了我们的目的,做一个DoubleAnimation,将宽度从前一个值改为新值.

如果可能的话,我试图远离将代码放在我的视图中.我已经研究过DataTriggers,但它们似乎要求你知道它的价值,例如Enum.在我的情况下,只是需要触发故事板的值更改,动画需要从当前(上一个)值开始,并很好地移动到新值.

有任何想法吗.也许我只是错过了一处房产.

Answer 1

这是我最终得到的解决方案.要根据我的ViewModel中的数据执行动画,我使用了DataTrigger.下面是我的控件风格.

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