MVVM 中的故事板动画 [英] Storyboard animation in MVVM

问题描述

我正在尝试先淡入淡出文本块以在 MVVM 中显示成功消息，但我无法让它再次淡出.我看了这个:WPF MVVM 属性更改动画但并没有真正遵循.这是样式:

I'm trying to fade a textblock in then out to show a success message in MVVM but I can't get it to fade out again. I looked at this: WPF MVVM Property Change Animation but don't really follow. here is the style:

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

在视图模型中，保存后我做:

in the view model, after the save I do:

SuccessMessage = "Success";

其中 SuccessMessage 是一个带有调用 PropertyChanged 的​​ setter 的属性.我想我希望将文本固定为您的保存成功"之类的内容，但无论如何我希望视图模型能够执行某些操作，使文本块淡入淡出，并在用户再次保存时重复.我需要做什么?

where SuccessMessage is a property with a setter that calls PropertyChanged. I think I want the text fixed to something like "Your save was successful" but in any case I want the viewmodel to be able to do something that makes the textblock fade in and then out again, and repeat if the user saves again. What do I need to do?

EDIT(我不能自己回答 8 小时):必须将 NotifyOnTargetUpdated 添加到绑定，现在它淡入淡出:

EDIT (I can't self answer for 8 hours): Had to add NotifyOnTargetUpdated to the binding and now it fades in and out:

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

根据 Jakob 的回答，我现在有一个 TextBox(但将 EventTrigger 更改为 Binding.TargetUpdated)，一个像上面这样的 TextBlock 和一个像这样内联的 TextBlock:

I've now got one TextBox as per Jakob's answer(but changed the EventTrigger to Binding.TargetUpdated), one TextBlock like the above and one TextBlock inline like this:

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

并且所有三个都在每次保存时淡入淡出.奇怪的是，尽管使用相同的时间，模板化的一个稍微落后于其他两个.

and all three fade in and out with each save. Weirdly the templated one lags slightly behind the other two despite using the same timings.

推荐答案

尝试设置 DoubleAnimation.BeginTime.这样你就可以推迟淡出动画的开始时间，这样它就不会在淡入完成之前开始.在以下示例中，文本在淡出之前显示 2 秒:

Try setting DoubleAnimation.BeginTime. That way you postpone the starting time of the fadeout animation so that it will not start before the fadein has finished. In the following example the text is shown for 2 seconds before fading out:

<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 但是你将无法控制在淡出之前显示文本的时间.

Alternatively you can use AutoReverse but then you will not be able to control how long to show the text before fading out.

更新:

事件触发器与 TextBlock 一起使用时似乎会出现一些问题，因为 TextBlock 没有任何可以在触发器中使用的适当事件.以下是我使用 TextBox 而不是 TextBlock 的工作示例.您始终可以设置 TextBox 的样式，使其看起来像 TextBlock，即使 TextBlock 更轻量级:

There seems to be some problems getting fading with event triggers to work with TextBlock because TextBlock does not have any appropriate events you can use in a trigger. The following is a working example where I have used TextBox instead of TextBlock. You can always style a TextBox so that it looks like a TextBlock even though TextBlock is more lightweight:

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

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