So wird's gemacht: Anpassen der Kacheln für Desktop-Apps auf der Startseite (Windows-Runtime-Apps)

Artikel
12/12/2015

[ 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]

Ab Windows 8.1 können Entwickler von Win32-Apps die Gestaltung ihrer Kacheln für Desktop-Apps auf der Startseite anpassen. In Windows 8 wurden diese Kacheln nur durch das System bereitgestellt, ohne die Möglichkeit zur Anpassung für den Entwickler. Dabei wurde das App-Symbol auf einer Kachel angezeigt, die sich an der Hintergrundfarbe der Startseite orientiert. Windows 8.1 bietet eine abwechslungsreichere Standardkacheldarstellung. Darüber hinaus können Sie das Branding der Kachel mit eigenen Farben und Bildern verstärken.

Verfügbare Anpassungen für Ihre Desktop-App-Kacheln:

Benutzerdefinierte, randlos gedruckte Bilder
Bestimmte Hintergrundfarbe
Option zum Anzeigen bzw. Ausblenden des App-Namens auf der Kachel
Bestimmte helle oder dunkle Textfarbe bei Anzeigen des App-Namens

Sie können die Kachel vollständig anpassen. Sie können jedoch auch nur die Darstellung der Standardkachel ändern, was für Ihre Zwecke möglicherweise schon ausreicht. Bei der Standardkachel, die Windows Ihrer App zuweist, handelt es sich weiterhin um eine mittlere Kachel, die den App-Namen und das App-Symbol anzeigt. Ab Windows 8.1 ist das Layout jedoch geändert, und Windows verwendet eine Farbe aus dem Symbol der App, um eine ähnliche Farbe oder eine komplementäre Hintergrundfarbe um dieses Symbol anzuzeigen.

Die folgende Abbildung veranschaulicht, wie die gleichen Standardkacheln unter Windows 8 und Windows 8.1 für dieselbe Hintergrundfarbe der Startseite aussehen.

Microsoft Office-Kacheln für Windows 8 und Windows 8.1

Wenn Sie die Kachel weiter anpassen möchten, verwenden Sie dafür eine spezielle XML-Datei. Das von dieser Datei verwendete Schema ähnelt dem für Windows Store-App-Kacheln verwendeten Kachelschema. Verwechseln Sie die beiden aber nicht – sie sind nicht austauschbar. In diesem Thema werden Sie durch die Erstellung der folgenden Beispieldatei geführt, bei der die Square150x150Logo- und Square70x70Logo-Attribute optional sind, während alle anderen Attribute erforderlich sind.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

Voraussetzungen

Grundlegendes zu XML
Grundlegendes zu Befehlszeilenparametern
Grundlegende Kenntnisse der Ressourcenbenennung und Verpackung in den Bereichen Bildskalierung, hoher Kontrast und lokalisierte Versionen. Weitere Informationen finden Sie unter So wird's gemacht: Benennen von Ressourcen mit Qualifizierern.

Anweisungen

Schritt 1: Erstellen der XML-Datei für die Anpassung

Mit der Datei werden Anpassungen für die Kachel angegeben.
Fügen Sie die Datei in dasselbe Verzeichnis wie die ausführbare Datei ein.
Benennen Sie die Datei genauso wie die ausführbare Datei, und verwenden Sie die Erweiterung ".VisualElementsManifest.xml". Beispiel: Heißt die ausführbare Datei "contoso.exe", trägt die zugehörige XML-Datei den Namen "contoso.visualelementsmanifest.xml".

Fügen Sie der erstellten XML-Datei den folgenden Code hinzu.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements/>
</Application>

Schritt 2: Deklarieren einer Hintergrundfarbe

Erforderlich
Geben Sie einen beliebigen RGB-Hexadezimalwert oder eine dieser vordefinierten Zeichenfolgen an:
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua

Beispiele für diese beiden Möglichkeiten zum Ausdrücken des Farbwerts sind:


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"/>
</Application>


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="red"/>
</Application>

Schritt 3: Deklarieren, ob auf der Kachel der Name der App angezeigt werden soll

