MVVM中的故事板动画

Question

MVVM中的故事板动画

4

我正在尝试使用MVVM将文本块淡入淡出以显示成功消息，但我无法使其再次淡出。我查看了此内容：WPF MVVM Property Change Animation，但并不是很理解。

这是样式：

 <Style TargetType="TextBlock" x:Key="fadeinout">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Binding.TargetUpdated">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(TextBlock.Opacity)" From="0.0" To="1.0" Duration="0:0:5"/>
                        <DoubleAnimation Storyboard.TargetProperty="(TextBlock.Opacity)" From="1.0" To="0.0" Duration="0:0:5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

在视图中

<TextBlock Text="{Binding Path=SuccessMessage}" Style="{StaticResource fadeinout}"  Width="60"/>

在视图模型中，保存后我会执行以下操作：

SuccessMessage = "Success";

这里的SuccessMessage是一个具有setter方法调用PropertyChanged的属性。我认为我想把文本更改为“您的保存已成功”，但无论如何，我希望viewmodel能够执行某些操作，使文本块淡入然后再淡出，并在用户再次保存时重复播放。我需要做什么？

编辑（我无法自行回答8个小时）：必须向绑定添加NotifyOnTargetUpdated，现在它可以淡入淡出：

 <TextBlock Text="{Binding SuccessMessage, NotifyOnTargetUpdated=True}" Style="{StaticResource fadeInOut}"

我现在已经有一个文本框，如Jakob的回答所述（但将EventTrigger更改为Binding.TargetUpdated），一个像上面那样的文本块和一个行内文本块，如下所示：

<TextBlock Text="{Binding SuccessMessage, NotifyOnTargetUpdated=True}" Opacity="0" x:Name="tbMessage" Width="60" HorizontalAlignment="Left">
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Binding.TargetUpdated">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="tbMessage" Storyboard.TargetProperty="Opacity" To="1" BeginTime="0:0:0" Duration="0:0:1" />
                        <DoubleAnimation Storyboard.TargetName="tbMessage" Storyboard.TargetProperty="Opacity" To="0" BeginTime="0:0:3" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>

所有三个元素都会随着每次保存而淡入和淡出。奇怪的是，尽管使用相同的时间设置，模板元素略微滞后于其他两个元素。

- Nix

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jakob Christensen · Accepted Answer

尝试设置 DoubleAnimation.BeginTime。这样可以延迟淡出动画的开始时间，以便在淡入完成之前不会开始。在下面的示例中，文本显示了2秒钟，然后淡出：

<DoubleAnimation Storyboard.TargetProperty="(TextBlock.Opacity)" From="0.0" To="1.0" Duration="0:0:5" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetProperty="(TextBlock.Opacity)" From="1.0" To="0.0" Duration="0:0:5" BeginTime="0:0:7" />

或者你可以使用AutoReverse，但是这样你就无法控制文本在淡出之前显示多长时间。

更新：

似乎使用事件触发器实现TextBlock淡入淡出存在一些问题，因为TextBlock没有任何适合在触发器中使用的事件。以下是一个可行的示例，我使用了TextBox代替TextBlock。你总是可以将TextBox样式化为看起来像TextBlock，即使TextBlock更轻量级：

<TextBox Text="{Binding SuccessMessage}" Opacity="0" x:Name="textBoxMessage" >
    <TextBox.Triggers>
        <EventTrigger RoutedEvent="TextBoxBase.TextChanged">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                                Storyboard.TargetName="textBoxMessage" 
                                Storyboard.TargetProperty="Opacity"
                                To="1" 
                                BeginTime="0:0:0" Duration="0:0:1"
                                />
                    <DoubleAnimation 
                                Storyboard.TargetName="textBoxMessage" 
                                Storyboard.TargetProperty="Opacity"
                                To="0" 
                                BeginTime="0:0:3" Duration="0:0:1"
                                />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </TextBox.Triggers>
</TextBox>