Kacheln und Signale
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Kacheln und Signale

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In iOS-Apps können App-Symbole mithilfe von Signalen aktualisiert werden. Dieser Ansatz wurde in Windows Store-Apps mithilfe der sogenannten Live-Kacheln weiterentwickelt.

Im folgenden Video werden Symbole in iOS-Apps und Live-Kacheln in Windows Store-Apps verglichen.

Viele iOS-Apps nutzen Signalzahlen auf den App-Symbole, um zusammenfassende oder dynamische Statusinformationen für Benutzer bereitzustellen. Auf diese Weise können Informationen für Benutzer angezeigt werden, ohne dass die App gestartet werden muss. iOS unterstützt bis zu vier verschiedene Zahlen für die Anzeige, z. B. die Anzahl ungelesener E-Mails in einer E-Mail-App, die Anzahl der Beiträge in einer Social-Media-App oder die Anzahl ausstehender Aufgaben. Die Signalzahlen der Symbole werden meist als Antwort auf Pushbenachrichtigungen aktualisiert, die Aktualisierung kann jedoch auch als Antwort auf lokale Benachrichtigungen oder programmgesteuert erfolgen.

Eine Windows 8-Kachel ist die Darstellung einer App auf dem Startbildschirm. Es kann sich dabei um eine Kachel vom Typ static oder live handeln.

  • Eine static-Kachel zeigt immer den im App-Manifest festgelegten Standardinhalt an.
  • Eine live-Kachel wird programmgesteuert aktualisiert und verwendet, um aktuelle, auf einen Blick erkennbare Informationen anzuzeigen. Live-Kacheln bieten eine gute Möglichkeit, relevante und interessante Informationen für den Benutzer anzuzeigen, ohne dass die App gestartet werden muss. So wie das iOS-Signal kann auch eine Live-Kachel als Antwort auf eine Pushbenachrichtigung, auf eine lokale Benachrichtigung oder programmgesteuert aktualisiert werden.

Live-Kacheln in Windows Store-Apps

In Windows Store-Apps ist die Standardkachel in der Manifestdatei der App festgelegt (Package.appxmanifest). Entwickler können festlegen, dass das Logo, der Name oder keins von beidem angezeigt werden soll. Siehe Schnellstart: Erstellen einer Standardkachel im Manifest-Editor von Microsoft Visual Studio. Nachdem die App installiert wurde, kann der Kachelinhalt bei Laufzeit mithilfe von Benachrichtigungen aktualisiert werden. Weitere Informationen hierzu finden Sie in Schnellstart: Senden eines Kachelupdates.

Windows Store-App-Kacheln können in verschiedenen Größen angezeigt werden. Es wird standardmäßig nur eine quadratische Kachel verwendet, daher ist auch nur eine quadratische Kachel standardmäßig erforderlich. Wenn die App verschiedene Kachelgrößen unterstützt, können Benutzer das Format der Live-Kachel jederzeit ändern. Weitere Informationen zu Live-Kacheln finden Sie unter Richtlinien und Prüfliste für Kacheln und Signale.

Windows 8-Live-Kacheln

Vergleich von Signalzahlen in iOS-Apps und Live-Kacheln in Windows Store-App

Wer Signalzahlen zur Anzeige dynamischer Informationen in iOS-App-Symbolen bereits verwendet hat, wird feststellen, dass mit Live-Kacheln dasselbe Ergebnis und sogar noch mehr erreicht werden kann.

In der folgenden Tabelle werden die erforderlichen Schritte beschrieben, um ein App-Symbol bzw. App-Titel zu definieren und mit einem Signal oder anderem Inhalt zu aktualisieren.

