Conception pour les développeurs: introduction aux formulaires Xamarin

Xamarin Forms nous permet un contrôle considérable sur la conception de l'interface utilisateur. Familiarisez-vous avec les types de page, la mise en page et les contrôles graphiques.

L'une des choses les plus importantes lorsque nous développons une application est la conception de l'interface utilisateur (en plus des fonctionnalités, bien sûr). Le design est la première voix de notre application – tout le monde sait que la première impression est la plus importante, car elle est difficile à changer une fois faite. C'est pourquoi il est préférable d'accorder une attention particulière à la conception dès le début de notre développement.

Dans cet article, nous allons apprendre les concepts de base et l'ordre de hiérarchie que nous devons connaître pour pouvoir démarrer une conception dans Xamarin Formes! Il est important de faire une liste de tous les sujets que nous devons apprendre lorsque nous commençons avec un nouvel outil, alors prenez des notes! 🗒

Commençons!

Dans Xamarin Forms, il est recommandé de toujours faire la conception de l'interface utilisateur (FrontEnd) dans la e X pplication A pplication M arkup L anguage (XAML). Pour commencer à concevoir un écran avec XAML, il existe une structure que nous devons suivre pour organiser les composants que nous utiliserons. Dans l'image suivante, nous pouvons voir rapidement cette structure:

Comme indiqué ci-dessus, chaque partie de l'interface utilisateur de Xamarin Forms a une utilisation et simplifie le processus de construction. Apprenons ce qu’ils sont et ce qu’ils offrent, un par un.

1. Pages

Une page est le conteneur principal d'un écran. Il existe différents types de page qui apportent des fonctionnalités différentes selon le type sélectionné.

Je sais qu'une image vaut mille mots, voyons voir!

Learning the Concepts!

If vous voulez lire plus d'informations sur les pages, vous pouvez le trouver ici .

2. Mises en page

Une fois que nous avons sélectionné le type de page que nous utiliserons, nous devons sélectionner la bonne mise en page! Fondamentalement, une mise en page est un conteneur qui indique comment les contrôles graphiques à l'écran seront organisés. Il existe différents types de mises en page pour rendre notre expérience de conception géniale!

Apprendre les concepts !

Si vous voulez en savoir plus sur les dispositions, vous pouvez le trouver ici .

3. Contrôles graphiques

Dans la mise en page sélectionnée, nous avons les contrôles graphiques. C'est ce qui rend la communication entre l'utilisateur et l'application possible, car ce sont eux qui reçoivent directement les interactions de l'utilisateur.

Il existe de nombreux types de contrôle tels que: les boutons, les étiquettes, les vues de liste, entre autres. Vous pouvez utiliser ceux dont vous avez besoin. Voyons dans l'image!

Mais… Comment pouvons-nous commencer à nous entraîner? 🤔

Lorsque nous apprenons quelque chose, il est très important de mettre en pratique ce que nous apprenons. C’est pourquoi je recommande ce qui suit:

• Recherchez des pages contenant des modèles d’application pour reproduire la conception de l’interface utilisateur. Cela vous aidera à mieux comprendre l'objectif de chaque composant expliqué ci-dessus. Par exemple: https://pttrns.com

• Recherchez des exemples de modèles d'application utilisant différents composants graphiques et essayez de les reproduire! Cette page est tellement bonne pour ça: https://www.snppts.dev
  

Merci d'avoir lu !!! 💚