Weiterführende Themen: Erstellen eines RSS-Newsreaders

  • Artikel

Diese Seite bezieht sich nur auf WPF-Projekte

Bei Webfeeds, wie z. B. bei Newsfeeds oder Podcasts, werden häufig XML-formatierte Dateien für den Inhalt verwendet. Zum Abonnieren und Lesen von Webfeeds können Sie Programme verwenden, die als Reader oder Aggregator bezeichnet werden. Ein Reader bleibt häufig auf dem Computer geöffnet und wird mit neuem Inhalt aktualisiert, sobald der Webfeed aktualisiert wird. Der am häufigsten verwendete Bereitstellungsmechanismus für Webfeeds trägt die Bezeichnung RSS (Really Simple Syndication).

Anhand der folgenden Verfahren wird gezeigt, wie Sie mit Microsoft Expression Blend und einem RSS-Feed einen einfachen RSS-Reader erstellen können. Mit dem RSS-Reader können Sie beliebige XML-Datenquellen, sogar lokale Dateien oder XML-Dateien auf der eigenen Website lesen.

Cc294852.alert_note(de-de,Expression.10).gifHinweis:

Für die folgenden Verfahren ist eine aktive Internetverbindung erforderlich.
Cc294852.alert_note(de-de,Expression.10).gifHinweis:

Silverlight 2 unterstützt keine XML-Datenquellen. Informationen zum Arbeiten mit XML-Daten finden Sie jedoch unter Analyisieren von XML-Data in Silverlight im MSDN (möglicherweise in englischer Sprache).

Erstellen der Datenquelle

