Como mostraba en el post anterior ya tenemos un poco la parte lógica del cronómetro implementada y de cierta forma nos interesa probar, para ello agregaremos un nuevo proyecto de tipo Aplicación de Windows Phone a la solución y le nombraremos «Prueba», como de costumbre debemos tener una página Mainpage.xaml que crea la plantilla de forma predeterminada y que emplearemos para experimentar con nuestro componente.

La primera modificación que haremos será la de agregar la referencia al componente en el nuevo proyecto, para ello haremos clic derecho sobre la carpeta «References» y a continuación sobre «Agregara referencia…», ahora hacemos clic en la ficha «Proyectos» y veremos que aparece nuestro proyecto anterior, lo seleccionamos y finalmente aceptamos.

Una vez que tenemos la referencia podemos utilizar una instancia de la biblioteca, pero antes debemos agregar la referencia al namespace en nuestro archivo XAML lo que se hace agregando la siguiente instrucción:

xmlns:tc="clr-namespace:TimeCounterWP71;assembly=TimeCounterWP71"

En mi caso la biblioteca y el assembly se llaman TimeCounterWP71, no te preocupes mucho por esto ya que Visual Studio te ayudará.

Ahora vamos a crear una instancia del cronómetro mediante el siguiente código en el diccionario de recursos del control:

<UserControl.Resources>
    <tc:TimeCounter x:Key="Temporizador" />
</UserControl.Resources>

Ahora sólo nos queda diseñar una interfaz para las pruebas y para ello emplearemos el siguiente código XAML:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Source={StaticResource Temporizador}, Path=Hours}" />
    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Source={StaticResource Temporizador}, Path=Minutes}" />
    <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Source={StaticResource Temporizador}, Path=Seconds}" />
</Grid>

Como se puede ver, reutilizo el ContentPanel que genera la plantilla y empleando los Bindings adecuados obtengo 3 TextBlock’s con el valor de las horas, los minutos y los segundos transcurridos desde se inicia el cronómetro, ahora procedemos a ejecutar la aplicación y … oh oh, los cronómetros se muestran en 0 y no ocurre nada, y esto es porque no hemos iniciado el reloj.

Bien, ahora haremos uso de nuestra imaginación y crearemos un par de imágenes para Iniciar, Pausar y Reiniciar el reloj y lo haremos mediante botones en la ApplicationBar. Asumo en este momento que sabes cómo agregar una imagen al proyecto y que debes cambiar en las propiedaes de las mismas la acción de compilación a «Contenido» para que la puedas usar en el ApplicationBar.

Bien, ahora descomentaremos el código XAML al final de nuestro UserControl (sí, el que está debajo de donde dice código de ejemplo bla bla bla) y lo modificaremos de la siguiente forma:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True">
        <shell:ApplicationBarIconButton IconUri="/Images/Play.png" Text="Iniciar" Click="ApplicationBarIconButton_Click"/>
        <shell:ApplicationBarIconButton IconUri="/Images/Pause.png" Text="Pausar" Click="ApplicationBarIconButton_Click"/>
        <shell:ApplicationBarIconButton IconUri="/Images/Reset.png" Text="Reiniciar" Click="ApplicationBarIconButton_Click"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Y por último, en un enfoque que no representa las mejores prácticas pero que sirve para entender la manipulación de los objetos que hay inherentes a la aplicación en el archivo de codebehind agregaremos el método siguiente:

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
    switch (((ApplicationBarIconButton)sender).Text)
    {
        case "Iniciar":
            ((TimeCounterWP71.TimeCounter)this.Resources["Temporizador"]).Start();
            break;
        case "Pausar":
            ((TimeCounterWP71.TimeCounter)this.Resources["Temporizador"]).Stop();
            break;
        case "Reiniciar":
            ((TimeCounterWP71.TimeCounter)this.Resources["Temporizador"]).Reset();
            break;
        default:
            MessageBox.Show("Error");
            break;
    }
}

Y ya sólo nos queda darle un mejor aspecto a nuestros controles y tendremos el cronómetro que queríamos al principio, el mío terriblemente feo (en el diseño me va muy mal definitivamente) quedó así: