Ajouter une icône d’application à un projet d’application .NET MAUI

  • Article

Chaque application a une icône de logo qui la représente, et cette icône apparaît généralement à plusieurs endroits. Par exemple, sur iOS, l’icône de l’application apparaît sur l’écran d’accueil et dans l’ensemble du système, comme dans Paramètres, les notifications et les résultats de recherche, et dans l’App Store. Sur Android, l’icône de l’application apparaît sous la forme d’une icône de lanceur et dans tout le système, comme dans la barre d’action, les notifications et dans le Google Play Store. Sur Windows, l’icône de l’application apparaît dans la liste des applications dans le menu Démarrer, la barre des tâches, la vignette de l’application et dans le Microsoft Store.

Dans un projet d’application .NET Multiplateforme (.NET MAUI), une icône d’application peut être spécifiée dans un emplacement unique dans votre projet d’application. Au moment de la génération, cette icône peut être automatiquement redimensionnée en résolution correcte pour la plateforme et l’appareil cible, et ajoutée à votre package d’application. Cela évite d’avoir à dupliquer et nommer manuellement l’icône d’application par plateforme. Par défaut, les formats d’image bitmap (non vectoriel) ne sont pas automatiquement redimensionnés par .NET MAUI.

Une icône d’application .NET MAUI peut utiliser l’un des formats d’image de plateforme standard, y compris les fichiers SVG (Scalable Vector Graphics).

Important

.NET MAUI convertit les fichiers SVG en fichiers PNG (Portable Network Graphic). Par conséquent, lors de l’ajout d’un fichier SVG à votre projet d’application .NET MAUI, il doit être référencé à partir de XAML ou C# avec une extension .png . La seule référence au fichier SVG doit se trouver dans votre fichier projet.

Modifier l’icône

Dans votre projet MAUI .NET, l’image avec l’action MauiIcon de génération désigne l’icône à utiliser pour votre application. Cela est représenté dans votre fichier projet en tant qu’élément <MauiIcon> . Vous n’avez peut-être qu’une seule icône définie pour votre application. Tous les éléments suivants <MauiIcon> sont ignorés.

L’icône définie par votre application peut être composée d’une seule image, en spécifiant le fichier comme Include attribut :

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

Seul le premier <MauiIcon> élément défini dans le fichier projet est traité par .NET MAUI. Si vous souhaitez utiliser un autre fichier comme icône, commencez par supprimer l’icône existante de votre projet, puis ajoutez-la en la faisant glisser vers le dossier Resources\AppIcon de votre projet. Visual Studio définit automatiquement son action MauiIcon de génération et crée un élément correspondant <MauiIcon> dans votre fichier projet.

Remarque

Une icône d’application peut également être ajoutée à d’autres dossiers de votre projet d’application. Toutefois, dans ce scénario, son action de génération doit être définie MauiIcon manuellement dans la fenêtre Propriétés .

Pour respecter les règles de nommage des ressources Android, les noms de noms d’icône d’application doivent être minuscules, démarrer et se terminer par un caractère de lettre et contenir uniquement des caractères alphanumériques ou des traits de soulignement. Pour plus d’informations, consultez la vue d’ensemble des ressources d’application sur developer.android.com.

Après avoir modifié le fichier d’icône, vous devrez peut-être propre le projet dans Visual Studio. Pour propre le projet, cliquez avec le bouton droit sur le fichier projet dans le volet Explorateur de solutions, puis sélectionnez Nettoyer. Vous devrez peut-être également désinstaller l’application à partir de la plateforme cible avec laquelle vous effectuez des tests.

Attention

Si vous ne propre pas le projet et désinstallez l’application à partir de la plateforme cible, vous ne verrez peut-être pas votre nouvelle icône.

Après avoir modifié l’icône, passez en revue les informations de configuration spécifiques à la plateforme.

Icône composée

