Fermer

mars 16, 2022

Répliquons une inscription dans les formulaires XamarinUne minute de lecture



Ensemble, nous allons créer une interface utilisateur d'inscription dans Xamarin Forms, étape par étape !

Salut!! 🙋‍♀ C'est un plaisir pour moi de vous avoir ici! 💚 Cette fois, nous allons créer une interface utilisateur simple dans Xamarin.Forms basée sur une conception obtenue à partir deDribbler . Nous développerons deux écrans que nous développerons étape par étape afin que vous compreniez chaque détail ajouté. Commençons!

Démarrer le code depuis le premier écran

Tout d'abord, je voudrais structurer comment nous allons développer les explications des écrans. Dans l'image ci-dessous, vous verrez un ensemble d'étapes numérotées pour mieux comprendre comment nous allons faire les explications pour que notre premier écran soit prêt !

 Exemple de LoginStructure - 1 sur l'en-tête ;  2 sur le formulaire

L'écran doit être conçu au-dessus d'une mise en page principale. Pour ce faire, utilisons un Grid. Si vous souhaitez approfondir un peu la grille, je vous recommande de lireCet article.


  <Grille Définitions de lignes="Auto, Auto, Auto, Auto, Auto, Auto, Auto, Auto" Écartement des rangs="25" Options verticales="CentrerEtDévelopper" Rembourrage="30,0">


<Étiqueter Grille. Ligne="8" FontAttributes="Audacieux" HorizontalTextAlignment="Centre">
<Label.FormattedText>
<Chaîne formatée>
<Envergure Texte="enfiler'tu n'as pas de compte ?"/>
<Envergure Texte="S'inscrire" Couleur du texte="#fd684d"/>
</Chaîne formatée>
</Label.FormattedText>
</Étiqueter>

Si vous souhaitez lire plus d'informations sur FormattedText, vous pouvez y accéderici.

Continuons avec le deuxième écran

Nous utiliserons la même dynamique que dans le premier écran - nous verrons la structure des étapes dans lesquelles nous diviserons notre explication.

SignUpStructure - 3 sur l'en-tête de la page du compte, 4 sur les détails du formulaire

Établissons la mise en page principale

J'ai créé un autre écran appelé CreateAccountPage, et nous utiliserons également la grille comme mise en page principale.

 <Grille Définitions de lignes="Auto, Auto, Auto, Auto, Auto, Auto, Auto, Auto, Auto, Auto, Auto, Auto, Auto, Auto" Écartement des rangs="20" Définitions de colonne="*,*" Espacement des colonnes="20" Options verticales="CentrerEtDévelopper" Rembourrage="30,0">