Explorer la conception de formulaires C# avec Tim Corey — Une visite guidée

Tim Corey

1h 06m 41s

Dans cette leçon, Tim Corey nous guide à travers le processus de construction de l'interface utilisateur pour une application C# Windows Forms. Il explique que l'objectif n'est pas encore d'écrire de la logique, mais de transformer les croquis de planification des leçons précédentes en formulaires réels et fonctionnels. Tim souligne que nous nous concentrerons d'abord sur la conception, et plus tard nous connectons tout avec du code. C'est un regard plus approfondi sur le sujet de la construction de formulaires C#, et la vidéo de Tim aide à expliquer comment une application Windows Forms est construite étape par étape dans Visual Studio.

Introduction à la construction de formulaires

Tim commence par nous souhaiter la bienvenue à la leçon sept et déclare clairement l'objectif : nous construisons les formulaires. Il nous rappelle que c'est similaire au travail de bibliothèque de classes, mais maintenant nous mettons en œuvre l'interface utilisateur réelle basée sur nos croquis de planification antérieurs. Tim note que nous pourrions être tentés d'ajouter du code à ce stade, mais il nous exhorte à nous concentrer uniquement sur la construction des formulaires.

Il explique également que nos conceptions précédentes étaient des croquis grossiers, et que maintenant nous rendons les formulaires beaux. Tim indique que le guide de conception est important, et bien qu'il ne montrera pas les expérimentations qu'il a traversées, il nous guidera à travers les résultats finaux. Il souligne également que les designs de la quatrième étape de la planification sont la base de cette leçon, et suggère de se référer à ces designs si nécessaire.

Ajouter un nouveau projet et démarrer une application Windows Forms

Tim nous montre comment ajouter un nouveau projet à la solution. Dans l'Explorateur de solutions, il clique à droite sur la solution, sélectionne Ajouter un nouveau projet et choisit Application de Formulaire Windows. Cela crée un nouveau type de projet spécifiquement pour la création d'applications de bureau Windows. Il nomme le projet Tournament Tracker UI.

Il explique que le fichier Form1.cs par défaut est généré automatiquement lors de la création d'une application Windows Forms. Comme l'application nécessite un formulaire de départ, Tim décide de ne pas le supprimer. Au lieu de cela, il renomme le fichier et la classe en TournamentViewerForm, et accepte l'invite pour renommer toutes les références. Cela garantit que la fenêtre principale de l'application fonctionnera correctement.

Renommer la classe de formulaire

Tim souligne que vous devez avoir un formulaire qui s'exécute dans une application Windows Forms. Il explique que si vous supprimez le Form1.cs par défaut, vous devez mettre à jour manuellement le point d'entrée dans Program.cs. Pour éviter cette complexité, Tim se contente de renommer le formulaire. C'est une étape typique lors du démarrage d'une application Windows Forms : renommer la classe et le fichier pour correspondre à l'objectif du projet.

Utiliser la fenêtre des propriétés

Tim sort la fenêtre des propriétés et commence à modifier les propriétés du formulaire. Il change la propriété Texte en " Gestionnaire de tournoi " afin que la barre de titre affiche le nom approprié.

Ensuite, il change la couleur de fond du gris par défaut de Visual Studio en blanc, expliquant que le blanc est plus moderne et ne distrait pas du contenu du formulaire. Cela fait partie de l'établissement d'un guide de conception pour l'UI.

Il change ensuite la police en une police moderne de 16 points, et explique pourquoi cela doit être fait tôt : les contrôles ajoutés ultérieurement hériteront automatiquement de la nouvelle police. Tim explique que c'est un conseil important pour construire des formulaires efficacement.

Changer l'icône et les ressources

Tim change l'icône du formulaire en important un fichier d'icône personnalisé. Il explique qu'il a utilisé un outil gratuit appelé Metro Studio pour créer l'icône. Cela l'aide à éviter d'écrire ou de concevoir des icônes à partir de zéro. Il note également qu'il utilisera la même icône à travers tous les formulaires pour créer une apparence cohérente pour l'application.

Ajouter des contrôles au formulaire

Tim commence à construire l'UI en faisant glisser les contrôles depuis la boîte à outils jusqu'au formulaire. Il ajoute un libellé d'en-tête et modifie ses propriétés :

• Couleur du texte → RVB (51, 153, 255)

• Police → Clair, 28

• Texte → " Tournoi : "

• Nom → " headerLabel "

Il copie et colle ensuite le libellé d'en-tête pour créer le libellé de nom de tournoi, en réglant son texte sur " Aucun " temporairement et en le nommant tournamentNameLabel. Tim explique que copier et coller des contrôles est une manière rapide de maintenir un style cohérent et de gagner du temps.

Ajout de contrôles de sélection de tour

Tim ajoute un libellé de tour et un menu déroulant ComboBox. Il change la police du libellé en 20 et règle la couleur sur le même accent bleu. Il utilise les guides d'alignement de Visual Studio pour s'assurer que les contrôles sont correctement alignés.

Ensuite, il ajoute une case à cocher étiquetée " Non joués uniquement. " Il change son style en plat et modifie la couleur de la marque de vérification en bleu. Tim explique également sa convention de nommage : il ajoute le type de contrôle à la fin (par exemple, roundDropDown, unplayedOnlyCheckbox) pour faciliter la recherche et la navigation dans le code.

Ajout de la liste de confrontation et des contrôles de score