Erforderlich
Das ShowNameOnSquare150x150Logo-Attribut hat zwei mögliche Werte:
- "on" zum Anzeigen des Namens
- "off" zum Ausblenden des Namens
Der App-Name kann nur bei der mittleren Kachelgröße (150 x 150) angezeigt werden.

Der App-Name wird der Verknüpfungsdatei des App-Startmenüs oder – falls keine Verknüpfungsdatei vorhanden ist – der ausführbaren Datei der App entnommen.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"/>
</Application>

Schritt 4: Deklarieren einer Vordergrundtextfarbe

Erforderlich, auch wenn ShowNameOnSquare150x150Logo="off" gilt
Bezieht sich auf den App-Namen auf der Kachel.
Das ForegroundText-Attribut hat zwei mögliche Werte:
- "light" für weißen Text
- "dark" für schwarzen Text

Wählen Sie den Wert aus, der sich am besten von der deklarierten Hintergrundfarbe abhebt. Verwenden Sie zwischen der Textfarbe und der Hintergrundfarbe nach Möglichkeit mindestens ein Leuchtdichtenverhältnis von 4,5:1, um die bestmögliche Sichtbarkeit und Barrierefreiheit zu erzielen. Weitere Informationen finden Sie im W3C-Standard für Barrierefreiheit unter G18: Sicherstellen, dass Text (und Bilder aus Text) und der Hintergrund hinter dem Text ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"/>
</Application>

Schritt 5: Angeben von Bildern

Optional
Geben Sie randlose Bilder als Ersatz für das Standardsymbol und den Hintergrund an.
Es werden nur die mittlere (150 x 150) und die kleine (70 x 70) Kachelgröße unterstützt.
Es gelten die normalen Einschränkungen für Kachelbilder:
- Abmessungen von maximal 1024 x 1024 Pixel
- Dateigröße von maximal 200 KB
- Dateityp PNG, JPG, JPEG oder GIF

Wichtig Bei Verwendung eines benutzerdefinierten Bilds müssen Sie sowohl für das Attribut Square150x150Logo als auch für das Attribut Square70x70Logo ein Bild angeben. Wenn Sie nur eines dieser Attribute angeben, wird die gesamte XML-Datei ignoriert, und auf die Kachel wird das Standardformat (App-Symbol und -Hintergrund) angewendet.

Gemäß den bewährten Methoden für die Gestaltung von Kacheln darf die Kachel, wenn es sich nicht um eine Live-Kachel handelt, nicht den zusätzlichen Bildschirmbereich in Anspruch nehmen, der für breite (310 x 150) und große (310 x 310) Kacheln erforderlich ist. Da es sich bei der Kachel einer Desktop-App immer um eine statische Kachel und nie um eine Live-Kachel handelt, werden diese zusätzlichen Kachelgrößen in diesem Schema nicht unterstützt.

In diesem Beispiel sind die Bilder in einem Ordner mit dem Namen "Assets" enthalten, wobei es sich um ein gleichgeordnetes Element der Datei YourAppName.VisualElementsManifest.xml handelt. Diese Dateinamen können entweder richtige Dateinamen oder generische Namen sein, die für die skalierten Dateien, Hochkontrastdateien bzw. lokalisierten Dateien aus Schritt 6 verwendet werden. Im Abschnitt "Anmerkungen" wird die Benennung der Bildressourcen erläutert.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

Dies ist jetzt die vollständige .VisualElementsManifest.xml-Datei. Fügen Sie diese Datei bei der Installation der App als Element ein, das mit der ausführbaren Datei der App gleichgeordnet ist.

Schritt 6: Angeben von Bildern für Skalierung, Lokalisierung und hohen Kontrast

Optional (empfohlen)
Sie können diesen Schritt überspringen, wenn Sie keine skalierten Bilder, Bilder mit hohem Kontrast oder lokalisierten Bilder bereitstellen.
Geben Sie wie in Schritt 5 beschrieben einen vollständigen Satz skalierter Bildressourcen an, um für die Anzeige die beste Qualität zu erzielen. Weitere Informationen dazu finden Sie im Abschnitt "Anmerkungen".
Verwenden der normalen Benennungskonventionen des Ressourcenverwaltungssystems und Resource.pri -Datei