SchritteiOSWindows 8
Erstellen Sie ein Symbol bzw. eine Kachel für die App. Fügen Sie dem App-Paket ein oder mehrere Symbole hinzu. Definieren Sie die Symboldateien mithilfe des CFBundleIconFiles-Schlüssels der Symboldateien in den info.plist-Dateien. Legen Sie die Symboldateien im Bereich "Anwendungsbenutzeroberfläche" in der Manifestdatei der Anwendung in Visual Studio fest. Siehe Schnellstart: Erstellen einer Standardkachel im Manifest-Editor von Microsoft Visual Studio.
Definieren Sie den Anwendungsnamen.Legen Sie den Wert des CFBundleDisplayName-Schlüssels (Anzeigename des Pakets) in der info.plist-Datei fest.Legen Sie den Kurznamen der App im Bereich "Anwendungsbenutzeroberfläche" in der Manifestdatei der Anwendung in Visual Studio fest. Siehe Schnellstart: Erstellen einer Standardkachel im Manifest-Editor von Microsoft Visual Studio.
Aktualisieren Sie das Signal auf dem App-Symbol bzw. der Kachel.Legen Sie die applicationIconBadgeNumber-Eigenschaft der aktuellen UIApplication-Klasse fest.Rufen Sie die XML-Signalvorlage der BadgeUpdateManager-Klasse ab. Legen Sie als Wert des Badge-Elements einen Glyphenwert fest, und aktualisieren Sie ihn mit der BadgeUpdateManager-Klasse. Weitere Informationen hierzu finden Sie in Schnellstart: Senden einer Signalaktualisierung.
Ändern Sie das Bild des Symbols bzw. der Kachel.Nicht zutreffendRufen Sie mithilfe der TileUpdateManager-Klasse das XML-Dokument ab, das die Kachelvorlage darstellt. Legen Sie als Wert für das image-Element der Vorlage ein neues Bild fest. Erstellen Sie eine neue TileNotification und aktualisieren Sie die Benachrichtigung mithilfe der TileUpdateManager-Klasse. Weitere Informationen hierzu finden Sie unter Schnellstart: Senden eines Kachelupdates.
Ändern Sie die Benachrichtigungsmeldung auf der Kachel.Nicht zutreffendRufen Sie mithilfe der TileUpdateManager-Klasse das XML-Dokument ab, das die Kachelvorlage darstellt. Legen Sie als Wert für das text-Element der Vorlage eine neue Meldung fest. Erstellen Sie eine neue TileNotification und aktualisieren Sie die Benachrichtigung mithilfe der TileUpdateManager-Klasse.

 

Beispiel-App

Erstellen Sie die App.

In diesem Beispiel erstellen wir die App mit der Vorlage "C# Leere App".

  • Starten Sie Microsoft Visual Studio.
  • Klicken Sie im Menü Datei auf Neues Projekt.
  • Falls Windows Store noch nicht ausgewählt ist, erweitern Sie die Option Installiert > Vorlagen > Visual C# und klicken Sie auf Windows Store.
  • Falls Blank App (XAML) nicht bereits ausgewählt ist, klicken Sie darauf.
  • Geben Sie in die Felder Name und Location den Namen der App (z. B. AppKachel) und einen Speicherort ein, oder übernehmen Sie die Standardeinstellungen.
  • Klicken Sie auf OK.

Definieren Sie eine Standardkachel für die App.

  • Erstellen Sie zwei Bilder: ein Bild mit 150 x 150 Pixel (logo.png) und ein Bild mit 30 x 30 Pixel (logo_small.png).
  • Verschieben Sie beide Bilder aus dem Projektmappen-Explorer in Visual Studio per Drag & Drop in das Verzeichnis "Ressourcen".
  • Klicken Sie im Fenster "Projektmappen-Explorer" auf die Datei Package.appmanifest, um diese zu öffnen.
  • Geben Sie in der Registerkarte Anwendungsbenutzeroberfläche in das Textfeld Logo den Pfad Assets\logo.png und in das Logo-Textfeld Klein den Pfad Assets\logo_small.png ein.
  • Geben Sie beispielsweise Gartenblumen in das Textfeld Kurzname ein.
  • Klicken Sie auf Debuggen > Debugging starten, um die App auszuführen.

    Live-Kachel in Aktion

Aktualisieren Sie das Signal auf der Kachel.

  • Klicken Sie auf Debuggen > Debugging beenden, um die App zu beenden.
  • Fügen Sie in Visual Studio in der Datei MainPage.xaml zwischen dem <GridViewGrid.Row="0" Grid.Column="0" …>-Starttag und dem </GridView>-Endtag folgenden XAML-Code hinzu:
    
    
                <TextBlock HorizontalAlignment="Left" Margin="256,219,0,0" TextWrapping="Wrap"                        
    Text="This a simple app that shows you how to use Live Tile in Windows 8. Click below to update the tile." FontSize="30" VerticalAlignment="Top" Height="201" Width="851" />
                <Button Content="Update the tile" HorizontalAlignment="Left" Margin="256,425,0,0" VerticalAlignment="Top" Height="59" Width="194" FontSize="24" Click="UpdateTile_Click"/>
                <Button Content="Update the badge" HorizontalAlignment="Left" Margin="523,425,0,0" VerticalAlignment="Top" Height="59" Width="245" FontSize="24" Click="UpdateBadge_Click"/>
    
    
    
    

    Fügen Sie in der Datei MainPage.xaml.cs folgenden Code zur MainPage-Klasse hinzu:

    
           private void UpdateBadge_Click(object sender, RoutedEventArgs e)
            {
                XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
                //Assign a value to badge
                XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
                badgeElement.SetAttribute("value", "1");
                // Create the badge notification and send it to the badge.
                BadgeNotification badge = new BadgeNotification(badgeXml);
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
            }
    private void UpdateTile_Click(object sender, RoutedEventArgs e)
            {
            }
    
    
    

    Fügen Sie Folgendes oben in die Datei ein:

    
    using Windows.Data.Xml.Dom;
    using Windows.UI.Notifications;
    
    

    Klicken Sie auf Debuggen > Debugging starten, um die App erneut auszuführen. Klicken Sie in der Anwendung auf die Schaltfläche Signal aktualisieren.

    Eine Live-Kachel in Aktion

    Öffnen Sie den Startbildschirm. Auf der Kachel wird nun eine Signalzahl (1) angezeigt:

    Live-Kachel in Aktion

