Este es el quinto de ocho tutoriales en el que estamos creando un cliente de Digg con la Beta 1 de Silverlight 2. La idea es que estos tutoriales se lean en orden, con el objetivo de explicar los fundamentos de la programación con Silverlight.
Podéis descargar el código fuente completo de la aplicación que estamos haciendo aquí
Mostrar los resultados de Digg con un ListBox y DataBinding
Anteriormente hemos estado usando un control DataGrid para mostrar los resultados. Esto funciona genial cuando queremos mostrar contenido en formato de columna. Para nuestra aplicación Digg, queremos juguetear con la apariencia un poco más y no queremos que se vea como un data grid sino como una lista de resultados. Esto es muy fácil de hacer – además no tendremos que cambiar nada de la lógica de nuestra aplicación.
Empezamos cabiando el control DataGrid con un <ListBox>. Mantendremos el mismo nombre que antes “StoriesList”:
Si ejecutamos la aplicación y hacemos una búsqueda, el listbox se mostrará así:
Os estaréis preguntando -¿porque en cada elemento hay un “DiggSample.DiggStory”?. Esto es debido a que estamos enlazando a objetos DiggStory a la lista (cuyo comportamiento por defecto es llamar al método ToString()). Si queremos mostrar la propiedad “Title” del objeto, tenemos que poner la propiedad “DisplayMemberPath” del ListBox así:
Ahora cuando ejectuemos y hagamos una búsqueda tendremos esto:
Si queremos mostrar más de un valor a la vez, tendremos que personalizar un poco más el layout de cada elemento. Podemos sobreescribir el control ItemTemplate del ListBox y poner un DataTemplate. En este DataTemplate personalizaremos cómo se va amostrar cada objeto DiggStory.
Por ejemplo, podemos mostrar los valores “Title” y “NumDiggs” con el siguiente DataTemplate:
Podemos enlazar cualquier propiedad publica de los objetos DiggStory. Fijáos que estamos usando la sintaxis {Binding NombrePropiedad}.
De esta manera, el resultado es el siguiente:
Vamos a afinarlo un poco más y pongamos el DataTemplate siguiente. Usamos dos StackPanels – uno para organizar los elementos horizontalmente y otro para poner varios textblocks vertiales:
Y obtenemos el siguiente resultado:
cuando definimos las reglas de estilo en el archivo App.xaml (fijaos que estamos usando un LinearGradientBrush para obtener el gradiente amarillo en el DiggPanel):
Una cosa importante sobre el ListBox – aunque hayamos personalizado el look & feel de los items, seguimos teniendo el soporte de cuando seleccionamos un elemento. Esto pasa tanto si usamos el ratón o el teclado para seleccionarlo:
El list box también soporta el redimensionado – y nos dará un auto scroll cuando sea necesario (fijaos como aparece la barra de scroll horizontal cuando la ventan se vuelve más pequeña):
Traducido por: Juan María Laó Ramos.
juanlao 
Hola he hecho un experimento parecido pero usando Linq para el parseo del xml, que ademas es local, a la hora de colocar el dato:
me da un error justo en la asignacion del listado:
var v = from g in xDocument.Descendants(“story”)
select new Noticia
{
nombre = g.Element(“usuario”).Attribute(“name”).Value,
descripcion = g.Element(“description”).Value,
};
// aqui me da el error.
listaB.ItemsSource= v;
he revisado muchas paginas pero no puedo encontrar el fallo.
muchas gracias por anticipado.
un saludo.
LikeLike