4.2.12

Aprender Windows Phone 7 (parte 47): Windows Phone Toolkit – ExpanderView

Seguimos viendo los controles que trae 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 este tutorial vamos a aprender a manejar el control ExpanderView.

El control ExpanderView es un control que muestra un encabezado y un contenido colapsable que se despliega al pulsar en el encabezado.



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

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:


Vamos a explicar las partes de un control ExpanderView.


Utilizando las etiquetas toolkit:ExpanderView y toolkit:ExpanderView.Items definimos el control ExpanderView y la zona en la que iremos colocando los controles que definen el contenido del panel expandido.

El atributo Header de la etiqueta toolkit:ExpanderView mostrará el encabezado.

Ahora vamos a agregar los controles:

- Titulo "EXPANDERVIEW EXAMPLE".
- Titulo "principal".
- El control ExpanderView que acabamos de ver.

Con el siguiente formato:


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


Si pulsamos el encabezado se expandirá el contenido colapsable.


Este tipo de control se utiliza para mostrar objetos de los que el usuario puede saber más pulsando en ellos.

Por ejemplo, podemos hacer una aplicación que muestre la lista de los componentes de un grupo de musica.




Os dejo el código fuente de estos dos ejemplos:

https://sites.google.com/site/libreyextremo/codigo-fuente-tutorial-aprender-windows-phone-parte-47


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

No comments:

Post a Comment