Einbauen von Live Tiles mit lokalen Notifications in einer Windows Store App

Article
04/15/2013

Live Tiles geben Euch die Möglichkeit, die Benutzer in Eure App immer wieder hineinzuziehen. Ich will Euch heute zeigen, wie man ohne viel Code auf die Schnelle eine Live Tile in eine Windows Store einbaut, indem man lokale Updates an die Kachel schickt.

Wir wollen das ganze an einem RSS Reader Framework demonstrieren. Wir haben für dieses Beispiel das RSS Reader Framework von atwork gewählt.

Nachdem ihr das Framework heruntergeladen und entpackt habt, öffnet bitte die FeedReaderApp.sln Datei. Sofern Ihr Visual Studio auf dem Rechner installiert habt (hier findet Ihr Visual Studio Express für Windows 8), sollte jetzt die Solution in Visual Studio geöffnet werden.

1.) Wir klicken jetzt rechts im Solution Explorer auf den Ordner Common mit der rechten Maustaste und fügen ein neues Item hinzu.

Dann wählen wir die Kategorie Class und nennen unsere Klasse LiveTileManager.cs .

2.) Die LiveTileManager Klasse wird nun für uns geöffnet und wir sehen bereits den Code für die Grundstruktur der Klasse. Wir löschen den gesamten Code und ersetzen ihn mit folgendem Code:

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Text;

 using System.Threading.Tasks;

 using Windows.Data.Xml.Dom;

 using Windows.UI.Notifications;

 namespace FeedReaderApp.Common

     class LiveTileManager

         public static void SetLiveTile(TileTemplateType tileTemplateType, int seconds, int tag,

                                         Action<XmlDocument> customizeMethod)

             // Get tile template.

             var tileTemplate = tileTemplateType;

             var tileXml = TileUpdateManager.GetTemplateContent(tileTemplate);

             // Create notification.

             var notification = new TileNotification(tileXml);

             notification.ExpirationTime = DateTime.Now + TimeSpan.FromSeconds(seconds);

             notification.Tag = "Title " + tag;

             // Set notification options.

             customizeMethod(tileXml);

             // Update Live Tile.

             var upd = TileUpdateManager.CreateTileUpdaterForApplication();

             upd.Update(notification);

Wir haben uns hier eine Hilfsklasse für die Live Tiles erstellt. Die Methode SetLiveTile ist zuständig dafür, die Kachel mit den Updates zu aktualisieren.

Sie holt sich zunächst den XML Content vom Tile Template, den wir als Parameter mitgeben. Dann wird eine Notification erstellt. Wir setzen durch den mitgegebenen Parameter die Expiration Time der Notification. Das ist die Dauer, für die der Update in der Live Tile angezeigt wird. Danach setzen wir einen Tag an der Notification. Der Tag identifiziert die Notification und ist deswegen nötig, weil wir mehr als eine Notification an die Live Tile schicken und diese dann reihenweise durchlaufen werden. Es können maximal 5 Notifications durchlaufen werden. Danach rufen wir die customize Methode auf, die ein Delegate ist und in der wir den Inhalt des XML Codes für die Notification festlegen. Das sehen wir bei der Definition noch genauer.

Schließlich erstellen wir uns TileUpdater Objekt und rufen die Update Methode mit unserer erstellten Notification auf. Somit wird die Kachel aktualisiert.

3.) Nun müssen wir diese Methode aufrufen und den Content für die Updates liefern. Wir öffnen die Datei GroupedItemsViewModel.cs, die sich im Ordner ViewModel im Solution Explorer befindet.

Wir fügen nun in der Klasse eine weitere Methode namens UpdateLiveTile() mit folgendem Code hinzu:

         public void UpdateLiveTile()

             for (int i = 0; i < Math.Min(_feedItems.Count, 5); i++)

                 LiveTileManager.SetLiveTile(TileTemplateType.TileSquareText02,

                 60*60*24,i,

                 (XmlDocument tileXml) =>

                     var nodes = tileXml.GetElementsByTagName("text");

                     nodes[0].AppendChild(tileXml.CreateTextNode(_feedItems[i].FeedName));

                     nodes[1].AppendChild(tileXml.CreateTextNode(_feedItems[i].Title));

});

Wir haben hier eine Schleife, die für jedes FeedItem, maximal aber 5 Mal, die SetLiveTile Methode unseres LiveTileManagers aufruft. Wir wählen für unsere Live Tile die TileSquareText02 Vorlage. Als Expiration Time geben wir die Dauer von 24 Stunden in Form von Sekunden an. Der aktuelle Wert des Schleifendurchlaufs bildet unsere Tagzahl. Letztendlich passen wir noch den XML Content unseres TileTemplates an, in dem wir die zwei Textelemente der Vorlage auf den Namen des Blogs und den Titel des Posts setzen.

4.) Letztendlich müssen wir noch diese UpdateLiveTile() Methode aufrufen. Wir suchen uns die Property FeedsGroupedBySource und fügen direkt oberhalb des return Statements den Aufruf für die UpdateLiveTile() Methode ein. Das Ganze sieht dann so aus:

         public List<FeedGrouping> FeedsGroupedBySource

get

                 if (_feedItems == null) return null;

                 var query = from item in _feedItems

                             group item by item.FeedName

                             into g

                             select new FeedGrouping()

                                            Name = g.Key,

                                            FeedItems = g.Take(5).ToList()

};

                 UpdateLiveTile();

                 return query.ToList();

Jedes Mal, wenn ihr nun eure App startet, wird die Live Tile mit 5 Blogposts aktualisiert. Wie ihr seht, habt ihr mit wenigen Codezeilen eine Live Tile in Eure App eingebaut.

Einbauen von Live Tiles mit lokalen Notifications in einer Windows Store App

Additional resources