Si navegamos por el Hub de People podemos ver que para recorrer nuestro listado de contactos disponemos aparte de arrastrar la lista, de una serie de cuadrados que contienen la letra inicial de los nombres que vienen a continuación.

Si pulsamos en uno de esos cuadrados aparece un panel con todas las letras del abecedario, seleccionando una de ellas nos posiciona en la sección que comienza por la letra que hemos pulsado.

Este componente que se llama LongListSelector también lo podemos usar en nuestras aplicaciones, para ello tenemos que instalar Silverlight Toolkit for Windows Phone disponible en la siguiente dirección: http://silverlight.codeplex.com/

LongListSelector está estructurado en siete partes (o templates) que podemos personalizar como queramos:

  • ListHeaderTemplate
  • ListFooterTemplate
  • GroupHeaderTemplate
  • GroupFooterTemplate
  • GroupItemsPanel
  • GroupItemTemplate
  • ItemTemplate

Para que funcione necesitamos que al menos GroupHeaderTemplate, GroupItemTemplate, GroupItemsPanel e ItemTemplate sean usados, los demás dependiendo de nuestras necesidades los podemos usar o no.

Para que os hagáis una idea de a que equivale cada template aquí tenéis un par de imágenes que aclararán un poco el asunto:

Para comenzar, una vez que tenemos instalado el Toolkit, abrimos Visual Studio y creamos un nuevo proyecto de Silverlight para Windows Phone 7:

Ahora vamos a preparar las clases que necesitamos para mostrar una lista de modelos de coche agrupados por su marca.

Lo primero que necesitamos es definir la entidad que representa a un coche:

Tengo creada una clase que se llama BaseViewModel.cs de la que me sirvo para notificar los cambios en una propiedad y saber si estoy en tiempo de diseño o no.

La idea es centralizar todos los métodos o propiedades en una sola clase para no tener que reescribir el código en el resto de clases que necesiten esas funciones.


Ahora tenemos que crear la clase que va a manejar la lista de coches, en este caso se va a llamar BrandViewModel.cs.

Como podéis ver tenemos una lista ObservableCollection que nos permite aumentar o disminuir la lista de forma dinámica sin tener que volverla a construir y ¿de qué tipo? pues el tipo es una lista de coches.

Es decir, Group es una clase que os enseñare más adelante que nos permite almacenar en una lista los coches de una misma marca, por lo que al final lo que estamos haciendo es una lista BrandGroupList, que contiene varias listas Group (una por cada marca) de coches

A continuación lo que podeis ver es el método LoadExampleInfo para cargar los datos de ejemplo en una lista y a continuación ordenarlos con DoOrder.

          

El método DoOrder agrupa los coches en listas de tipo Group y luego los añade a la lista que vamos a enlazar con la interfaz (Brand_Group_List).

Ya solo nos queda ver lo que hace la clase Group:

Básicamente tenemos el constructor que crea la lista y dos propiedades una que será «Key» que es la clave por la que organizamos los grupos y «HasElements» que nos dice si tiene elementos un grupo o no.

La clase es genérica para poderla usar en otros proyectos y no tener que volverla a modificar 😀

Vale, pues con esto (que no es poco) ya tenemos nuestro origen de datos y podemos comenzar a trabajar en la interfaz. Para ello tenemos que añadir la referencia al Microsoft.Phone.Controls.Toolkit en nuestro proyecto, pulsando con el botón derecho del ratón en referencias, seleccionamos agregar referencia en el menú que aparece y luego buscamos la librería en la ventana que aparece:

De tal manera que obtendremos esto en nuestro proyecto una vez pulsemos sobre OK:

Además podéis añadir el componente LongListSelector a la caja de herramientas pulsando con el botón derecho del ratón y seleccionando «Choose item» en el menú contextual, en la ventana que se abre, seleccionáis el componente pulsáis en Ok.



Ahora el componente aparece en la caja de herramientas, podéis usar el componente simplemente arrastrándolo desde la caja de herramientas a MainPage.xaml en la vista de diseño.

También se puede editar la interfaz con Expression Blend o ir trabajando directamente en XAML añadiendo los templates que deseéis usar, en cualquier caso tendréis algo parecido a esto:

Template de ListHeader:

Template de ListFooter:


Template de GroupItems:


Template de GroupItem:


Template de GroupHeader:

Template de GroupHeader:

Una vez está terminada la interfaz hay que ir al MainPage.xaml.cs y apuntar la propiedad ItemSource del componente para que cuando arranque la aplicación la lista este rellena:


Espero que esto os ayude a usar este componente, podéis acceder al código del ejemplo desde aquí 🙂