Compartir a través de

Carga de imágenes y recursos adaptados a escala, tema, contraste alto y mucho más

La aplicación puede cargar archivos de recursos de imagen (u otros archivos de recursos) adaptados para el factor de escala de la pantalla, el tema, el alto contraste y otros contextos de ejecución. Estas imágenes se pueden referenciar desde código imperativo o desde el marcado XAML, por ejemplo, como la propiedad Source de una Image. También pueden aparecer en el archivo de origen del manifiesto del paquete de la aplicación (archivo Package.appxmanifest), por ejemplo, como valor del Icono de aplicación en la pestaña de Recursos Visuales del Diseñador de Manifiestos de Visual Studio, o en tus mosaicos y notificaciones emergentes. Mediante el uso de calificadores en los nombres de archivo de las imágenes y, opcionalmente, cargarlos dinámicamente con la ayuda de un ResourceContext, puede hacer que el archivo de imagen más adecuado se cargue que mejor coincida con la configuración en tiempo de ejecución del usuario para la escala de visualización, tema, contraste alto, idioma y otros contextos.

Un recurso de imagen se encuentra en un archivo de recursos de imagen. También puede considerar la imagen como un recurso y el archivo que lo contiene como un archivo de recursos; y puede encontrar estos tipos de archivos de recursos en la carpeta \Assets del proyecto. Para obtener información sobre cómo utilizar calificadores en los nombres de los archivos de recursos de imagen, puede consultar Adaptar los recursos para el idioma, la escala y otros calificadores.

Algunos calificadores comunes para las imágenes son escala, tema, contrastey tamaño objetivo.

Calificar un recurso de imagen para la escala, el tema y el contraste

El valor predeterminado del calificador de scale es scale-100. Por lo tanto, estas dos variantes son equivalentes (proporcionan una imagen a escala 100 o factor de escala 1).

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

Puede usar calificadores en nombres de carpeta en lugar de nombres de archivo. Sería una mejor estrategia si tuviera varios archivos de activos por calificador. Para fines de ilustración, estas dos variantes son equivalentes a las dos anteriores.

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

A continuación, se muestra un ejemplo de cómo puede proporcionar variantes de un recurso de imagen ( denominado /Assets/Images/logo.png) para diferentes configuraciones de escala de presentación, tema y contraste alto. En este ejemplo se usa la nomenclatura de carpetas.

\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

Hacer referencia a una imagen u otro recurso a partir del marcado XAML y del código.

El nombre, o identificador, de un recurso de imagen es su ruta de acceso y nombre de archivo, con todos los calificadores eliminados. Si asigna un nombre a carpetas o archivos como en cualquiera de los ejemplos de la sección anterior, tiene un único recurso de imagen y su nombre (como ruta de acceso absoluta) es /Assets/Images/logo.png. Aquí se muestra cómo se usa ese nombre en el marcado XAML.

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

Ten en cuenta que usas el ms-appx esquema de URI porque estás haciendo referencia a un archivo que procede del paquete de la aplicación. Consulte esquemas de URI. Y aquí se muestra cómo se hace referencia al mismo recurso de imagen en código imperativo.

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

Puedes usar ms-appx para cargar cualquier archivo arbitrario desde el paquete de la aplicación.

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

El ms-appx-web esquema tiene acceso a los mismos archivos que ms-appx, pero en el compartimiento web.

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

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

Para cualquiera de los escenarios que se muestran en estos ejemplos, use la sobrecarga del constructor de Uri que deduce el UriKind. Especifique un URI absoluto válido, incluido el esquema y la autoridad, o simplemente deje que la autoridad se ponga de forma predeterminada en el paquete de la aplicación como en el ejemplo anterior.

Observe cómo, en estos URI de ejemplo, el esquema ("ms-appx" o "ms-appx-web") va seguido de "://", seguido de una ruta de acceso absoluta. En una ruta absoluta, el "/" inicial hace que se interprete la ruta desde la raíz del paquete.

Nota:

Los esquemas de URI de ms-resource (para recursos de texto ) y ms-appx(-web) (para imágenes y otros recursos) realizan la coincidencia automática de calificadores para encontrar el recurso más adecuado para el contexto actual. El esquema URI de ms-appdata (que se utiliza para cargar datos de la aplicación) no realiza ninguna coincidencia automática, pero puede responder al contenido de ResourceContext.QualifierValues y cargar explícitamente los recursos apropiados desde los datos de la aplicación, utilizando su nombre de archivo físico completo en el URI. Para obtener información sobre los datos de la aplicación, consulta Almacenar y recuperar la configuración y otros datos de la aplicación. Los esquemas de URI web (por ejemplo, http, httpsy ftp) no realizan coincidencias automáticas, tampoco. Para obtener información sobre qué hacer en ese caso, consulte Hospedaje y carga de imágenes en la nube.

