wpf storyboard for Chronometer - wpf

Question

i have a textblock that displays second from 60 to 1 and it's foreground animate from green to red:
my xaml is like bellow and work fine:
<TextBlock x:Name="timer_check_version" Text="60" HorizontalAlignment="Center" FontSize="18">
<TextBlock.Foreground>
<SolidColorBrush x:Name="tbBrush" Color="#1e7145"/>
</TextBlock.Foreground>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ChronometerStoryboard}"/>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
and my ChronometerStoryboard is:
<Storyboard x:Key="ChronometerStoryboard">
<ColorAnimation To="#b91d47" From="#1e7145"
Duration="0:0:59"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"/>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)">
<DiscreteStringKeyFrame KeyTime="0:0:1" Value="59"/>
<DiscreteStringKeyFrame KeyTime="0:0:2" Value="58"/>
<DiscreteStringKeyFrame KeyTime="0:0:3" Value="57"/>
<DiscreteStringKeyFrame KeyTime="0:0:4" Value="56"/>
<DiscreteStringKeyFrame KeyTime="0:0:5" Value="55"/>
<DiscreteStringKeyFrame KeyTime="0:0:6" Value="54"/>
<DiscreteStringKeyFrame KeyTime="0:0:7" Value="53"/>
<DiscreteStringKeyFrame KeyTime="0:0:8" Value="52"/>
<DiscreteStringKeyFrame KeyTime="0:0:9" Value="51"/>
<DiscreteStringKeyFrame KeyTime="0:0:10" Value="50"/>
......
......
......
......
<DiscreteStringKeyFrame KeyTime="0:0:51" Value="09"/>
<DiscreteStringKeyFrame KeyTime="0:0:52" Value="08"/>
<DiscreteStringKeyFrame KeyTime="0:0:53" Value="07"/>
<DiscreteStringKeyFrame KeyTime="0:0:54" Value="06"/>
<DiscreteStringKeyFrame KeyTime="0:0:55" Value="05"/>
<DiscreteStringKeyFrame KeyTime="0:0:56" Value="04"/>
<DiscreteStringKeyFrame KeyTime="0:0:57" Value="03"/>
<DiscreteStringKeyFrame KeyTime="0:0:58" Value="02"/>
<DiscreteStringKeyFrame KeyTime="0:0:59" Value="01"/>
</StringAnimationUsingKeyFrames>
</Storyboard>
the goal of above sample is to display a message to users for 60 seconds with TextBlock that counting down from 60 to 1,after 60 seconds the message and timer should be invisible and after some times according to background Threads the display of message and timer(TextBlock that counting down from 60 to 1) should be repeat,this may repeat for some times, all things work fine for first,but first the timer comes to 1,my message and timer collapsed for some minute(according to background threads) and when background threads completed i want to repeat the display of message and timer for 60 second again,but my problem is the timer value equals to 1 and timer Foreground equals to Red and no animated.

Answer 1

Apply AutoReverse and RepeatBeahvior attributes.
AutoReverse will make your storyboard goes exact reverse making your text color changing from Red to Green, and RepeatBehavior will make this to and fro color change continuing forever.
You can choose various RepeatBehavior settings according to your need.
<Storyboard x:Key="ChronometerStoryboard" AutoReverse="True" RepeatBehavior="Forever">
In reply to your comment :
"the visible and invisible of textblock may repeate forever and to time of invisible is random and after each visible it must start from 59 to 1 and it's foreground must start from green to red"
Use a Behavior called ControlStoryBoardAction which is present in Blend. And use it to play your storyboard.
Complete sample code might look like :
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="S32494473W.Chronometer"
x:Name="UserControl"
d:DesignWidth="632" d:DesignHeight="392">
<UserControl.Resources>
<Storyboard x:Key="ChronometerStoryboard">
<ColorAnimation To="#b91d47" From="#1e7145"
Duration="0:0:10"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="timer_check_version"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Visibility)" Storyboard.TargetName="timer_check_version">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="timer_check_version">
<DiscreteStringKeyFrame KeyTime="0:0:1" Value="10"/>
<DiscreteStringKeyFrame KeyTime="0:0:2" Value="9"/>
<DiscreteStringKeyFrame KeyTime="0:0:3" Value="8"/>
<DiscreteStringKeyFrame KeyTime="0:0:4" Value="7"/>
<DiscreteStringKeyFrame KeyTime="0:0:5" Value="6"/>
<DiscreteStringKeyFrame KeyTime="0:0:6" Value="5"/>
<DiscreteStringKeyFrame KeyTime="0:0:7" Value="4"/>
<DiscreteStringKeyFrame KeyTime="0:0:8" Value="3"/>
<DiscreteStringKeyFrame KeyTime="0:0:9" Value="2"/>
<DiscreteStringKeyFrame KeyTime="0:0:10" Value="1"/>
</StringAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Visibility)" Storyboard.TargetName="timer_check_version">
<DiscreteObjectKeyFrame KeyTime="0:0:10" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Button Content="Chronometer" Height="32" Margin="272,8,272,0" VerticalAlignment="Top" Click="Button_Click">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ControlStoryboardAction Storyboard="{StaticResource ChronometerStoryboard}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<TextBlock x:Name="timer_check_version" Width="100" Background="AliceBlue" Text="10" Visibility="Hidden" HorizontalAlignment="Center" FontSize="18" VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="tbBrush" Color="#1e7145"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</UserControl>

Answer 2

i change my trigger to :
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ChronometerStoryboard}" Name="st1"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="st1"/>
</Trigger.ExitActions>
</Trigger>
and bind TextBlock.IsEnabled to it's Parent.Visibility and solved my problem.