Laden von Bildern und Ressourcen mit Anpassung an Skalierung, Design, hohen Kontrast usw.

  • Artikel

Ihre App kann Bildressourcendateien (oder andere Medienobjektdateien) laden, die auf den Anzeigeskalierungsfaktor, das Design, den hohen Kontrast und andere Laufzeitkontexte zugeschnitten sind. Auf diese Bilder kann aus imperativem Code oder xaml-Markup verwiesen werden, z. B. als Source-Eigenschaft eines Image. Sie können auch in der Quelldatei des App-Paketmanifests (der Package.appxmanifest Datei) angezeigt werden, z. B. als Wert für App-Symbol auf der Registerkarte Visuelle Objekte des Visual Studio-Manifests Designer oder auf Ihren Kacheln und Popups. Indem Sie Qualifizierer in den Dateinamen Ihrer Bilder verwenden und diese optional mithilfe eines ResourceContext dynamisch laden, können Sie dazu führen, dass die am besten geeignete Bilddatei geladen wird, die den Laufzeiteinstellungen des Benutzers für Anzeigeskala, Design, hohen Kontrast, Sprache und andere Kontexte am besten entspricht.

Eine Bildressource ist in einer Imageressourcendatei enthalten. Sie können sich das Bild auch als Medienobjekt und die Datei, die es enthält, als Medienobjektdatei vorstellen. Und Sie finden diese Arten von Ressourcendateien im Ordner \Assets Ihres Projekts. Hintergrundinformationen zur Verwendung von Qualifizierern in den Namen Ihrer Bildressourcendateien finden Sie unter Anpassen Ihrer Ressourcen für Sprache, Skalierung und andere Qualifizierer.

Einige gängige Qualifizierer für Bilder sind:

Qualifizieren einer Bildressource für Skalierung, Design und Kontrast

Der Standardwert für den scale Qualifizierer ist scale-100. Diese beiden Varianten sind also gleichwertig (beide liefern ein Bild im Maßstab 100 oder Skalierungsfaktor 1).

\Assets\Images\logo.png
\Assets\Images\logo.scale-100.png

Sie können Qualifizierer in Ordnernamen anstelle von Dateinamen verwenden. Dies ist eine bessere Strategie, wenn Sie über mehrere Ressourcendateien pro Qualifizierer verfügen. Zur Veranschaulichung entsprechen diese beiden Varianten den beiden oben genannten.

\Assets\Images\logo.png
\Assets\Images\scale-100\logo.png

Das nächste Beispiel zeigt, wie Sie Varianten einer Bildressource mit dem Namen /Assets/Images/logo.pngfür verschiedene Einstellungen für Anzeigeskala, Design und hohen Kontrast bereitstellen können. In diesem Beispiel wird die Ordnerbenennung verwendet.

\Assets\Images\contrast-standard\theme-dark
    \scale-100\logo.png
    \scale-200\logo.png
\Assets\Images\contrast-standard\theme-light
    \scale-100\logo.png
    \scale-200\logo.png
\Assets\Images\contrast-high
    \scale-100\logo.png
    \scale-200\logo.png

Verweisen auf ein Bild oder ein anderes Medienobjekt aus XAML-Markup und -Code

Der Name oder Bezeichner einer Imageressource ist der Pfad und Dateiname, wobei alle Qualifizierer entfernt wurden. Wenn Sie Ordner und/oder Dateien wie in einem der Beispiele im vorherigen Abschnitt benennen, verfügen Sie über eine einzelne Imageressource, deren Name (als absoluter Pfad) lautet /Assets/Images/logo.png. Hier erfahren Sie, wie Sie diesen Namen im XAML-Markup verwenden.

<Image x:Name="myXAMLImageElement" Source="ms-appx:///Assets/Images/logo.png"/>

Beachten Sie, dass Sie das ms-appx URI-Schema verwenden, da Sie auf eine Datei verweisen, die aus dem Paket Ihrer App stammt. Weitere Informationen finden Sie unter URI-Schemas in der UWP-Dokumentation. Auf diese Weise verweisen Sie im imperativen Code auf dieselbe Imageressource.

this.myXAMLImageElement.Source = new BitmapImage(new Uri("ms-appx:///Assets/Images/logo.png"));

Sie können verwenden ms-appx , um beliebige Dateien aus Ihrem App-Paket zu laden.

var uri = new System.Uri("ms-appx:///Assets/anyAsset.ext");
var storagefile = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(uri);

Das ms-appx-web Schema greift auf die gleichen Dateien wie ms-appxzu, jedoch im Webfach.

<WebView x:Name="myXAMLWebViewElement" Source="ms-appx-web:///Pages/default.html"/>

this.myXAMLWebViewElement.Source = new Uri("ms-appx-web:///Pages/default.html");

Verwenden Sie für jedes der in diesen Beispielen gezeigten Szenarien die Uri-Konstruktorüberladung , die den UriKind ableiten soll. Geben Sie einen gültigen absoluten URI einschließlich Schema und Autorität an, oder lassen Sie die Autorität wie im obigen Beispiel einfach auf das Paket der App festlegen.

Beachten Sie, dass in diesen Beispiel-URIs dem Schema ("ms-appx" oder "ms-appx-web") auf "://" folgt, auf das ein absoluter Pfad folgt. In einem absoluten Pfad bewirkt das führende "/", dass der Pfad aus dem Stammverzeichnis des Pakets interpretiert wird.

Hinweis

