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

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, im zweiten Teil eine erste Anzeige der Tweets und im dritten Teil haben wir die Anzeige ergänzt und das Teilen als Windows 8 Feature hinzugefügt. In diesem Teil folgt nun das Verwenden von LiveTiles und das einbinden eines Application-Icons.

Hier findet ihr den Source-Code aus Teil 3 zum Herunterladen:

  TwitterSearch - Teil 3 (157,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.

die bisherige App

die bisherige App

Öffnet nun die Datei MainPageViewMode.cs, denn wir müssen die Refresh()-Methode ein wenig ergänzen. Vorher müssen wir aber eine weitere Referenz einfügen. Dafür fügen wir die folgende Zeile zur using-Liste hinzu:

Nun navigiert ihr mit dem Cursor unter die foreach-Schleife, aber vor der schließenden geschweiften Klammer der Methode und fügt dort den folgenden Code ein:

Somit funktioniert bereits das LiveTile bereits für eine große und eine kleine Kachel und wir können uns um ein neues App-Logo kümmern. Wir brauchen das Logo in mindestens 3 Größen und wenn wir ein großes Teil verwenden wollen sogar in 4 Größen:

  • Logo: 150 x 150
  • WideLogo: 310 x 150
  • SmallLogo: 30 x 30
  • StoreLogo: 50 x 50

Erstellt einfach das Logo mit einem Grafikprogramm, z.B. Paint oder Paint.Net. Anschließend entfernen wir die Bilder Logo.png, SmallLogo.png und StoreLogo.png aus dem Asset-Ordner und fügen an diese Stelle unsere eigenen Icons per Drag & Drop wieder ein.

Nun öffnet ihr die Package.appxmanifest-Datei über den Solution Explorer und ihr seht dort bereits euer neues Logo. Da ich die Hintergrund-Farbe grau ein wenig langweilig finde, ersetze ich diese durch ein freundliches Orange. Dazu klicke ich zunächst auf Tile Images and Logos und wähle dort unter Background color einen neuen Farbwert, z.B. FF6E22. Außerdem möchte ich nicht, dass der App-Name angezeigt wird. Daher trage ich bei Show name einfach No Logos ein.

Nun fehlt nur noch einen Splash-Screen. Dieser wird angezeigt, wenn die App startet. Dazu müssen wir ein Bild mit einer Größe von 620x300px erstellen. Auch hierfür eigenen sich wunderbar Paint oder Paint.Net. Nun wird einfach die Datei SplashScreen.png im Asset-Ordner ausgetauscht und schon verfügt die App über ein eigenes ansprechendes Logo.

Das könnte dich auch interessieren...

Schreibe einen Kommentar

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