4. Ändern Sie das Kachelbild und die Benachrichtigungsmeldung.

  • Klicken Sie auf Debuggen > Debugging beenden, um die App zu beenden.
  • Ziehen Sie ein anderes Bild mit 150 x 150 Pixel (mit dem Namen Strelitzia.png) per Drag & Drop aus dem Projektmappen-Explorer in den Ordner "Ressourcen".
  • Ersetzen Sie in Visual Studio in der Datei MainPage.xaml.cs die UpdateTile_Click -Methode durch folgenden Code:
    
            private void UpdateLiveTile()
            {
                //Template for tile and retrieve its XML contents
                XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText03);
                XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
                tileTextAttributes[0].InnerText = "Strelitzia";
                tileTextAttributes[1].InnerText = "growing";
                tileTextAttributes[2].InnerText = "in my garden";
                //Add an image for notification
                XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "Assets\\Strelitzia.png");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "Strelitzia");
                //Create the notification based on the XML content 
                TileNotification tileNotification = new TileNotification(tileXml);
                // Send the notification to the app tile
                TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
            }
    
    
    

    Für diese Kachel verwenden wir die Vorlage TileSquarePeekImageAndText03. Sie können aus zahlreichen verschiedenen Vorlagen auswählen, je nachdem, an welcher Anwendung Sie arbeiten und welche Art der Statusinformationen Sie für Benutzer anzeigen möchten (siehe Kachelvorlagenkatalog). Diese Vorlage besteht aus einer quadratischen Kachel mit einem Bild ohne Text und einem vierzeiligen Textelement, das verkürzt eingeblendet wird bzw. sich nach oben und unten bewegt.

    Das Textelement rufen wir aus der XML-Vorlage ab. Der Wert wird mithilfe von drei Zeilen wie oben gezeigt festgelegt. Das Bildelement rufen wir ebenfalls aus der XML-Kachelvorlage ab. Legen Sie das src-Attribut auf Assets\Strelitzia.png fest. Legen Sie das alt-Attribut auf Strelitzia fest.

    Anschließend erstellen wir ein neues TileNotification-Objekt und aktualisieren die Kachel mit der TileUpdateManager-Klasse. Außerdem fügen wir zwei Zeilen in den MainPage-Konstruktor in der Datei MainPage.xaml.cs hinzu.

    
            public MainPage()
            {
                this.InitializeComponent();
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
                TileUpdateManager.CreateTileUpdaterForApplication().Clear();
            }
    
    
    

    Diese zwei Zeilen löschen das Signal und die Benachrichtigungen bei der nächsten Ausführung der App.

    Klicken Sie auf Debuggen > Debugging starten, um die App erneut auszuführen. Klicken Sie in der Anwendung auf die Schaltfläche Kachel aktualisieren.

    Rufen Sie den Startbildschirm auf. Die Kachel wurde aktualisiert.

    Live-Kachel in Aktion

    Die erste Abbildung zeigt die aktualisierte Kachel mit dem neuen Bild des Paradiesvogels (Strelitzia), dem Logo und einer Signalzahl. Die zweite Abbildung zeigt die Kachel einige Sekunden später mit der verkürzt eingeblendeten Meldung, dem Logo und der Signalzahl.

Verwandte Themen

Themen für iOS-Entwickler
Ressourcen für iOS-Entwickler
Windows 8-Steuerelemente für iOS-Entwickler
Windows 8-Cookbook für iOS-Entwickler
Themen zu Kacheln und Signalen
Kacheln, Signale und Benachrichtigungen
Kachelvorlagenkatalog
Schnellstart: Senden eines Kachelupdates
Richtlinien und Prüfliste für Kacheln und Signale
Schnellstart: Senden eines Signalupdates

 

 

Anzeigen:
© 2017 Microsoft