Hinweis Wenn Sie keinen vollständigen Satz skalierter Bildressourcen angeben, werden die bereitgestellten Ressourcen von Windows je nach Bedarf skaliert. Es ist am besten, ein größeres Format (140 % oder 180 %) aufzunehmen, da beim Verkleinern in der Regel bessere Ergebnisse als beim Vergrößern erzielt werden.

Basierend auf den Systemeinstellungen, die beim Aktualisieren der Kachel aktiv sind, wird von Windows die Datei Resources.pri verwendet, um aus dem Satz die richtige Bildressource auszuwählen. Diese Datei wird in diesem Schritt erstellt.

Erstellen Sie einen Arbeitsordner. Dieser Ordner ist in der Installation Ihrer App nicht enthalten, er wird nur während der Erstellung der Resources.pri-Datei verwendet. In diesem Beispiel erhält der Ordner den Namen "CreateResources".
```
md %USERPROFILE%\Documents\CreateResources
```
Erstellen Sie ein Unterverzeichnis von "CreateResources" für die Bilddateien. In diesem Beispiel verwenden wir den Namen "Assets".
```
md %USERPROFILE%\Documents\CreateResources\Assets
```
Fügen Sie die skalierten Bilder, Bilder mit hohem Kontrast bzw. lokalisierten Bilder in den Ordner "Assets" ein. Sie können die Bilder als flache Liste oder mit einer Struktur aus Unterverzeichnissen ablegen. Befolgen Sie dabei jedoch unbedingt die erforderlichen Benennungs- und Strukturkonventionen. Für dieses Beispiel wird die folgende Liste mit skalierten Ressourcen und Ressourcen mit hohem Kontrast als flache Liste bereitgestellt:
- 150x150Logo.scale-80.png
- 150x150Logo.scale-100.png
- 150x150Logo.scale-140.png
- 150x150Logo.scale-180.png
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 150x150Logo.scale-80_contrast-white.png
- 150x150Logo.scale-100_contrast-white.png
- 150x150Logo.scale-140_contrast-white.png
- 150x150Logo.scale-180_contrast-white.png
- 150x150Logo.scale-80_contrast-black.png
- 150x150Logo.scale-100_contrast-black.png
- 150x150Logo.scale-140_contrast-black.png
- 150x150Logo.scale-180_contrast-black.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png
Erstellen Sie eine MakePRI-Konfigurationsdatei. Hierbei handelt es sich um eine XML-Datei, die von MakePRI.exe verwendet wird, um anzugeben, welche Bilder in Resources.pri indiziert werden. Führen Sie zum Erstellen der Konfigurationsdatei, die den Namen "TestAppConfig.xml" erhält, den unten angegebenen Befehl aus. Beachten Sie, dass die Datei nicht in den Ordner CreateResources geschrieben wird. So wird verhindert, dass die Konfigurationsdatei selbst in die Indizierung einbezogen wird.

Wichtig Das Befehlszeilentool MakePRI.exe ist im Windows SDK enthalten und kann kostenlos heruntergeladen werden. Wenn Sie Microsoft Visual Studio verwenden, befindet sich MakePRI.exe nach der Installation wahrscheinlich bereits auf Ihrem System.

Für diesen und den nächsten Befehl wird vorausgesetzt, dass über den angegebenen Pfad auf MakePRI.exe zugegriffen werden kann. Ist dies nicht der Fall, suchen Sie unter "Programme\Windows Kits" danach und fügen den vollständigen Pfad in diese Befehle ein.
```
makepri createconfig /cf %USERPROFILE%\Documents\TestAppConfig.xml /dq lang-en-US_scale-100_contrast-high
```
Befehlsargument Definition

/cf Pfad und Name der von Ihnen erstellten Konfigurationsdatei

/dq Standardqualifizierer. Mindestens ein Qualifizierer (lang, scale usw.) ist erforderlich.

Befehlsargument	Definition
/cf	Pfad und Name der von Ihnen erstellten Konfigurationsdatei
/dq	Standardqualifizierer. Mindestens ein Qualifizierer (lang, scale usw.) ist erforderlich.

