Freigeben über

Bilder und Ressourcen, die speziell auf Skalierung, Thema, hohen Kontrast und mehr abgestimmt sind, bereitstellen.

Ihre App kann Bilddateien (oder andere Ressourcendateien) laden, die auf den Anzeigeskalierungsfaktor , das Thema, 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 Image. Sie können auch in der Quelldatei des App-Paketmanifests (der Datei Package.appxmanifest) angezeigt werden, z. B. als Wert für das App-Symbol auf der Registerkarte "Visuelle Elemente" des Manifest-Designers von Visual Studio oder auf Ihren Kacheln und Benachrichtigungen. Wenn Sie Qualifizierer in den Dateinamen Ihrer Bilder verwenden und diese optional mithilfe eines ResourceContextdynamisch laden, können Sie sicherstellen, dass die am besten geeignete Bilddatei geladen wird, die den Benutzereinstellungen zur Laufzeit für Anzeigeskala, Thema, hohen Kontrast, Sprache sowie 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 Dateinamen Ihrer Bildressourcen finden Sie unter Anpassen der Ressourcen für Sprache, Skalierung und andere Qualifizierer.

Einige gängige Qualifizierer für Bilder sind Skala, Thema, Kontrastund Zielgröße.

Bewerten einer Bildressource hinsichtlich Skalierung, Thema und Kontrast

Der Standardwert für den scale-Qualifizierer ist scale-100. Diese beiden Varianten sind also gleichwertig, da beide ein Bild mit einem Maßstab von 100 oder einem Skalierungsfaktor von 1 bereitstellen.

\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 bereitstellen können, die als /Assets/Images/logo.pngbezeichnet wird, für unterschiedliche Einstellungen von Anzeigemaßstab, Thema und hohem Kontrast. 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 ihr Pfad und Dateiname ohne alle Qualifizierer. Wenn Sie Ordner und/oder Dateien wie in einem der Beispiele im vorherigen Abschnitt benennen, haben Sie eine einzelne Bildressource und ihren Namen (als absoluter Pfad) ist /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-Schemata. 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 verwenden, 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 dieselben Dateien wie ms-appxzu, jedoch im Webbereich.

<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 Überladung des URI-Konstruktors, die das UriKinderkennt. Geben Sie einen gültigen absoluten URI an, einschließlich des Schemas und des Autoritätsteils, oder überlassen Sie die Festlegung der Autorität einfach dem App-Paket, wie im Beispiel oben.

Beachten Sie, dass in diesen Beispiel-URIs das Schema ("ms-appx" oder "ms-appx-web") von "://" gefolgt wird, dem 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 (für Zeichenfolgenressourcen) und ms-appx(-web) (für Bilder und andere Ressourcen) URI-Schemata führen einen automatischen Qualifizierungsabgleich durch, um die Ressource zu finden, die am besten für den aktuellen Kontext 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 explizit die entsprechenden Ressourcen aus App-Daten mithilfe ihres vollständigen physischen Dateinamens im URI laden. 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 Hosting und Laden von Bildern in der Cloud.

Absolute Pfade sind eine gute Wahl, wenn Ihre Bilddateien an ihrem Ort in der Projektstruktur bleiben. Wenn Sie eine Bilddatei verschieben möchten, dabei aber darauf achten, dass sie im Verhältnis zu ihrer referenzierenden XAML-Markupdatei am gleichen Ort bleibt, sollten Sie anstelle eines absoluten Pfads einen relativen verwenden, der zur enthaltenden Markupdatei passt. 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 Kachel- und Popupunterstützung für Sprache, Skalierung und hohen Kontrast.

Qualifizieren einer Bildressource für die Zielgröße

Sie können die Qualifizierer scale und targetsize für verschiedene Varianten derselben Bildressource verwenden, nicht jedoch für eine einzelne Variante einer Ressource. Außerdem müssen Sie mindestens eine Variante ohne TargetSize-Kennzeichnung definieren. Diese Variante muss entweder einen Wert für scaledefinieren oder scale-100standardmäßig bleiben lassen. 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 im Manifest Ihres App-Pakets

Wenn Sie Ordner und/oder Dateien wie in einem der beiden gültigen Beispiele im vorherigen Abschnitt benennen, verfügen Sie über eine App-Symbolbildressource, und deren Name (als relativer Pfad) ist Assets\Square44x44Logo.png. Verweisen Sie im App-Paketmanifest einfach auf die Ressource durch ihren Namen. 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 Abgleich 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 die Layout-Direktion

Siehe Spiegelung von Bildern.

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

Weitere Informationen zum Wertversprechen der Lokalisierung Ihrer App finden Sie unter Globalisierung und Lokalisierung.

Die Standard-ResourceContext- (abgerufen aus 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 Qualifikatoren in ihren Bezeichnungen mit den Qualifikatorwerten in diesem Laufzeitkontext abgeglichen.

Es kann jedoch vorkommen, dass Ihre App die Systemeinstellungen außer Kraft setzen und explizit die Sprache, Skalierung oder einen anderen Qualifiziererwert festlegen soll, der verwendet werden soll, wenn ein passendes Bild zum Laden gesucht wird. 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 Standardkontext zu verwenden), dessen Werte überschreiben und dann dieses Kontextobjekt bei Ihren Bildsuchvorgängen 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. Wir empfehlen Ihnen stattdessen, ResourceContext.SetGlobalQualifierValueaufzurufen. Sie legen die Werte einmal mit einem Aufruf von SetGlobalQualifierValue fest, und diese Werte werden jedes Mal wirksam, wenn Sie den Standard-ResourceContext für Nachschlagevorgänge verwenden. Standardmäßig verwendet die ResourceManager-Klasse die Standard-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);

Aktualisierung von Bildern als Reaktion auf Änderungen von Qualifiziererwerten

Ihre ausgeführte App kann auf Änderungen der Systemeinstellungen reagieren, die sich auf die Qualifiziererwerte im Standardressourcenkontext auswirken. Jede dieser Systemeinstellungen löst das MapChanged--Ereignis in ResourceContext.QualifierValuesaus.

Als Reaktion auf dieses Ereignis können Sie Ihre Bilder mithilfe der standardmäßigen ResourceContext-neu laden, die 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