共用方式為


載入針對縮放比例、主題、高對比度及其他需求量身打造的影像和資源

您的應用程式可以載入專為 顯示縮放比例、主題、高對比度和其他運行時間內容量身打造的影像資源檔(或其他資產檔案)。 這些影像可以從命令式程式碼或 XAML 標記中引用,例如作為 ImageSource 屬性。 它們也可以出現在您的應用程式套件清單來源檔案中(Package.appxmanifest 檔案),例如作為 Visual Studio 清單設計工具中 [視覺資產] 頁籤的 [應用程式圖示] 值,或出現在您的磁貼和通知上。 藉由在影像的檔名中使用限定符,並選擇性地以 ResourceContext 的協助動態載入它們,您可以載入最適當的圖像檔,以最符合使用者用於顯示縮放比例、主題、高對比度、語言和其他內容的運行時間設定。

映射資源包含在映像資源檔中。 您也可以將影像視為資產,以及包含該映像的檔案作為資產檔案;您可以在專案的 \Assets 資料夾中找到這類資源檔案。 如需瞭解如何在影像資源檔案名稱中使用限定符的背景資訊,請參閱 針對語言、比例及其他限定符調整您的資源

影像的一些常見限定符是 縮放主題對比目標化

評估影像資源的縮放比例、主題和對比

限定元的 scale 預設值為 scale-100。 因此,這兩個變體是相等的(它們都提供縮放比例為100或縮放比例1的影像)。

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

您可以在資料夾名稱中使用限定符,而不是檔名。 如果針對每個限定符都有數個資產檔案,那麼採用這種策略會更好。 為了說明目的,這兩個變體相當於上述兩個。

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

接下來是一個範例,說明如何為顯示縮放比例、主題和高對比度的不同設定提供名為 的影像資源 /Assets/Images/logo.png變體。 此範例使用資料夾命名。

\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

從 XAML 標記和程式碼引用影像或其他資產

圖像資源的名稱或標識符是其路徑和檔名,已移除所有限定符。 如果您將資料夾與/或檔案命名為上一節的任何範例,則您有單一映像資源及其名稱(絕對路徑) 為 /Assets/Images/logo.png。 以下是您在 XAML 標記中使用該名稱的方式。

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

請注意,您使用 ms-appx URI 協議,因為您指的是來自您應用程式封裝的檔案。 請參閱 URI 方案。 以下是您在命令式程式代碼中參考相同映像資源的方式。

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

您可以使用 ms-appx 從應用程式套件載入任何任意檔案。

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

ms-appx-web 方案會存取與 ms-appx相同的檔案,但在網頁環境中。

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

針對這些範例所顯示的任何情境,請使用可以推斷 UriKindUri 建構函式 多載。 指定包含配置和授權單位的有效絕對 URI,或只是讓授權單位預設為應用程式套件,如上述範例所示。

請注意,在這些範例 URI 中,協定(「ms-appx」或「ms-appx-web」)後接「://」,然後再接一個絕對路徑。 在絕對路徑中,開頭的「/」會使路徑從套件的根目錄解譯。

備註

[字串ms-resource資源] 和 ms-appx(-web) [影像和其他資產] 的 URI 模式會執行自動限定符比對,以尋找最適合目前情境的資源。 ms-appdata URI 協議(用來載入應用程式數據)不會執行任何這類自動比對,但您可以回應 ResourceContext.QualifierValues 的內容,並使用 URI 中的完整實體檔名,從應用程式數據中明確載入適當的資產。 如需應用程式資料的資訊,請參閱 儲存和取得設定及其他應用程式資料。 Web URI 設定 (例如、 httphttpsftp) 不會執行自動比對。 如需該案例中該怎麼做的詳細資訊,請參閱 在雲端中裝載和載入映像

如果您的圖像檔留在項目結構中,絕對路徑是不錯的選擇。 如果您想移動圖像檔案,但又想確保它保持在與其參考的 XAML 標記檔案相對的相同位置,那麼您可能需要使用相對於包含標記檔案的路徑,而不是絕對路徑。 如果您這樣做,則不需要使用 URI 配置。 在此情況下,您仍會受益於自動限定符比對,但只因為您在 XAML 標記中使用相對路徑。

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

另請參閱 磁貼和快顯通知的語言、縮放比例及高對比度支援

確保影像資源符合目標尺寸的要求

您可以在 scale 相同影像資源的不同變體上使用 和 targetsize 限定符;但是您無法在資源的單一變體上使用它們。 此外,您必須定義至少一個沒有限定符的 TargetSize 變體。 這個變體要定義scale的值,否則讓它預設為scale-100。 因此,資源的這兩個 /Assets/Square44x44Logo.png 變體是有效的。

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

這兩個變體都是有效的。

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

但這個變體無效。

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

從您的應用程式封包資訊清單中參考圖像檔案

如果您將資料夾與/或檔案命名為上一節中兩個有效範例的其中一個,則您有單一應用程式圖示影像資源及其名稱(以相對路徑表示) 為 Assets\Square44x44Logo.png。 在您的應用程式套件指令清單中,只要依名稱參考資源即可。 不需要使用任何 URI 配置。

新增資源,英文

這就是您需要做的,而且OS會執行自動限定符比對,以尋找最適合目前內容的資源。 如需應用程式套件指令清單中您可以本地化或以這種方式限定的所有項目清單,請參閱 可本地化的指令清單專案

為適用於 layoutdirection 的影像資源進行資格設定

請參閱 鏡像映像

載入與特定語言或其他上下文相關的影像

如需本地化應用程式價值主張的詳細資訊,請參閱 全球化和當地語系化

默認 ResourceContext(從 ResourceContext.GetForCurrentView取得)包含每個限定符名稱的限定符值,代表默認執行時期環境(換句話說,代表當前使用者和計算機的設定)。 影像檔案會根據名稱中的限定符對應於該執行階段環境中的限定符值。

但是,有時候您可能希望您的應用程式覆寫系統設定,並明確指定尋找要載入的相符影像時所要使用的語言、縮放比例或其他限定子值。 例如,您可能想要精確控制載入高對比度影像的時機和時間。

您可以藉由建構新的 ResourceContext (而不是使用預設的值)、覆寫其值,然後在影像查閱中使用該內容對象來執行此動作。

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;

若要在全域層級達到相同的效果, 您可以 覆寫預設 ResourceContext 中的限定符值。 但建議您改為呼叫 ResourceContext.SetGlobalQualifierValue。 您只需透過呼叫一次 SetGlobalQualifierValue 來設定值,然後每次用於查詢時,這些值就會在預設的 ResourceContext 中生效。 根據預設, ResourceManager 類別會使用預設 的 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);

更新影像以回應限定符值變更事件

執行中的應用程式可以回應影響預設資源內容中限定符值的系統設定變更。 上述任何系統設定會在 ResourceContext.QualifierValues上叫用 MapChanged 事件。

為了回應此事件,您可以藉由預設的 ResourceContext來重新加載圖像,這是 ResourceManager 預設使用的。

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