Erstellen Sie die Datei "Resources.pri". Führen Sie den folgenden Befehl aus. Er generiert mithilfe der soeben erstellten Konfigurationsdatei "TestAppConfig.xml " die Datei "Resources.pri" im Verzeichnis "CreateResources".


makepri new /pr %USERPROFILE%\Documents\CreateResources /cf %USERPROFILE%\Documents\TestAppConfig.xml /in TestApp /of %USERPROFILE%\Documents\CreateResources\Resources.pri

Befehlsargument	Definition
/pr	Stammspeicherort der Projektdateien
/cf	Pfad der XML-Konfigurationsdatei
/in	Name für den Index der Ressourcen in der Datei "Resources.pri". Entspricht normalerweise dem Namen der App.
/of	Ausgabespeicherort der Datei "Resources.pri". Wird diese Angabe weggelassen, wird der Stammspeicherort zusammen mit dem /pr-Argument verwendet.

Schließen Sie die Datei "Resources.pri" in die Installation Ihrer App ein. Platzieren Sie sie in demselben Verzeichnis wie die EXE-Datei der App und ihrer .VisualElementsManifest.xml-Datei. Legen Sie die Datei .VisualElementsManifest.xml entsprechend ab, bevor Sie die Verknüpfungsdatei der App installieren.

Schritt 7: Wichtig! Aktualisieren der Verknüpfungsdatei

Ist die App bereits installiert, müssen Sie die Verknüpfung aktualisieren, sobald sich die neue oder aktualisierte Datei .VisualElementsManifest.xml im entsprechenden Verzeichnis befindet, da sie andernfalls ignoriert wird. Im folgenden Beispiel für einen Windows PowerShell-Befehl für die fiktionale Contoso-App wird erläutert, wie Sie das erreichen. Es gibt jedoch viele Möglichkeiten, diesen Vorgang auszuführen.