Las rutas de acceso absolutas son una buena opción si los archivos de imagen permanecen donde se encuentran en la estructura del proyecto. Si quieres poder mover un archivo de imagen, pero te aseguras de que permanezca en la misma ubicación con respecto a su archivo de marcado XAML de referencia, entonces quizás quieras usar una ruta que sea relativa al archivo de marcado contenedor en lugar de una ruta absoluta. Si lo hace, no necesita usar un esquema de URI. Todavía te beneficiarás de la asignación automática de cualificadores en este caso, pero solo porque estás usando la ruta de acceso relativa en el marcado XAML.

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

Consulte también compatibilidad con iconos y notificaciones del sistema para idioma, escala y contraste alto.

Calificar un recurso de imagen para tamaño objetivo

Puede usar los calificadores scale y targetsize en diferentes variantes del mismo recurso de imagen, pero no puede usarlos en una sola variante de un recurso. Además, debe definir al menos una variante sin el calificador TargetSize. Esa variante debe definir un valor para scaleo dejar que tenga como valor predeterminado scale-100. Por lo tanto, estas dos variantes del /Assets/Square44x44Logo.png recurso son válidas.

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

Y estas dos variantes son válidas.

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

Pero esta variante no es válida.

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

Consulte un archivo de imagen en el manifiesto de su paquete de aplicación.

Si asigna un nombre a carpetas o archivos como en cualquiera de los dos ejemplos válidos de la sección anterior, tiene un único recurso de imagen de icono de aplicación y su nombre (como ruta de acceso relativa) es Assets\Square44x44Logo.png. En el manifiesto del paquete de la aplicación, simplemente haga referencia al recurso por su nombre. No es necesario usar ningún esquema de URI.

agregar recurso en inglés,

Eso es todo lo que necesita hacer, y el sistema operativo realizará una coincidencia automática de calificadores para encontrar el recurso más adecuado para el contexto actual. Para obtener una lista completa de todos los elementos del manifiesto del paquete de aplicación que se pueden localizar o calificar de otra manera, consulte Elementos del Manifiesto Localizables.

Definir un recurso de imagen para dirección de diseño

Consulte imágenes reflejadas.

Cargar una imagen para un idioma específico u otro contexto

Para obtener más información sobre el valor de localizar tu app, consulta Globalización y localización.

El ResourceContext predeterminado (obtenido de ResourceContext.GetForCurrentView) contiene un valor para cada calificador, lo que representa el contexto de ejecución predeterminado; es decir, la configuración actual del usuario y la máquina. Los archivos de imagen coinciden (basados en los calificadores de sus nombres) con los valores de calificador en ese entorno de ejecución.

Pero puede haber ocasiones en las que quieras que la aplicación invalide la configuración del sistema y sea explícita sobre el idioma, la escala u otro valor de calificador que se usará al buscar una imagen coincidente para cargarla. Por ejemplo, es posible que quiera controlar exactamente cuándo y qué imágenes de contraste alto se cargan.

Para ello, puede crear un nuevo ResourceContext (en lugar de usar el predeterminado), invalidar sus valores y, a continuación, usar ese objeto de contexto en las búsquedas de imágenes.

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;

Para lograr el mismo efecto en un nivel global, puede invalidar los valores de calificador en el ResourceContext predeterminado. Pero en su lugar le recomendamos que llame a ResourceContext.SetGlobalQualifierValue. Estableces los valores de una vez con una llamada a SetGlobalQualifierValue y a continuación esos valores entran en efecto en el ResourceContext predeterminado cada vez que lo utilizas para búsquedas. De forma predeterminada, la clase ResourceManager usa el valor predeterminado 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);

Actualización de imágenes en respuesta a eventos de cambio de valor calificador

La aplicación en ejecución puede responder a los cambios en la configuración del sistema que afectan a los valores de calificador en el contexto de recursos predeterminado. Cualquiera de estas configuraciones del sistema invoca el evento MapChanged en ResourceContext.QualifierValues.

En respuesta a este evento, puede volver a cargar las imágenes con la ayuda de ResourceContext predeterminado, que ResourceManager usa de forma predeterminada.

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);
}

API importantes