Seguimos ampliando el catálogo de tutoriales Silverlight, en esta ocasión vamos a realizar un pequeño proyecto con el cual podremos contabilizar el tiempo que transcurre durante por ejemplo una actividad, mostrándolo en pantalla. Mediante code-behind haremos toda la lógica del temporizador.

Autor:

Soy un pequeño desarrollador, tanto web como de escritorio, he hecho mis pinitos con Wordpress y CodeIgniter, y sigo muy de cerca las tecnologías Microsoft. Puedes seguirme en Twitter
Descarga Demostración

Introducción

Es posible que trabajando en cualquier proyecto por pequeño que sea, tengamos la necesidad de contar el tiempo que transcurre en una determinada actividad y mostrarlo por pantalla, para ello crearemos una pequeña aplicación en Silverlight y mediante code-behind haremos toda la lógica del temporizador.

Una vez nos hemos decidido a medir el tiempo, necesitamos, para nuestro temporizador los siguientes elementos:

  • Un botón para iniciar/detener.
  • Un campo de texto que nos indique el tiempo que está transcurriendo.
  • Un temporizador que actualice nuestro campo de texto (obvio, no?)

El apartado gráfico lo crearemos usando XAML, mientras que la lógica de nuesra aplicación (es decir, la parte que va a contar realmente) la crearemos usando C#

Paso 1: Creando la Interfaz

Lo primero será crear la interfaz en XAML, para lo que necesitamos únicamente un par de botones y una etiqueta. Para ello abrimos Visual Studio 2010 y creamos una solución de tipo Aplicación de Silverlight.

Una vez cargada la aplicación, se nos muestra en el editor de Visual Studio la ventana principal, dividida entre editor y código. Posteriormente agregamos las siguientes líneas entre <Grid x:Name=”LayoutRoot”…> y </Grid>:

<StackPanel>
<TextBlock x:Name="text" Width="130" Height="40" Margin="10" Text="00:00:00" TextAlignment="Right" FontSize="26"/>
<Button x:Name="Start" Width="80" Height="30" Content="Iniciar" Click="Start_Click"/>
</StackPanel>

El resultado de lo que acabamos de crear sería algo similar a esto:

temporizador

Como se aprecia, hemos agregado una etiqueta, un botón, los hemos metido en un StackPanel para que estén alineados, y hemos cambiado el tamaño de nuestro campo de texto en unas pocas líneas.

Paso 2: Agregando código C#

Una vez tenemos nuestro campo de texto, vamos a darle vida, pero primeramente tenemos que crear e inicializar nuestro timer, para lo cual vamos al fichero MainPage.xaml.cs, o bien hacemos click derecho en el editor y seleccionamos la opción Ver código.

En el constructor de MainPage, justo después de IntializeComponent(); incializamos nuestro contador:

//Agregamos un campo de tipo temporizador, y de carácter global para toda la clase, así como un entero que nos servirá para nuestro conteo
int i = 0;
System.Windows.Threading.DispatcherTimer temporizador;

public MainPage(){
InitializeComponent();
//Agregamos el siguiente código de control del temporizador.
temporizador = new System.Windows.Threading.DispatcherTimer();
temporizador.Interval = new TimeSpan(0, 0, 0, 1);
temporizador.Tick += new EventHandler(temporizador_Tick);
}

Como se aprecia, hemos inicializado nuestro temporizador, le hemos asignado un intervalo de 1 segundo (La opción de TimeSpan que hemos empleado tiene el formato: días, horas, minutos, segundos).

Por último hemos agregado un EventHandler que llamará a nuestra función con cada Tick del temporizador (es decir, cada 1 segundo).

Nuestra función tiene el siguiente formato:

void temporizador_Tick(object sender, EventArgs e)
{
i += 1;
int hour = i / 3600;
int min = i / 60;
int sec = i % 60;
text.Text = hour.ToString("00") + ":" + min.ToString("00") + ":" + sec.ToString("00");
}

Lo que estamos haciendo es dividir nuestro contador en horas, minutos y segundos, y mostrar el resultado en el campo que hemos creado para tal efecto.

Para que funcione, lo único que nos queda es crear el evento para el click del botón, que se crea, curiosamente, haciendo doble click en el botón.

private void Start_Click(object sender, RoutedEventArgs e)
{
temporizador.Start();
}

Veamos ahora cómo extender el temporizador…

Paso 3: Extendiendo nuestro temporizador

Una vez que tenemos nuestro temporizador, puede que queramos hacer dos cosas más:

  • Parar (o pausar) el contador.
  • Restaurarlo (volver a 0).

Para poder parar o pausar el contador, necesitamos conocer cuándo está funcionando nuestro temporizador, y realizar una acción acorde a ello, para ello agregamos el siguiente código:

private void Start_Click(object sender, RoutedEventArgs e)
{
if (temporizador.IsEnabled)     //Si está en funcionamiento, lo detenemos
{
temporizador.Stop();
Start.Content = "Iniciar";
}
else                            //Si no, lo iniciamos
{
temporizador.Start();
Start.Content = "Detener";
}
}

Ahora sólo nos queda agregar el botón con el que pararemos el reloj:

<Button x:Name="Clear" Width="80" Height="30" Margin="10" Content="Restaurar" Click="Clear_Click" />

Y asociado al click, agregamos el siguiente código, que restaura los valores por defecto del contador:

private void Clear_Click(object sender, RoutedEventArgs e)
{
temporizador.Stop();    //Paramos el contador
text.Text = "00:00:00"; //Ponemos el texto a 0
i = 0;                  //Restauramos el valor de nuestra variable
}

El resultado final se muestra a continuación:

temporizador

Recordad: Para ejecutar el ejemplo es necesario tener Silverlight instalado, y para editar el código fuente os recomendaría utilizar o bien Visual Studio 2010, o Expression Blend 4… aunque ya se sabe para gustos… editores :) .

Reflexión final

En este tutorial hemos visto cómo podemos, con pocas lineas de código, crear un contador. Hemos:

Lo mejor de este sistema es la total separación entre interfaz y funcionalidad, de tal manera que todo el apartado XAML se puede realizar mediante Blend, una herramienta más enfocada al diseño, y el desarrollo se puede preparar con Visual Studio, finalmente para enlazarlo solamente necesitamos la etiqueta x:Name, que se corresponde con los elementos mostrados en el apartado de C#.

Espero que os haya resultado provechoso… ¡Nos vemos en la próxima publicación!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (7 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Muy fácil e intuitivo Roberto, muchas gracias!

Me hubiese gustado un acabado visualmente más chulo del temporizador, pero entiendo que la finalidad es otra :) .

El ejemplo es muy didáctico. La idea es muy sencilla y nos invita a seguir profundizando en el tema. Gracias y … a por nuevos retos :)

Saludos amigo, he visto el tuto porque me gustad mucho la programacion, pero al realizarlo me sale un error o mejor dicho un bug.

Cuando la aplicacion llega a 1:59:59 bien deberia pasar a 2:00:00, pero sigue contando osea 1:60:00 y no corre normalmente.

http://lazy-boy.info/contador/Contador-RelojTestPage.aspx

aqui mi version del contador.

Hola Jose:

Ante todo, gracias por el feedback. En efecto el código tenía un pequeño bug a la hora de definir los ticks, es necesario corregirlo (en la línea 5 de la función temporizador_tick()) por int min = (i / 60) % 60;

Steven

Muy bueno este tuto, sencillo y muy útil.
Una consulta, como podria crear yo un temporizador pero sólo en un formulario C#.
Espero me puedas ayudar con eso.
De ante mano, muchas gracias!

ledy

Gracias me sirvio de mucho.