Kacheln für Windows-Apps

  • Artikel

Eine Kachel ist die Darstellung einer App im Startmenü. Jede App verfügt über eine Kachel. Wenn Sie ein neues Windows-App-Projekt in Microsoft Visual Studio erstellen, enthält es eine Standardkachel, die den Namen und das Logo Ihrer App anzeigt. Windows zeigt diese Kachel an, wenn Ihre App zum ersten Mal installiert wird. Nach der App-Installation können Sie den Inhalt Ihrer Kachel mithilfe von Benachrichtigungen ändern. Beispielsweise können Sie die Kachel so anpassen, dass sie den Benutzer*innen neue Informationen mitteilt, etwa die neuesten Schlagzeilen oder den Betreff der letzten ungelesenen Nachricht.

Konfigurieren der Standardkachel

Wenn Sie ein neues Projekt in Visual Studio erstellen, wird eine einfache Standardkachel erstellt, die den Namen und das Logo Ihrer App anzeigt.

Doppelklicken Sie zum Bearbeiten Ihrer Kachel auf die Datei Package.appxmanifest in Ihrem UWP-Hauptprojekt, um den Designer zu öffnen (oder klicken Sie mit der rechten Maustaste auf die Datei, und wählen Sie „Code anzeigen“ aus).

  <Applications>
    <Application Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="ExampleApp.App">
      <uap:VisualElements
        DisplayName="ExampleApp"
        Square150x150Logo="Assets\Square150x150Logo.png"
        Square44x44Logo="Assets\Square44x44Logo.png"
        Description="ExampleApp"
        BackgroundColor="#464646">
        <uap:SplashScreen Image="Assets\SplashScreen.png" />
      </uap:VisualElements>
    </Application>
  </Applications>

Es gibt verschiedene Elemente, die Sie aktualisieren sollten:

  • DisplayName: Ersetzen Sie diesen Wert durch den Namen, den Sie auf Ihrer Kachel anzeigen möchten.

  • ShortName: Für den Anzeigenamen steht nur begrenzt Platz auf den Kacheln zur Verfügung. Deshalb sollten Sie auch einen Kurznamen angeben, um sicherzustellen, dass der Name Ihrer App nicht abgeschnitten wird.

  • Logos:

    Sie sollten diese Bilder durch Ihre eigenen ersetzen. Sie können Bilder mit unterschiedlicher visueller Skalierung bereitstellen, müssen aber nicht alle Versionen angeben. Für eine ansprechende Darstellung Ihrer App auf verschiedenen Geräten empfehlen wir Ihnen, von jedem Bild eine auf 100 %, 200 % und 400 % skalierte Version bereitzustellen. Weitere Informationen zum Generieren dieser Ressourcen finden Sie im Artikel zu App-Symbolen und -Logos.

    Skalierte Bilder folgen dieser Benennungskonvention:

    <Bildname>.scale-<Skalierungsfaktor>.<Bilddateiendung>

    Beispiel: SplashScreen.scale-100.png

    Wenn Sie auf das Bild verweisen, referenzieren Sie es als <Bildname>.<Bilddateiendung> (in diesem Beispiel „SplashScreen.png“). Das System wählt aus den von Ihnen zur Verfügung gestellten Bildern automatisch das passend skalierte Bild für das Gerät aus.

  • Die Bereitstellung von Logos für breite und große Kacheln ist nicht zwingend erforderlich, wird aber dringend empfohlen, damit Benutzer*innen die Kacheln Ihrer App an diese Größen anpassen können. Erstellen Sie für diese zusätzlichen Bilder ein DefaultTile-Element, und verwenden Sie die Attribute Wide310x150Logo und Square310x310Logo, um die zusätzlichen Bilder anzugeben:

  <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="ExampleApp.App">
          <uap:VisualElements
            DisplayName="ExampleApp"
            Square150x150Logo="Assets\Square150x150Logo.png"
            Square44x44Logo="Assets\Square44x44Logo.png"
            Description="ExampleApp"
            BackgroundColor="#464646">
            <uap:DefaultTile
              Wide310x150Logo="Assets\Wide310x150Logo.png"
              Square310x310Logo="Assets\Square310x310Logo.png">
            </uap:DefaultTile>
            <uap:SplashScreen Image="Assets\SplashScreen.png" />
          </uap:VisualElements>
        </Application>
      </Applications>

Verwenden von Benachrichtigungen zum Anpassen Ihrer Kachel

Nach der App-Installation können Sie Ihre Kachel mithilfe von Benachrichtigungen anpassen. Diese Anpassung kann beim ersten Start Ihrer App oder als Reaktion auf ein Ereignis (z. B. eine Pushbenachrichtigung) erfolgen.

Informationen zum Senden von Kachelbenachrichtigungen finden Sie unter Senden einer lokalen Kachelbenachrichtigung.