24.12.11

Aprender Windows Phone 7 (parte 39): Windows Phone Toolkit – Introducción y configuración

Hace unos meses se publicó el Silverlight for Windows Phone Toolkit, este paquete contiene un montón de controles nuevos para utilizarlos en nuestras aplicaciones Windows Phone 7 que nos ahorran tener que desarrollarlos y probarlos nosotros.

En estos tutoriales vamos a aprender a añadir este paquete y utilizar estos controles en nuestras aplicaciones para hacerlas mucho mejores.

Algunos de los controles que trae el paquete y que vamos a ver son:

- AutoCompleteBox
- ContextMenu
- DatePicker
- DateTimeConverters
- ExpanderView
- Gestures
- HeaderedItemsControl
- HubTile
- ListPicker
- LocalizedResources
- LockablePivot
- LoopingSelector
- LongListSelector
- MultiselectList
- Page Transitions
- PerformanceProgressbar
- PhoneTextBox
- WrapPanel
- TiltEffect
- TimePicker
- ToggleSwitch

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



Cómo agregar el Windows Phone Toolkit a vuestras aplicaciones Windows Phone 7

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 = (lo que queráis, yo puse por ejemplo...) WPToolkitExample
Location = (la que queráis, yo lo puse en...) C:\A_warterrain_A\Ejemplos WP7\ WPToolkitExample \
SolutionName = (lo que queráis, yo puse por ejemplo...) WPToolkitExample

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:



Después ya podremos agregar los controles del toolkit, para ello habrá que agregar una etiqueta toolkit de la siguiente forma:



Seleccionaremos el control y lo agregaremos. Por ejemplo, si agregasemos un DatePicker, quedaría así:



Sencillo ¿verdad?



Cómo agregar la Windows Phone Toolkit tab a la caja de herramientas de Visual Studio

De la caja de herramientas (Toolbox) de Visual Studio es de donde solemos coger los controles, arrastrarlos y ponerlos en las páginas de nuestras aplicaciones en Windows Phone 7.

Podemos agregar una pestaña más a la caja de herramientas con todos los controles de Windows Phone Toolkit.

Para ello, en el Toolbox hay que pulsar con el botón derecho y seleccionar la opción "Add Tab".



Después ponemos nombre a esta etiqueta por ejemplo “Windows Phone Toolkit”:



Después pinchamos en esta pestaña con el botón derecho y seleccionamos "Choose Items..."



En la ventana que se abrirá hay que seleccionar los controles que va a tener esta pestaña. Lo que vamos a hacer es marcar todos los controles del ensamblado "Microsoft.Phone.Controls.Toolkit".



Damos a Ok y ya tendremos nuestra pestaña con los controles de las Windows Phone Toolkit listo para utilizar.



En el próximo tutorial vamos a ir viendo cada uno de estos controles.

No comments:

Post a Comment