Skip to content

Commit 0aacd8f

Browse files
committed
Merged main into live
2 parents d6ac0b8 + 7db63ef commit 0aacd8f

File tree

1 file changed

+31
-8
lines changed

1 file changed

+31
-8
lines changed

hub/apps/windows-app-sdk/mrtcore/images-tailored-for-scale-theme-contrast.md

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
---
22
description: Your app can load image resource files containing images tailored for display scale factor, theme, high contrast, and other runtime contexts.
3-
title: Load images and assets tailored for scale, theme, high contrast, and others
4-
ms.date: 08/19/2024
5-
ms.topic: article
3+
title: Load tailored images and assets in your apps
4+
ms.date: 10/08/2024
5+
ms.topic: how-to
66
keywords: windows 10, windows 11, winui, windows app sdk, resource, image, asset, MRT, qualifier
77
ms.localizationpriority: medium
8+
#customer intent: To learn how to load image resource files containing images tailored for display scale factor, theme, high contrast, and other runtime contexts.
89
---
10+
911
# Load images and assets tailored for scale, theme, high contrast, and others
1012

1113
Your app can load image resource files (or other asset files) tailored for [display scale factor](/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design), theme, high contrast, and other runtime contexts. These images can be referenced from imperative code or from XAML markup, for example as the **Source** property of an [Image](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.image). They can also appear in your app package manifest source file (the `Package.appxmanifest` file)—for example, as the value for App Icon on the Visual Assets tab of the Visual Studio Manifest Designer—or on your tiles and toasts. By using qualifiers in your images' file names, and optionally dynamically loading them with the help of a [ResourceContext](/windows/windows-app-sdk/api/winrt/microsoft.windows.applicationmodel.resources.resourcecontext), you can cause the most appropriate image file to be loaded that best matches the user's runtime settings for display scale, theme, high contrast, language, and other contexts.
@@ -95,6 +97,29 @@ Absolute paths are a good choice if your image files remain where they are in th
9597

9698
Also see [Tile and toast support for language, scale, and high contrast](/windows/apps/design/shell/tiles-and-notifications/tile-toast-language-scale-contrast).
9799

100+
## Reference an image or other asset from a class library
101+
102+
You can load images and other resources from a referenced **Class library (WinUI 3 in Desktop)** project by referencing the resource in a URI that uses the `ms-appx` scheme. The URI should include the name of the class library project and the path to the resource within the class library project. For example, if you have a class library project named `MyClassLibrary` that contains an image named `logo.png` in a folder named `Assets`, you can reference the image in your app project like this:
103+
104+
```xaml
105+
<Image Source="ms-appx:///MyClassLibrary/Assets/logo.png"/>
106+
```
107+
108+
You'll use this same URI format to reference resources in a class library from XAML markup or from code. For example, you can use the following code to load the image from your class library and put it into a [StorageFile](/uwp/api/windows.storage.storagefile) object:
109+
110+
```csharp
111+
private async Task<DateTimeOffset> GetLogoCreatedDateAsync()
112+
{
113+
Uri uri = new($"ms-appx:///MyClassLibrary/Assets/logo.png");
114+
Windows.Storage.StorageFile file =
115+
await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(uri);
116+
117+
return file.DateCreated;
118+
}
119+
```
120+
121+
Note that you can reference images from the class library from both the app project and the class library project itself.
122+
98123
## Qualify an image resource for targetsize
99124

100125
You can use the `scale` and `targetsize` qualifiers on different variants of the same image resource; but you can't use them both on a single variant of a resource. Also, you need to define at least one variant without a `targetsize` qualifier. That variant must either define a value for `scale`, or let it default to `scale-100`. So, these two variants of the `/Assets/Square44x44Logo.png` resource are valid.
@@ -164,15 +189,13 @@ By default, the [ResourceManager](/windows/windows-app-sdk/api/winrt/microsoft.w
164189

165190
## Important APIs
166191

192+
The following APIs are imporant to understand when working with image resources:
193+
167194
- [ResourceContext](/windows/windows-app-sdk/api/winrt/microsoft.windows.applicationmodel.resources.resourcecontext)
168195
- [ResourceMap](/windows/windows-app-sdk/api/winrt/microsoft.windows.applicationmodel.resources.resourcemap)
169196

170-
## See also
197+
## Related content
171198

172-
- [Tailor your resources for language, scale, and other qualifiers](tailor-resources-lang-scale-contrast.md)
173-
- [Localize strings in your UI and app package manifest](localize-strings.md)
174199
- [Store and retrieve settings and other app data](/windows/apps/design/app-settings/store-and-retrieve-app-data)
175200
- [Tile and toast support for language, scale, and high contrast](/windows/apps/design/shell/tiles-and-notifications/tile-toast-language-scale-contrast)
176-
- [Localizable manifest items](/uwp/schemas/appxpackage/uapmanifestschema/localizable-manifest-items-win10?branch=live)
177201
- [Mirroring images](/windows/apps/design/globalizing/adjust-layout-and-fonts--and-support-rtl#mirroring-images)
178-
- [Globalization and localization](/windows/apps/design/globalizing/globalizing-portal)

0 commit comments

Comments
 (0)