L’icône d’application peut également être composée de deux images, une image représentant l’arrière-plan et une autre représentant le premier plan. Étant donné que les icônes sont transformées en fichiers PNG, l’icône d’application composée sera d’abord superposée à l’image d’arrière-plan, généralement une image d’un motif ou d’une couleur unie, suivie de l’image de premier plan. Dans ce cas, l’attribut Include représente l’image d’arrière-plan de l’icône et l’attribut Foreground représente l’image de premier plan :

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

Important

L’image d’arrière-plan (Include attribut) doit être spécifiée pour l’élément <MauiIcon> . L’image de premier plan (ForegroundFile attribut) est facultative.

Définir la taille de base

.NET MAUI utilise votre icône sur plusieurs plateformes et appareils, et tente de redimensionner l’icône en fonction de chaque plateforme et appareil. L’icône d’application est également utilisée à des fins différentes, telles qu’une entrée de magasin pour votre application ou l’icône utilisée pour représenter l’application après son installation sur un appareil.

La taille de base de votre icône représente la densité de référence de l’image et est effectivement le facteur d’échelle 1,0 dont toutes les autres tailles sont dérivées. Si vous ne spécifiez pas la taille de base d’une icône d’application bitmap, telle qu’un fichier PNG, l’image n’est pas redimensionnée. Si vous ne spécifiez pas la taille de base d’une icône d’application vectorielle, telle qu’un fichier SVG, les dimensions spécifiées dans l’image sont utilisées comme taille de base. Pour empêcher un redimensionnement d’une image vectorielle, définissez l’attribut Resize sur false.

La figure suivante montre comment la taille de base affecte une image :

How base size affects an app icon for .NET MAUI.

Le processus présenté dans la figure précédente suit les étapes suivantes :

  • A: l’image est ajoutée en tant qu’icône .NET MAUI et a des dimensions de 210 x 260, et la taille de base est définie sur 424 x 520.
  • B: .NET MAUI met automatiquement à l’échelle l’image pour qu’elle corresponde à la taille de base de 424 x 520.
  • C: comme différentes plateformes cibles nécessitent différentes tailles de l’image, .NET MAUI met automatiquement à l’échelle l’image de la taille de base à différentes tailles.

Conseil

Utilisez une image SVG comme icône. Les images SVG peuvent monter à l’échelle à des tailles plus volumineuses et toujours très nettes et propre. Les images bitmap, telles qu’une image PNG ou JPG, semblent floues lors de la mise à l’échelle.

La taille de base est spécifiée avec l’attribut BaseSize="W,H" , où W est la largeur de l’icône et H la hauteur de l’icône. L’exemple suivant définit la taille de base :

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

L’exemple suivant arrête le redimensionnement automatique d’une image vectorielle :

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

Recolorier l’arrière-plan

Si l’image d’arrière-plan utilisée pour composer l’icône d’application utilise la transparence, elle peut être recolorée en spécifiant l’attribut Color sur le <MauiIcon>. L’exemple suivant définit la couleur d’arrière-plan de l’icône d’application en rouge :

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

Les valeurs de couleur peuvent être spécifiées en hexadécimal, à l’aide du format : #RRGGBB ou #AARRGGBB. La valeur de RR représente le canal rouge, GG le canal vert, BB le canal bleu et AA le canal alpha. Au lieu d’une valeur hexadécimale, vous pouvez utiliser une couleur .NET MAUI nommée, telle que Red ou PaleVioletRed.

Attention

Si vous ne définissez pas de couleur d’arrière-plan pour votre icône d’application, l’arrière-plan est considéré comme transparent sur iOS et Mac Catalyst. Cela entraîne une erreur lors de la vérification Connecter app Store et vous ne pourrez pas charger votre application.

Recolorier le premier plan

Si l’icône d’application est composée d’une image d’arrière-plan (Include) et d’une image de premier plan (ForegroundFile), l’image de premier plan peut être teintée. Pour teinter l’image de premier plan, spécifiez une couleur avec l’attribut TintColor . L’exemple suivant teinte l’image de premier plan jaune :

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

