ViewModel 中 TextBlock 的文本更改时运行动画

Question

我正在按照 MVVM 模式制作 WPF 应用程序。我有一个按钮和文本块。 TextBlock 仅当其文本不为空时才显示。应用程序启动时，文本为空，不显示文本块。当我单击按钮时，示例文本被设置并显示文本块。当我再次单击按钮时，文本设置为空并且文本块隐藏。

现在我想要的是，当设置文本时，开始动画（淡入淡出）不透明度在 5 秒内从 0 变为 1。

这是我的 XAML

<TextBlock Text="{Binding StatusMessage}" Visibility="{Binding IsStatusMessageVisible}" />
<Button Content="UpdateText" Command="{Binding UpdateTextCommand}" />

这是我的 ViewModel。

    private string _statusMessage;
    public string StatusMessage
    {
        get { return _statusMessage ?? (_statusMessage = string.Empty); }
        set
        {
            _statusMessage = value;
            NotifyOfPropertyChange(() => IsStatusMessageVisible);
            NotifyOfPropertyChange(() => StatusMessage);
        }
    }

    public System.Windows.Visibility IsStatusMessageVisible
    {
        get
        {
            return (string.IsNullOrEmpty(StatusMessage))
                ? System.Windows.Visibility.Collapsed
                : System.Windows.Visibility.Visible;
        }
    }

    public void UpdateText()
    {
        if (string.IsNullOrEmpty(StatusMessage))
            StatusMessage = Properties.Resources.WaitMessageStatus;
        else
            StatusMessage = string.empty;
    }

我只想在设置 StatusMessage 文本时运行动画。

Answer 1

请按照以下步骤操作：

1. 在 ViewModel 中声明 TextChanged 事件
2. 在 StatusMessage 属性的 set 方法中，在“_statusMessage = value;”行之前引发 TextChanged 事件 if (_statusMessage != value && !string.IsNulOrEmpty(value));
3. 在 XAML 中，创建一个 StoryBoard 来更改 TextBlock 的不透明度
4. 在 XAML 中，将 ControlStoryBoardBehavior 添加到 TextBlock，然后选择 TextChanged 事件和 StoryBoard

Answer 2

在

TextChanged

中的

TextBlock

上运行动画的一种方法如下：

 <TextBlock
        Text="{Binding MyText, NotifyOnTargetUpdated=True}">
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Binding.TargetUpdated">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="(TextBlock.Opacity)"
                            From="0.0"
                            To="1.0"
                            Duration="0:0:0.300" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>

注意：此代码仅用于学习目的：动画本身不是很有用或很好。

Answer 3

首先，删除 ViewModel 上的“可见性”属性，它不属于那里......它应该是一个布尔值。然后，为您的

TextBlock

创建样式。在该样式中，添加

DataTrigger

以绑定到布尔值“IsVisible”属性。在

DataTrigger

内，创建一个故事板：

<DataTrigger.EnterActions>
    <BeginStoryboard>
        <Storyboard>
            <!--Animation code in here /-->
        </Storyboard>
    </BeginStoryboard>
</DataTrigger.EnterActions>

有关如何制作不透明动画的示例，只需 Google 即可...但这是一种方法