27.1.12

Aprender Windows Phone 7 (parte 46): Windows Phone Toolkit – DatePicker

Seguimos viendo los controles que trae el Silverlight for Windows Phone Toolkit. Este paquete contiene un conjunto de nuevos controles para utilizarlos en nuestras aplicaciones Windows Phone 7 que nos ahorran tener que desarrollarlos y probarlos nosotros.

En este tutorial vamos a aprender a manejar el control DatePicker.

El control DatePicker proporciona un cuadro de texto que al ser pulsado abre una nueva página en la que se puede elegir una fecha usando scrooll sobre el día, mes y año.


Si todavía no os habéis instalado este paquete tenéis este tutorial que hemos creado en este blog sobre cómo hacerlo paso a paso:

http://libreyextremo.blogspot.com/2011/11/aprender-windows-phone-7-parte-29-como.html




Creando la aplicación
Abrimos Visual Studio y creamos un nuevo proyecto, para ello hay que pulsar en el menú "File" -> opción "New Project". En la nueva ventana he seleccionado las opciones "Visual C#" -> "Silverlight for Windows Phone" -> "Windows Phone Application". Los demás datos son:


Name = DatePickerExample
Location = (la que queráis, yo lo puse en...) C:\A_warterrain_A\Ejemplos WP7\ DatePickerExample \ 
SolutionName = DatePickerExample

A continuación se pide la versión de la aplicación. Seleccionamos Windows Phone 7.1 y damos a Ok.


Vamos a agregar la librería del Windows Phone Toolkit a nuestro proyecto. La librería se encuentra en el directorio bin dentro de la carpeta donde se descargó el paquete que será:

Para Sistemas Operativos de 64 bit:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\

Para Sistemas Operativos de 32 bit:
C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\

En mi caso la dll se encontraba en la ruta:

C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Aug11\Bin\Microsoft.Phone.Controls.Toolkit.dll

Para agregar esta librería, hay que pulsar con el botón derecho en el elemento "References" de nuestro proyecto en el Explorador de Soluciones y seleccionar la opción "Add reference".


Tras buscar en la ruta la librería y agregarla aparecerá entre las referencias del proyecto:


A continuación, cuando en una página de la aplicación queramos utilizar los controles del toolkit, primero habrá que agregar el espacio de nombres del toolkit. Para ello en el archivo xaml de la página deberá agregarse la etiqueta xmlns:toolkit a la etiqueta phone:


Ahora vamos a agregar los controles:
- Titulo "DATEPICKER EXAMPLE"
- Titulo "principal".
- Un TextBlock con el texto "Introduzca la fecha".
- Un control DatePicker.


Para agregar el DatePicker utilizamos la etiqueta toolkit:DatePicker. El código XAML del DatePicker es:


Veamos la propiedad Value. Por defecto viene a valor 00:00:00 y toma la fecha en la que se ejecute la aplicación. Si queremos poner otra fecha, por ejemplo, el 30 de Enero de 2014, el formato es mm/dd/aaaa. Es decir, lo dos dígitos del mes primero, después los dos dígitos del día y por último los cuatro dígitos del año. Separados por barras inclinadas.

Vamos a poner el 30 de Enero de 2012. Para ello ponermos la propiedad Value con el valor 01/30/2014. Nos quedaría así:


Lanzamos la aplicación seleccionando "Debug" -> "Start Debugging".


La fecha que aparece es el 30 de Enero de 2014 como establecimos. Si pulsamos en la casilla de texto del DatePicker se abrirá un nuevo formulario para que cambiemos el día, mes y año haciendo scroll vertical sobre cada campo.


Pulsando el botón izquierdo (ahora veremos como poner bien los iconos de estos botones) de la parte inferior confirmamos el nuevo valor del DatePicker y volvemos a la página anterior.


Fata poner los iconos a los botones aceptar y cancelar del DatePicker. Para ello vamos a crear una carpeta en el directorio del proyecto que se llamará "Toolkit.Content". Hacemos click con el botón derecho del ratón en el proyecto seleccionamos la opción "Add" y después "New Folder". Escribimos el nombre de la carpeta "Toolkit.Content".


Después hay que meter dos imágenes en esta carpeta llamadas: ApplicationBar.Cancel.png ApplicationBar.Check.png Las dos imágenes las podemos encontrar en la carpeta donde están los binarios del Silverlight Toolkit, que recordamos que eran:

Para Sistemas Operativos de 64 bit:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\

Para Sistemas Operativos de 32 bit:
C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\

Las imagenes están dentro de una subcarpeta llamada Icons, en mi caso estaban en la ruta:
C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Aug11\Bin\Icons

Para agregar las imágenes, hacemos click con el botón derecho del ratón sobre la carpeta Toolkit.Content y seleccionamos la opción "Add" y después "Existing Item..."


Buscamos las dos imágenes y las agregamos. Después hay que modificar la propiedad BuildAction de cada imagen al valor Content:


Ahora volvemos a lanzar la aplicación y cuando pulsamos en el cuadro de texto del DatePicker, ahora sí que aparecen los dos iconos de aceptar y cancelar correctamente.


Lleva un poco de trabajo, pero la experiencia de usuario final va a ganar muchos enteros y va a hacer que vuestra aplicación luzca mucho más.

El código fuente del ejemplo podéis descargaroslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial aprender Windows Phone 7 Parte 46.

Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina).

1 comment:

  1. Hola buenas noches,, solo tengo una duda.. como modifico el titulo (CHOOSE DATE) y el fondo de color (NEGRO) a otro color a la hora de elegir la fecha ???

    ReplyDelete