In diesem Tutorial möchte ich die absoluten Grundlagen der Kachelupdates erklären und was mir da am wichtigsten vorkommt.
Was lernt man in diesem Tutorial?
Wie man einfache bisher nur quadratische Livekacheln anhand dieser Templates erstellt. Außerdem Wie man die Livekachel wieder löscht und ein Ablaufdatum einstellt.
Hintergrundwissen
Die Livekacheln werden über einfache XML-Schemata definiert. Im Prinzip läuft das ganze so ab:
1). Benötigte Imports festlegen
2). XML-Schema anhand eines der Templates erstellen
3). Ablaufzeit festlegen in Sekunden, Minuten oder Tagen. Wenn man das nicht macht wird die Livekachel nach drei Tagen wieder gelöscht. Dann die Kachel vom TileUpdateManager updaten lassen.
4). Kachel löschen.
Wie ihr seht ist das Tutorial sehr einfach gehalten und eher für Leute gedacht, die sich nicht sooo viel mit dem Thema Livekacheln beschäftigen wollen. Wer sich näher mit dem ganzen näher beschäftigen will, guckt sich am besten
dieses Tutorial an.
Also fangen wir an: (Im ersten Expander der VB Code, im zweiten der C# Code)
0.5). Neues Projekt "LiveKachel" in eurer bevorzugten Sprache erstellen. (Leere App)
1). Benötigte Imports
1.1). TestOberfläche erstellen und die benötigten Bilder hinzufügen:
Die Oberläche, die mir dafür jetzt gut vorkam:
Das Bild welches ich mir in die Kachel geladen habe könnt ihr im Anhang finden. Dann erstellt ihr euch im Projektmappenexplorer einen Ordner "images" und fügt das Bild da ein. Oder ihr nehmt ein eigenes (150x150).
Ihr könnt das Bild auch auf euren Webserver hochladen und dann später die URL des Bildes eingeben.
2). Xml-Schema anhand eines der Templates erstellen. Hier wähle ich als erstes einmal "TileSquareImage". Da wird einfach nur ein einziges dickes quadratisches Bild in die Kachel geladen. Bei den anderen Templates guckt ihr euch am besten einfach einmal die XML-Struktur an, dann sieht man schon, welche Elemente man noch anpassen muss.
Spoiler anzeigen
Spoiler anzeigen
3). Kachel updaten und Ablaufzeit festlegen (Wenn gewünscht, sonst läuft das Ding nach drei Tagen von alleine aus)
Spoiler anzeigen
Spoiler anzeigen
4). Kachel löschen
Zum Ändern drückt ihr nun als erstes auf den Button zum Erstellen des XML-Dokuments und dann auf "Livekachel Ändern". Dann guckt mal auf den Startbildschirm. Nach 10 Sekunden wird sich das Bild wieder löschen.
Bei Fragen oder Anmerkungen hilft ein Post Den Umfang des Tutorials kann ich leicht erweitern, da das meiste im Prinzip von der MSDN abgeschrieben wurde Klick
Was lernt man in diesem Tutorial?
Wie man einfache bisher nur quadratische Livekacheln anhand dieser Templates erstellt. Außerdem Wie man die Livekachel wieder löscht und ein Ablaufdatum einstellt.
Hintergrundwissen
Die Livekacheln werden über einfache XML-Schemata definiert. Im Prinzip läuft das ganze so ab:
1). Benötigte Imports festlegen
2). XML-Schema anhand eines der Templates erstellen
3). Ablaufzeit festlegen in Sekunden, Minuten oder Tagen. Wenn man das nicht macht wird die Livekachel nach drei Tagen wieder gelöscht. Dann die Kachel vom TileUpdateManager updaten lassen.
4). Kachel löschen.
Wie ihr seht ist das Tutorial sehr einfach gehalten und eher für Leute gedacht, die sich nicht sooo viel mit dem Thema Livekacheln beschäftigen wollen. Wer sich näher mit dem ganzen näher beschäftigen will, guckt sich am besten
dieses Tutorial an.
Also fangen wir an: (Im ersten Expander der VB Code, im zweiten der C# Code)
0.5). Neues Projekt "LiveKachel" in eurer bevorzugten Sprache erstellen. (Leere App)
1). Benötigte Imports
1.1). TestOberfläche erstellen und die benötigten Bilder hinzufügen:
Die Oberläche, die mir dafür jetzt gut vorkam:
Quellcode
- <Button Content="XML erstellen" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="101" Width="252" Tapped="XML_Erstellen_Tapped"/>
- <Button Content="Livekachel ändern" HorizontalAlignment="Left" Margin="10,116,0,0" VerticalAlignment="Top" Height="101" Width="252" Tapped="LiveKachelAendern_Tapped"/>
- <Button Content="LiveKachel löschen" HorizontalAlignment="Left" Margin="10,657,0,0" VerticalAlignment="Top" Height="101" Width="252" Tapped="LiveKachelLoeschen_Tapped"/>
Das Bild welches ich mir in die Kachel geladen habe könnt ihr im Anhang finden. Dann erstellt ihr euch im Projektmappenexplorer einen Ordner "images" und fügt das Bild da ein. Oder ihr nehmt ein eigenes (150x150).
Ihr könnt das Bild auch auf euren Webserver hochladen und dann später die URL des Bildes eingeben.
2). Xml-Schema anhand eines der Templates erstellen. Hier wähle ich als erstes einmal "TileSquareImage". Da wird einfach nur ein einziges dickes quadratisches Bild in die Kachel geladen. Bei den anderen Templates guckt ihr euch am besten einfach einmal die XML-Struktur an, dann sieht man schon, welche Elemente man noch anpassen muss.
VB.NET-Quellcode
- Private tileXml As XmlDocument
- Private Async Function XML_Erstellen_Tapped(sender As Object, e As TappedRoutedEventArgs) As Task
- 'Hier wird jetzt das XML Gerüst erstellt:
- tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage)
- 'Jetzt wird zur besseren Veranschaulichung das ganze nochmal ausgegeben
- Await New Windows.UI.Popups.MessageDialog(tileXml.GetXml()).ShowAsync()
- 'Als nächstes wird direkt das Bild hinzugefügt
- 'Es sollte schon im Ordner "images" liegen:
- 'Das gibt jetzt alle Attribute des Bildes zurück:
- Dim tileImageAttributes As XmlNodeList = tileXml.GetElementsByTagName("image")
- DirectCast(tileImageAttributes(0), XmlElement).SetAttribute("src", "ms-appx:///images/Square.png")
- 'Falls ihr immer ein Bild von eurem Server laden wollt, einfach hier den Link davon angeben
- DirectCast(tileImageAttributes(0), XmlElement).SetAttribute("alt", "Unsere Beschreibung der Beispielgrafik")
- 'Damit die Blinden und halbblinden was zu sehen haben, hier natürlich noch die Beschreibung angeben ^^
- 'Jetzt ist das Zuweisen der Elemente fertig
- 'Also nochmal kurz das Ergebnis ausgeben:
- Await New Windows.UI.Popups.MessageDialog(tileXml.GetXml()).ShowAsync()
- End Function
VB.NET-Quellcode
- XmlDocument tileXml;
- private async void XML_Erstellen_Tapped(object sender, TappedRoutedEventArgs e)
- {
- //Hier wird jetzt das XML Gerüst erstellt:
- tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);
- //Jetzt wird zur besseren Veranschaulichung das ganze nochmal ausgegeben
- await new Windows.UI.Popups.MessageDialog(tileXml.GetXml()).ShowAsync();
- //Als nächstes wird direkt das Bild hinzugefügt
- //Es sollte schon im Ordner "images" liegen:
- //Das gibt jetzt alle Attribute des Bildes zurück:
- XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
- ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "ms-appx:///images/Square.png"); //Falls ihr immer ein Bild von eurem Server laden wollt, einfach hier den Link davon angeben
- ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "Unsere Beschreibung der Beispielgrafik"); //Damit die Blinden und halbblinden was zu sehen haben, hier natürlich noch die Beschreibung angeben ^^
- //Jetzt ist das Zuweisen der Elemente fertig
- //Also nochmal kurz das Ergebnis ausgeben:
- await new Windows.UI.Popups.MessageDialog(tileXml.GetXml()).ShowAsync();
- }
3). Kachel updaten und Ablaufzeit festlegen (Wenn gewünscht, sonst läuft das Ding nach drei Tagen von alleine aus)
VB.NET-Quellcode
- Private Sub LiveKachelAendern_Tapped(sender As Object, e As TappedRoutedEventArgs)
- 'Das wird mithilfe einer TileNotification geschehen
- 'Die erstellen wir auch erstmal:
- Dim tileNotification As New TileNotification(tileXml)
- 'Wie man sieht ist unsere XML-Datei als Parameter übergeben worden
- 'Jetzt wird angegeben, dass der Inhalt nach 10 Sekunden wieder von der Kachel verschwinden soll
- tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10)
- 'Is zwar eigentlich nicht wichtig, aber immer schön zu wissen, dass das möglich ist
- 'Und jetzt führen wir den finalen Schlag aus. Der TileUpdateManager macht jedoch die Arbeit:
- TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification)
- End Sub
VB.NET-Quellcode
- private void LiveKachelAendern_Tapped(object sender, TappedRoutedEventArgs e)
- {
- //Das wird mithilfe einer TileNotification geschehen
- //Die erstellen wir auch erstmal:
- TileNotification tileNotification = new TileNotification(tileXml);
- //Wie man sieht ist unsere XML-Datei als Parameter übergeben worden
- //Jetzt wird angegeben, dass der Inhalt nach 10 Sekunden wieder von der Kachel verschwinden soll
- tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10);
- //Is zwar eigentlich nicht wichtig, aber immer schön zu wissen, dass das möglich ist
- //Und jetzt führen wir den finalen Schlag aus. Der TileUpdateManager macht jedoch die Arbeit:
- TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
- }
4). Kachel löschen
Zum Ändern drückt ihr nun als erstes auf den Button zum Erstellen des XML-Dokuments und dann auf "Livekachel Ändern". Dann guckt mal auf den Startbildschirm. Nach 10 Sekunden wird sich das Bild wieder löschen.
Bei Fragen oder Anmerkungen hilft ein Post Den Umfang des Tutorials kann ich leicht erweitern, da das meiste im Prinzip von der MSDN abgeschrieben wurde Klick
Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „Telcrome“ ()