WPF / Silverlight Countdown Timer and Time Ticker TextBlock

In one of my applications I had to display a timer for all the items in a ListView, i.e., given the last update time of an item I required to display the time elapsed since the update time and update it after every second. In a classic application the solution would have been to add a timer control to the host form and update each elapsed time value at each tick (second) of the timer.

However in WPF/Silverlight  we can easily achieve this by creating a custom control inheriting it from the TextBlock control. The custom control defines a TimeSpan property that holds the time elapsed (or time remaining in case of count down) and binds it to the TextBlock.Text property. The TimeSpan is updated every second and thus the Text property displays the updated value.

Image: Countdown Timer and Time Ticker Demo using TimerTextBlock control.

The control uses System.Threading.Timer object for providing updates. The control initializes a static Timer object with  an interval of one second and the TimerCallback delegate that is raised after the provided interval. Also the control defines a private static event OnTick that is raised in the callback method.

        private static event EventHandler OnTick;
        private static Timer _UpdateTimer = new Timer(new TimerCallback(UpdateTimer), null, 1000, 1000);

        private static void UpdateTimer(object state)
        {
            EventHandler onTick = OnTick;
            if (onTick != null)
                onTick(null, EventArgs.Empty);
        }

The control subscribes the OnTick event while loading to receive the event and unsubscribes the event while unloading. Also the control binds the TimeSpan property with TextBlock.Text property. Thus the TextBlock.Text property displays the updated TimeSpan value formatted according to the provide TimeFormat.

        private void Init()
        {
            Loaded += new RoutedEventHandler(TimerTextBlock_Loaded);
            Unloaded += new RoutedEventHandler(TimerTextBlock_Unloaded);
        }


        void TimerTextBlock_Loaded(object sender, RoutedEventArgs e)
        {
            Binding binding = new Binding("TimeSpan");
            binding.Source = this;
            binding.Mode = BindingMode.OneWay;
            binding.StringFormat = TimeFormat;

            SetBinding(TextProperty, binding);           

            _UpdateTimeInvoker = new Invoker(UpdateTime);

            OnTick += new EventHandler(TimerTextBlock_OnTick);
        }

        void TimerTextBlock_Unloaded(object sender, RoutedEventArgs e)
        {
            OnTick -= new EventHandler(TimerTextBlock_OnTick);
        }

The TimeSpan is updated in the OnTick event handler.

        void TimerTextBlock_OnTick(object sender, EventArgs e)
        {
            Dispatcher.Invoke(_UpdateTimeInvoker);
        }

        private void UpdateTime()
        {
            if (IsStarted)
            {
                TimeSpan step = TimeSpan.FromSeconds(1);
                if (IsCountDown)
                {
                    if (TimeSpan >= TimeSpan.FromSeconds(1))
                    {
                        TimeSpan -= step;
                        if (TimeSpan.TotalSeconds <= 0)
                        {
                            TimeSpan = TimeSpan.Zero;
                            IsStarted = false;
                            NotifyCountDownComplete();
                        }
                    }
                }
                else
                {
                    TimeSpan += step;
                }
            }
        }

        private void NotifyCountDownComplete()
        {
            EventHandler handler = OnCountDownComplete;
            if (handler != null)
                handler(this, EventArgs.Empty);
        }

The control defines additional properties for manipulating and customizing the output. The dependecy property IsStarted is used to start/stop the timer. The dependency property IsCountDown is used to specify the behavior whether to increase or decrease the TimeSpan at each tick. Also the control defines the dependency property TimeFormat for displaying the time elapsed in a specific format. The TimeSpan class accepts 'c', 'g' and 'G' as standard format specifiers and formats the output using the common specifier 'c' if none is provided. Also the control defines an event OnCountDownComplete that is raised when the IsCountDown property is set and the TimeSpan value reaches zero.


In order to use the control from XAML, declare the custom XAML namespace and map it to the library that defines the control.

xmlns:kh="clr-namespace:KoderHack.WPF.Controls;assembly=KoderHack.WPF.Controls"

Once the library is available, you can declare the type as follows;

<kh:TimerTextBlock x:Name="ttbCountDown" IsCountDown="True" TimeSpan="00:00:59" IsStarted="True" Width="180" HorizontalAlignment="Center" TextAlignment="Center" FontSize="24" Padding="10" OnCountDownComplete="ttbCountDown_OnCountDownComplete" />

CodeProject
Download Demo and Source