Tim ajoute une ListBox nommée matchupListBox et règle son style de bordure sur simple fixe. Il explique que ListBox se comporte de manière similaire à ComboBox, ce qui facilite le codage par la suite.

Ensuite, il ajoute des libellés et des zones de texte pour les noms des équipes et les scores. Il démontre une technique puissante : sélectionner plusieurs contrôles, les copier et les coller ensemble. Cela préserve l'espacement et la disposition, accélérant le processus de conception.

Tim explique également que vous devez renommer chaque contrôle proprement, en évitant les noms par défaut comme label1 ou textBox2, qui peuvent causer de la confusion plus tard.

Ajouter le label VS et le bouton de score

Tim ajoute un label " VS " entre les deux sections d'équipe. Ensuite, il ajoute un bouton Score et personnalise son style :

• FlatStyle → Plat

• Couleur de la bordure → Argent

• Arrière-plan lors de l'appui → (102, 102, 102)

• Arrière-plan au survol → (242, 242, 242)

• Police → Semi-gras, 16

• Couleur du texte → (51, 153, 255)

• Texte → " Score "

Il explique que ces réglages rendent le bouton moderne et réactif, notamment lorsque l'utilisateur survole ou clique.

Exécuter le formulaire

Tim explique que le projet a actuellement le mauvais projet de démarrage. La bibliothèque de classes est en gras dans l'Explorateur de solutions, ce qui signifie qu'elle est définie comme le projet de démarrage, mais une bibliothèque de classes ne peut pas s'exécuter seule. Il définit Tracker UI comme le projet de démarrage.

Lorsqu'il exécute l'application, le formulaire apparaît avec le style Windows 10. Tim pointe le comportement de survol et de clic du bouton, montrant que l'UI est réactive et moderne.

Formulaire de création de tournoi

Tim ajoute un nouveau formulaire appelé CreateTournamentForm et définit ses propriétés (police, couleur, icône). Il copie des contrôles du formulaire Tournament Viewer pour accélérer le développement.

Il ajoute :

• Saisie de nom de tournoi

• Saisie de la taxe d'entrée (valeur par défaut 0)

• Liste déroulante d'ajout d'équipe

• Libellé de lien de création d'équipe

• Bouton d'ajout d'équipe

• Bouton de création de prix

• Liste des joueurs de tournoi

• Boutons de suppression

• Bouton de création de tournoi

Tim explique son choix de conception de garder le libellé de lien bleu parce que les utilisateurs sont formés à reconnaître le texte souligné bleu comme un lien.

Formulaire de création d'équipe

Tim crée le CreateTeamForm et ajoute :

• Saisie de nom d'équipe

• Liste déroulante de sélection de membre d'équipe

• Bouton d'ajout de membre

• Boîte de groupe pour ajouter de nouveaux membres

• Champs du prénom, nom de famille, e-mail et téléphone portable

• Bouton de création de membre

• Liste des membres de l'équipe

• Bouton de suppression de membre sélectionné

• Bouton de création d'équipe

Il explique que la boîte de groupe fournit une limite visuelle et facilite la gestion des contrôles groupés. Cela aide également lors du déplacement du groupe en tant qu'unité.

Formulaire de création de prix

Tim construit le CreatePrizeForm avec :

• Entrée du numéro de place

• Entrée du nom de place

• Entrée du montant du prix

• Entrée du pourcentage du prix

• Étiquette " Ou "

• Bouton de création de prix

Il utilise des outils d'alignement pour s'assurer que la mise en page soit propre et professionnelle.

Formulaire de gestion des tournois

Tim construit le formulaire final : TournamentDashboardForm. Il ajoute :

• Chargement du menu déroulant du tournoi existant

• Bouton de chargement du tournoi

• Bouton de création de tournoi

Il utilise des outils d'alignement et d'espacement pour équilibrer visuellement la mise en page.

Conseils pour l'appellation et l'organisation

Tim souligne l'importance de la bonne nomenclature. Il montre comment la liste déroulante Propriétés peut aider à identifier les contrôles non nommés comme label1 ou textBox2 qui ont été oubliés accidentellement. Il montre comment renommer une boîte de groupe en addNewMemberGroupBox pour plus de clarté.

Définir le formulaire de démarrage

Tim explique comment changer le formulaire de démarrage dans Program.cs. Il change :

Application.Run(new TournamentViewerForm());

Application.Run(new TournamentViewerForm());

en :

Application.Run(new TournamentDashboardForm());

Application.Run(new TournamentDashboardForm());

Il explique que cette ligne crée l'instance du formulaire et suspend l'application jusqu'à la fermeture du formulaire.

Pourquoi Main est important

Tim compare Windows Forms aux applications console : les deux ont un static void Main. Il précise que lorsque Main est terminé, l'application se ferme. C'est pourquoi le formulaire doit rester ouvert pour maintenir l'application en cours d'exécution.

Il note également que Visual Studio inclut des commentaires XML et il encourage l'ajout de documentation XML pour les méthodes plus tard.

Les prochaines étapes

Tim conclut la leçon en déclarant que l'étape suivante est le câblage des formulaires avec la logique. Il rassure les spectateurs que la partie intimidante arrive, mais elle sera gérable une fois les formulaires construits. Il dit que la logique se sentira comme assembler des pièces LEGO, et la partie difficile disparaîtra progressivement à mesure que nous progressons.