Image

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 des objets BindableProperty, ce qui signifie qu’ils peuvent être styletés et être la cible de liaisons de données.

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

• FromFile retourne un FileImageSource qui lit une image à partir d’un fichier local.
• FromUri retourne un UriImageSource qui télécharge et lit une image à partir d’un URI spécifié.
• FromStream retourne un StreamImageSource 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 propriété Source. Les images peuvent également être chargées à partir de flux en XAML via des extensions de balisage personnalisées.

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 vue d’ensemble des ressources d’application sur developer.android.com.

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 méthode ImageSource.FromFile nécessite un argument string et retourne un nouvel objet FileImageSource 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 à la propriété Image.Source :

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 propriété Source :

<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 méthode ImageSource.FromUri nécessite un argument Uri et retourne un nouvel objet UriImageSource 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 les propriétés de la classe UriImageSource.

La classe UriImageSource 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’images est activée. La valeur par défaut de cette propriété est true.

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

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

<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 méthode ImageSource.FromStream :

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

Charger une icône de police de caractères

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

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 propriété Source sur un fichier GIF animé :

<Image Source="demo.gif" />

Par défaut, lorsqu’un GIF animé est chargé, il ne sera pas lu. Cela est dû au fait que la propriété IsAnimationPlaying, qui contrôle si un GIF animé est en cours de lecture ou arrêté, a une valeur par défaut de false. En conséquence, lorsqu’un GIF animé est chargé, il ne sera pas lu tant que la propriété IsAnimationPlaying n’est pas définie sur true. La lecture peut être arrêtée en réinitialisant la propriété IsAnimationPlaying à 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 propriété Aspect 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 - boîtes à lettres 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 : recadre l’image afin qu’elle remplisse la zone d’affichage tout en préservant le rapport d’aspect.
• Fill - étire l’image pour remplir 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.