更改 .NET MAUI 应用图标

[删除（380066935@qq.com或微信通知）]

更好的阅读体验请查看原文:https://learn.microsoft.com/zh-cn/dotnet/maui/user-interface/images/app-icons?tabs=windows

每个应用都有一个表示它的徽标图标，该图标通常出现在多个位置。 例如，在 iOS 上，应用图标显示在主屏幕和整个系统中，例如在“设置”、“通知”和“搜索结果”中，以及App Store中。 在 Android 上，应用图标显示为启动器图标，整个系统（例如在操作栏、通知和 Google Play Store 中）。 在 Windows 上，应用图标显示在“开始”菜单的应用列表中、任务栏、应用的磁贴和 Microsoft Store 中。

在 .NET 多平台应用 UI (.NET MAUI) 应用项目中，可以在应用项目中的单个位置指定应用图标。 在生成时，可以将此图标自动调整为目标平台和设备的正确分辨率，并添加到应用包。 这样就无需手动复制并为每个平台命名应用图标。 默认情况下，位图 (非矢量) 图像格式不会由 .NET MAUI 自动调整大小。

.NET MAUI 应用图标可以使用任何标准平台图像格式，包括可缩放矢量图形 (SVG) 文件。

重要

.NET MAUI 将 SVG 文件转换为可移植网络图形 (PNG) 文件。 因此，将 SVG 文件添加到 .NET MAUI 应用项目时，应从具有 .png 扩展名的 XAML 或 C# 引用该文件。 对 SVG 文件的唯一引用应位于项目文件中。

更改图标

在项目文件中， <MauiIcon> 该项指定要用于应用的图标。 你只能为应用定义一个图标。 将忽略任何后续 <MauiIcon> 项。

若要遵守 Android 资源命名规则，应用图标文件名必须为小写，以字母字符开头和结尾，并且仅包含字母数字字符或下划线。 有关详细信息，请参阅有关 developer.android.com 的应用资源概述 。

应用定义的图标可以由单个图像组成，方法是将文件指定为 Include 属性：

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" />
</ItemGroup>

重要

只有项目文件中定义的第一 <MauiIcon> 项由 .NET MAUI 处理。 如果要将其他文件用作图标，请先从项目中删除现有图标，然后添加新图标。 接下来，在“解决方案资源管理器”窗格中，选择该文件，然后在“属性”窗格中，将“生成操作”设置为 MauiIcon。 请考虑改为替换现有图标文件，而不是向项目添加新图标文件。

更改图标文件后，可能需要在 Visual Studio 中清理项目。 若要清理项目，请右键单击解决方案资源管理器窗格中的项目文件，然后选择“清理”。 你可能需要从要测试的目标平台卸载应用。

注意

如果未清理项目并从目标平台卸载应用，则可能看不到新图标。

更改图标后，请查看 特定于平台的配置 信息。

组合图标

或者，应用图标可以由两个图像组成，一个图像表示背景，另一个图像表示前景。 由于图标转换为 PNG 文件，因此组合的应用图标将首先与背景图像分层，通常是图案或纯色的图像，后跟前景图像。 在这种情况下，该 Include 属性表示图标背景图像，属性 Foreground 表示前景图像：

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" />
</ItemGroup>

重要

必须为项目指定<MauiIcon>背景图像 (Include属性) 。 前台图像 (属性) ForegroundFile 是可选的。

设置基本大小

.NET MAUI 使用多个平台和设备之间的图标，并尝试根据每个平台和设备调整图标的大小。 应用图标也用于不同的用途，例如应用的应用商店条目或用于在设备上安装应用后表示应用的图标。

图标的基大小表示图像的基线密度，并且实际上是派生所有其他大小的 1.0 缩放因子。 如果未为基于位图的应用图标（如 PNG 文件）指定基本大小，则不会调整图像大小。 如果未为基于矢量的应用图标（如 SVG 文件）指定基大小，则图像中指定的尺寸将用作基本大小。 若要停止重设矢量图像的大小，请将 Resize 属性设置为 false。

下图说明了基本大小如何影响图像：


上图所示的过程遵循以下步骤：

  • A：图像作为 .NET MAUI 图标添加，尺寸为 210x260，基本大小设置为 424x520。
  • B：.NET MAUI 会自动缩放图像，以匹配 424x520 的基本大小。
  • C：由于不同的目标平台需要不同大小的映像，.NET MAUI 会自动将映像从基本大小缩放为不同的大小。

提示

使用 SVG 图像作为图标。 SVG 图像可以纵向扩展为更大的大小，但仍看起来清晰且干净。 基于位图的图像（例如 PNG 或 JPG 图像）在纵向扩展时看起来模糊。