So erstellen Sie die Datenquelle

  1. Klicken Sie in Expression Blend im Menü Datei auf Neues Projekt. Klicken Sie dann auf WPF-Anwendung (EXE).

    Ein neues Projekt wird erstellt.

  2. Klicken Sie im Projektpanel unter Daten auf die Schaltfläche +XML.

    Das Fenster XML-Datenquelle hinzufügen wird geöffnet.

  3. Geben Sie im Feld Verbindungsname den Eintrag rssDS und im Feld URL für XML-Daten die URL für einen RSS-Feed ein. Zum Erstellen einer XML-Datenquelle zum MSNBC-Wetterfeed geben Sie beispielsweise folgende URL ein: http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml. Klicken Sie auf OK.

    Cc294852.alert_tip(de-de,Expression.10).gifTipp:

    Im Feld URL für XML-Daten können Sie eine beliebige URL oder einen beliebigen lokalen Pfad für eine XML-Datei eingeben. Wenn Sie einen anderen RSS-Feed verwenden möchten, können Sie nach der URL suchen, indem Sie auf der Website eines Anbieters (z. B. http://www.msnbc.com) nach einem Link zu dessen RSS-Feed suchen. In der Regel werden auf der Website verfügbare Feeds sowie Schaltflächen zum Abonnieren der Feeds angezeigt. Suchen Sie nach einer Verknüpfung mit der XML-Datei für den gewünschten Feed.

  4. Im Projektpanel wird unter Daten die Datenquelle rssDS hinzugefügt. Erweitern Sie die Knoten, und prüfen Sie die unterschiedlichen Felder der Datenquelle. Es werden nur die Namen der Felder mit den Daten und deren Struktur, nicht jedoch die Daten selbst angezeigt.

    Sie können nun Steuerelemente in der Anwendung an die Daten binden.

    Das Datenpanel nach dem Hinzufügen der XML-Datenquelle

    Cc294852.14b54f1f-7d84-4604-ba0a-35b50460b6cf(de-de,Expression.10).png

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Erstellen einer Bindung an Datenfelder durch Ziehen aus dem Projektpanel

Es gibt mehrere Möglichkeiten, Steuerelemente an Elemente in einer Datenquelle zu binden. Im folgenden Abschnitt wird beschrieben, wie Datenquellenfelder zum Erstellen von zwei neuen Steuerelementen aus dem Projektpanel auf die Zeichenfläche gezogen werden. Sie können aber auch Datenquellenfelder auf vorhandene Steuerelemente ziehen, um die Daten an Eigenschaften in diesen Steuerelementen zu binden.

So binden Sie Datenfelder durch Ziehen aus dem Projektpanel

  1. Erweitern Sie im Projektpanel unter Daten die Knoten rss, channel und image. Ziehen Sie den Knoten url : (String) auf die Zeichenfläche in der oberen linken Ecke. Klicken Sie in der eingeblendeten Dropdownliste auf das Image-Steuerelement.

    Auf der Zeichenfläche wird ein Image-Objekt erstellt, und das Dialogfeld Datenbindung erstellen wird angezeigt.

  2. Über Feld auswählen können Sie die Eigenschaft des Image-Objekts festlegen, an das das URL-Datenelement gebunden werden soll. Die Standardauswahl (Source (Quelle)) ist richtig. Klicken Sie daher auf OK.

    Das Bild, das an der URL aus dem Datenelement gefunden wird, wird im Image-Objekt auf der Zeichenfläche angezeigt. Ziehen Sie das Image-Objekt mit dem Auswahlwerkzeug Cc294852.2ff91340-477e-4efa-a0f7-af20851e4daa(de-de,Expression.10).png in die obere linke Ecke der Zeichenfläche, und verkleinern Sie es.

    Zeichenfläche nach Hinzufügen eines Image-Objekts und Binden an das URL-Datenelement (Ihr Bild kann anders aussehen)

    Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(de-de,Expression.10).png

  3. Erweitern Sie im Projektpanel unter Daten die Knoten rssDS, rss und channel. Ziehen Sie den Knoten title : (String) auf die Zeichenfläche rechts neben das Image-Objekt. Klicken Sie in der Dropdownliste auf das Label-Steuerelement. Die im Dialogfeld Datenbindung erstellen neben Feld auswählen angezeigte Standardeigenschaft ist richtig (Content (Inhalt)). Klicken Sie daher auf OK.

    Das Dialogfeld Datenvorlage erstellen wird geöffnet.

  4. Die Option Neue Datenvorlage und Anzeigefelder ist aktiviert und so konfiguriert, dass eine Datenvorlage erstellt wird, bei der das Title-Datenelement in einem TextBlock-Steuerelement angezeigt wird. Klicken Sie auf OK.

    Der Titel des Newsfeeds wird im neuen Label-Steuerelement (Beschriftung) auf der Zeichenfläche angezeigt. Mit dem Auswahlwerkzeug können Sie das Label-Objekt verschieben und in der Größe verändern. Mit den Eigenschaften in den Kategorien Text und Pinsel des Eigenschaftenpanels können Sie die Darstellung des Texts ändern.

    Cc294852.alert_note(de-de,Expression.10).gifHinweis:

    Das TextBlock-Steuerelement wird unter "Objekte und Zeitachsen" nicht angezeigt, da das TextBlock-Steuerelement Teil der Datenvorlage "Generated Content" ist, die zum Entwerfen der Darstellung des Steuerelements beim Binden an Daten verwendet wird. Weitere Informationen zu Vorlagen finden Sie unter Erstellen oder Bearbeiten von Steuerelementvorlagen.

    Zeichenfläche nach Hinzufügen eines Label-Objekts und Binden an das Titel-Datenelement (Ihre Zeichenfläche kann anders aussehen)

    Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(de-de,Expression.10).png

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Verwenden eines Datenkontexts zum Binden mehrerer Steuerelemente an dieselben Daten

Wenn Sie einem übergeordneten Objekt einen Datenkontext zuweisen, können Sie denselben Datensnapshot in mehreren untergeordneten Objekten verwenden. Dies ist nützlich, wenn Sie ein Master-Details-Design erstellen möchten, bei dem Sie auf ein Element in einer Liste (Masterbereich) klicken und daraufhin die Informationen zu diesem Element in einem anderen Objekt (Detailbereich) angezeigt werden.

So binden Sie mit einem Datenkontext mehrere Steuerelemente an dieselben Daten

  1. Erstellen Sie ein Gitternetzpanel Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(de-de,Expression.10).png, das den Bereich unter dem Bild und dem Titel abdeckt. Das Grid-Objekt ist das übergeordnete Objekt. Dort wird der Datenkontext festgelegt.

  2. Klicken Sie unter Objekte und Zeitachsen auf das neue Grid-Objekt, und suchen Sie im Eigenschaftenpanel die DataContext-Eigenschaft (Datenkontext) unter Allgemeine Eigenschaften.

  3. Klicken Sie auf die Schaltfläche Erweiterte EigenschaftenoptionenCc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(de-de,Expression.10).png, die mit der DataContext-Eigenschaft (Datenkontext) verknüpft ist, und klicken Sie auf Datenbindung.

    Das Dialogfeld Datenbindung erstellen wird geöffnet.

  4. Klicken Sie auf der Registerkarte Datenfeld (Standard) unter Datenquellen auf rssDS. Erweitern Sie unter Felder die Knoten rss und channel, klicken Sie auf item(Array) und dann auf Fertig stellen.

    Sie haben die Elementauflistung aus der Datenquelle dem neuen Grid-Objekt zugewiesen. Nun kann für jedes untergeordnete Objekt des Grid-Objekts derselbe Snapshot der Elementauflistung verwendet werden.

  5. Doppelklicken Sie mit dem Auswahlwerkzeug auf das neue Grid-Objekt, um es zu aktivieren. Dann können Sie untergeordnete Objekte hinzufügen.

  6. Wählen Sie in der Werkzeugpalette das ListBox-Steuerelement (Listenfeld) Cc294852.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(de-de,Expression.10).png, und zeichnen Sie ein Listenfeld, das die linke Hälfe des Rasters ausfüllt.

  7. Klicken Sie mit dem Auswahlwerkzeug auf das ListBox-Steuerelement (Listenfeld), und suchen Sie im Eigenschaftenpanel unter Allgemeine Eigenschaften die ItemsSource-Eigenschaft (Elementquelle).

    Cc294852.alert_note(de-de,Expression.10).gifHinweis:

    Für die ItemsSource-Eigenschaft kann eine beliebige Elementauflistung festgelegt werden. Es kann immer nur entweder die ItemsSource- oder die Items-Eigenschaft verwendet werden. Die ItemsSource-Eigenschaft wird in der Regel zum Erstellen einer Bindung an eine Auflistung mit generierten Elementen verwendet. Die Items-Eigenschaft kann verwendet werden, um einzelne Elemente mithilfe der Schaltfläche Elemente in dieser Auflistung bearbeiten manuell hinzuzufügen.

  8. Klicken Sie auf die Schaltfläche Erweiterte EigenschaftenoptionenCc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(de-de,Expression.10).png, die mit der ItemsSource-Eigenschaft (Elementquelle) verknüpft ist, und klicken Sie auf Datenbindung.

    Das Dialogfeld Datenbindung erstellen wird geöffnet.

  9. Klicken Sie auf die Registerkarte Expliziter Datenkontext. Erweitern Sie unter Felder die Knoten rss und channel, und klicken Sie dann auf item(Array). Klicken Sie auf die Schaltfläche Datenvorlage definieren.

    Das Dialogfeld Datenvorlage erstellen wird geöffnet.

  10. Aktivieren Sie die dritte Option Neue Datenvorlage und Anzeigefelder (Standard). Deaktivieren Sie das Kontrollkästchen neben item, um alle Kontrollkästchen gleichzeitig zu deaktivieren. Aktivieren Sie das Kontrollkästchen neben title, und klicken Sie dann auf OK.

    Das ListBox-Objekt ist nun an die item (Array)-Daten gebunden und zeigt die Liste der neuen Elemente an.

    Zeichenfläche nach Hinzufügen eines ListBox-Objekts und Binden an die Item-Datenauflistung (Array) (Ihre Zeichenfläche kann anders aussehen)

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

  11. Wählen Sie in der Werkzeugpalette das TextBlock-Steuerelement (Textblock) Cc294852.42165963-00f7-4a33-abcd-b0849edebada(de-de,Expression.10).png, und zeichnen Sie einen Textblock, der die rechte Hälfe des Rasters ausfüllt.

  12. Klicken Sie mit dem Auswahlwerkzeug auf das TextBlock-Steuerelement (Textblock), und suchen Sie im Eigenschaftenpanel unter Allgemeine Eigenschaften die Text-Eigenschaft. Klicken Sie auf die Schaltfläche Erweiterte Eigenschaftenoptionen Cc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(de-de,Expression.10).png, die mit der Text-Eigenschaft verknüpft ist, und klicken Sie auf Datenbindung.

    Cc294852.alert_note(de-de,Expression.10).gifHinweis:

    Wenn Sie der Zeichenfläche ein Textsteuerelement hinzufügen, wird der Bearbeitungsmodus für das Steuerelement geöffnet. Auf diese Weise können Sie sofort Inhalt in das Steuerelement eingeben, Sie können jedoch nicht auf alle Eigenschaften dieses Steuerelements zugreifen. Drücken Sie zum Beenden des Bearbeitungsmodus für das Steuerelement die ESC-TASTE, oder klicken Sie auf das Auswahlwerkzeug.

    Das Dialogfeld Datenbindung erstellen wird geöffnet.

  13. Klicken Sie auf die Registerkarte Expliziter Datenkontext. Erweitern Sie unter Felder die Knoten rss, channel und item (Array), und klicken Sie auf description : (String). Klicken Sie auf Fertig stellen.

    Das TextBlock-Objekt ist nun an die description-Daten des im ListBox-Objekt ausgewählten Elements gebunden, da beide Steuerelemente denselben Datenkontext verwenden, und zeigt die Beschreibung an.

    Zeichenfläche nach Hinzufügen eines TextBlock-Objekts und Binden an das Description-Datenelement (Ihre Zeichenfläche sieht möglicherweise anders aus.)

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

  14. Drücken Sie F5, um die Anwendung auszuführen, und klicken Sie dann auf das ListBox-Objekt in der Anwendung, um die Auswahl zum Lesen anderer Nachrichtenbeschreibungen zu ändern.

    Cc294852.alert_note(de-de,Expression.10).gifHinweis:

    Einige Elemente enthalten möglicherweise HTML-Text. Sie können einen Wertkonverter erstellen, der die HTML-Elemente aus der Description-Zeichenfolge entfernt. Anschließend können Sie diesen Wertkonverter im Dialogfeld Datenbindung erstellen anwenden. Weitere Informationen zum Erstellen eines Wertkonverters finden Sie unter Weiterführende Themen: Erstellen und Anwenden eines Wertkonverters.

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben