Personalización condicional del DataGrid de Silverlight 2

Personalización condicional del DataGrid de Silverlight 2

Introducción

El control DataGrid de Silverlight 2 ofrece a los desarrolladores un mecanismo para presentar datos tabulares de una manera sencilla, ya que al ser un control atable a datos podemos indicar como fuente de datos cualquier objeto que implemente IList o IEnumerable.  Por este motivo y por el hecho de que automáticamente se ata a todas las propiedades del objeto se crearán las columnas correspondientes sin esfuerzo extra.

No obstante a lo anterior es un escenario común cambiar los colores de las filas de manera condicional, esto es, a partir de un valor o rango de valores de los datos cambiar sus características visuales de cada fila para resaltarlos.

En este artículo veremos cómo modificar la apariencia visual del DataGrid de manera condicional.

Desarrollo

Crearemos una nueva aplicación de Silverlight por medio de la plantilla en Visual Studio .NET 2008.  A esta aplicación le pondremos el nombre de EjemploDataGridCondicional.

Como fuente de datos para nuestra aplicación utilizaremos las clases Album y Albumes descritas en el artículo “Introducción a los Convertidores en Silverlight 2”.

Ya que el control DataGrid está implementado en un ensamblado externo (System.Windows.Controls.Data) necesitamos referenciar este ensamblado en nuestro proyecto y además importar el espacio de nombres xml asignándole un alias para poder identificar las clases incluídas en él de manera única. 

Asimismo también importaremos el espacio de nombres xml del proyecto EjemploDataGridCondicional para poder dar de alta nuestra fuente de datos como parte del diccionario de recursos del UserControl.  El siguiente fragmento muestra el código XAML modificado:

Ahora ya estamos listos para poder crear una instancia del DataGrid.  El siguiente fragmento muestra el código necesario para crear un DataGrid el cual atamos a la fuente de datos implementada en el diccionario de recursos:

Al ejecutar la aplicación, el resultado que obtenemos es el siguiente:

Como podemos observar el comportamiento predeterminado del DataGrid es atarse a todas las propiedades de la fuente de datos y además crear las columnas correspondientes automáticamente.

Colores condicionales para las filas

Para este ejemplo cambiaremos el color de cada álbum que tenga su fecha de lanzamiento anterior al 01/01/1999.  Para realizar esta funcionalidad crearemos un Convertidor de color, esto es, un Convertidor que reciba como entrada la fecha y regrese un color según el rango establecido.  El artículo “Introducción a los Convertidores en Silverlight 2” explica y detalla la creación de Convertidores.

Crearemos una clase llamada ConvertidorFechaColor dentro de un fólder llamado Convertidores en el proyecto de Silverlight. El siguiente código detalla esta clase:

Ahora bien, para utilizar esta clase dentro de nuestro DataGrid debemos definir nuestros propios elementos CellTemplate, los cuales definen la plantilla que se aplicará a cada celda cuando se esté atando a datos el control ya que esta clase soporta un DataTemplate. 

Además, necesitamos establecer la propiedad AutoGenerateColumns=”false” ya que la creación de columnas será ahora nuestra responsabilidad.  Cada columna la crearemos como un DataGridTemplateColumn ya que esta clase nos permite definir nuestra propia plantilla para las columnas.

Cada plantilla de columna tendrá como elemento raiz un Border, el cual será el elemento que cambiaremos de color en las filas.  A la propiedad Background del Border lo ataremos a la propiedad FechaLanzamiento de la fuente de datos, aplicando el Convertidor de color que escribimos anteriormente.  Dentro del Border colocaremos un TextBlock que muestre el texto correspondiente a la columna, atando a datos a la propiedad correspondiente.  El siguiente fragmento de código muestra el ejemplo de la columna “Titulo”:

Si aplicamos el mismo concepto a cada una de las columnas el resultado sería el siguiente:

Además, podríamos reutilizar el Convertidor que construímos en el artículo anterior para poder formatear la fecha de lanzamiento adecuadamente, además del cambio de color que estamos aplicando.  Asimismo, podemos ir más allá con el Convertidor de fecha a color si pasamos como parámetro el tipo de color que queremos aplicar, esto es, si es para el fondo del Border o es para el color de la letra del TextBlock.  El siguiente fragmento de código muestra el Border con toda la funcionalidad completa:

