Laden von Bildern und Ressourcen, die auf Skalierung, Design, hohen Kontrast und mehr zugeschnitten sind

  • Artikel

Ihre App kann Bildressourcendateien (oder andere Ressourcendateien) laden, die auf den Anzeigeskalierungsfaktor, das Design, den hohen Kontrast und andere Laufzeitkontexte zugeschnitten sind. Auf diese Bilder kann aus imperativem Code oder aus XAML-Markup verwiesen werden, z. B. als Source-Eigenschaft eines Bilds. Sie können auch in der Quelldatei des App-Paketmanifests (der Package.appxmanifest Datei) angezeigt werden, z. B. als Wert für das App-Symbol auf der Registerkarte "Visuelle Objekte" des Manifest-Designers von Visual Studio oder auf Ihren Kacheln und Popups. Wenn Sie Qualifizierer in den Dateinamen Ihrer Bilder verwenden und sie 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 Bildressourcendatei enthalten. Sie können sich das Bild auch als Ressource und die Datei vorstellen, die es als Objektdatei enthält; und Sie können diese Arten von Ressourcendateien im Ordner "\Assets" Ihres Projekts finden. Hintergrundinformationen zur Verwendung von Qualifizierern in den Namen Ihrer Bildressourcendateien finden Sie unter Anpassen der Ressourcen für Sprache, Skalierung und andere Qualifizierer.

Einige gängige Qualifizierer für Bilder sind Skalierung, Design, Kontrast und Zielgröße.

Qualifizieren einer Bildressource für Skalierung, Design und Kontrast

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

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

Sie können Qualifizierer in Ordnernamen anstelle von Dateinamen verwenden. Dies wäre eine bessere Strategie, wenn Sie mehrere Ressourcendateien pro Qualifizierer haben. Zur Veranschaulichung entsprechen diese beiden Varianten den beiden oben genannten Varianten.

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

Als Nächstes sehen Sie ein Beispiel dafür, wie Sie Varianten einer Bildressource ( benannt /Assets/Images/logo.png) fü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 eine andere Ressource aus XAML-Markup und Code

Der Name oder Bezeichner einer Bildressource ist sein Pfad und Dateiname mit allen entfernten Qualifizierern. Wenn Sie Ordner und/oder Dateien wie in einem der Beispiele im vorherigen Abschnitt benennen, verfügen Sie über eine einzelne Bildressource und ihren Namen (als absoluter Pfad)./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. Siehe URI-Schemas. Und so verweisen Sie im imperativen Code auf dieselbe Bildressource.

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

Sie können ms-appx jede beliebige Datei aus Ihrem App-Paket 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-appxim Webfach zu.

<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 eines der in diesen Beispielen gezeigten Szenarien die URI-Konstruktorüberladung , die den UriKind ableiten soll. Geben Sie einen gültigen absoluten URI einschließlich des Schemas und der Autorität an, oder lassen Sie die Autorität einfach wie im obigen Beispiel das App-Paket standardmäßig verwenden.

Beachten Sie, dass in diesen Beispiel-URIs das Schema ("ms-appx" oder "ms-appx-web") von "://" gefolgt wird, 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 den automatischen Qualifiziererabgleich aus, 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 mithilfe ihres vollständigen physischen Dateinamens im URI laden. Informationen zu App-Daten finden Sie unter Store und Abrufen von Einstellungen und anderen App-Daten. Web-URI-Schemas (z http. B. , , httpsund ftp) führen auch keinen automatischen Abgleich durch. Informationen dazu, was in diesem Fall zu tun ist, finden Sie unter Hosting und Laden von Bildern in der Cloud.

Absolute Pfade sind eine gute Wahl, wenn Ihre Bilddateien in der Projektstruktur verbleiben. Wenn Sie in der Lage sein möchten, eine Bilddatei zu verschieben, aber Sie vorsichtig sind, dass sie sich an demselben Speicherort im Verhältnis zu ihrer referenzierenden XAML-Markupdatei befindet, sollten Sie anstelle eines absoluten Pfads einen Pfad verwenden, der relativ zur enthaltenden Markupdatei ist. Wenn Sie dies tun, 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"/>

Siehe auch die Unterstützung von Kacheln und Popups für Sprache, Skalierung und hohen Kontrast.

Qualifizieren einer Bildressource für die Zielgröße

Sie können die scale Und-Qualifizierer targetsize für verschiedene Varianten derselben Bildressource verwenden. Sie können sie jedoch nicht für eine einzelne Variante einer Ressource verwenden. Außerdem müssen Sie mindestens eine Variante ohne TargetSize Qualifizierer definieren. Diese Variante muss entweder einen Wert für scale, oder sie standardmäßig definieren scale-100lassen. 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 auf eine Bilddatei aus dem 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 Bildressource für App-Symbole und deren Namen (als relativer Pfad).Assets\Square44x44Logo.png Verweisen Sie im App-Paketmanifest einfach auf die Ressource anhand des Namens. Es ist nicht erforderlich, ein URI-Schema zu verwenden.

