Partager via

Image

  • Article

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) Image affiche une image qui peut être chargée à partir d’un fichier local, d’un URI ou d’un flux. Les formats d’image de plateforme standard sont pris en charge, notamment les fichiers GIF animés et les fichiers SVG (Scalable Vector Graphics) locaux. Pour plus d’informations sur l’ajout d’images à un projet d’application .NET MAUI, consultez Ajouter des images à un projet d’application .NET MAUI.

Image définit les propriétés suivantes :

  • Aspect, de type Aspect, définit le mode de mise à l’échelle de l’image.
  • IsAnimationPlaying, de type bool, détermine si un GIF animé est en cours de lecture ou arrêté. La valeur par défaut de cette propriété est false.
  • IsLoading, de type bool, indique l’état de chargement de l’image. La valeur par défaut de cette propriété est false.
  • IsOpaque, de type bool, indique si le moteur de rendu peut traiter l’image comme opaque lors du rendu. La valeur par défaut de cette propriété est false.
  • Source, de type ImageSource, spécifie la source de l’image.

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être styletées et être la cible de liaisons de données.

Remarque

Les icônes de police peuvent être affichées par un Image en spécifiant les données d’icône de police en tant qu’objet FontImageSource . Pour plus d’informations, consultez Afficher les icônes de police.

La ImageSource classe définit les méthodes suivantes qui peuvent être utilisées pour charger une image à partir de différentes sources :

  • FromFile retourne une FileImageSource image qui lit une image à partir d’un fichier local.
  • FromUri retourne un UriImageSource fichier qui télécharge et lit une image à partir d’un URI spécifié.
  • FromStream retourne une StreamImageSource image qui lit une image à partir d’un flux qui fournit des données d’image.

En XAML, les images peuvent être chargées à partir de fichiers et d’URI en spécifiant le nom de fichier ou l’URI comme valeur de chaîne pour la Source propriété. Les images peuvent également être chargées à partir de flux en XAML via des extensions de balisage personnalisées.

Important

Les images sont affichées à leur résolution complète, sauf si la taille du fichier Image est limitée par sa disposition, ou si la ou WidthRequest la HeightRequest propriété de celle-ci Image est spécifiée.

Pour plus d’informations sur l’ajout d’icônes d’application et d’un écran de démarrage à votre application, consultez icônes d’application et écran de démarrage.

Charger une image locale

Vous pouvez ajouter des images à votre projet d’application en les faisant glisser vers le dossier Resources\Images de votre projet, où son action de génération sera automatiquement définie sur MauiImage. Au moment de la génération, les images vectorielles sont redimensionnées en résolutions correctes pour la plateforme cible et l’appareil, et ajoutées à votre package d’application. Cela est nécessaire, car différentes plateformes prennent en charge différentes résolutions d’images, et le système d’exploitation choisit la résolution d’image appropriée au moment de l’exécution en fonction des fonctionnalités de l’appareil.

Pour respecter les règles d’affectation de noms des ressources Android, tous les noms de fichiers d’image locaux doivent être en minuscules, commencer 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.

Important

.NET MAUI convertit les fichiers SVG en fichiers PNG. 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.

L’adhésion à ces règles pour l’affectation de noms et le placement de fichiers permet au code XAML suivant de charger et d’afficher une image :

<Image Source="dotnet_bot.png" />

Le code C# équivalent est :

Image image = new Image
{
    Source = ImageSource.FromFile("dotnet_bot.png")
};

La ImageSource.FromFile méthode nécessite un string argument et retourne un nouvel FileImageSource objet qui lit l’image à partir du fichier. Il existe également un opérateur de conversion implicite qui permet au nom de fichier d’être spécifié en tant qu’argument string de la Image.Source propriété :

Image image = new Image { Source = "dotnet_bot.png" };

Charger une image distante

Les images distantes peuvent être téléchargées et affichées en spécifiant un URI comme valeur de la Source propriété :

<Image Source="https://aka.ms/campus.jpg" />

Le code C# équivalent est :

Image image = new Image
{
    Source = ImageSource.FromUri(new Uri("https://aka.ms/campus.jpg"))
};

La ImageSource.FromUri méthode nécessite un Uri argument et retourne un nouvel UriImageSource objet qui lit l’image à partir du Uri. Il existe également une conversion implicite pour les URI basés sur des chaînes :

Image image = new Image { Source = "https://aka.ms/campus.jpg" };

Mise en cache d’images

La mise en cache des images téléchargées est activée par défaut, avec des images mises en cache stockées pendant 1 jour. Ce comportement peut être modifié en définissant des propriétés de la UriImageSource classe.