El resultado completo de nuestro proyecto es como se muestra:

Resumen

Por medio del elemento CellTemplate dentro de una columna de tipo DataGridTemplateColumn podemos llegar a obtener un grado de personalización avanzado dentro del control DataGrid.  Haciendo uso de Convertidores y lógica personalizada podemos determinar el color de fondo y fuente de cada una de las filas del DataGrid, por ejemplo para resaltar datos que caigan en un rango establecido u otro tipo de factor.

El código fuente de este ejemplo lo pueden descargar de la sección “Contenido” de La Liga Silverlight.

Introducción a los Convertidores en Silverlight 2

Introducción a los Convertidores en Silverlight 2

Introducción

Los Convertidores en el contexto de Silverlight, específicamente en el atado a datos son un mecanismo poderoso para poder cambiar un valor cuando de una fuente de datos se esté atando a un destino, pudiendo ser este destino por ejemplo un control.  El atado de datos en Silverlight funciona a partir de cuatro conceptos:  una fuente, la propiedad de la fuente de la que “leeremos” el dato, el destino y la propiedad del destino al que ataremos el dato.

Un ejemplo claro es cuando una fuente de datos incluye un campo tipo DateTime.  Debido a que el tipo de dato DateTime incluye día, mes, año, horas, minutos, segundos y milisegundos, frecuentemente necesitamos únicamente presentar la fecha y quitar la hora.  O por ejemplo cuando a partir de un campo bool deseamos mostrar las palabras ‘Sí’ o ‘No’ en vez de True y False.

Es aquí cuando los Convertidores son una solución natural, ya que nos permiten transformar (convertir) el dato inicial a otro que represente mejor lo que necesitamos mostrar.

Desarrollo

Iniciemos creando una nueva aplicación Silverlight utilizando la plantilla correspondiente en Visual Studio .NET 2008.  A nuestra solución le llamaremos EjemploConvertidores.

En esta solución tendremos como fuente de datos una lista de álbumes musicales, tal y como lo muestra el siguiente código:

Claro está, nuestra fuente de datos puede provenir de un Servicio Web, un Servicio REST, un archivo XML,etc.  Por efectos de simplicidad he modelado directamente en la aplicación las clases Album y Albumes.  Albumes es de tipo List<Album>.  La clase List<T> implementa las interfaces IList y IEnumerable por lo tanto podremos usar Albumes como fuente de datos.

Ahora bien, para este ejemplo declararé el objeto que representa la fuente de datos directamente en markup, esto es, como recurso en el UserControl de Page.xaml.  Hay diferentes maneras de lograr el mismo escenario pero este mecanismo es particularmente más eficiente por el desacoplamiento que logramos.  Además, es necesario recordar que para hacer esto necesitamos importar el espacio de nombres xml en la declaración del control y asignarle un alias.  El alias en este caso se llama ‘app’.  Todo esta idea es mostrada en el siguiente fragmento de código:

El siguiente paso será declarar el control al que deseemos atar la lista de álbumes.  El siguiente fragmento de código muestra un ListBox con un DataTemplate el cual incluye los tres datos de un álbum: título, banda y fecha de lanzamiento; cada uno atándose a un TextBlock.  El concepto de DataTemplate y DataContext será orígen de otro artículo específicamente para el tema de atado de datos.

Al ejecutar la aplicación veremos el siguiente resultado:

Como podemos observar, la fecha está mostrando horas, minutos y segundos y muy probablemente no sea la mejor manera de mostrarla.  Es el momento de crear nuestro primer Convertidor.

Creando el Convertidor de Fecha

Agregaremos a nuestra solución un fólder llamado Convertidores y en este fólder una clase llamada ConvertidorFecha.  Usar fólders nos permite tener más organizado nuestro proyecto Silverlight y es una práctica recomendada.

Los Convertidores son clases que implementan la interfaz IValueConverter.  Esta interfaz expone dos métodos que podemos reemplazar:  Convert y ConvertBack.  El primero es el método que se ejecutará cuando estamos atando el dato de la fuete al destino y ConvertBack es el método que se ejecutará cuando el destino cambie el dato y regrese a la fuente original, en escenarios principalmente de tipos de atado TwoWay.

Para nuestro proyecto implementaremos el método Convert de la siguiente manera:

Es de notar que estamos usando el argumento parameter, el cual representa un parámetro de entrada que podemos establecer cuando realizamos el atado.

