Schnellstart: Verwenden von Datei- oder Bildressourcen (HTML)

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

Sie können Ihrer App Bilder und andere Dateiressourcen hinzufügen und aus der App heraus auf diese Dateien verweisen. Die Unterstützung für die Auswahl von Bildern basierend auf Einstellungen für hohen Kontrast oder anzeigespezifische Skalierung wird in Windows-Runtime integriert, wenn Sie den unten angegebenen Anweisungen zum Benennen und Organisieren Ihrer Dateiressourcen in Ordnern folgen.

Anweisungen

1. Erstellen Sie spezifische Bilder oder andere Dateiressourcen für verschiedene Anzeigekonfigurationen (DPI-Werte) und Kontrasteinstellungen.

   Erstellen Sie Ihre Bilder in mehreren empfohlenen Größen, damit die App immer ansprechend aussieht, wenn Windows die entsprechende Ressource lädt. Siehe Richtlinien für die Skalierung auf die Pixeldichte.

   1. Erstellen Sie von jedem Bild mehrere Kopien:

      1. Originalgröße für ein typisches 96-DPI-Gerät. Nennen Sie diese Datei name**.scale-100.**ext (für diese und alle nachfolgenden Anweisungen ist name der Platzhalter für den gewählten Ressourcennamen, und ext ist die dateitypspezifische Erweiterung. .scale-100 ist das Segment des Ressourcennamens, in dem das Skalierungsverhalten der Windows-Runtime verschlüsselt ist. Für diesen Teil des Namens sollten Sie die hier beschriebenen Benennungskonventionen befolgen.)
      2. 140 % der Originalgröße. Für ein 100x100px-Bild sollte beispielsweise auch eine 140x140px-Bildversion vorhanden sein. Nennen Sie diese Dateiname**.scale-140.**ext.
      3. 180 % der Originalgröße. Für ein 100x100px-Bild sollte beispielsweise auch eine 180x180px-Bildversion vorhanden sein. Nennen Sie diese Dateiname**.scale-180.**ext.
      4. 240 % der Originalgröße bei Windows Phone-Apps. Für ein 100 x 100-px-Bild sollte beispielsweise auch eine 240x240px-Bildversion vorhanden sein. Nennen Sie diese Dateiname**.scale-240.**ext.
      5. Bild mit hohem Kontrast und einem schwarzen Hintergrund und weißen Vordergrund in der Originalgröße. Nennen Sie diese Datei name**scale-100_contrast-black.**ext.
      6. Bild mit hohem Kontrast und einem weißen Hintergrund und schwarzen Vordergrund in der Originalgröße. Nennen Sie diese Datei name**scale-100_contrast-white.**ext.

      Hinweis  App-Logobilder verwenden ebenfalls Ressourcen, die in der Manifestdatei der App angegeben sind. Wenn Sie ein Bild speziell für das App-Logo verwenden, sollten Sie eine Kopie von 80 % der Originalgröße erstellen. Für ein 100x100px-Logobild sollte beispielsweise auch eine 80x80px-Bildversion vorhanden sein. Nennen Sie diese Datei name**.scale-80.**ext. Weitere Informationen finden Sie unter Auswählen der App-Bilder und Visuelle Ressourcen für Kacheln und Popups.

       

   2. Platzieren Sie alle Bilder im selben Ordner der App-Struktur. Beispiel:

      1. images/logo.scale-100.png
      2. images/logo.scale-140.png
      3. images/logo.scale-180.png
      4. images/logo.scale-240.png
      5. images/logo.scale-80.png
      6. images/logo.scale-100_contrast-black.png
      7. images/logo.scale-100_contrast-white.png

2. Verweisen Sie in HTML ohne Qualifizierer auf die Bilder.

   Verwenden Sie das Format name.ext, um vom Markup auf diese Dateiressource zu verweisen. (Dabei lassen Sie das Segment, durch das die Skalierung oder der Kontrast angegeben wird, absichtlich weg; Windows-Runtime fügt dieses Segment beim Abrufen der entsprechenden Ressource intern an.) Beispiel:

   <img src="images/logo.png" />
   

