Compartir a través de


Inténtelo: crear un lector de noticias RSS

Cc294852.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(ES-ES,Expression.30).png

Las fuentes web, como las fuentes de noticias o podcasts, suelen usar archivos con formato XML para su contenido. Puede usar programas denominados lectores o agregadores para suscribirse a fuentes web y leerlas. A menudo, los lectores permanecen abiertos en el equipo y se actualizan con contenido nuevo cada vez que se actualiza la fuente web. El mecanismo de entrega más común de las fuentes web se denomina Really Simple Syndication (RSS).

Los siguientes procedimientos muestran cómo crear un lector RSS sencillo mediante Microsoft Expression Blend y una fuente RSS. El lector RSS puede servir para leer cualquier origen de datos XML, incluso un archivo local o un archivo XML de su propio sitio web.

[!NOTA]

En los siguientes procedimientos, se presupone que dispone de una conexión activa a Internet.

[!NOTA]

Microsoft Silverlight no admite orígenes de datos XML. No obstante, puede obtener información acerca de cómo trabajar con datos XML en Análisis de datos XML en Silverlight en MSDN.

Para crear el origen de datos

  1. En el panel Datos, haga clic en Agregar origen de datos en directo Cc294852.601d2ab6-5e4b-49ab-bb3c-064456dc8184(ES-ES,Expression.30).png y, a continuación, haga clic en Definir nuevo origen de datos XML.

    Aparece el cuadro de diálogo Definir nuevo origen de datos XML.

  2. Junto a Nombre del origen de datos, escriba "rssDS".

  3. Junto a Ruta o dirección URL de archivo XML, escriba "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml".

    Cc294852.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Puede escribir cualquier dirección URL o ruta de acceso local a un archivo XML en el campo Ruta o dirección URL de archivo XML. Si desea usar otra fuente RSS, puede encontrar la dirección URL abriendo el sitio web de un proveedor en un explorador web (por ejemplo, http://www.msnbc.com) y buscando un vínculo a las fuentes RSS. Normalmente, el sitio web mostrará las fuentes disponibles y los botones que permiten suscribirse a ellas. Busque un vínculo al archivo XML de la fuente que desea.

  4. En Definir en, realice una de las acciones siguientes:

    • Para que los datos estén disponibles para todos los documentos de la aplicación, seleccione Proyecto.

    • Para que los datos estén disponibles únicamente para el documento actual, seleccione Este documento.

  5. Haga clic en Aceptar.

    Se agrega un origen de datos denominado rssDS en el panel Datos. Expanda los nodos y examine los distintos campos del origen de datos. No se muestran los datos, solo los nombres de los campos que contienen los datos y su estructura.

    Ahora ya puede enlazar controles de la aplicación a los datos.

    Panel Datos después de agregar el origen de datos XML

    Cc294852.8ce5d9eb-ca88-4eb9-8ad1-4719fdc0514e(ES-ES,Expression.30).png

Para enlazar a campos de datos arrastrándolos desde el panel Proyectos

Existen diversas formas de enlazar controles a elementos de un origen de datos. El siguiente procedimiento muestra cómo arrastrar campos de origen de datos desde el panel Datos hasta la mesa de trabajo para crear dos controles nuevos. También se pueden arrastrar campos de origen de datos a controles existentes para enlazar los datos a propiedades de estos controles.

  1. En el panel Herramientas, haga clic en Activos Cc294852.0d8b8d29-1af9-418f-8741-be3097d76eab(ES-ES,Expression.30).png.

  2. En el panel Activos, seleccione Todo en la categoría Controles.

  3. Haga clic Controles y, a continuación, en el control ImageCc294852.adb61060-da5f-4279-8c0d-3681bfeb145c(ES-ES,Expression.30).png.

  4. Con el mouse, dibuje un control Image en la mesa de trabajo que tenga, aproximadamente, 100 píxeles de ancho por 100 píxeles de alto, en la esquina superior izquierda.

  5. En el panel Datos, expanda los nodos rss, channel e image. Arrastre el nodo url : (String) al nuevo objeto Image.

    El objeto Image muestra la imagen del sitio web MSNBC. El panel Datos muestra un rectángulo delimitador amarillo alrededor del origen de datos para indicar que parte de los datos se ha enlazado a un control.

    Mesa de trabajo tras agregar un objeto Image y enlazarlo al elemento de datos URL (su mesa de trabajo puede tener un aspecto diferente)

    Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(ES-ES,Expression.30).png

  6. En el panel Datos, expanda los nodos rssDS, rss y channel. Arrastre el nodo title : (String) a la mesa de trabajo, a la derecha del objeto Image.

    Se crea un control TextBlock para mostrar el título de la fuente de noticias. La herramienta Selección permite mover y escalar el objeto TextBlock, mientras que las propiedades de las categorías Texto y Pinceles del panel Propiedades permiten cambiar la apariencia del texto.

    Mesa de trabajo tras agregar un objeto TextBlock y enlazarlo al elemento de datos title (su mesa de trabajo puede tener un aspecto diferente)

    Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(ES-ES,Expression.30).png

Para usar un contexto de datos para enlazar varios controles a los mismos datos

Un contexto de datos, cuando se asigna a un objeto primario, permite que todos los objetos secundarios usen la misma instantánea de los datos. Esto es útil si desea crear un diseño maestro/detalles, en el que, si hace clic en un elemento de una lista (recuadro maestro), aparecen los detalles de ese elemento en otro objeto (recuadro de detalles).

  1. Cree un contenedor de diseño Grid Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ES-ES,Expression.30).png que cubra el área que hay debajo de la imagen y el título. El objeto Grid resultante será el objeto primario donde el contexto de datos se establecerá de forma automática en el siguiente paso.

  2. Seleccione el nuevo objeto Grid en el panel Objetos y escala de tiempo para activarlo y poder agregarle objetos secundarios.

  3. En el panel Datos, asegúrese de que está seleccionado el Modo de lista Cc294852.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(ES-ES,Expression.30).png. Los elementos arrastrados desde el panel Datos en el Modo de lista crearán un control maestro.

  4. Expanda los nodos rss, channel y item (Array). Arrastre el nodo title : (String) hasta la esquina superior izquierda del objeto Grid.

    Se crea un control ListBox y se rellena con los títulos de todos los artículos de noticias de la colección item (Array). Si selecciona el objeto Grid y mira en el panel Propiedades, verá un rectángulo de selección amarillo alrededor de la propiedad DataContext para mostrar que está enlazada a datos. Si selecciona el objeto LixtBox, verá la propiedad ItemsSource enlazada a datos.

    [!NOTA]

    La propiedad ItemsSource (original de elementos) puede establecerse en cualquier colección de elementos. Las propiedades ItemsSource (original de elementos) e Items (elementos) no pueden usarse de forma simultánea. La propiedad ItemsSource (original de elementos) suele usarse para enlazar a una colección de elementos generados. La propiedad Items (elementos) puede usarse para agregar elementos individuales de forma manual mediante el botón Editar elementos de esta colección.

    La mesa de trabajo tras la adición de un objeto ListBox y su enlace a la colección de datos item (Array) (la apariencia de la imagen habrá cambiado)

    Cc294852.6e02aab9-751f-49ee-ac12-65d92eb432ef(ES-ES,Expression.30).png

  5. En el panel Datos, haga clic en Modo de detalles Cc294852.7786ee28-da1d-41b2-93fd-b4caeb75ab98(ES-ES,Expression.30).png.

  6. Expanda los nodos rss, channel y item (Array). Arrastre el nodo description : (String) a la derecha del objeto Grid.

    Se crea un objeto Grid con un objeto TextBlock dentro que muestra la descripción del artículo de noticias seleccionado. Si selecciona el objeto TextBlock y mira en el panel Propiedades, verá un rectángulo de selección amarillo alrededor de la propiedad Text para mostrar que está enlazada a datos. Para ver detalles específicos del enlace a datos, haga clic en Opciones avanzadas de la propiedad Cc294852.e3343378-f63e-4d8f-9847-97c1a58aadc5(ES-ES,Expression.30).png junto a la propiedad Text y haga clic en Enlace de datos.

    Mesa de trabajo tras agregar un objeto TextBlock y enlazarlo al elemento de datos Description (su mesa de trabajo puede tener un aspecto diferente)

    Cc294852.7e00a38f-ea59-47a3-84cd-3caf57c6d805(ES-ES,Expression.30).png

  7. Presione F5 para ejecutar la aplicación y, a continuación, haga clic en el cuadro de lista para cambiar la selección y poder leer distintas descripciones de noticias.

    [!NOTA]

    Algunos elementos podrían incluir texto HTML. Puede crear un convertidor de valores que quite los elementos HTML de la cadena Description y, a continuación, aplicar ese convertidor de valores en el cuadro de diálogo Crear enlace de datos. Para obtener información acerca de cómo crear un convertidor de valores, vea Inténtelo: convertir datos de un tipo a otro.