Para usar nuestro Convertidor y establecer el parámetro que requiere, modificamos la implementación del Binding en nuestro archivo XAML.  Cada objeto Binding expone diversas propiedades, entre ellas las propiedades Converter y ConverterParameter, siendo el nombre del objeto Convertidor y los parámetros opcionales respectivamente,.

De la  misma manera que dimos de alta la fuente de datos en el diccionario de recursos del UserControl, así expresaremos el Convertidor que acabamos de escribir.  Nótese cómo es requerida la importación del espacio de nombres que representa el fólder creado:

Finalmente, a nuestro objeto Binding de la FechaLanzamiento le aplicamos el Convertidor, por medio de las propiedades Converter y ConverterParameter.  Por medio de la extensión StaticResource invocamos el Convertidor que dimos de alta en el diccionario de recursos:

En ConverterParameter estamos usando la cadena ‘MMMM dd yyyy’ aunque podríamos utilizar cualquier formato de fecha soportado.

El resultado final de nuestra aplicación será la siguiente:

En donde podemos observar que efectivamente el dato mostrado es transformado a través del Convertidor que creamos.

Resumen

Los Convertidores son clases que implementan la interfaz IValueConverter y nos sirven para modificar un dato a otro cuando estamos atando una fuente de datos a un destino, por ejemplo un control.  Este tipo de objetos nos brinda una gran flexibilidad ya que con ellos no es necesario modificar nuestra fuente de datos para poder soportar diversas maneras de mostrar la información.

El código fuente de esta aplicación lo pueden descargar de la sección “Contenido” de La Liga Silverlight.

Pasar parámetros a una aplicación Silverlight desde ASP.NET

Pasar parámetros a una aplicación Silverlight desde ASP.NET

Introducción

Un requerimiento muy común al desarrollar aplicaciones con Silverlight 2 es poder pasar parámetros a la aplicación Silverlight desde ASP.NET.  Esto obedece a diferentes motivos entre los cuales podemos destacar:

  • Parámetros de inicialización
  • Parámetros para un reporte
  • Parámetros para recordar el estado
  • Parámetros de configuración

Sea cual fuese tu requerimiento, esta tarea se puede lograr de una manera muy sencilla.  En este artículo veremos cómo mandar parámetros a un objeto Silverlight usando el control de ASP.NET AJAX.

El control de Silverlight de ASP.NET AJAX cuenta con la propiedad pública InitParameters la cual representa los parámetros que deseamos enviar.  Esta propiedad es de tipo string no obstante podemos mandar diferentes parámetros siempre y cuando tengan el siguiente formato:

llave=valor,llave=valor,llave=valor,…

Esto debido a que la clase StartupEventArgs es un IDictionary<string, string>.  Esta clase es utilizada como argumentos del evento Startup de la aplicación.

Parámetros fijos

Mandar parámetros fijos es una tarea sumamente sencilla: simplemente establece la propiedad InitParameters en el control con la cadena de parámetros que desees enviar.  El siguiente ejemplo de código muestra este concepto:

Parámetros dinámicos

Otra manera –incluso más poderosa- es que la cadena de parámetros no quede fija en el markup de la página, sino crear la cadena a través de la interacción del usuario por ejemplo usando el QueryString.  Esto lo podemos lograr fácilmente en el manejador del evento Load de la página para determinar si el objeto QueryString tiene los parámetros esperados, si es así, mandarlos al control de Silverlight:

Obtención de los parámetros

Sea cual fuese el mecanismo que vas a utilizar para enviarle parámetros al objeto Silverlight, tienes que consumirlos dentro de la aplicación.  Esto se logra por medio del evento Startup.  A continuación se muestra el fragmento de código en App.xaml.cs en donde se aprecia cómo obtenemos el diccionario de parámetros:

Finalmente, con los parámetros disponibles los podemos enviar, por ejemplo, a la página inicial de la aplicación.  Una buena idea será modificar el constructor de la clase para ahí indicar los valores de los argumentos.  El siguiente fragmento de código supone un TextBlock llamado texto el cual establecemos su propiedad Text concatenando los valores obtenidos:

Y otra vez en Startup:

Resultado:

El código fuente lo pueden descargar de la sección “Contenido” en La Liga Silverlight

Resumen