Die ms-resource URI-Schemas (für Zeichenfolgenressourcen) und ms-appx(-web) (für Bilder und andere Ressourcen) führen einen automatischen Qualifiziererabgleich durch, um die Ressource zu finden, die für den aktuellen Kontext am besten geeignet ist. Das ms-appdata URI-Schema (das zum Laden von App-Daten verwendet wird) führt keinen solchen automatischen Abgleich durch. Sie können jedoch auf den Inhalt von ResourceContext.QualifierValues reagieren und die entsprechenden Ressourcen explizit aus App-Daten laden, indem Sie ihren vollständigen physischen Dateinamen im URI verwenden. Informationen zu App-Daten finden Sie unter Speichern und Abrufen von Einstellungen und anderen App-Daten. Web-URI-Schemas (z. B http. , httpsund ftp) führen auch keinen automatischen Abgleich durch. Informationen dazu, was in diesem Fall zu tun ist, finden Sie unter Hosten und Laden von Images in der Cloud.

Absolute Pfade sind eine gute Wahl, wenn Ihre Bilddateien dort verbleiben, wo sie sich in der Projektstruktur befinden. Wenn Sie eine Bilddatei verschieben möchten, aber darauf achten, dass sie relativ zur referenzierenden XAML-Markupdatei am selben Speicherort verbleibt, sollten Sie anstelle eines absoluten Pfads einen Pfad verwenden, der relativ zur enthaltenden Markupdatei ist. In diesem Fall müssen Sie kein URI-Schema verwenden. In diesem Fall profitieren Sie weiterhin vom automatischen Qualifiziererabgleich, aber nur, weil Sie den relativen Pfad im XAML-Markup verwenden.

<Image Source="Assets/Images/logo.png"/>

Weitere Informationen zu Sprache, Skalierung und hohem Kontrast finden Sie unter Unterstützung von Kacheln und Popups.

Qualifizieren einer Imageressource für targetsize

Sie können die scale Qualifizierer und targetsize für verschiedene Varianten derselben Imageressource verwenden. Sie können sie jedoch nicht für eine einzelne Variante einer Ressource verwenden. Außerdem müssen Sie mindestens eine Variante ohne Qualifizierer targetsize definieren. Diese Variante muss entweder einen Wert für scaledefinieren oder den Standardwert festlegen scale-100. Daher sind diese beiden Varianten der /Assets/Square44x44Logo.png Ressource gültig.

\Assets\Square44x44Logo.scale-200.png
\Assets\Square44x44Logo.targetsize-24.png

Und diese beiden Varianten sind gültig.

\Assets\Square44x44Logo.png // defaults to scale-100
\Assets\Square44x44Logo.targetsize-24.png

Diese Variante ist jedoch ungültig.

\Assets\Square44x44Logo.scale-200_targetsize-24.png

Verweisen Sie auf eine Bilddatei aus Ihrem App-Paketmanifest.

Wenn Sie Ordner und/oder Dateien wie in einem der beiden gültigen Beispiele im vorherigen Abschnitt benennen, verfügen Sie über eine einzelne App-Symbol-Bildressource, deren Name (als relativer Pfad) lautet Assets\Square44x44Logo.png. Verweisen Sie in Ihrem App-Paketmanifest einfach anhand des Namens auf die Ressource. Es ist nicht erforderlich, ein URI-Schema zu verwenden.

Ressource hinzufügen, Englisch

Das ist alles, was Sie tun müssen, und das Betriebssystem führt einen automatischen Qualifiziererabgleich durch, um die Ressource zu finden, die für den aktuellen Kontext am besten geeignet ist. Eine Liste aller Elemente im App-Paketmanifest, die Sie auf diese Weise lokalisieren oder anderweitig qualifizieren können, finden Sie unter Lokalisierbare Manifestelemente.

Qualifizieren einer Bildressource für layoutdirection

Weitere Informationen finden Sie unter Spiegeln von Bildern.

Laden eines Bilds für eine bestimmte Sprache oder einen anderen Kontext

Weitere Informationen zu einer Werterhöhung Ihrer App durch Lokalisierung finden Sie unter Globalisierung und Lokalisierung.

Der Standardmäßige ResourceContext enthält einen Qualifiziererwert für jeden Qualifizierernamen, der den Standardlaufzeitkontext (d. h. die Einstellungen für den aktuellen Benutzer und computer) darstellt. Bilddateien werden – basierend auf den Qualifizierern in ihren Namen – mit den Qualifizierern in diesem Laufzeitkontext abgeglichen.

Es kann jedoch vorkommen, dass Ihre App die Systemeinstellungen überschreiben und explizit die Sprache, die Skalierung oder einen anderen Qualifiziererwert angeben soll, der bei der Suche nach einem passenden Bild zum Laden verwendet werden soll. Sie können beispielsweise genau steuern, wann und welche Bilder mit hohem Kontrast geladen werden.

Dazu können Sie einen neuen ResourceContext erstellen (anstatt den Standard zu verwenden), dessen Werte überschreiben und dann dieses Kontextobjekt in Ihren ResourceMap-Bildsuchen mit GetValue oder TryGetValue verwenden.

var resourceManager = new Microsoft.Windows.ApplicationModel.Resources.ResourceManager();
var resourceContext = resourceManager.CreateResourceContext();
resourceContext.QualifierValues["Contrast"] = "high";
var resourceMap = resourceManager.MainResourceMap;
var namedResource = resourceMap.TryGetValue(@"Files/Assets/Logo.png", resourceContext);
var imageFileBytes = namedResource.ValueAsBytes;

using (var ms = new InMemoryRandomAccessStream())
{
    using (var writer = new DataWriter(ms.GetOutputStreamAt(0)))
    {
        writer.WriteBytes(imageFileBytes);
        writer.StoreAsync().GetResults();
    }
    var image = new BitmapImage();
    image.SetSource(ms);
    this.myXAMLImageElement.Source = image;
}

Standardmäßig verwendet die ResourceManager-Klasse den Standardmäßigen ResourceContext.

Wichtige APIs

Siehe auch