Windows 8.1-Apps: Optimieren von Bildern für verschiedene Bildschirmauflösungen

 

Gilt für Windows und Windows Phone

Sie können verschiedene Bildversionen hinzufügen, die Ihre App identifizieren (z. B. Logos und Bilder von Begrüßungsbildschirmen).Anschließend können Sie sie testen, um sicherzustellen, dass sie auf einer Vielzahl von Geräten mit unterschiedlichen Bildschirmauflösungen gut aussehen.Durch Hinzufügen verschiedener Bildversionen können Sie den Grad verringern, um den die Grafiken gestreckt oder verkleinert werden, um der Bildschirmgröße des Benutzers zu entsprechen.

In diesem Thema

  • Benennen und Organisieren der Bilddateien

  • Hinzufügen von Bilddateien zum Projekt

  • Identifizieren von Bilddateien im Manifest

  • Anzeigen einer App-Vorschau für verschiedene Bildschirmgrößen und -auflösungen

Benennen und Organisieren der Bilddateien

Benennen Sie die Dateien nach dem Typ der Ressource, die sie darstellen, beispielsweise "Square7070.png".Wenn Sie mehrere Dateien im selben Ordner speichern möchten, schließen Sie Skalierungsqualifizierer in den Dateinamen ein.Beispielsweise könnte eine der Dateien wie folgt benannt werden: Square7070Logo.scale-100.png.

Wenn Sie beabsichtigen, die Dateien in Ordnern zu organisieren, die auf dem Skalierungsfaktor basieren, verwenden Sie anstelle der Dateinamen den Skalierungsqualifizierer im Ordnernamen.So könnten Sie "Square7070Logo.png" und "Square150150Logo.png" im Unterordner Assets\Scale-100 speichern.

Hinzufügen von Bilddateien zum Projekt

Öffnen Sie die Projektmappe, und fügen die Sie Bilddateien zum Ordner Objekte des App-Projekts hinzu.

Wenn Sie ein freigegebenes App-Projekt zum Erstellen einer App für mehrere Formfaktoren verwenden (beispielsweise Windows und Windows Phone), können Sie die Bilddatei zum Ordner Objekte des freigegebenen Projekts in der Projektmappe hinzufügen. Dies ist allerdings nur möglich, wenn sich das Bild für beide Formfaktoren eignet.

Identifizieren von Bilddateien im Manifest

  1. Öffnen Sie im Projektmappen-Explorer den App-Manifest-Designer (Package.appxmanifest), und wählen Sie dann die Registerkarte Visuelle Anlagen aus.

  2. Wählen Sie in der Liste der visuellen Anlagen die Option Alle Bildanlagen, um die Einstellungen für Bilder anzuzeigen.

  3. Möchten Sie einen kurzen Namen auf dem Hauptlogo anzeigen lassen, geben Sie diesen im Textfeld Kurzname an.

    Hinweis

    Für Windows Phone-Apps werden die Werte Kurzname und Standardgröße ignoriert.

  4. Geben Sie im Textfeld eines Logos (z. B. Quadratisches Logo 150x150) einen Wert für das Hauptlogo an.

    Der Standardwert für "Quadratisches Logo 150x150" lautet "Assets\Logo.png".

  5. Wählen Sie im Bereich Skalierte Anlagen der Seite die Schaltfläche Durchsuchen () neben einem der Skalierung-Felder, navigieren Sie zum Ordner Objekte, geben Sie das Bild für diese Skalierung an, und wählen Sie dann die Schaltfläche Öffnen.

    Hinweis

    Um eine vergrößerte Ansicht des Bilds in der skalierten Größe anzuzeigen, wählen Sie das Bild im Feld aus.Ein Vorschaufenster wird geöffnet, in dem aufgezählt wird, an welcher Stelle jede Bilddatei verwendet wird.

    Das Bild wird im Feld angezeigt, und die Datei wird kopiert.Die kopierte Datei wird in Übereinstimmung mit den Konventionen zur Namensgebung von Ressourcen für Store-Apps benannt: Name.scale-nnn.ext, wobei nnn der Skalierungsfaktor ist.So würde die Datei z. B. "Logo.scale-100.png" benannt werden.

Anzeigen einer App-Vorschau für verschiedene Bildschirmgrößen und -auflösungen

Gilt nur für Windows

Sie können eine Vorschau der Apps, die Sie für den Windows Store entwickeln, mit einem Simulator anzeigen.Weitere Informationen finden Sie unter Ausführen von Windows Store-Apps im Simulator.

Sie können eine Vorschau der Apps, die Sie für den Windows Phone Store entwickeln, mit einem Emulator anzeigen.Wählen Sie in der Dropdownliste neben der Schaltfläche Debuggen starten auf der Standard-Symbolleiste des Debuggers einen Emulator aus.Wählen Sie einen Emulator aus, der der Auflösung entspricht, in der die App in der Vorschau angezeigt werden soll.

Wichtig

Bevor Sie Ihre App im Store veröffentlichen, testen Sie die App immer auf einem echten Gerät.

Siehe auch

Schnellstart: Verwenden von Datei- oder Bildressourcen (Windows Runtime-Apps mit C#/VB/C++ und XAML)
Schnellstart: Verwenden von Datei- oder Bildressourcen (Windows Runtime-Apps mit JavaScript und HTML)
So wird’s gemacht: Benennen von Ressourcen mit Qualifizierern (Windows Runtime-Apps mit C#/VB/C++ und XAML)
External link http:// msdn.microsoft.com/library/windows/apps/Hh965372 (v=win.10) .aspx is not in the correct format.
Auswählen der App-Bilder
Richtlinien zum Skalieren auf die Pixeldichte
Kachel- und Popupbildgrößen (Windows Runtime-Apps)
Richtlinien für Kacheln und Signale
Richtlinien für Miniaturansichten
Kachelvorlagenkatalog (Windows Runtime-Apps)