Partager via

Essayez ! Créer un lecteur de News RSS

  • Article

Cc294852.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(fr-fr,Expression.40).png

Les flux Web, tels que les échanges de News (discussion) ou les podcasts, utilisent souvent des fichiers mis en forme en XML pour leur contenu. Vous pouvez recourir à des programmes appelés lecteurs ou agrégateurs pour vous abonner aux flux Web et les lire. Il arrive souvent qu’un lecteur reste ouvert sur votre ordinateur et qu’il se mette à jour tout seul avec le nouveau contenu pendant l’actualisation du flux Web. Le mécanisme de livraison de flux Web le plus connu s’appelle le RSS (Really Simple Syndication).

Les procédures suivantes montrent comment créer un lecteur RSS simple à l’aide de Microsoft Expression Blend et d’un flux RSS. Le lecteur RSS vous permet de lire n’importe quelle source de données XML, notamment un fichier local ou un fichier XML de votre site Web.

NoteRemarque :

Dans les procédures suivantes, il est supposé que vous disposez d’une connexion active à Internet.
NoteRemarque :

Microsoft Silverlight ne prend pas en charge les sources de données XML. Vous pouvez toutefois trouver des informations sur l’utilisation des données XML dans la page relative à l’analyse de données XML dans Silverlight Cc294852.xtlink_newWindow(fr-fr,Expression.40).png sur MSDN.

Pour créer la source de données

  1. Dans le panneau Données, cliquez sur Créer une source de données Cc294852.601d2ab6-5e4b-49ab-bb3c-064456dc8184(fr-fr,Expression.40).png, puis cliquez sur Définir une nouvelle source de données XML.

    La boîte de dialogue Définir une nouvelle source de données XML s’affiche.

  2. En regard de Nom de la source de données, tapez rssDS .

  3. En regard de la zone de texte URL ou chemin d'accès du fichier XML, tapez http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml .

    tip noteConseil :

    Vous pouvez utiliser une URL ou un chemin d’accès local d’un fichier XML dans le champ URL des données XML. Si vous souhaitez utiliser un autre flux RSS, vous pouvez localiser l’URL en ouvrant un site Web d’un fournisseur Web (par exemple, http://www.msnbc.com (en anglais)) et en recherchant un lien vers ses flux RSS. En règle générale, le site Web contient la liste des flux disponibles ainsi que les boutons qui vous permettent de vous abonner au flux. Recherchez un lien vers le fichier XML correspondant au flux souhaité.

  4. Sous Définir dans, effectuez l’une des opérations suivantes :

    • Pour mettre les données à la disposition de tous les documents de votre application, sélectionnez Projet.

    • Pour que les données soient disponibles seulement dans le document actuel, sélectionnez Ce document.

  5. Cliquez sur OK.

    Une source de données nommée rssDS est ajoutée dans le panneau Données. Développez les nœuds et examinez les différents champs de la source de données. Les données ne sont pas affichées ; mais le sont les noms des champs contenant les données et leur structure.

    Vous pouvez à présent lier les contrôles de votre application aux données.

    Panneau Données après l'ajout de la source de données XML

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

Pour lier des champs de données par glissement des champs à partir du panneau Projets

Il existe de nombreux moyens de lier des contrôles à des éléments d’une source de données. La procédure suivante indique comment faire glisser des champs de sources de données du panneau Données vers la planche graphique pour créer deux contrôles. Vous pouvez également faire glisser des champs de sources de données dans des contrôles existants pour lier les données aux propriétés de ces contrôles.

  1. Dans le panneau Outils, cliquez sur ComposantsCc294852.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,Expression.40).png.

  2. Dans le panneau Composants, sélectionnez Tous dans la catégorie Contrôles.

  3. Cliquez sur Contrôles, puis cliquez sur le contrôle Image  Cc294852.adb61060-da5f-4279-8c0d-3681bfeb145c(fr-fr,Expression.40).png.

  4. À l’aide de la souris, dessinez un contrôle Image sur la planche graphique, d’environ 100 pixels en largeur sur 100 pixels en hauteur, dans le coin supérieur gauche.

  5. Dans le panneau Données, développez les nœuds rss, channel, et image. Faites glisser le nœud url : (String) sur le nouvel objet image.

    L'objet image affiche l'image du site Web MSNBC. Le panneau Données affiche un rectangle englobant de couleur jaune autour de la source de données pour indiquer que cette partie de données a été liée à un contrôle.

    Planche graphique après l’ajout et la liaison d’un objet Image à l’élément de données URL (la planche graphique peut changer d’apparence)

    Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(fr-fr,Expression.40).png

  6. Dans le panneau Données, développez les nœuds rssDS, rss, et channel. Faites glisser le nœud title : (String) sur la planche graphique vers la droite de l’objet Image.

    Un contrôle TextBlock est créé pour afficher le titre de l’échange de News. Utilisez l’outil Sélection pour déplacer l’objet bloc de texte et le mettre à l’échelle, puis utilisez les propriétés des catégories Texte et Pinceaux du panneau Propriétés pour modifier l’apparence du texte.

    Planche graphique après l’ajout et la liaison d’un objet bloc de texte à l’élément de données titre (la planche graphique peut changer d’apparence)

    Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(fr-fr,Expression.40).png