Mandar parámetros a una aplicación Silverlight es una tarea muy sencilla.  En este artículo mostrarmos cómo mandar los parámetros obtenidos en el QueryString del navegador a la página principal de nuestra aplicación.

Creando un lector de feeds RSS con Silverlight 2

Creando un lector de feeds RSS con Silverlight 2

Introducción

En este artículo veremos cómo crear un lector de feeds de RSS 2.0 usando Silverlight 2 como interfaz de usuario, para crear una aplicación que muestre las últimas actualizaciones de una fuente sindicalizada con el formato RSS 2.0.  Este tipo de formato es muy utilizado en los motores de blogging como WordPress, en las plataformas de portales como SharePoint o DotNetNuke entre otro tipo de plataformas; no obstante, no es el único formato para hacer la difusión de contenidos ya que también existe Atom: otro formato similar para la exposición de actualizaciones.

Los formatos RSS como Atom están basados en XML, cada uno con un esquema en particular que los diferencia.  La especificación de RSS (en inglés) la podrán encontrar haciendo clic aquí.

Por otro lado, a partir de la versión 3.5 del .NET Framework se incorporó el namespace System.ServiceModel.Syndication el cual contiene todas las clases necesarias para interpretar y crear este tipo de fuentes de información.

Desarrollo

Comencemos creando una nueva aplicación de Silverlight 2 usando Visual Studio .NET 2008.  A nuestra nueva aplicación le llamaremos FeedSlideShow tal como lo muestra la siguiente figura:

El primer elemento que agregaremos a nuestra aplicación de Silverlight será un User Control llamado FeedBalloon que represente la forma que deseamos que tenga cada uno de los elementos que estamos leyendo del feed.  En el caso de este artículo crearemos una forma tipo “post-it” la cual tenga un título que al hacer clic nos redirija al sitio original del elemento y un cuerpo el cual tenga el texto relacionado con el artículo.  Esto es una tarea sencilla si la realizamos con Expression Blend:

El siguiente fragmento de código muestra el XAML que hemos definido para este ejemplo.  Es importante resaltar que estamos usando elementos “nombrados” para poder tener acceso a ellos cuando creemos cada uno de los elementos en el Canvas de la aplicación.

El segundo elemento que implementaremos a nuestro proyecto de Silverlight será una clase llamada Link, la cual representará cada uno de los elementos que estamos leyendo del feed.  Esta clase tendrá las propiedades Title, Body y Url todas de tipo string.  El siguiente fragmento de código muestra esta clase y en unos momentos más veremos cómo la usaremos en esta aplicación:

Ahora, la página de nuestra aplicación:  Page.xaml.  La aplicación tendrá un lienzo de fondo negro con esquinas redondeadas.  Este lienzo es donde se dibujarán cada uno de los elementos del feed.  Este diseño lo podemos lograr facilmente si implementamos el Canvas dentro de un elemento Border con las propiedades deseadas:

Esta aplicación la haremos parametrizable, para que podamos definir fuera de la aplicación el Url de los feeds que deseamos obtener y no tener esa dirección codificada directamente en el proyecto.  Pasar parámetros en una aplicación Silverlight es una tarea muy sencilla, pero depende de si estamos usando <object> o el control <asp:Silverlight> para instanciar nuestro control de Silverlight.  A continuación se muestra el nombre del parámetro correcto para cada una de estos mecanismos:

<object>
InitParams

<asp:Silverlight>
InitParameters

Independientemente de cuál sea el método que usaremos para instanciar el control de Silverlight, los parámetros los podemos obtener en el evento StartUp de la aplicación.  El nombre por defecto de la aplicación en un proyecto de Silverlight es App, no obstante este nombre es totalmente arbitrario y lo podemos renombrar incluso borrar y agregar uno nuevo.  El siguiente fragmento de código muestra la obtención de los parámetros que recibe la aplicación, y cómo los mandamos a la nueva instancia de la página que usaremos (Page) usando su constructor:

Es importante aquí mencionar que las páginas en una aplicación Silverlight no son más que clases que heredan la clase UserControl, y podemos modificar su comportamiento –en este caso agregando un argumento al constructor principal en Page.xaml.cs-

Como se puede apreciar en el código, estamos usando un campo privado llamado url el cual guarda el Url que se manda como parámetro desde la instanciación del control Silverlight.

