wpf – MVVM中的故事板动画

2023年3月18日 370次阅读

我试图淡化一个文本块,然后在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是一个具有调用PropertyChanged的setter的属性.我想我希望文本固定为“你的保存是成功的”,但无论如何我希望viewmodel能够做一些使文本块淡入然后再出来的东西,并在用户再次保存时重复.我需要做什么？

编辑(我不能自己回答8小时)：
不得不将NotifyOnTargetUpdated添加到绑定中,现在它会淡入淡出：

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

我现在根据Jakob的答案得到了一个TextBox(但是将EventTrigger更改为Binding.TargetUpdated),一个像上面这样的TextBlock和一个像这样的TextBlock内联：

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

每次保存都会淡入淡出.奇怪的是,尽管使用相同的时间,模板化的人略微落后于其他两个.

最佳答案 尝试设置
DoubleAnimation.BeginTime.这样你就推迟了淡出动画的开始时间,这样它就不会在fadein结束之前启动.在以下示例中,文本在淡出之前显示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>
点赞