Xamarin.Forms Didacticiel sur l’image
Avant de tenter ce didacticiel, vous devez avoir suivi les guides et didacticiels suivants :
Dans ce tutoriel, vous allez apprendre à :
- Créez un Xamarin.Forms
Imagecode XAML. - Personnaliser l’apparence de l’élément
Image. - Afficher un fichier d’image local à partir de chaque projet de plateforme.
Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment afficher une image et personnaliser son apparence. Les captures d’écran suivantes montrent l’application finale :
Vous utiliserez également des Rechargement à chaud XAML pour Xamarin.Forms voir les modifications apportées à l’interface utilisateur sans regénérer votre application.
Créer une image
Pour suivre ce didacticiel, vous devez disposer de Visual Studio 2019 (dernière version) sur lequel est installée la charge de travail Développement mobile en .NET. Vous aurez également besoin d’un Mac couplé pour générer l’application du didacticiel sur iOS. Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin. Pour plus d’informations sur la connexion de Visual Studio 2019 à un hôte de build Mac, consultez l’article Appairer avec un Mac pour le développement Xamarin.iOS.
Lancez Visual Studio et créez une application vide Xamarin.Forms nommée ImageTutorial.
Important
Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer ImageTutorial. L’utilisation d’un autre nom entraîne des erreurs de build quand vous copiez le code à partir de ce didacticiel dans la solution.
Pour plus d’informations sur la bibliothèque .NET Standard créée, consultez Anatomie d’une Xamarin.Forms application dans le Xamarin.Forms guide de démarrage rapide Deep Dive.
Dans l’Explorateur de solutions, dans le projet ImageTutorial, double-cliquez sur MainPage.xaml pour l’ouvrir. Puis, dans MainPage.xaml, supprimez tout le code du modèle et remplacez-le par le code suivant :
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ImageTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" HeightRequest="300" /> </StackLayout> </ContentPage>Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément
ImagedansStackLayout. La propriétéImage.Sourcespécifie l’image à afficher via un URI. La propriétéImage.Sourceest de typeImageSource. Les images peuvent ainsi provenir de fichiers, d’URI ou de ressources. Pour plus d’informations, consultez Affichage d’images dans le guide ImagesXamarin.Forms.La propriété
HeightRequestspécifie la hauteur de l’élémentImageen unités indépendantes de l’appareil.Remarque
Il n’est pas nécessaire de définir la propriété
WidthRequestdans cet exemple. En effet, par défaut, l’élémentImageconserve les proportions de l’image.Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix :
Remarque
La vue
Imagemet automatiquement en cache les images téléchargées pendant 24 heures. Pour plus d’informations, consultez La mise en cache des images téléchargées dans le guide Images Xamarin.Forms .
Personnaliser l’apparence
Dans MainPage.xaml, modifiez la déclaration
Imagepour personnaliser son apparence :<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" Aspect="Fill" HeightRequest="{OnPlatform iOS=300, Android=250}" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />Ce code définit la propriété
Aspect(qui spécifie le mode de mise à l’échelle de l’image) surFill. Le membreFillest défini dans l’énumérationAspectet étire l’image pour remplir entièrement la vue, que l’image soit déformée ou non. Pour plus d’informations sur la mise à l’échelle des images, consultez Affichage d’images dans le guide ImagesXamarin.Forms.L’extension de balisage
OnPlatformvous permet de personnaliser l’apparence de l’interface utilisateur pour chaque plateforme. Dans cet exemple, l’extension de balisage est utilisée pour définir les propriétésHeightRequestetWidthRequestsur 300 unités indépendantes du périphérique sur iOS et sur 250 unités indépendantes du périphérique sur Android. Pour plus d’informations sur l’extension de balisageOnPlatform, consultez la rubrique Extension de balisage OnPlatform du guide Utilisation des Extensions de balisage XAML.En outre, la propriété
HorizontalOptionsindique que l’image est centrée horizontalement.Si l’application est toujours en cours d’exécution, enregistrez les modifications dans le fichier : l’interface utilisateur de l’application est alors mise à jour automatiquement dans votre simulateur ou votre émulateur. Sinon, dans la barre d’outils de Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android que vous avez choisi :
Dans Visual Studio, arrêtez l’application.
Afficher une image locale
Les fichiers image peuvent être ajoutés aux projets de plateforme et référencés à partir du Xamarin.Forms code partagé. Cette méthode de distribution d’images est indispensable dans le cas d’images spécifiques à la plateforme, par exemple si vous utilisez différentes résolutions sur différentes plateformes ou des conceptions qui présentent quelques variations mineures.
Dans cet exercice, vous allez modifier la solution ImageTutorial pour afficher une image locale, plutôt qu’une image téléchargée à partir d’un URI. L’image locale représente le logo de Xamarin, que vous devez télécharger en cliquant sur le bouton ci-dessous.
Important
Pour utiliser une seule image sur l’ensemble des plateformes, le même nom de fichier doit être utilisé sur toutes les plateformes. Il doit s’agir d’un nom de ressource Android valide (autrement dit, seuls les lettres minuscules, les chiffres, le trait de soulignement et le point sont autorisés).
Dans l’Explorateur de solutions, à l’intérieur du projet ImageTutorial.iOS, développez Catalogues de composants et double-cliquez sur Composants pour l’ouvrir. Sous l’onglet Assets.xcassets, cliquez sur le bouton Plus et sélectionnez Ajouter un ensemble d’images :
Sous l’onglet Assets.xcassets, sélectionnez le nouvel ensemble d’images. L’éditeur s’affiche :
Faites glisser le fichier XamarinLogo.png de votre système de fichiers vers la zone 1 x dans la catégorie Universel :
Sous l’onglet Assets.xcassets, cliquez avec le bouton droit sur le nom du nouvel ensemble d’images et donnez-lui le nom XamarinLogo :
Enregistrez et fermez l’onglet Assets.xcassets.
Dans l’Explorateur de solutions, à l’intérieur du projet ImageTutorial.Android, développez le dossier Ressources. Faites ensuite glisser le fichier XamarinLogo.png de votre système de fichiers vers le dossier drawable :
Remarque
Visual Studio définit automatiquement l’action de génération de l’image sur AndroidResource.
Dans le projet ImageTutorial, sous MainPage.xaml, modifiez la déclaration
Imagepour afficher le fichier XamarinLogo local :<Image Source="XamarinLogo" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />Ce code définit la propriété
Sourcesur le fichier local à afficher. La propriétéWidthRequestest définie sur 300 unités indépendantes du périphérique sur iOS et sur 250 unités indépendantes du périphérique sur Android. En outre, la propriétéHorizontalOptionsindique que l’image est centrée horizontalement.Remarque
Pour les images PNG sur iOS, l’extension .png peut être omise dans le nom de fichier spécifié dans la propriété
Source. Pour les autres formats d’image, l’extension est requise.Dans la barre d’outils de Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS distant ou dans l’émulateur Android que vous avez choisi :
Dans Visual Studio, arrêtez l’application.
Pour plus d’informations sur les images locales, consultez Images locales dans le guide ImagesXamarin.Forms.
Félicitations !
Félicitations ! Vous avez terminé ce didacticiel qui vous a expliqué comment effectuer les opérations suivantes :
- Créez un Xamarin.Forms
Imagecode XAML. - Personnaliser l’apparence de l’élément
Image. - Afficher un fichier d’image local à partir de chaque projet de plateforme.
Étapes suivantes
Pour en savoir plus sur les principes de base de la création d’applications mobiles, Xamarin.Formspassez au didacticiel Grid.
Liens connexes
Vous avez un défi avec cette section ? Si c'est le cas, faites-nous part de vos commentaires pour que nous puissions l'améliorer.