开发者

How to make a textblock blink in wpf?

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

How to make a textblock blink in 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 foregr开发者_高级运维ound color to change to the background color of the user control.

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

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>


To make a TextBlock blink when its Text Changes you can use ColorAnimationUsingKeyFrames. Text is binding to a property called 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)'.

Update

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

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