Xamarin.Forms Didacticiel sur les étiquettes

Article
Developer (Débutant)
7 minutes avant achèvement

Avant de tenter ce didacticiel, vous devez avoir suivi les guides et didacticiels suivants :

Créez votre premier Xamarin.Forms démarrage rapide d’application .
Didacticiel StackLayout.

Dans ce tutoriel, vous allez apprendre à :

Créez un Xamarin.FormsLabel code XAML.
Modifier l’apparence du Label.
Présenter du texte dans un seul Label qui possède plusieurs formats.

Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment afficher du texte dans un Label. 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 étiquette

6 minutes restantes

Visual Studio
Visual Studio pour Mac

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

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer LabelTutorial. 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 LabelTutorial, 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="LabelTutorial.MainPage">
 <StackLayout Margin="20,35,20,20">
 <Label Text="Welcome to Xamarin.Forms!"
 HorizontalOptions="Center" />
 </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément Label dans StackLayout. La propriété Label.Text spécifie le texte qui s’affiche, et la propriété HorizontalOptions spécifie que la Label est centrée horizontalement.
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 :

Pour suivre ce didacticiel, vous devez disposer de Visual Studio pour Mac (dernière version) avec une prise en charge des plateformes iOS et Android. Vous aurez également besoin de Xcode (dernière version). Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin.

Lancez Visual Studio pour Mac et créez une application vide Xamarin.Forms nommée LabelTutorial.

Important

Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer LabelTutorial. 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 Panneau Solutions, dans le projet LabelTutorial, 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="LabelTutorial.MainPage">
 <StackLayout Margin="20,35,20,20">
 <Label Text="Welcome to Xamarin.Forms!"
 HorizontalOptions="Center" />
 </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément Label dans StackLayout. La propriété Label.Text spécifie le texte qui s’affiche, et la propriété HorizontalOptions indique que le texte est centré horizontalement.
Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix :

Changer l’apparence

4 minutes restantes

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration Label pour modifier son apparence visuelle :
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Ce code définit les propriétés qui modifient l’apparence visuelle de l’élément Label. La propriété TextColor définit la couleur du texte Label. La propriété FontAttributes définit la police de l’étiquette en italique et la propriété FontSize définit la taille de police. En outre, un ornement de texte souligné est appliqué à Label en définissant sa propriété TextDecorations, et le texte est centré horizontalement en définissant la propriété HorizontalOptions sur Center.
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. Vous remarquerez que l’apparence de l’élément Label a changé :

Pour plus d’informations sur la définition Label de l’apparence, consultez le guide d’étiquetteXamarin.Forms.

Dans MainPage.xaml, modifiez la déclaration Label pour modifier son apparence visuelle :
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Ce code définit les propriétés qui modifient l’apparence visuelle de l’élément Label. La propriété TextColor définit la couleur du texte Label. La propriété FontAttributes définit la police de l’étiquette en italique et la propriété FontSize définit la taille de police. En outre, un ornement de texte souligné est appliqué à Label en définissant sa propriété TextDecorations, et le texte est centré horizontalement en définissant la propriété HorizontalOptions sur Center.
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 pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android que vous avez choisi. Vous remarquerez que l’apparence de l’élément Label a changé :

Pour plus d’informations sur la définition Label de l’apparence, consultez le guide d’étiquetteXamarin.Forms.

Présenter du texte mis en forme

2 minutes restantes

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration Label pour présenter un texte qui utilise plusieurs formats, dans un seul Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Ce code affiche du texte dans un seul Label utilisant plusieurs formats. Le texte du premier Span s’affiche à l’aide de la mise en forme définie sur le Label, tandis que le texte des deuxième et troisième instances Span s’affiche avec la mise en forme définie sur le Label et la mise en forme supplémentaire définie sur chaque Span.

Remarque

La propriété FormattedText est du type FormattedString, qui comprend une ou plusieurs instances Span.
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. Vous remarquerez que l’apparence de l’élément Label a changé :

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur la définition Span de l’apparence, consultez Texte mis en forme dans le guide d’étiquetteXamarin.Forms.

Dans MainPage.xaml, modifiez la déclaration Label pour présenter un texte qui utilise plusieurs formats, dans un seul Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Ce code affiche du texte dans un seul Label utilisant plusieurs formats. Le texte du premier Span s’affiche à l’aide de la mise en forme définie sur le Label, tandis que le texte des deuxième et troisième instances Span s’affiche avec la mise en forme définie sur le Label et la mise en forme supplémentaire définie sur chaque Span.

Remarque

La propriété FormattedText est du type FormattedString, qui comprend une ou plusieurs instances Span.
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 pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android que vous avez choisi. Vous remarquerez que l’apparence de l’élément Label a changé :

Dans Visual Studio pour Mac, arrêtez l’application.

Pour plus d’informations sur la définition Span de l’apparence, consultez Texte mis en forme dans le guide d’étiquetteXamarin.Forms.

Xamarin.Forms Didacticiel sur les étiquettes

Créer une étiquette

Changer l’apparence

Présenter du texte mis en forme

Félicitations !

Étapes suivantes

Xamarin.Forms Didacticiel sur les étiquettes

Créer une étiquette

Changer l’apparence

Présenter du texte mis en forme

Félicitations !

Étapes suivantes

Liens connexes