Freigeben über

Weiterführende Themen: Erstellen eines RSS-Newsreaders

  • Artikel

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

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 Really Simple Syndication (RSS).

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.30).gifHinweis:

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

Microsoft Silverlight bietet keine Unterstützung für XML-Datenquellen. Informationen zum Arbeiten mit XML-Daten finden Sie jedoch unter Analyisieren von XML-Data in Silverlight (möglicherweise in englischer Sprache) in MSDN.

So erstellen Sie die Datenquelle

  1. Klicken Sie im Datenpanel auf Live-Datenquelle hinzufügenCc294852.601d2ab6-5e4b-49ab-bb3c-064456dc8184(DE-DE,Expression.30).png und anschließend auf Neue XML-Datenquelle definieren.

    Das Dialogfeld Neue XML-Datenquelle definieren wird angezeigt.

  2. Geben Sie neben Datenquellennamen "rssDS" ein.

  3. Geben Sie neben das Textfeld URL für XML-Daten "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" ein.

    Cc294852.alert_tip(DE-DE,Expression.30).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 die Website eines Anbieters (z. B. http://www.msnbc.com) (möglicherweise in englischer Sprache) in einem Webbrowser öffnen und nach einem Link zu dessen RSS-Feeds suchen. In der Regel werden auf der Website verfügbare Feeds sowie Schaltflächen zum Abonnieren der Feeds angezeigt. Suchen Sie nach einem Link zur XML-Datei für den gewünschten Feed.

  4. Führen Sie unter Datenquelle erstellen in einen der folgenden Schritte aus:

    • Wenn die Daten für alle Dokumente in der Anwendung verfügbar sein sollen, wählen Sie Projekt aus.

    • Wenn die Daten nur für das aktuelle Dokument verfügbar sein sollen, wählen Sie Dieses Dokument aus.

  5. Klicken Sie auf OK.

    Im Datenpanel wird eine Datenquelle namens 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.8ce5d9eb-ca88-4eb9-8ad1-4719fdc0514e(DE-DE,Expression.30).png

So binden Sie 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 Datenpanel 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.

  1. Klicken Sie im Werkzeugpanel auf Objekte Cc294852.0d8b8d29-1af9-418f-8741-be3097d76eab(DE-DE,Expression.30).png.

  2. Wählen Sie im Objektepanel in der Kategorie SteuerelementeAlle.

  3. Klicken Sie auf Steuerelemente, auf Systemsteuerelemente und anschließend auf das Image-Steuerelement Cc294852.adb61060-da5f-4279-8c0d-3681bfeb145c(DE-DE,Expression.30).png.

  4. Ziehen Sie mit der Maus ein etwa 100 Pixel breites und 100 Pixel hohes Image-Steuerelement auf die Zeichenfläche in die linke obere Ecke.

  5. Erweitern Sie im Datenpanel die Knoten rss, channel und image. Ziehen Sie den Knoten url : (String) auf das neue Image-Objekt.

    Das Image-Objekt zeigt das Bild von der MSNBC-Website an. Das Datenpanel zeigt einen gelben Begrenzungsrahmen um die Datenquelle als Zeichen dafür an, dass ein Teil der Daten an ein Steuerelement gebunden worden ist.

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

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

  6. Erweitern Sie im Datenpanel die Knoten rssDS, rss und channel. Ziehen Sie den Knoten title : (String) auf die Zeichenfläche rechts neben das Image-Objekt.

    Ein TextBlock-Steuerelement wird erstellt, um den Titel des Newsfeeds anzuzeigen. Mit dem Auswahlwerkzeug können Sie das TextBlock-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.

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

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

So binden Sie mit einem Datenkontext mehrere Steuerelemente an dieselben Daten

Wenn ein Datenkontext einem übergeordeten Objekt zugewiesen wird, können alle untergeordneten Objekte denselben Datensnapshot verwenden. Dies ist praktisch, wenn Sie ein Master-Details-Design erstellen möchten, bei dem, wenn Sie auf ein Element in einer Liste (Masterbereich) klicken, die Daten zu diesem Element in einem anderen Objekt (Detailbereich) angezeigt werden.

  1. Erstellen Sie einen Grid-Layoutcontainer Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(DE-DE,Expression.30).png, der den Bereich unter dem Bild und dem Titel abdeckt. Das sich daraus ergebende Grid-Objekt ist das übergeordnete Objekt. Dort wird der Datenkontext automatisch im nächsten Schritt festgelegt.

  2. Wählen Sie das neue Grid-Objekt im Panel Objekte und Zeitachsen aus, um es zu aktivieren, sodass Sie untergeordnete Objekte hinzufügen können.

  3. Stellen Sie sicher, dass im Datenpanel ListenmodusCc294852.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(DE-DE,Expression.30).png ausgewählt ist. Elemente, die aus dem Datenpanel in den Listenmodus gezogen werden, erstellen ein Mastersteuerelement.

  4. Erweitern Sie die Knoten rss, channel und item(Array). Ziehen Sie den Knoten title : (String) in die linke obere Ecke des Grid-Objekts.

    Ein ListBox-Steuerelement wird erstellt und mit den Titeln aller Nachrichten in der Sammlung item (Array) aufgefüllt. Wenn Sie das Grid-Objekt auswählen und das Eigenschaftenpanel betrachten, sehen Sie einen gelben Begrenzungsrahmen um die DataContext-Eigenschaft, der anzeigt, dass sie an Daten gebunden ist. Wenn Sie das ListBox-Objekt auswählen, sehen Sie die an Daten gebundene ItemsSource-Eigenschaft.

    Cc294852.alert_note(DE-DE,Expression.30).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.

    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.30).png

  5. Klicken Sie im Datenpanel auf Details-Modus Cc294852.7786ee28-da1d-41b2-93fd-b4caeb75ab98(DE-DE,Expression.30).png.

  6. Erweitern Sie die Knoten rss, channel und item(Array). Ziehen Sie den Knoten description : (String) auf die rechte Seite des Grid-Objekts.

    Ein Grid-Objekt wird mit einem TextBlock-Objekt in seinem Innern erstellt, das die Beschreibung der ausgewählten Nachricht anzeigt. Wenn Sie das TextBlock-Objekt auswählen und das Eigenschaftenpanel betrachten, sehen Sie einen gelben Begrenzungsrahmen um die Text-Eigenschaft, der anzeigt, dass sie an Daten gebunden ist. Um die spezifischen Eigenschaften der Datenbindung zu sehen, klicken Sie neben der Text-Eigenschaft auf Erweiterte EigenschaftenoptionenCc294852.e3343378-f63e-4d8f-9847-97c1a58aadc5(DE-DE,Expression.30).png, und klicken Sie anschließend auf Datenbindung.

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

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

  7. Drücken Sie F5, um die Anwendung auszuführen, und klicken Sie anschließend auf ein beliebiges Element im Listenfeld, um die Auswahl zum Lesen anderer Nachrichtenbeschreibungen zu ändern.

    Cc294852.alert_note(DE-DE,Expression.30).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: Konvertieren zwischen Datentypen.