Ahora bien, la funcionalidad principal de nuestra aplicación la implementaremos en el event handler del evento Loaded, es decir, Page_Loaded.  Básicamente, tenemos que hacer las siguientes acciones para leer el feed de RSS en cuestión:

  1. Usar el método OpenReadAsync de la clase WebClient para hacer una petición asíncrona del Url RSS que deseamos leer en forma de un Stream
  2. Una vez obtenido el Stream creamos un objeto de tipo XmlReader para leer ese contenido (finalmente el contenido RSS es XML como lo comentamos con anterioridad)
  3. Además de crear el objeto Stream crearemos un objeto de tipo XmlReaderSettings para determinar la configuración del XmlReader.  Este paso aunque no es necesario es recomendado para indicar exactamente cómo queremos que funcione.
  4. Creamos un objeto de tipo Rss20FeedFormatter y determinamos si podemos leer el objeto XmlReader con él.
  5. Si sí lo podemos leer, obtenemos un objeto de tipo SyndicationFeed de la propiedad Feed.  Este objeto incorpora la propiedad Items la cual representa todos y cada uno de los elementos de ese feed.
  6. Leemos esos elementos y creamos una lista genérica de tipo Link (la clase que implementamos más arriba en este artículo).
  7. Iniciamos un timer que nos ayudará a mostrar elemento por elemento de una manera atractiva dentro del Canvas.

A continuación se muestra el código:

Y a continuación el código del Tick del timer.  Cabe notar que estamos haciendo uso de expresiones Lambda en vez de escribir los cuerpos de los manejadores de eventos (event handlers):

En cada Tick del timer:

  1. Actualizamos un contador que nos servirá para ir barriendo uno por uno de los elementos de la lista
  2. Creamos un objeto de tipo FeedBalloon, el cual como recordaremos, representa el elemento visual que vamos a mostrar en el Canvas.  A este objeto le asignamos en sus elementos los valores que deseamos mostrar.  En el caso de este ejemplo estamos usando propiedades normales del CLR, pero podríamos implementar propiedades dependientes para hacer atado de datos en vez de hacerlo de manera directa.  No obstante, por efectos prácticos para este artículo lo haremos directamente.
  3. Creamos una animación programáticamente.  Esta animación hará un efecto de fadein-fadeout cuando presentemos los elementos del feed.  Es notable la potencia de Silverlight al permitirnos definir vía código este tipo de elementos.
  4. La animación la agregamos a un StoryBoard y lo iniciamos.  Cuando finaliza el StoryBoard, removemos el elemento del Canvas y la historia vuelve a comenzar…

Todo completo

La aplicación finalizada la pueden checar en el sitio de ejemplos de La Liga Silverlight y el código fuente lo pueden descargar de la parte de Contenido en el mismo sitio.

No olviden que la aplicación quedó parametrizada así que si usan, por ejemplo, <object> para instanciar su control de Silverlight, deberán incluir el parámetro con la dirección del Url que desean leer:

Resumen

Silverlight nos permite crear aplicaciones con alto impacto visual y que hagan uso de servicios o datos externos, tal es el caso de un feed RSS de un blog o de un portal.  La aplicación que aquí construímos es un ejemplo de esta característica y puede ser usado como base para crear aplicaciones que hagan uso de fuentes sindicadas.

Silverlight Tour Workshop en Guadalajara, Jalisco

Silverlight Tour Workshop en Español – Guadalajara, Jalisco, México

Esta es la última llamada para todos/as los/as interesados en asistir al curso Silverlight Tour Workshop en Español en la tapatía ciudad de Guadalajara que se llevará a cabo los días 18 al 20 de febrero 2009.

El Silverlight Tour Workshop es un curso de Silverlight de tres días de duración completamente en Español y de alta profundidad técnica acerca de Silverlight 2. Incluye los comos y por qués de XAML, el hospedaje en el navegador, las herramientas y el uso de Silverlight 2 en el servidor.  El curso utiliza Silverlight 2 así como las últimas herramientas tecnológicas de Microsoft (incluyendo Visual Studio .NET 2008 y Expression Studio).

La fecha límite para registrarse es el día martes 17 de febrero a las 16:00 hrs.   !Los esperamos!

Recordatorio: Primer reunión presencial de La Liga Silverlight

1er Reunión presencial de la comunidad La Liga Silverlight