Les valeurs de couleur peuvent être spécifiées en hexadécimal, à l’aide du format : #RRGGBB ou #AARRGGBB. La valeur de RR représente le canal rouge, GG le canal vert, BB le canal bleu et AA le canal alpha. Au lieu d’une valeur hexadécimale, vous pouvez utiliser une couleur .NET MAUI nommée, telle que Red ou PaleVioletRed.

Utiliser une autre icône par plateforme

Si vous souhaitez utiliser différentes ressources d’icône ou paramètres par plateforme, ajoutez l’attribut Condition à l’élément <MauiIcon> et interrogez la plateforme spécifique. Si la condition est remplie, l’élément <MauiIcon> est traité. Seul le premier élément valide <MauiIcon> est utilisé par .NET MAUI. Tous les éléments conditionnels doivent donc être déclarés en premier, suivis d’un élément par défaut <MauiIcon> sans condition. Le code XML suivant illustre la déclaration d’une icône spécifique pour Windows et une icône de secours pour toutes les autres plateformes :

<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>

Vous pouvez définir la plateforme cible en modifiant la valeur comparée dans la condition à l’une des valeurs suivantes :

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

Par exemple, une condition qui cible Android serait Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'".

Configuration spécifique à la plateforme

Bien que le fichier projet déclare les ressources à partir de laquelle l’icône d’application est composée, vous devez toujours mettre à jour les configurations de plateforme individuelles avec référence à ces icônes d’application. Les informations suivantes décrivent ces paramètres spécifiques à la plateforme.

L’icône Utilisée par Android est spécifiée dans le manifeste Android, qui se trouve sur Platforms\Android\AndroidManifest.xml. Le manifest/application nœud contient deux attributs pour définir l’icône : android:icon et android:roundIcon. Les valeurs de ces deux attributs suivent ce format : @mipmap/{name} et @mipmap/{name}_round, respectivement. La valeur pour {name} laquelle elle est dérivée de l’élément du <MauiIcon> fichier projet .NET MAUI, en particulier le nom de fichier défini par l’attribut Include , sans son chemin d’accès ou son extension.

Prenons l’exemple suivant, qui définit la ressource Resources\AppIcon\healthapp.png comme icône :

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

Le nom transformé, la ressource sans le chemin d’accès ou l’extension, est healthapp. Les valeurs pour android:icon et android:roundIcon seraient @mipmap/healthapp et @mipmap/healthapp_round, respectivement. Le manifeste Android doit être mis à jour pour correspondre healthapp à l’icône :

<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>

Conseil

Au lieu de créer de nouveaux fichiers image pour l’icône, remplacez simplement les deux fichiers image fournis par le modèle .NET MAUI : Resources\AppIcon\appicon.svg pour l’arrière-plan et Resources\AppIcon\appiconfg.svg pour le premier plan.

Lanceur adaptatif

.NET MAUI prend en charge la création d’une icône de lanceur adaptatif sur Android 8.0 et versions ultérieures, à partir de l’icône d’application. Les icônes du lanceur adaptatif peuvent s’afficher sous forme de différentes formes sur différents modèles d’appareil, notamment circulaires et carrées. Pour plus d’informations sur les icônes adaptatives, consultez le guide du développeur Android : icônes adaptatives.

Les icônes du lanceur adaptatif sont des icônes composées, à l’aide d’une couche d’arrière-plan et d’une couche de premier plan et d’une valeur de mise à l’échelle facultative. Pour plus d’informations, consultez la section icône composée. Si l’icône composée est définie, en spécifiant l’attribut ForegroundFile , une icône de lanceur adaptatif est générée. Le code XML suivant illustre la définition d’une icône utilisée comme icône de lanceur adaptatif :

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

L’attribut ForegroundScale peut éventuellement être spécifié pour modifier la mise à l’échelle de la couche de premier plan affichée sur la couche d’arrière-plan.