Twitter-Search-App für Windows 8 #3

Willkommen zur neuen Serie hier bei tsjDEV.de. Wie der Name es schon vermuten lässt, möchte ich in dieser Serie eine Twitter-Suche implementieren. Im ersten Teil haben wir bereits das Daten-Modell implementiert und im zweiten Teil eine erste Anzeige der Tweets. In diesem Teil folgen eine weitere Darstellungsform und die Einbindung in den Teilen-Charm.

Hier findet ihr den den Source-Code aus Teil 2 als kostenlosen Download:

  TwitterSearch - Teil 2 (148,6 KiB)

Zunächst starten wir Visual Studio Express 2012 for Windows 8 und öffnen unser Projekt TwitterSearch. Im Solution-Explorer klicken wir nun doppelt auf die Datei MainPage.xaml. Anschließend öffnet sich diese Datei und wir sehen ein simuliertes Windows 8 Tablet als Vorschauobjekt und den bekannten XAML-Code, welcher die Oberfläche unserer App beschreibt.

bisherige App

bisherige App

Wechselt nun in die MainPageViewModel.cs-Datei. Bevor wir hier Änderungen vornehmen, müssen wir vorher erst noch eine weitere Referenz hinzufügen. Navigiert dazu ganz nach oben und tragt dort  using Windows.ApplicationModel.DataTransfer; in die Liste ein.

Anschließend definiert ihr zwischen der Klassendefinition und dem Konstruktor noch die folgende Variable:

Navigiert nun zum noch leeren Konstruktor und tragt dort den folgenden Code ein:

Anschließend erstellt ihr unterhalb des Konstruktors eine weitere Methode, welche wie folgt aussieht:

Dort tragt ihr jetzt den folgenden Rumpf ein:

 

Falls der Nutzer nun einen Tweet ausgewählt hat, so werden die entsprechenden Daten aufbereitet und einer durch den Nutzer ausgewählten App zur Verfügung gestellt. Ist kein Tweet ausgewählt, so wird eine (kleine) Fehlermeldung angezeigt.

Wenn wir die App nun testen, werden wir sehen, dass sobald ein Tweet ausgewählt wurde und der Teilen-Charm geöffnet wird, dass sich der Inhalt des Tweets teilen lässt.

das Teilen ist integriert

das Teilen ist integriert

Was aber auch auffällt, ist die Tatsache, dass man innerhalb der GridView gar nicht den gesamten Tweet sehen kann. Dies wollen wir nun nachholen, indem wir ein Popup definieren, welches sich beim Auswählen eines Tweets automatisch öffnet und den Tweet in voller Größe präsentiert. Dazu wechseln wir zurück zur MainPage.xaml-Datei und unterhalb von </ScrollViewer> definieren wir nun ein Popup:

Nun sucht ihr auf der MainPage.xaml das definierte Daten-Template zur Anzeige eines Tweets innerhalb unserer GridView. Dieses befindet sich innerhalb der Page-Resourcen. Markiert dort das Grid1 und öffnet das Properties-Fenster, was ihr am rechten Rand von Visual Studio findet. Dort wechseln wir zu den Events, indem wir oben neben dem Namen auf das Blitz-Icon klicken. Sucht dort das Tapped-Event und klickt doppelt in die leere TextBox.

Tapped-Event implementieren

Tapped-Event implementieren

Somit habt ihr einen neuen Methoden-Rumpf in der MainPage.xaml.cs-Datei angelegt. Nun definieren wir zunächst in der Code-Behind-Datei, welche sich automatisch geöffnet hat, eine Variable oberhalb des Konstruktors:

Den erstellen Methoden-Rumpf füllen wir nun mit den folgenden Zeilen:

Nun sind wir in der Lage einen Tweet in einem Popup-Fenster anzeigen zu lassen und diesen auch schon zu teilen.

Tweet-Popup in Aktion

Tweet-Popup in Aktion

  1. Einfach den Cursor in die Zeile mit dem Grid navigieren. []

Das könnte dich auch interessieren...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.