Silverlight 3 - Parte No. 4: Usando ListBox y DataBinding para desplegar un List Data con VS 2008 y C#

Hola Amigos, gracias por leer mi blog, si te gusta los posts en mi blog, por favor sígueme en Twitter bajo @lalfarod para ver mis aportaciones.  

 

Continuaremos con la 4ta parte de nuestros post sobre Silverlight 3, esto lo estamos haciendo ya que está por salir Silverlight 4 y muchos de la comunidad desean aprender para estar listos antes de su lanzamiento. En esta ocasión hablaremos de cómo podemos desplegar datos en un ListBox y cómo podemos usar el DataBinding para mostrar nuestra información de forma atractiva.

 

Anteriormente hemos estado usando el control DataGrid para desplegar nuestros datos. Esto funciona bien cuando queremos mostrar los datos en un formato de columna.

 

Para nuestro siguiente ejemplo vamos a necesitar cambiar un poco la apariencia de la muestra de nuestros datos, entonces vamos a cambiar el formato de uno como el DataGrid a una lista. La buena noticia es que esto es fácil, y no es necesario cambiar mucho nuestro ejemplo anterior que venimos trayendo en los artículos Uno, Dos y tres de esta serie.

 

Vamos a empezar por remplazar nuestro control DataGrid con el control <ListBox ></ListBox>. Al mismo le vamos a colocar el nombre lst_Historias .

Para que todo siga corriendo transparentemente en nuestro código, es necesario que en el mismo reemplacemos el nombre del control DataGrid por el nuevo nombre del control de ListBox. Esto mismo se tienen que hacer en el método DisplayStories .

Cuando ejecutemos nuestro ejemplo y hacemos una búsqueda, el mismo mostrara lo siguiente:

Lo más seguro es que ustedes se estarán preguntando la razón del porque cada ítem dice “Silverlight_HelloWorld.Historia”? Esto sucede porque estamos haciendo un binding de objetos al control ListBox y el comportamiento normal es que se haga un ToString() a cada objeto. Si quieres mostrar la propiedad “Title” en el objeto, tendremos que colocar el "DisplayMemberPath" en el ListBox.

Cuando hacemos esto, ya veremos el titulo en nuestro ListBox :

Si quisiéramos colocar mas valores que se muestren en nuestro ListBox al mismo tiempo, o customizar nuestro layout, solo debemos de sobrecargar el control ListBox en ListBox.ItemTemplate y proporcionar el DataTemplate customizado. Internamente en el DataTemplate podemos customizar los objetos que van hacer mostrados.

Por ejemplo, en este caso mostraremos el Title y a la vez el valor de NumDiggs usando el DataTemplate siguiente:

Nosotros podemos hacer un DataBind de cualquier propiedad pública que se encuentre en nuestro objeto DataTemplate. Noten que como estamos usando la sintaxis en {Binding Path=PropertyName}  para poder ejecutar los controles TextBlock.

Después de hacer todo esto, ya podremos ver de diferente forma nuestro ListBox:

Ahora vamos a ir un poco más lejos, vamos a cambiar nuestro DataTemplate a lo que esta abajo,  este DataTemplate tiene dos StackPanel , uno es para colocar varios row ítems horizontalmente y el otro es para colocar TextBlock verticalmente:

Si ven este código está usando el encapsulamiento que explique en el post número tres en mi blog, estos estilos (Styles) lo deben de definir en su archivo App.xaml, en esta imagen esta explicado las propiedades que se están usando en cada control:

Ya después de haber definido todo, nuestro ListBox quedara de la siguiente forma:

Algo importante que hay que notar de nuestro ListBox es que aunque hayamos customizado la forma de desplegar y que se veamos los ítems, aun nos provee soporte en la forma que se selecciona cada ítem, esto funciona de dos formas, ya sea seleccionado con el mouse o con el teclado (usando las teclas de arriba/abajo o home/end etc):

De igual forma, también nos provee el soporte de lo que se llama “flow resizing”, nos dará automáticamente los scrollings para poder recorrer la lista:

 

 Un Saludo, 

Luis Antonio Alfaro

Published Fri, Dec 11 2009 16:00 by lalfaro