MauiImage (#481)
* MauiImage. * Title edits. * Edits. * Edits. * Edits. * Edit. * Edits. * Edits. * Edits. * Edit.
This commit is contained in:
David Britch
GitHub
Родитель
83caa9e2c4
Коммит
ded22a10e3
|
|
@ -391,6 +391,8 @@
|
|||
items:
|
||||
- name: App icons
|
||||
href: user-interface/images/app-icons.md
|
||||
- name: Images
|
||||
href: user-interface/images/images.md
|
||||
- name: Splash screen
|
||||
href: user-interface/images/splashscreen.md
|
||||
- name: Shadows
|
||||
|
|
|
|||
|
|
@ -86,19 +86,19 @@ An app icon can be added to your app project by dragging an image into the _Reso
|
|||
|
||||
At build time, the app icon is resized to the correct sizes for the target platform and device. The resized app icons are then added to your app package. App icons are resized to multiple resolutions because they have multiple uses, including being used to represent the app on the device, and in the app store.
|
||||
|
||||
<!-- For more information, see [App icons](~/user-interface/app-icons.md). -->
|
||||
For more information, see [Add an app icon to a .NET MAUI app project](~/user-interface/images/app-icons.md).
|
||||
|
||||
### Images
|
||||
|
||||
Images can be added to your app project by dragging them to the _Resources\Images_ folder of your project, and setting their build action to **MauiImage** in the **Properties** window. This creates a corresponding entry per image in your project file:
|
||||
Images can be added to your app project by dragging them to the _Resources\Images_ folder of your project, where their build action will automatically be set to **MauiImage**. This creates a corresponding entry per image in your project file:
|
||||
|
||||
```xml
|
||||
<MauiImage Include="Resources\Images\logo.jpg" />
|
||||
```
|
||||
|
||||
At build time, images are resized to the correct resolutions for the target platform and device. The resized images are then added to your app package.
|
||||
At build time, images can be resized to the correct resolutions for the target platform and device. The resulting images are then added to your app package.
|
||||
|
||||
<!-- For more information, see [Images](~/user-interface/images.md). -->
|
||||
For more information, see [Add images to a .NET MAUI app project](~/user-interface/images/images.md).
|
||||
|
||||
### Fonts
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ True type format (TTF) and open type font (OTF) fonts can be added to your app p
|
|||
|
||||
At build time, the fonts are copied to your app package.
|
||||
|
||||
<!-- For more information, see [Fonts](~/user-interface/fonts.md). -->
|
||||
For more information, see [Fonts](~/user-interface/fonts.md).
|
||||
|
||||
### Splash screen
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ A slash screen can be added to your app project by dragging an image into the _R
|
|||
|
||||
At build time, the splash screen image is resized to the correct size for the target platform and device. The resized splash screen is then added to your app package.
|
||||
|
||||
For more information, see [Splash screens](~/user-interface/images/splashscreen.md).
|
||||
For more information, see [Add a splash screen to a .NET MAUI app project](~/user-interface/images/splashscreen.md).
|
||||
|
||||
### Raw assets
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ ms.date: 03/04/2022
|
|||
|
||||
# Image
|
||||
|
||||
The .NET Multi-platform App UI (.NET MAUI) `Image` displays an image that can be loaded from a local file, a URI, an embedded resource, or a stream. The standard platform image formats are supported, including animated GIFs, and local Scalable Vector Graphics (SVG) files are also supported.
|
||||
The .NET Multi-platform App UI (.NET MAUI) `Image` displays an image that can be loaded from a local file, a URI, an embedded resource, or a stream. The standard platform image formats are supported, including animated GIFs, and local Scalable Vector Graphics (SVG) files are also supported. For more information about adding images to a .NET MAUI app project, see [Add images to a .NET MAUI app project](../images/images.md).
|
||||
|
||||
[!INCLUDE [docs under construction](~/includes/preview-note.md)]
|
||||
|
||||
|
|
@ -39,10 +39,13 @@ For information about adding app icons and a splash screen to your app, see [App
|
|||
|
||||
## Load a local image
|
||||
|
||||
Images can be added to your app project by dragging them to the _Resources\Images_ folder of your project, and ensuring their build action is set to **MauiImage** in the **Properties** window. At build time, images are resized to the correct resolutions for the target platform and device and added to your app package. This is necessary because different platforms support different image resolutions, and the operating system chooses the appropriate image resolution at runtime based on the device's capabilities.
|
||||
Images can be added to your app project by dragging them to the _Resources\Images_ folder of your project, where its build action will automatically be set to **MauiImage**. At build time, vector images are resized to the correct resolutions for the target platform and device, and added to your app package. This is necessary because different platforms support different image resolutions, and the operating system chooses the appropriate image resolution at runtime based on the device's capabilities.
|
||||
|
||||
To comply with Android resource naming rules, all local image filenames must be lowercase, start and end with a letter character, and contain only alphanumeric characters or underscores. For more information, see [App resources overview](https://developer.android.com/guide/topics/resources/providing-resources) on developer.android.com.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> .NET MAUI converts SVG files to PNG files. Therefore, when adding an SVG file to your .NET MAUI app project, it should be referenced from XAML or C# with a .png extension.
|
||||
|
||||
Adhering to these rules for file naming and placement enables the following XAML to load and display an image:
|
||||
|
||||
```xaml
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
---
|
||||
title: "App icons"
|
||||
title: "Add an app icon to a .NET MAUI app project"
|
||||
description: "Learn how to add a .NET MAUI app icon to your app, which is the logo that represents your app in multiple places."
|
||||
ms.date: 01/14/2022
|
||||
ms.date: 04/26/2022
|
||||
---
|
||||
|
||||
# App icons
|
||||
# Add an app icon to a .NET MAUI app project
|
||||
|
||||
Every app has a logo icon that represents it, and that icon typically appears in multiple places. For example, on iOS the app icon appears on the Home screen and throughout the system, such as in Settings, notifications, and search results, and in the App Store. On Android, the app icon appears as a launcher icon and throughout the system, such as on the action bar and in notifications, and in the Google Play Store. On Windows the app icon appears in the app list in the start menu, on the taskbar and task manager, on the app's tile, and in the Microsoft Store.
|
||||
|
||||
[!INCLUDE [docs under construction](~/includes/preview-note.md)]
|
||||
|
||||
A .NET Multi-platform App UI (.NET MAUI) app icon is a composite of an image and a background color. The standard platform image formats are supported, including Scalable Vector Graphics (SVG) files.
|
||||
In a .NET Multi-platform App UI (.NET MAUI) app project, an app icon can be specified in a single location in your app project, and at build time it can be automatically resized to the correct resolution for the target platform and device, and added to your app package. This avoids having to manually duplicate and name the app icon on a per platform basis. By default, bitmap (non-vector) image formats are not automatically resized by .NET MAUI.
|
||||
|
||||
> [!TIP]
|
||||
> The SVG format is the recommended image format for .NET MAUI app icons.
|
||||
A .NET MAUI app icon can use any of the standard platform image formats, including Scalable Vector Graphics (SVG) files.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> .NET MAUI converts SVG files to PNG files. Therefore, when adding an SVG file to your .NET MAUI app project, it should be referenced from XAML or C# with a .png extension.
|
||||
|
||||
An app icon can be added to your app project by dragging an image into the _Resources\Images_ folder of the project, and setting the build action of the image to `MauiIcon` in the **Properties** window. This creates a corresponding entry in your project file:
|
||||
|
||||
|
|
@ -23,18 +25,39 @@ An app icon can be added to your app project by dragging an image into the _Reso
|
|||
</ItemGroup>
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> An app icons can also be added to other folders of your app project.
|
||||
|
||||
To comply with Android resource naming rules, app icon filenames must be lowercase, start and end with a letter character, and contain only alphanumeric characters or underscores. For more information, see [App resources overview](https://developer.android.com/guide/topics/resources/providing-resources) on developer.android.com.
|
||||
|
||||
The base size of the app icon can be specified by setting the `BaseSize` attribute to values that are divisible by 8:
|
||||
|
||||
```xml
|
||||
<MauiIcon Include="Resources\Images\appicon.jpg" BaseSize="64,64" />
|
||||
```
|
||||
|
||||
The value of the `BaseSize` attribute represents the baseline density of the image, and is effectively the 1.0 scale factor for the image from which all other density sizes are derived. This value will be used to ensure that the app icon is correctly resized to different display densities. If you don't specify a `BaseSize` for a bitmap-based app icon, the image isn't resized. If you don't specify a `BaseSize` value for a vector-based app icon, the dimensions specified in the SVG are assumed to be the base size. To stop vector images being resized, set the `Resize` attribute to `false`:
|
||||
|
||||
```xml
|
||||
<MauiIcon Include="Resources\Images\appicon.svg" Resize="false" />
|
||||
```
|
||||
|
||||
To add a tint to your app icon, which is useful when you have an icon or simple image you'd like to render in a different color to the source, set the `TintColor` attribute:
|
||||
|
||||
```xml
|
||||
<MauiIcon Include="Resources\Images\appicon.svg" TintColor="#66B3FF" />
|
||||
```
|
||||
|
||||
A background color for the app icon can also be specified:
|
||||
|
||||
```xml
|
||||
<MauiIcon Include="Resources\Images\appicon.svg" Color="#512BD4" />
|
||||
<MauiIcon Include="Resources\Images\appicon.svg" Color="#512BD4" />
|
||||
```
|
||||
|
||||
<!-- Valid color values are actually derived from the SKColor struct, rather than Microsoft.Maui.Graphics.Colors. -->
|
||||
Color values can be specified in hexadecimal, or as a .NET MAUI color. For example, `Color="Red"` is valid.
|
||||
|
||||
At build time, the app icon is resized to the correct sizes for the target platform and device. The resized app icons are then added to your app package.
|
||||
At build time, the app icon can be resized to the correct resolutions for the target platform and device. The resulting app icon is then added to your app package.
|
||||
|
||||
<!-- markdownlint-disable MD025 -->
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
title: "Add images to a .NET MAUI app project"
|
||||
description: "Learn how to add images to your .NET MAUI app, and control their resizing."
|
||||
ms.date: 04/26/2022
|
||||
---
|
||||
|
||||
# Add images to a .NET MAUI app project
|
||||
|
||||
Images are a crucial part of app navigation, usability, and branding. However, each platform has differing image requirements that typically involve creating multiple versions of each image at different resolutions. Therefore, a single image typically has to be duplicated multiple times per platform, at different resolutions, with the resulting images having to use different filename and folder conventions on each platform.
|
||||
|
||||
[!INCLUDE [docs under construction](~/includes/preview-note.md)]
|
||||
|
||||
In a .NET Multi-platform App UI (.NET MAUI) app project, images can be specified in a single location in your app project, and at build time they can be automatically resized to the correct resolution for the target platform and device, and added to your app package. This avoids having to manually duplicate and name images on a per platform basis. By default, bitmap (non-vector) image formats are not automatically resized by .NET MAUI.
|
||||
|
||||
.NET MAUI images can use any of the standard platform image formats, including Scalable Vector Graphics (SVG) files.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> .NET MAUI converts SVG files to PNG files. Therefore, when adding an SVG file to your .NET MAUI app project, it should be referenced from XAML or C# with a .png extension.
|
||||
|
||||
An image can be added to your app project by dragging it into the *Resources\Images* folder of the project, where its build action will automatically be set to **MauiImage**. This creates a corresponding entry in your project file:
|
||||
|
||||
```xml
|
||||
<ItemGroup>
|
||||
<MauiImage Include="Resources\Images\logo.svg" />
|
||||
</ItemGroup>
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> Images can also be added to other folders of your app project. However, in this scenario their build action must be manually set to **MauiImage** in the **Properties** window.
|
||||
|
||||
To comply with Android resource naming rules, image filenames must be lowercase, start and end with a letter character, and contain only alphanumeric characters or underscores. For more information, see [App resources overview](https://developer.android.com/guide/topics/resources/providing-resources) on developer.android.com.
|
||||
|
||||
The base size of the image can be specified by setting the `BaseSize` attribute to values that are divisible by 8:
|
||||
|
||||
```xml
|
||||
<MauiImage Include="Resources\Images\logo.jpg" BaseSize="376,678" />
|
||||
```
|
||||
|
||||
The value of the `BaseSize` attribute represents the baseline density of the image, and is effectively the 1.0 scale factor for the image (the size you would typically use in your code to specify the image size) from which all other density sizes are derived. This value will be used to ensure that images are correctly resized to different display densities. If you don't specify a `BaseSize` for a bitmap image, the image isn't resized. If you don't specify a `BaseSize` value for a vector image, the dimensions specified in the SVG are assumed to be the base size. To stop vector images being resized, set the `Resize` attribute to `false`:
|
||||
|
||||
```xml
|
||||
<MauiImage Include="Resources\Images\logo.svg" Resize="false" />
|
||||
```
|
||||
|
||||
To add a tint to your images, which is useful when you have icons or simple images you'd like to render in a different color to the source, set the `TintColor` attribute:
|
||||
|
||||
```xml
|
||||
<MauiImage Include="Resources\Images\logo.svg" TintColor="#66B3FF" />
|
||||
```
|
||||
|
||||
A background color for an image can also be specified:
|
||||
|
||||
```xml
|
||||
<MauiImage Include="Resources\Images\logo.svg" Color="#512BD4" />
|
||||
```
|
||||
|
||||
<!-- Valid color values are actually derived from the SKColor struct, rather than Microsoft.Maui.Graphics.Colors. -->
|
||||
Color values can be specified in hexadecimal, or as a .NET MAUI color. For example, `Color="Red"` is valid.
|
||||
|
||||
At build time, images can be resized to the correct resolutions for the target platform and device. The resulting images are then added to your app package.
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
---
|
||||
title: "Splash screen"
|
||||
title: "Add a splash screen to a .NET MAUI app project"
|
||||
description: "A .NET MAUI splash screen can be displayed on Android and iOS when an app is launched, while the app's initialization process completes."
|
||||
ms.date: 12/24/2021
|
||||
ms.date: 04/26/2022
|
||||
---
|
||||
|
||||
# Splash screens
|
||||
|
||||
<!-- Todo: Move this content into the images doc, once it migrates over? -->
|
||||
# Add a splash screen to a .NET MAUI app project
|
||||
|
||||
On Android and iOS, .NET Multi-platform App UI (.NET MAUI) apps can display a splash screen while their initialization process completes. The splash screen is displayed immediately when an app is launched, providing immediate feedback to users while app resources are initialized:
|
||||
|
||||
|
|
@ -14,12 +12,14 @@ On Android and iOS, .NET Multi-platform App UI (.NET MAUI) apps can display a sp
|
|||
|
||||
Once the app is ready for interaction, its splash screen is dismissed.
|
||||
|
||||
Splash screens are a composite of an image and a background color. The standard platform image formats are supported, including Scalable Vector Graphics (SVG) files.
|
||||
In a .NET MAUI app project, a splash screen can be specified in a single location in your app project, and at build time it can be automatically resized to the correct resolution for the target platform and device, and added to your app package. This avoids having to manually duplicate and name the splash screen on a per platform basis. By default, bitmap (non-vector) image formats are not automatically resized by .NET MAUI.
|
||||
|
||||
> [!TIP]
|
||||
> The SVG format is the recommended image format for .NET MAUI splash screens.
|
||||
A .NET MAUI splash screen can use any of the standard platform image formats, including Scalable Vector Graphics (SVG) files.
|
||||
|
||||
.NET MAUI splash screens can be added to your app project by dragging an image into the _Resources\Images_ folder of the project, and setting the build action of the image to **MauiSplashScreen** in the **Properties** window. This creates a corresponding entry in your project file:
|
||||
> [!IMPORTANT]
|
||||
> .NET MAUI converts SVG files to PNG files. Therefore, when adding an SVG file to your .NET MAUI app project, it should be referenced from XAML or C# with a .png extension.
|
||||
|
||||
A splash screens can be added to your app project by dragging an image into the _Resources\Images_ folder of the project, and setting the build action of the image to **MauiSplashScreen** in the **Properties** window. This creates a corresponding entry in your project file:
|
||||
|
||||
<!-- Todo: The template currently puts the splash screen in Resources, not Resources\Images -->
|
||||
|
||||
|
|
@ -31,6 +31,24 @@ Splash screens are a composite of an image and a background color. The standard
|
|||
|
||||
To comply with Android resource naming rules, splash screen files names must be lowercase, start and end with a letter character, and contain only alphanumeric characters or underscores. For more information, see [App resources overview](https://developer.android.com/guide/topics/resources/providing-resources) on developer.android.com.
|
||||
|
||||
The base size of the splash screen can be specified by setting the `BaseSize` attribute to values that are divisible by 8:
|
||||
|
||||
```xml
|
||||
<MauiSplashScreen Include="Resources\Images\splashscreen.jpg" BaseSize="128,128" />
|
||||
```
|
||||
|
||||
The value of the `BaseSize` attribute represents the baseline density of the splash screen, and is effectively the 1.0 scale factor for the splash screen from which all other density sizes are derived. This value will be used to ensure that splash screens are correctly resized to different display densities. If you don't specify a `BaseSize` for a bitmap-based splash screen, the image isn't resized. If you don't specify a `BaseSize` value for a vector-based splash screen, the dimensions specified in the SVG are assumed to be the base size. To stop vector images being resized, set the `Resize` attribute to `false`:
|
||||
|
||||
```xml
|
||||
<MauiSplashScreen Include="Resources\Images\splashscreen.svg" Resize="false" />
|
||||
```
|
||||
|
||||
To add a tint to your splash screen, which is useful when you have a simple image you'd like to render in a different color to the source, set the `TintColor` attribute:
|
||||
|
||||
```xml
|
||||
<MauiSplashScreen Include="Resources\Images\splashscreen.svg" TintColor="#66B3FF" />
|
||||
```
|
||||
|
||||
A background color for your splash screen can also be specified:
|
||||
|
||||
```xml
|
||||
|
|
@ -40,7 +58,7 @@ A background color for your splash screen can also be specified:
|
|||
<!-- Valid color values are actually derived from the SKColor struct, rather than Microsoft.Maui.Graphics.Colors. This may change. -->
|
||||
Color values can be specified in hexadecimal, or as a .NET MAUI color. For example, `Color="Red"` is valid.
|
||||
|
||||
At build time, the splash screen image is resized to the correct size for the target platform and device. The splash screen is then added to your app package.
|
||||
At build time, the splash screen can be resized to the correct resolution for the target platform and device. The resulting splash screen is then added to your app package.
|
||||
|
||||
<!-- markdownlint-disable MD025 -->
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче