24.1.12

Aprender Windows Phone 7 (parte 45): Windows Phone Toolkit – AutoCompleteBox

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 AutoCompleteBox.

AutoCompleteBox es un control que, al empezar el usuario a escribir en un TextBox, muestra una serie de sugerencias en una lista desplegable para que el usuario seleccione una y no tenga que escribir el resto de las letras.



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

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 "AUTOCOMPLETEBOX EXAMPLE"
- Titulo "principal".
- Un TextBlock con el texto "Ciudad"
- Un control AutocompleteBox.



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



Ahora ya sólo queda insertar la lista de recomendaciones que aparecerán en el AutoCompleteBox. Vamos a crear un objeto List de strings y dentro iremos insertando las palabras. En nuestro caso serán nombres de ciudades.Después este objeto List lo insertaremos dentro de la propiedad ItemsSource del AutoCompleteBox.



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



En la aplicación cuando escribamos la primera letra aparecerán la lista de sugerencias que coinciden con el texto que contiene el AutoCompleteBox.



Seleccionando una de las sugerencias que se nos propone, aparecerá en el AutoCompleteBox.



Muy chulo, ¿verdad?


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 45.


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

3 comments:

  1. excelente GRacias!

    ReplyDelete
  2. Muy buena info amigo! Para ir un poco mas lejos, como sería si quisieras autocompletar con cualquier localicación geografica del mundo?

    ReplyDelete
  3. ¡Hola! Muchas gracias. ¿Has probado si te sirve el widget search?

    http://developer.android.com/guide/topics/search/search-dialog.html

    ReplyDelete