基大小是使用 BaseSize="W,H" 属性指定的，其中 W 图标的宽度是 H 图标的高度。 指定为基大小的值必须除以 8。 以下示例设置基本大小：

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.png" BaseSize="128,128" />
</ItemGroup>

以下示例停止自动调整基于矢量的图像的大小：

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" Resize="false" />
</ItemGroup>

重新着色背景

如果撰写应用图标中使用的背景图像使用透明度，则可以通过 Color 指定属性 <MauiIcon>来重新着色它。 以下示例将应用图标的背景色设置为红色：

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" Color="#FF0000" />
</ItemGroup>

可以使用以下格式以十六进制形式指定颜色值： #RRGGBB 或 #AARRGGBB。 表示红色通道、绿色通道、 GGBB蓝色通道和 AA alpha 通道的值RR。 可以使用命名的 .NET MAUI 颜色，而不是十六进制值，例如 Red 或 PaleVioletRed。

重新着色前景

如果应用图标由背景 (Include) 图像和前景 (ForegroundFile) 图像组成，则可以着色前景图像。 若要淡化前景图像，请使用属性指定颜色 TintColor 。 以下示例淡化前景图像黄色：

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

可以使用以下格式以十六进制形式指定颜色值： #RRGGBB 或 #AARRGGBB。 表示红色通道、绿色通道、 GGBB蓝色通道和 AA alpha 通道的值RR。 可以使用命名的 .NET MAUI 颜色，而不是十六进制值，例如 Red 或 PaleVioletRed。

每个平台使用不同的图标

如果要使用每个平台的不同图标资源或设置，请将 Condition 属性添加到 <MauiIcon> 项，并查询特定平台。 如果满足条件，则 <MauiIcon> 处理该项。 只有 .NET MAUI 使用第一个有效 <MauiIcon> 项，因此应首先声明所有条件项，后跟没有条件的默认 <MauiIcon> 项。 以下 XML 演示如何声明 Windows 的特定图标和所有其他平台的回退图标：

<ItemGroup>
    <!-- App icon for Windows -->
    <MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'"
              Include="Resources\AppIcon\backicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="#40FF00FF" />

    <!-- App icon for all other platforms -->
    <MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

可以通过将条件中的值更改为以下值之一来设置目标平台：

  • 'ios'
  • 'maccatalyst'
  • 'android'
  • 'windows'

例如，面向 Android 的条件是 Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'"。

特定于平台的配置

虽然项目文件声明了应用图标撰写的资源，但仍需要更新各个平台配置，并引用这些应用图标。 以下信息描述了这些特定于平台的设置。

Android 使用的图标在 Android 清单中指定，该清单位于 Platforms\Android\AndroidManifest.xml。 节点 manifest/application 包含两个用于定义图标的属性： android:icon 和 android:roundIcon。 这两个属性的值遵循以下格式： @mipmap/{name} 以及 @mipmap/{name}_round，分别。 该值 {name} 派生自 .NET MAUI 项目文件的 <MauiIcon> 项，特别是属性定义的 Include 文件名，而不带其路径或扩展名。

请考虑以下示例，该示例将资源 Resources\AppIcon\healthapp.png 定义为图标：

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\healthapp.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

转换后的名称（不带路径或扩展名的资源）为 healthapp。 其值android:iconandroid:roundIcon和@mipmap/healthapp值分别为和和@mipmap/healthapp_round。 应更新 android 清单以匹配 healthapp 为图标：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/healthapp" android:roundIcon="@mipmap/healthapp_round" android:supportsRtl="true"></application>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

提示

无需为图标创建新图像文件，只需替换 .NET MAUI 模板提供的两个图像文件： Resources\AppIcon\appicon.svg 后台和 Resources\AppIcon\appiconfg.svg 。

自适应启动器

.NET MAUI 支持从应用图标在 Android 8.0 及更高版本上创建自适应启动器图标。 自适应启动器图标可以在不同的设备模型中显示为各种形状，包括圆形和方形。 有关自适应图标的详细信息，请参阅 Android 开发人员指南：自适应图标。

自适应启动器图标是组合图标，使用背景层和前景层，以及可选的缩放值。 有关详细信息，请参阅 “组合”图标部分。 如果通过指定 ForegroundFile 属性定义组合图标，将生成自适应启动器图标。 以下 XML 演示如何定义用作自适应启动器图标的图标：

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" ForegroundScale="0.65" Color="#512BD4" />
</ItemGroup>

可以选择指定该 ForegroundScale 属性以更改在背景层上呈现的前景层的缩放。