add resource, english

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

Qualifizieren einer Bildressource für layoutdirection

Siehe Spiegelungsbilder.

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 (abgerufen von ResourceContext.GetForCurrentView) enthält einen Qualifiziererwert für jeden Qualifizierernamen, der den Standardlaufzeitkontext darstellt (d. h. die Einstellungen für den aktuellen Benutzer und computer). Bilddateien werden basierend auf den Qualifizierern in ihren Namen anhand der Qualifiziererwerte in diesem Laufzeitkontext abgeglichen.

Es kann jedoch vorkommen, dass Ihre App die Systemeinstellungen außer Kraft setzen und explizit über die Sprache, skalierung oder einen anderen Qualifiziererwert verfügen soll, der verwendet werden soll, wenn Sie nach einem übereinstimmenden Bild suchen, das geladen werden soll. Sie können beispielsweise genau steuern, wann und welche Bilder mit hohem Kontrast geladen werden.

Sie können dies tun, indem Sie einen neuen ResourceContext erstellen (anstatt den Standardwert zu verwenden), dessen Werte außer Kraft zu setzen und dann dieses Kontextobjekt in ihren Bild-Nachschlagevorgängen zu verwenden.

var resourceContext = new Windows.ApplicationModel.Resources.Core.ResourceContext(); // not using ResourceContext.GetForCurrentView 
resourceContext.QualifierValues["Contrast"] = "high";
var namedResource = Windows.ApplicationModel.Resources.Core.ResourceManager.Current.MainResourceMap[@"Files/Assets/Logo.png"];
var resourceCandidate = namedResource.Resolve(resourceContext);
var imageFileStream = resourceCandidate.GetValueAsStreamAsync().GetResults();
var bitmapImage = new Windows.UI.Xaml.Media.Imaging.BitmapImage();
bitmapImage.SetSourceAsync(imageFileStream);
this.myXAMLImageElement.Source = bitmapImage;

Um den gleichen Effekt auf globaler Ebene zu erzielen, können Sie die Qualifiziererwerte im Standardmäßigen ResourceContext überschreiben. Stattdessen empfehlen wir Ihnen, ResourceContext.SetGlobalQualifierValue aufzurufen. Sie legen Werte einmal mit einem Aufruf von SetGlobalQualifierValue fest, und diese Werte werden bei jeder Verwendung für Nachschlagewerte auf den Standardmäßigen ResourceContext wirksam. Standardmäßig verwendet die ResourceManager-Klasse den Standardmäßigen ResourceContext.

Windows.ApplicationModel.Resources.Core.ResourceContext.SetGlobalQualifierValue("Contrast", "high");
var namedResource = Windows.ApplicationModel.Resources.Core.ResourceManager.Current.MainResourceMap[@"Files/Assets/Logo.png"];
this.myXAMLImageElement.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(namedResource.Uri);

Aktualisieren von Bildern als Reaktion auf Änderungsereignisse für Qualifiziererwerte

Ihre ausgeführte App kann auf Änderungen der Systemeinstellungen reagieren, die sich auf die Qualifiziererwerte im Standardressourcenkontext auswirken. Jede dieser Systemeinstellungen ruft das MapChanged-Ereignis auf ResourceContext.QualifierValues auf.

Als Reaktion auf dieses Ereignis können Sie Ihre Bilder mithilfe des Standardmäßigen ResourceContext neu laden, den ResourceManager standardmäßig verwendet.

public MainPage()
{
    this.InitializeComponent();

    ...

    // Subscribe to the event that's raised when a qualifier value changes.
    var qualifierValues = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues;
    qualifierValues.MapChanged += new Windows.Foundation.Collections.MapChangedEventHandler<string, string>(QualifierValues_MapChanged);
}

private async void QualifierValues_MapChanged(IObservableMap<string, string> sender, IMapChangedEventArgs<string> @event)
{
    var dispatcher = this.myImageXAMLElement.Dispatcher;
    if (dispatcher.HasThreadAccess)
    {
        this.RefreshUIImages();
    }
    else
    {
        await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => this.RefreshUIImages());
    }
}

private void RefreshUIImages()
{
    var namedResource = Windows.ApplicationModel.Resources.Core.ResourceManager.Current.MainResourceMap[@"Files/Assets/Logo.png"];
    this.myImageXAMLElement.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(namedResource.Uri);
}

Wichtige APIs