Pour utiliser un contexte de données pour lier plusieurs contrôles à des données identiques

L’affectation d’un contexte de données à un objet parent permet à tous les objets enfants d’utiliser le même instantané de données. Cette méthode est utile pour créer un modèle liste/détails dans lequel, si vous cliquez sur un élément dans une liste (le volet Liste), les détails concernant cet élément apparaissent dans un autre objet (le volet Détails).

  1. Créez un conteneur de disposition Grid  Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(fr-fr,Expression.40).png qui couvre la zone située en dessous de l’image et du titre. L’objet Grid obtenu sera votre objet parent là où le contexte de données sera automatiquement défini par l’étape suivante.

  2. Sélectionnez le nouvel objet Grid dans le panneau Objets et chronologie pour l’activer afin de pouvoir ajouter des objets enfants.

  3. Dans le panneau Données, assurez-vous que le mode Liste Cc294852.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(fr-fr,Expression.40).png est sélectionné. Les éléments déplacés à partir du panneau Données en mode Liste permettent de créer un contrôle de liste.

  4. Développez les nœuds rss, channel, et item (Array). Faites glisser le nœud title : (String) dans le coin supérieur droit de l’objet Grid.

    Un contrôle ListBox est créé et renseigné avec les titres de tous les articles d’actualité dans la collection item (Array). Si vous sélectionnez l’objet grid et regardez dans le panneau Propriétés, vous verrez un rectangle englobant jaune autour de la propriété DataContext pour indiquer qu’elle est liée aux données. Si vous sélectionnez l’objet Zone de liste, vous verrez la propriété ItemsSource liée aux données.

    NoteRemarque :

    Vous pouvez affecter à la propriété ItemsSource n’importe quelle collection d’éléments. Seule l’une des propriétés ItemsSource ou Items peut être utilisée à la fois. La propriété ItemsSource permet généralement de lier à une collection d’éléments générés. Vous pouvez utiliser la propriété Items pour ajouter manuellement des éléments individuels à l’aide du bouton Modifier les éléments de cette collection.

    Planche graphique après l’ajout et la liaison d’un objet ListBox à la collection de données d’éléments (la planche graphique peut changer d’apparence)

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

  5. Dans le panneau Données, cliquez sur Mode Détails Cc294852.7786ee28-da1d-41b2-93fd-b4caeb75ab98(fr-fr,Expression.40).png.

  6. Développez les nœuds rss, channel, et item (Array). Faites glisser le nœud description : (String) dans la partie droite de l’objet grid .

    Un objet Grid est créé avec un objet TextBlock à l’intérieur qui affiche la description de l’article d’actualité sélectionné. Si vous sélectionnez l’objet TextBlock et regardez dans le panneau Propriétés, vous verrez un rectangle englobant jaune autour de la propriété Text pour indiquer qu’elle est liée aux données. Pour voir les détails de la liaison de données, cliquez sur Options avancées Cc294852.e3343378-f63e-4d8f-9847-97c1a58aadc5(fr-fr,Expression.40).png en regard de la propriété Text , puis cliquez sur Liaison de données.

    Planche graphique après l’ajout et la liaison d’un objet TextBlock à l’élément de données Description (la planche graphique peut changer d’apparence)

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

  7. Appuyez sur F5 pour exécuter l’application, puis cliquez sur un élément quelconque de la zone de liste pour modifier la sélection afin de lire des descriptions de News différentes.

    NoteRemarque :

    Il est possible que certains éléments contiennent du texte HTML. Vous pouvez créer un convertisseur de valeurs qui supprimerait les éléments HTML de la chaîne Description et que vous appliqueriez ensuite dans la boîte de dialogue Créer une liaison de données. Pour plus d’informations sur la création d’un convertisseur de valeurs, voir Essayez ! Convertir des données d'un type vers un autre.

Copyright © 2011 Microsoft Corporation. Tous droits réservés.