|
1 | 1 | ---
|
2 | 2 | description: Your app can load image resource files containing images tailored for display scale factor, theme, high contrast, and other runtime contexts.
|
3 | 3 | title: Load images and assets tailored for scale, theme, high contrast, and others
|
4 |
| -ms.date: 08/19/2024 |
5 |
| -ms.topic: article |
| 4 | +ms.date: 10/08/2024 |
| 5 | +ms.topic: how-to |
6 | 6 | keywords: windows 10, windows 11, winui, windows app sdk, resource, image, asset, MRT, qualifier
|
7 | 7 | 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. |
8 | 9 | ---
|
| 10 | + |
9 | 11 | # Load images and assets tailored for scale, theme, high contrast, and others
|
10 | 12 |
|
11 | 13 | 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
|
95 | 97 |
|
96 | 98 | Also see [Tile and toast support for language, scale, and high contrast](/windows/apps/design/shell/tiles-and-notifications/tile-toast-language-scale-contrast).
|
97 | 99 |
|
| 100 | +## Load an images and other resources 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 | + |
98 | 123 | ## Qualify an image resource for targetsize
|
99 | 124 |
|
100 | 125 | 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.
|
|
0 commit comments