La UriImageSource classe définit les propriétés suivantes :

  • Uri, de type Uri, représente l’URI de l’image à télécharger pour l’affichage.
  • CacheValidity, de type TimeSpan, spécifie la durée pendant laquelle l’image sera stockée localement. La valeur par défaut de cette propriété est de 1 jour.
  • CachingEnabled, de type bool, définit si la mise en cache d’image est activée. La valeur par défaut de cette propriété est true.

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être styletées et être la cible de liaisons de données.

Pour définir une période de cache spécifique, définissez la Source propriété sur un UriImageSource objet qui définit sa CacheValidity propriété :

<Image>
    <Image.Source>
        <UriImageSource Uri="https://aka.ms/campus.jpg"
                        CacheValidity="10:00:00:00" />
    </Image.Source>
</Image>

Le code C# équivalent est :

Image image = new Image();
image.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CacheValidity = new TimeSpan(10,0,0,0)
};

Dans cet exemple, la période de mise en cache est définie sur 10 jours.

Charger une image à partir d’un flux

Les images peuvent être chargées à partir de flux avec la ImageSource.FromStream méthode :

Image image = new Image
{
    Source = ImageSource.FromStream(() => stream)
};

Important

La mise en cache d’images est désactivée sur Android lors du chargement d’une image à partir d’un flux avec la ImageSource.FromStream méthode. Cela est dû au manque de données à partir de laquelle créer une clé de cache raisonnable.

Charger une icône de police

L’extension de FontImage balisage vous permet d’afficher une icône de police dans n’importe quel affichage pouvant afficher un ImageSource. Il fournit les mêmes fonctionnalités que la FontImageSource classe, mais avec une représentation plus concise.

L’extension FontImage de balisage est prise en charge par la FontImageExtension classe, qui définit les propriétés suivantes :

  • FontFamily de type string, la famille de polices à laquelle appartient l’icône de police.
  • Glyph de type string, valeur de caractère unicode de l’icône de police.
  • Color de type Color, couleur à utiliser lors de l’affichage de l’icône de police.
  • Size de type double, la taille, en unités indépendantes de l’appareil, de l’icône de police rendue. La valeur par défaut est 30. En outre, cette propriété peut être définie sur une taille de police nommée.

Remarque

L’analyseur XAML permet à la FontImageExtension classe d’être abrégée en tant que FontImage.

La Glyph propriété est la propriété de contenu de FontImageExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec accolades, vous pouvez éliminer la Glyph= partie de l’expression fournie qu’il s’agit du premier argument.

L’exemple XAML suivant montre comment utiliser l’extension de FontImage balisage :

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily=Ionicons, Size=44}" />

Dans cet exemple, la version abrégée du nom de classe FontImageExtension est utilisée pour afficher une icône XBox, à partir de la famille de polices Ionicons, dans un Image:

Screenshot of the FontImage markup extension.

Bien que le caractère Unicode de l’icône soit \uf30c, il doit être placé dans le code XAML et devient &#xf30c;ainsi .

Pour plus d’informations sur l’affichage des icônes de police en spécifiant les données d’icône de police dans un FontImageSource objet, consultez Afficher les icônes de police.

Charger des gif animés

.NET MAUI inclut la prise en charge de l’affichage de fichiers GIF petits et animés. Pour ce faire, définissez la Source propriété sur un fichier GIF animé :

<Image Source="demo.gif" />

Important

Bien que la prise en charge gif animée dans .NET MAUI inclut la possibilité de télécharger des fichiers, elle ne prend pas en charge la mise en cache ou la diffusion en continu de gif animés.

Par défaut, lorsqu’un GIF animé est chargé, il ne sera pas lu. Cela est dû au fait que la IsAnimationPlaying propriété, qui contrôle si un GIF animé est en cours de lecture ou arrêté, a une valeur par défaut de false. Par conséquent, lorsqu’un GIF animé est chargé, il ne sera pas lu tant que la IsAnimationPlaying propriété n’est pas définie truesur . La lecture peut être arrêtée en réinitialisant la IsAnimationPlaying propriété sur false. Notez que cette propriété n’a aucun effet lors de l’affichage d’une source d’image non GIF.

Contrôler la mise à l’échelle des images

La Aspect propriété détermine la façon dont l’image sera mise à l’échelle pour s’adapter à la zone d’affichage et doit être définie sur l’un des membres de l’énumération Aspect :

  • AspectFit - les boîtes à lettres de l’image (si nécessaire) afin que l’image entière s’intègre dans la zone d’affichage, avec un espace vide ajouté au haut/bas ou aux côtés selon que l’image est large ou haute.
  • AspectFill - découpe l’image pour qu’elle remplisse la zone d’affichage tout en conservant les proportions.
  • Fill - étire l’image pour qu’elle remplisse complètement et exactement la zone d’affichage. Cela peut entraîner une déformation de l’image.
  • Center - centre l’image dans la zone d’affichage tout en conservant le rapport d’aspect.