(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date

Anmerkungen

Wichtig Ist mit der Datei .VisualElementsManifest.xml etwas nicht in Ordnung, wird für die Kachel die von Windows bereitgestellte Standarddarstellung wiederhergestellt. Mögliche Dateifehler: ungültige XML-Datei, Auslassung erforderlicher Attribute, ungültige Attributwerte oder nicht gefundene Bilder.

Sie können die Datei MakePRI.exe zusammen mit der dump-Befehlsoption verwenden, um den Inhalt der Datei Resources.pri zu überprüfen. Dies kann bei der Problembehandlung nützlich sein. Weitere Informationen zum MakePRI.exe-Tool finden Sie unter MakePRI.exe-Konfiguration und Befehlsoptionen für MakePRI.exe.

Bei der Problembehandlung können Sie auch die Ereignisanzeige für das Ereignis 28032 in den Anwendungs- und Dienstprotokollen\Microsoft\Windows\Shell-Core\Operational überprüfen. Die Ereignisdetaildaten umfassen den Pfad der .VisualElementsManifest.xml-Datei, den HRESULT-Fehlercode und eine Fehlerzeichenfolge, falls vorhanden.

Arbeiten mit dem Ressourcenverwaltungssystem

Da eine ausführliche Beschreibung der Details des Ressourcenverwaltungssystems den Rahmen dieses Themas sprengen würde, ist hier nur eine Übersicht angegeben. Eine ausführliche Beschreibung finden Sie in den Themen unter Ressourcenverwaltungssystem.

Ein vollständiger Satz von Ressourcenbildern umfasst Folgendes:

Separates Bild für jede DPI-Skalierungsebene (80 %, 100 %, 140 % und 180 %)
Versionen mit hohem Kontrast (Weiß auf Schwarz und Schwarz auf Weiß) für jedes Bild
Lokalisierte Bilder, wenn für die Kachel basierend auf der Systemsprache ein anderes Bild verwendet werden soll, beispielsweise falls das Bild Text enthält

Sie können all diese Bilder oder nur einen Teil davon bereitstellen.

Die Dateinamen sollten dabei dem Muster name.scale-100.ext, name.scale-100_contrast-black.ext usw. entsprechen. Sie können Qualifizierer auch über eine Verzeichnisstruktur angeben, anstatt im Dateinamen. In der Datei .VisualElementsManifest.xml verweisen Sie jedoch nur auf das name-Stammelement der Datei. Für die mittlere Kachelgröße können Sie beispielsweise die folgenden Dateien bereitstellen:

70x70Logo.scale-80.png
70x70Logo.scale-100.png
70x70Logo.scale-140.png
70x70Logo.scale-180.png
70x70Logo.scale-80_contrast-white.png
70x70Logo.scale-100_contrast-white.png
70x70Logo.scale-140_contrast-white.png
70x70Logo.scale-180_contrast-white.png
70x70Logo.scale-80_contrast-black.png
70x70Logo.scale-100_contrast-black.png
70x70Logo.scale-140_contrast-black.png
70x70Logo.scale-180_contrast-black.png

In der Datei .VisualElementsManifest.xml verweisen Sie wie im Beispiel jedoch nur auf "70x70Logo.png". Basierend auf den aktuellen Systemeinstellungen wird die Datei Resources.pri verwendet, um die richtige Version der 70x70Logo-Datei aus allen aufgeführten Optionen auszuwählen. Ein vollständiges Lernprogramm zu den für die richtige Funktionsweise des Systems erforderlichen Benennungskonventionen finden Sie unter Schnellstart: Verwenden von Datei- oder Bildressourcen.

XSD-Code zur Anpassung von Kacheln für Desktop-Apps

Der XSD-Code für das bei der Anpassung von Kacheln für Desktop-Apps verwendete Schema ist unten angegeben.


<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"  
           xmlns:xs="http://www.w3.org/2001/XMLSchema">  
  
    <xs:simpleType name="st_nonemptystring">  
        <xs:restriction base="xs:string">  
            <xs:minLength value="1"/>  
            <xs:maxLength value="32767"/>  
            <xs:pattern value="[^\s]|([^\s].*[^\s])"/>  
        </xs:restriction>  
    </xs:simpleType>  
    
    <xs:simpleType name="st_filenamecharset">  
        <xs:restriction base="st_nonemptystring">  
            <xs:pattern value=&quot;[^&lt;&gt;&quot;:%\|\?\*]+&quot;/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_filename">  
        <xs:restriction base="st_filenamecharset">  
            <xs:pattern value="([^/\\]*[^./\\]+)(\\[^/\\]*[^./\\]+)*"/>  
            <xs:pattern value="([^/\\]*[^./\\]+)(/[^/\\]*[^./\\]+)*"/>  
            <xs:maxLength value="256"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_imagefile">  
        <xs:restriction base="st_filename">  
            <xs:pattern value=".+\.((jpg)|(png)|(jpeg)|(gif))"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_color">  
        <xs:restriction base="xs:string">  
            <xs:pattern value="#[\da-fA-F]{6}"/>  
            <xs:pattern value="black|silver|gray|white|maroon|red|purple|fuchsia|green|lime|olive|yellow|navy|blue|teal|aqua"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_foregroundtext">  
        <xs:restriction base="xs:string">  
            <xs:enumeration value="light"/>  
            <xs:enumeration value="dark"/>  
        </xs:restriction>  
    </xs:simpleType>  

    <xs:simpleType name="st_showname">
        <xs:restriction base="xs:string">
            <xs:enumeration value="on"/>
            <xs:enumeration value="off"/>
        </xs:restriction>
    </xs:simpleType>
  
    <xs:complexType name="ct_visualelements">
        <xs:attribute name="Square150x150Logo" type="st_imagefile" use="optional"/>  
        <xs:attribute name="Square70x70Logo" type="st_imagefile" use="optional"/>
        <xs:attribute name="ForegroundText" type="st_foregroundtext" use="required"/>  
        <xs:attribute name="BackgroundColor" type="st_color" use="required"/>
        <xs:attribute name="ShowNameOnSquare150x150Logo" type="st_showname" use="required"/>  
    </xs:complexType>  
  
    <xs:complexType name="ct_application">  
        <xs:all>  
            <xs:element name="VisualElements" type="ct_visualelements" />  
        </xs:all>  
    </xs:complexType>  
  
    <xs:element name="Application" type="ct_application" />  
  
</xs:schema>

Freigeben über