如何使文本块在 wpf 中闪烁？

How to make a textblock blink in wpf?

提问by mattruma

I am creating a dashboard in WPF with a bunch of key performance indicators, each of which consists of three values.

我正在 WPF 中创建一个带有一堆关键性能指标的仪表板，每个指标都包含三个值。

Whenever the values change I would like the user control to blink for 5 seconds. I would like to make the background color of the control to switch the foreground color of the textblock, and the textblock foreground color to change to the background color of the user control.

每当值发生变化时，我都希望用户控件闪烁 5 秒钟。我想让控件的背景色切换textblock的前景色，将textblock的前景色更改为用户控件的背景色。

This whole WPF animation is new to me, so any help would be much appreciated!

整个 WPF 动画对我来说都是新的，所以任何帮助将不胜感激！

My user control looks like:

我的用户控件如下所示：

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="10" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="10" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <TextBlock x:Name="TitleTextBlock" Text="Title" FontSize="32" HorizontalAlignment="Center" Grid.Row="0" FontFamily="OCR-A II" Foreground="White" VerticalAlignment="Bottom" />
    <TextBlock x:Name="Value1TextBlock" Text="0" FontSize="192" HorizontalAlignment="Center" Grid.Row="2" FontFamily="OCR-A II" VerticalAlignment="Center" Foreground="White" />
    <TextBlock x:Name="Value2TextBlock" Text="0" FontSize="32" HorizontalAlignment="Center" Grid.Row="4" FontFamily="OCR-A II" Foreground="White" VerticalAlignment="Top" />

</Grid>

回答by Fredrik Hedblad

To make a TextBlock blink when its Text Changes you can use ColorAnimationUsingKeyFrames. Text is binding to a property called TextTitle.

要使 TextBlock 在其文本更改时闪烁，您可以使用 ColorAnimationUsingKeyFrames。文本绑定到名为 TextTitle 的属性。

<Window.Resources>
    <Storyboard x:Key="blinkAnimation" Duration="0:0:5" >
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)"
                                      Storyboard.TargetName="TitleTextBlock"
                                      AutoReverse="True">
            <ColorAnimationUsingKeyFrames.KeyFrames>
                <DiscreteColorKeyFrame KeyTime="0:0:0" Value="White"/>
                <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Black"/>
                <DiscreteColorKeyFrame KeyTime="0:0:2" Value="White"/>
                <DiscreteColorKeyFrame KeyTime="0:0:3" Value="Black"/>
                <DiscreteColorKeyFrame KeyTime="0:0:4" Value="White"/>
            </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>

        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                      Storyboard.TargetName="TitleTextBlock"
                                      AutoReverse="True">
            <ColorAnimationUsingKeyFrames.KeyFrames>
                <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Black"/>
                <DiscreteColorKeyFrame KeyTime="0:0:1" Value="White"/>
                <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Black"/>
                <DiscreteColorKeyFrame KeyTime="0:0:3" Value="White"/>
                <DiscreteColorKeyFrame KeyTime="0:0:4" Value="Black"/>
            </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Grid Name="grid" Background="Black">
    <TextBlock x:Name="TitleTextBlock" Text="{Binding TextTitle, NotifyOnTargetUpdated=True}" FontSize="32" HorizontalAlignment="Center" Grid.Row="0" FontFamily="OCR-A II" Foreground="White" VerticalAlignment="Bottom" Background="Black">
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Binding.TargetUpdated">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <StaticResource ResourceKey="blinkAnimation"/>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </TextBlock.Triggers>    
    </TextBlock>
</Grid>

This will make the TextBlock blink everytime its Text changes. Note that you must set Background and Foreground explicitly on the TextBlock before using the blinkAnimation, otherwise you'll recieve a System.InvalidOperationException: 'Background' property does not point to a DependencyObject in path '(0).(1)'.

这将使 TextBlock 每次其 Text 更改时闪烁。请注意，在使用blinkAnimation 之前，您必须在TextBlock 上显式设置Background 和Foreground，否则您将收到System.InvalidOperationException: 'Background' 属性不指向路径'(0).(1)' 中的DependencyObject。

Update

更新

To start this animation from code behind you can do this.

要从后面的代码开始这个动画，你可以这样做。

Storyboard blinkAnimation = TryFindResource("blinkAnimation") as Storyboard;
if (blinkAnimation != null)
{
    blinkAnimation.Begin();
}