YouTube Search App #3

Dieser Artikel ist ein Gastbeitrag von Tobias Oliver, Informatik-Student in Karlsruhe und begeisterter App-Entwickler. In diesem Artikel soll es um die XML-Verarbeitung (Atom) gehen. Allerdings an einem spannenden Beispiel, nicht dem alt-bekannten RSS-Reader. Wir holen uns einen Video-Feed von YouTube, stellen ihn hübsch dar und wollen am Ende natürlich das Video sehen.

Dieses mal wollen wir unserer YouTube-App ein schöneres Design verpassen und die Video-Seite implementieren.

Den Hintergrund der App kann man ganz einfach im „Object Inspector“ konfigurieren. Im Normalfall findet man ihn auf der rechten Seite in Visual Studio. Einfach das oberste Grid auswählen und unter „Pinsel“ den gewünschten Hintergrund einstellen. Das geht natürlich auch direkt im XAML-Code. Wir wählen uns einen schlichten Farbverlauf.

Background

Um noch einen Titel anzuzeigen, erstellen wir 2 Zeilen im Grid mit:

Anschließend den folgenden TextBlock:

Das bereits vorhandene GridView schieben wir in Grid.Row="1" und mit SelectionMode="None" verhindert man, dass ein Element ausgewählt werden kann.

Per Default sieht das GridView nicht wirklich schön aus und bei scrollen läuft es auch nicht flüssig.

Um das zu lösen, möchte ich einen kleinen Trick zeigen. Wenn man das ItemsPanel vom GridView verändert und ein VariableSizedWrapGrid einstellt, kann man das Problem mit dem rechten Rand lösen und beim scrollen gibt es eine flüssige Animation anstatt dem ruckeln. Das geht so:

Nun erstellen wir ein eigenes ItemTemplate für die Video-Kacheln. Das geht sehr bequem mit einem Rechtsklick auf das GridView – „Zusätzliche Vorlagen bearbeiten“ –  „Generierte Elemente bearbeiten (ItemTemplate)“ Kopie bearbeiten… – als Name „YoutubeDataTemplateDieses Dokument auswählen und OK.

Das erzeugte Template erweitern wir nun um einen Like / Dislike – Indikator. Die Werte dazu haben wir bereits in unserem Model erzeugt mit „RelativeLikes“ und „RelativeDislikes“:

Das Ergebnis kann sich schon sehen lassen:

test

Ein erster Screenshot

Kommen wir zur Anzeige von Videos. Dazu erstellen wir eine neue „Leere Seite“ und nennen Sie „VideoPage.xaml“.  Die grundlegende Struktur und den Hintergrund übernehmen wir einfach von unserer „MainPage“.  Auf dieser Seite benötigen wir allerdings einen „BackButton“ um auf die vorherige Seite zurückzukehren. Um dem Style-Guide zu folgen, am besten so:

Den Inhalt der Video-Seite können wir größtenteils per Datenbindung aus unserem YoutubeDataItem übernehmen. Dazu müssen wir dieses beim navigieren übergeben. Also zurück zur MainPage.xaml.

Um ein Element im GridView anzuklicken muss IsItemClickEnabled="True" gesetzt werden, und dann fügen wir einen Ereignishandler für das ItemClick-Event hinzu, z.B. mit ItemClick="GridViewItemClick" und im Code-Behind implementieren wir den Übergang zur „VideoPage“.

Wir lassen den aktuellen Frame einfach zu einer VideoPage navigieren und übergeben das ClickedItem des GridView als Parameter:

Und nach dem navigieren auf die VideoPage müssen wir das Item dort als DataContext setzen:

Und das GoBack vom BackButton wird einfach mit this.Frame.GoBack(); gefüllt.

Den Rest können wir nun komplett im XAML erledigen.

Fertig ist die VideoPage. So sieht das Resultat aus:

videopage

Die fertige Video-Seite

Auch dieses mal, gibt es natürlich den bisherigen Quellcode zum Download:

  YouTube-Search #2 (26,1 KiB)

You may also like...

Schreibe einen Kommentar

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