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

问题描述

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

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.

如果可能，我尽量避免将代码放在我的视野中.我已经研究过 DataTriggers，但它们似乎要求您知道该值是什么，例如 Enum.在我的情况下，它只是需要触发故事板的值更改，动画需要从当前(前一个)值开始，然后很好地移动到新值.

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.

推荐答案

这是我最终得到的解决方案.为了根据我的 ViewModel 中的数据制作动画，我使用了 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屋！