Windows Phone :Tips para Crear un app Temporizador

 

 

TemporizadorHola a todos! en este post les daré unos mega tips para lograr crear un app para Windows Phone: temporizador parte de la iniciativa “¿Quién se le mide?

 

De qué trata el reto? pueden consultar todos los detalles necesarios del ”Reto #1 Temporizador” aquí:

 

3073.cabezote-3

Lo primero que les quiero recomendar es que piensen la aplicación para que funcione en ambas plataformas (win8/phone) aunque la vayan a entregar en una sola de ellas, pero si hacen bien el trabajo el esfuerzo para hacerla en ambas será mínimo.

 

El reto enumera las siguientes características que analizaremos una a una con tips al respecto.

  • Que sea cronómetro (cuenta regresiva) y temporizador. El usuario puede escoger la modalidad
  • Que los caracteres sean grandes.
  • Que cuando la app esté corriendo ocupe toda la pantalla y mantenga la pantalla activa (que no se apague)
  • Que se pueda pausar, continuar y reiniciar
  • Que se le puedan configurar alertas cada X tiempo (el tiempo configurable por el usuario)
  • Que se le pueda configurar el color de fondo y el color de los caracteres
  • Que maneje el cambio de posición del dispositivo de horizontal a vertical (Tilt)
  • Que permita escoger el sonido de la alarma

 

Que sea cronómetro (cuenta regresiva) y temporizador. El usuario puede escoger la modalidad

Resumamos:

  • Temporizador: Cuenta regresiva
  • Cronómetro: Cuenta hacia adelante

Pueden haber muchas formas para alternar entre uno y otro:

  • Navegación Horizontal: El usuario hace slide horizontal para pasar a otra parte de la pantalla utilizando por ejemplo un control Panorama, de tal forma que en la parte visible de la funcionalidad este la funcionalidad de cronómetro y al hacer slide de derecha a izquierda este la funcionalidad de temporizador.

panorama

  • Modificador de comportamiento: Existe un control toggle switch o botón para alternar el comportamiento entre un modo u otro, por ejemplo se puede personalizar para que cuando este en Off se encuentre en funcionalidad de cronómetro y cuando este en On en la funcionalidad de temporizador, Para poder utilizar esta funcionalidad debes descargar el “Windows Phone Toolkit

toggle_v03

Desde Visual Studio (2012 o superior) vas a las referencias del proyecto das clic derecho y seleccionas “Manage Nuget Packages”

 

image

Allí buscamos el Windows Phone Toolkit

image

Y lo instalamos.

Ahora vamos al toolbox

image

damos clic derecho “Add Tab” y creamos uno llamado WP Toolkit. abrimos ese tab, damos clic derecho y seleccionamos “Choose Ítems”

image

En el recuadro que se despliega buscamos la ubicación del proyecto y una vez allí vamos a packages\WPtoolkit\lib\sl4-windowsphone71 puede que el path no sea exacto al que he colocado aquí pero lo hallaras fácilmente.

Allí encontramos la librería “Microsoft.Phone.Controls.Toolkit.dll” y la abrimos.

El resultado es que ahora nos aparecen muchos más controles para usar incljuyendo el ToggleSwitch:

 

image

Que los caracteres sean grandes

No creo que necesites ayuda para esto o si? Se cuidadoso con las proporciones eso es lo importante.

Que cuando la app esté corriendo ocupe toda la pantalla y mantenga la pantalla activa (que no se apague)

La primera parte requiere de tus habilidades en la distribución del espacio.

Para mantener la pantalla activa, sin que se lance la pantalla de bloqueo basta con esta línea de código:

 
PhoneApplicationService.Current.ApplicationIdleDetectionMode = IdleDetectionMode.Disabled;

Como dato adicional si requieres que la aplicación se ejecute aún cuando la pantalla de bloqueo esta activa puedes usar esto:

 
PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;

Que se pueda pausar, continuar y reiniciar

Te recomiendo que trabajes todo con la clase Datetime, por ejemplo restando fechas obtienes un objeto de tipo TimeSpan que representa un intervalo de tiempo incluso hasta resolución de milisegundos.

Trabajar con estas dos clases no solo te servirá para guardar la fecha y hora actual, sino también para saber cuanto tiempo ha transcurrido.

 

Que se le puedan configurar alertas cada X tiempo (el tiempo configurable por el usuario)

Imagina que el usuario esta en medio de una presentación y desea que su Smartphone la de un aviso cada 5 minutos, como hacerlo?

Para esto utiliza la clase BackGroundWorker la que te permite disparar un evento cada cierto intervalo de tiempo, aquí consigues un ejemplo de uso,

 

Que se le pueda configurar el color de fondo y el color de los caracteres

Desde el comienzo debes crear los colores de las fuentes y del fondo con estilos, de tal forma que luego no sea necesario sino iun pequeño cambio para cambiar los colores de toda la aplicación.

Que maneje el cambio de posición del dispositivo de horizontal a vertical (Tilt)

Para hacerlo debes modificar este atributo en cada page de app:

 SupportedOrientations="PortraitOrLandscape" 

Esto habilitara que tu app gire por completo al cambiar la orientación del phone.

portrait and landscape

Sin embargo es conveniente personalizarlo un poco más, porqué? porque los elementos seguramente no quedaran en su posición y proporciones ideales, para lidiar con este requerimiento debemos hacer uso de un control Grid y un OrientationChanged event handler, este nos permitirá modificar la posición de los controles dentro del gid según conveniencia propia, o incluso cambiar tamaños de fuentes u objetos.

En este artículo tienes más información al respecto:

Quickstart: Screen orientation for Windows Phone

 

Que permita escoger el sonido de la alarma

 

Lo más difícil de esta parte es conseguir los sonidos… pero bueno acá esta uno de tantos sitios de donde puedes descargarlos con licencia creative commons.

FreeSound

Para reproducir los sonidos basta con usar la clase BackgroundAudioPlayer, aquí tienes un ejemplo:

How to play background audio for Windows Phone

 

Manos a la obra!

Tiempo de crear!

Anímense a comentar  y preguntar que con gusto les ayudaré.