Paul Yanez

This is part 6 in our series of building a Hulu inspired video player. In this tutorial we will be building the slider time display control.

We will take the static design of UI design

1- Replace a slider of type hSlider
2- Replace the design elements

View all parts of the tutorial
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

XAML code

		<TextBlock x:Name="current" Height="23" HorizontalAlignment="Right" Margin="0,0,229,1" VerticalAlignment="Bottom" Width="59" TextWrapping="Wrap" Foreground="#FFFCFCFC" FontSize="10.667" TextAlignment="Right"/>
		<TextBlock x:Name="total" HorizontalAlignment="Right" Margin="0,0,158,0" Width="61" FontSize="10.667" Foreground="#FFFCFCFC" TextWrapping="Wrap" Height="24" VerticalAlignment="Bottom"/>

C# code

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public double barSize;
		System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();

		public hulu_player()
		{
			InitializeComponent();
			myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500);
            myDispatcherTimer.Tick += new EventHandler(setTimeControl);
            myDispatcherTimer.Start();
		}

		private void setTimeControl(object o, EventArgs sender)
		{
			current.Text = String.Format("{0:00}:{1:00}:{2:00}", mp.Position.Hours, mp.Position.Minutes, mp.Position.Seconds);
		}

		private void downloadProgressHandler(object sender, System.Windows.RoutedEventArgs e)
		{

			total.Text = String.Format("{0:00}:{1:00}:{2:00}", mp.NaturalDuration.TimeSpan.Hours, mp.NaturalDuration.TimeSpan.Minutes, mp.NaturalDuration.TimeSpan.Seconds);
		}
	}
}