3. Verweisen auf die Bilder im Code ohne Qualifizierer

   Verwenden Sie das Format name.ext, um vom Code auf diese Dateiressource zu verweisen. (Dabei lassen Sie das Segment, durch das die Skalierung oder der Kontrast angegeben wird, absichtlich weg; Windows-Runtime fügt dieses Segment beim Abrufen der entsprechenden Ressource intern an.) Der Unterschied zu den vorangehenden Markupanweisungen besteht darin, dass das Markup das Schema sowie den Stamm anhand des Kontexts der Markupdatei ableiten kann. Der Code kann diese Informationen jedoch nicht ableiten. Beim Erstellen eines neuen Uri müssen das Schema und der Stamm eines URIs (Uniform Resource Identifier) für den Code angegeben werden. Beispiel:

   var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
   var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);
   

4. Für eine Logodatei verweisen Sie auf das Bild in der Manifestdatei ohne Qualifizierer.

   1. Öffnen Sie die Datei Package.appxmanifest in Microsoft Visual Studio. Öffnen Sie die Registerkarte Visuelle Anlagen.

   2. Bearbeiten Sie den Manifestverweis, um auf die Ressourcendatei zu verweisen. Dies wird standardmäßig als Textbearbeitungsfeld angezeigt. Wenn Sie den Ressourcendateinamen hier angeben, lassen Sie das Qualifizierersegment weg. Beispielsweise gibt es ein Feld für Quadratisches Logo 150x150, bei dem der Wert wie folgt lauten kann:

      images\logo.png
      

Dateiressourcen und Globalisierung

Die Anweisungen in diesem Thema konzentrieren sich auf die Ressourcenqualifizierer, die Unterstützung für Skalierung und Kontrast ermöglichen. Diese schließen den Qualifizierer üblicherweise in den Dateinamen ein. Einige Bilder oder andere Dateien müssen jedoch möglicherweise aus anderen Gründen als Skalierungs- oder Kontrastunterstützung lokalisiert werden, insbesondere wenn sie Text oder kulturbezogene Inhalte enthalten. Dateien können nicht nur nach der Sprache des Benutzers, sondern auch nach dem Benutzerstandort variieren. Eine Datei kann beispielsweise abhängig vom Benutzerstandort unterschiedliche Rahmen haben. Die Bezeichnungen sollten aber in der bevorzugten Sprache des Benutzers angezeigt werden. Weitere Informationen dazu, warum dies erforderlich sein kann, finden Sie unter Richtlinien für die Globalisierung und Lokalisierung.

Wenn Sie verschiedene Ressourcen pro Sprache und Standort benötigen, unterstützt Windows-Runtime auch eine Konvention, bei der Sprache und Standort zur Laufzeit bestimmt werden können, woraufhin verschiedene geeignete Ressourcen geladen werden. Diese Konvention verwendet Ordnernamen und keine Dateinamen. Deshalb können Sie die hier beschriebenen Dateinamenskonventionen mit den Ordnerkonventionen kombinieren, um Ressourcen zu definieren, die Skalierung/Kontrast und Lokalisierung unterstützen. Zusätzlich gibt es Unterstützung für RTL-spezifischen Ressourcen und eine targetsize-Konvention, die für bestimmte Situationen verwendet wird, z. B. Bilder, die vom System für Dateizuordnungen angezeigt werden. Weitere Informationen zur Ordnernamenskonvention für die Qualifizierung von Ressourcen und die Qualifizierungskonventionen finden Sie unter Benennen von Ressourcen mithilfe von Qualifizierern.

Verwandte Themen

So wird's gemacht: Benennen von Ressourcen mit Qualifizierern

App-Bilder

Richtlinien zum Skalieren auf die Pixeldichte

Kachelbildgrößen