如何在WPF中让文本块闪烁?

18

我正在使用WPF创建一个仪表板,其中包含多个关键绩效指标,每个指标都由三个值组成。

alt text

每当这些值发生变化时,我想让用户控件闪烁5秒钟。我想要将控件的背景色切换为文本块的前景色,并将文本块的前景色更改为用户控件的背景色。

对于整个WPF动画,这对我来说都是新的知识领域,所以任何帮助都将不胜感激!

我的用户控件如下:

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

1个回答

36

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

当TextBlock的文本改变时,这将使其闪烁。请注意,在使用blinkAnimation之前,必须在TextBlock上显式设置Background和Foreground,否则您将收到System.InvalidOperationException: 'Background' property does not point to a DependencyObject in path '(0).(1)'。

更新

要从代码后台启动此动画,可以执行以下操作。

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

假设我想调用动画使其闪烁...我该怎么做? - mattruma
假设我正在为多个TextBlock使用同一个Storyboard。如果我调用blinkAnimation.Begin();,它们都会闪烁吗?如果我只想让特定的TextBlock闪烁怎么办? - epalm

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接