How To: Insertar Texto e Imágenes en un ListBox (WPF & Expression Blend)

Hola a todos! Lo prometido es deuda y os vomito publico el primer post de espero que muchos sobre estos dos temas.

Bueno, lo que os voy a intentar enseñar es como insertar cosas en un ListBox, en este caso serán imágenes y textos, tanto en tiempo de diseño con el Expression Blend como en tiempo de ejecución (evento Click de un botón en este caso).

Empezamos creando un proyecto nuevo en Expression Blend y en el formulario que se abre (Window1) insertamos:

1. Un ListBox que llamaremos lstCosas.

2. Un TextBox con el nombre de txtTexto.

3. Un Button que llamamos btnInsertar.

La cosa quedaría así. Si no encontráis los controles los encontraréis en la doble flechita de abajo a la izquierda de la imagen. El nombre de los controles lo podéis cambiar dándole directamente sobre el con el botón derecho del ratón -> Rename en la ventana de Objects and Timeline.

Vale seguimos. Ahora añadiremos una pequeña imagen a nuestro proyecto para luego insertarla en lstCosas. La imagen yo la tengo ahora mismo en el Escritorio, así que hacemos lo siguiente: seleccionamos la pestaña Project (arriba derecha) y le picamos con el botón derecho del ratón a nuestro proyecto -> Add Existing Item, buscamos la ruta de la imagen y la agregamos.

Muy bien, hecho. El siguiente paso es asignarle el botón el evento Click pa darle funcionalidad. Lo hacemos de la siguiente forma:

1. Seleccionamos el btnInsertar.

2. Nos vamos a la pestaña Properties y seleccionamos el iconito de Events.

3. Buscamos el evento Click, y le ponemos un nombre, por ejemplo btnInsertar_Click.

4. Pulsamos intro y vualá (xDD), mira quién viene!. Nota: si falla al abrir el VS intentarlo otra vez, que a mi me acaba de dar un error el Blend (ni idea por qué).

Ya tenemos el VS abierto por la pagina que queremos y el evento que hemos creado listo para meterle código! Pués bien, el código para insertar la imagen y texto es el siguiente:

Nota1: hay una línea que se corta, os la pongo aquí

imagen.Source = new BitmapImage(new Uri(@"Ruta Absolutisima de la Imagen")); 

Nota 2: aseguraros de cambiar lo que pone "Ruta Absolutisima de la Imagen" por "C:\blablabla". Y recordad probar las formas que os pongo de una a una, porque sino.....

Ultimo paso. Grabamos el fichero Window1.xaml.cs en el VS, no guardeis el proyecto, solo ese archivo. Ahora nos vamos al Blend y presionamos F5 para ejecutar y ahí tenemos nuestro formulario.... le damos al botón y nos añade la imagen (uy! el Recre!!) y el texto de ejemplo.

Bueno creo que eso es todo lo que os quería contar... si recuerdo algo más pues lo posteo. Un saludo y espero que os haya servido de ayuda. Y no lo olvidéis, si tenéis alguna pregunta preguntad! que estamos para ayudarnos en lo que se pueda, vale?

Un Saludo!!