Ya está todo listo para que mañana tengamos la primer reunión de la comunidad La Liga Silverlight – la primer comunidad MSDN en español acerca de Silverlight y tecnologías relacionadas.

Ya que es el evento inaugural como comunidad habrá muchos regalos y sorpresas como:

  • Libros técnicos de Microsoft Press
  • Llaveros
  • Playeras de La Liga Silverlight
  • Windows Vista Ultimate (con licencia)
  • Windows 2008 (con licencia)
  • … y más!

Lugar y Hora

Centro del Software (Sala 2) – Guadalajara, Jalisco, México

Hora: A las 6:00 p.m. comienza el registro y a las 6:15 p.m. el show

Agenda

18:00 – 18:15  Registro
18:15 – 18:30  Bienvenida e Introducción a La Liga Silverlight
18:30 – 20:30  Tema:  Silverlight como plataforma de desarrollo
20:30 – 21:00  Rifa de regalos y sorpresas

Los esperamos!

Serie de Videos: Diseño de IU para Desarrolladores

Arturo Toledo acaba de anunciar en su blog la disponibilidad de una serie de videos llamada “Diseño de Interfaz de Usuario para Desarrolladores”.  Son 13 de videos de corta duración en donde podemos encontrar tips y reglas de oro para el diseño gráfico de aplicaciones.  Es un excelente recurso para todos los que estamos envueltos en el mundo de RIA y/o cualquier otro tipo de aplicativo.

La lista de videos es la siguiente (la traducción del título está hecha por mí):

  1. Principios de Diseño (Balance)
  2. Principios de Diseño (Ritmo)
  3. Principios de Diseño (Énfasis)
  4. Principios de Diseño (Simetría)
  5. Principios de Diseño (Unidad)
  6. Principios de Diseño (Puntos, Líneas y Forma)
  7. Eligiendo Colores
  8. Experimentando con Colores para la Interfaz de Usuario
  9. Creando Patrones tipo Mosaico y Azulejo
  10. Aprendiendo a Crear Iconos
  11. Creando un Icono de ejemplo
  12. Diseñando un Botón Cristalino
  13. Aplicando Efectos a Imágenes Bitmap

Chéquenlos están muy buenos.

Salu2!

Construyendo aplicaciones de última generación con Silverlight y Windows Azure (parte 1 de 3): Silverlight + Live Search

Introducción

Incorporar un mecanismo de búsqueda adecuado en las aplicaciones es un escenario muy común hoy en día para construir soluciones con alta funcionalidad, usando diversos servicios especializados que estén al alcance de nuestra mano.  Live Search es un buen ejemplo de este tipo de servicios, el cual podemos utilizar efectuar búsquedas en sitios, imágenes, foros, etc.

En este artículo veremos cómo utilizar el servicio de búsqueda de Microsoft Live Search e incorporarlo en nuestras aplicaciones Silverlight.

API de Live Search

El API de Live Search está disponible hoy en día para implementar características de búsqueda en nuestras aplicaciones de cualquier tipo:  Windows, Web, Móvil, o RIA; como es el caso de este ejemplo ya que usaremos Silverlight.

Para poder usar esta API es necesario crear una cuenta, la cual te dará una llave única relacionada a tu cuenta de MSN.  Esta llave es requerida para crear la petición al servicio y obtener los resultados encontrados.

El API de Live Search soporta 3 tipos diferentes de protocolos:

  • JSON
  • XML
  • SOAP

La decisión de utilizar uno u otro depende directamente del tipo de aplicación en donde usarás esta API.  En nuestro caso utilizaremos SOAP aunque XML o JSON son también opciones bastante viables.

La dirección para obtener una llave es para Live Search es: http://search.live.com/developers/default.aspx

Creando la solución

Crearemos una nueva aplicación Silverlight utilizando la plantilla de Visual Studio .NET 2008 llamada SLSearch.  Esta aplicación será de tipo Application.

Creando el XAML

La aplicación necesita básicamente los siguientes controles:

  • Un control para que el usuario escriba la búsqueda que desee realizar
  • Un control para iniciar esa búsqueda
  • Un control para desplegar los resultados apropiadamente

El siguiente XAML crear un TextBox, Button y ListBox acomodados en un contenedor de tipo Grid.  El resultado de la búsqueda la desplegaremos como una serie de hipervínculos.