INF273
DÉVELOPPEMENT D’INTERFACES GRAPHIQUES
2024/2025
COURS 4 CONCEPTION INTERFACES AVEC WINFORM
M. YNSUFU ALI
CONCEPTION INTERFACES AVEC
WINFORM
Prérequis :
Visual Studio 2015, 2017, 2019, 2022
Base de l’algorithme et programmations
CONCEPTION INTERFACES AVEC
WINFORM
Introduction
L'interface graphique avec WinForms en C# est une approche
fondamentale pour développer des applications de bureau
interactives.
WinForms, ou Windows Forms, est une bibliothèque de classes
dans .NET qui permet aux développeurs de créer des interfaces
utilisateur graphiques (GUI) facilement et efficacement.
Conçue pour simplifier la création d'applications Windows, cette
bibliothèque fournit un large éventail de contrôles visuels, tels
que les boutons, les boîtes de texte, les listes déroulantes, et bien
plus encore, permettant de structurer et de dynamiser les
interactions entre l'utilisateur et l'application.
CONCEPTION INTERFACES AVEC
WINFORM
Introduction
Développer une interface avec WinForms en C# est
particulièrement apprécié pour sa simplicité et son efficacité. Le
langage C#, combiné à l’environnement de développement
intégré (IDE) Visual Studio, offre des outils puissants pour
concevoir visuellement les interfaces tout en personnalisant le
comportement des éléments via du code. De plus, WinForms
permet de gérer facilement les événements utilisateurs, comme
les clics et les saisies, facilitant ainsi le développement
d'applications réactives.
CONCEPTION INTERFACES AVEC WINFORM
Rappel des éléments de base de C#
Avant de parler de WINFORM, on va tout d’abord voir quelques
notions de C#
Structure d'un programme C# simple
CONCEPTION INTERFACES AVEC WINFORM
Rappel des éléments de base de C#
Les types de données En C#, chaque variable est déclarée avec un type spécifique
Exemple
CONCEPTION INTERFACES AVEC WINFORM
Rappel des éléments de base de C#
Structures de contrôle
Les conditions (if, else if, else)
Example
CONCEPTION INTERFACES AVEC WINFORM
Rappel des éléments de base de C#
Boucle for Utilisé quand on connaît le nombre d'itérations.
Boucle while
Utilisé quand la condition
de fin est inconnue à
l’avance.
CONCEPTION INTERFACES AVEC WINFORM
Rappel des éléments de base de C#
Boucle do...while S'exécute au moins une fois, puis vérifie la condition.
CONCEPTION INTERFACES AVEC WINFORM
Rappel des éléments de base de C#
Les fonctions et les méthodes
• Les méthodes en C# sont des blocs
de code qui réalisent des actions.
Elles peuvent être définies avec ou
sans paramètres, et avec ou sans
valeur de retour.
CONCEPTION INTERFACES AVEC WINFORM
Rappel des éléments de base de C#
Les fonctions et les méthodes Appel de ces méthodes :
CONCEPTION INTERFACES AVEC WINFORM
Rappel des éléments de base de C#
Les fonctions et les méthodes Appel de ces méthodes :
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C#
Environnement de développement intégré VISUAL STUDIO
Visual Studio est un environnement de développement intégré (IDE) créé par
Microsoft. Il est principalement utilisé pour développer des applications en .NET, en
prenant en charge plusieurs langages de programmation comme C#, C++, F#,
VB.NET, Python, et plus encore.
Il est téléchargeable sur ce lien
https://visualstudio.microsoft.com/downloads/?cid=learn-onpage-download-cta
À l’installation, cocher simplement développement .net Desktop
Outils de Conception Visuelle : Pour les applications WinForms et WPF, il dispose
d’éditeurs visuels où les éléments d'interface (boutons, labels, etc.) peuvent être
ajoutés et arrangés par glisser-déposer, rendant la conception intuitive.
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C#
Création de projet .Net Desktop
Vous allez d’abord créer un
projet d’application C#. Le
type de projet inclut tous les
fichiers de modèle dont vous
aurez besoin au départ.
Ouvrez Visual Studio.
Dans la fenêtre de
démarrage,
sélectionnez Créer un projet.
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C#
Création de projet .Net Desktop
Dans la fenêtre Créer un
projet, sélectionnez le
modèle Application
Windows Forms
(.NET Framework) pour C#.
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C#
Création de projet .Net Desktop
Dans la fenêtre
Configurer votre nouveau
projet, entrez le nom du
projet dans la zone Nom
du projet. Sélectionnez
ensuite Créer.
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C#
Création de projet .Net Desktop
Dans la fenêtre
Configurer votre nouveau
projet, entrez le nom du
projet dans la zone Nom
du projet. Sélectionnez
ensuite Créer.
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C#
Création de projet .Net Desktop
Le projet est
crée et vous
pouvez
commencer
à
développer
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C# Les Outils de Travail en Winform
1. Boîte à outils
(Toolbox) : Elle
contient les
composants
(boutons, labels,
textboxes) que 3
l’on peux glisser-
2
déposer dans le
formulaire.
2. Design de 1
formulaire : C’est
ici que l’on 4
conçois
visuellement ton
application.
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C# Les Outils de Travail en Winform
3. Explorateur de
solutions : C’est
la vue de
l’ensemble du
projet et de ses
fichiers. 3
4. Fenêtre
2
Propriétés : Elle
permet de
modifier les 1
propriétés d’un
composant, 4
comme sa
couleur, son
texte ou sa taille.
CONCEPTION INTERFACES AVEC WINFORM
WINFORM C# Les Outils de Travail en Winform
Pour exécuter le
projet winform,
cliquez sur démarrer
présenté en rouge
ou alors appuyez sur
la touche F5
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
Les composants WinForms permettent d'interagir avec l'utilisateur, de saisir
des données, de les afficher, et bien plus encore.
Quelques composants
Le Label
Le Button
Le TextBox
ComboBox et ListBox
DataGridView
Etc.
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
Le Label
Un Label est un composant qui
permet d'afficher du texte non
modifiable par l'utilisateur. Il est
souvent utilisé pour décrire d'autres
champs ou pour donner des
instructions.
Ajouter un Label : Dans le Designer,
sélectionne Label dans la boîte à
outils et glisse-le sur le formulaire.
Modifier le texte du Label : Dans la
fenêtre Propriétés, modifie la
propriété Text pour changer le
texte affiché.
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
Le Button
Un Button est un composant
cliquable permettant à l'utilisateur
d'exécuter une action.
Ajouter un Button : Sélectionnez
Button dans la Boîte à outils et
placez-le sur le formulaire.
Événement Click : Double-clique
sur le bouton pour créer
automatiquement un gestionnaire
d'événements Click où on pourras
écrire du code à exécuter
lorsqu'on clique sur le bouton.
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
Le Button
Événement Click : Double-clique
sur le bouton pour créer
automatiquement un gestionnaire
d'événements Click où on pourras
écrire du code à exécuter
lorsqu'on clique sur le bouton.
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
Le TextBox
Un TextBox est une zone de saisie où
l'utilisateur peut entrer du texte.
Ajouter un TextBox : Glissez-dépose
un TextBox sur le formulaire.
Récupérer la valeur : Utilisez la
propriété Text pour récupérer ou
définir le texte du TextBox
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
ComboBox
ComboBox : Il permet à l’utilisateur
de choisir une option dans une liste
déroulante.
Ajouter des éléments dans la
propriété Items.
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
ListBox
ListBox : Il affiche une liste
d’éléments visible d’emblée et
permet de faire des sélections
multiples si souhaité.
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
DataGridView
Le DataGridView est utilisé pour
afficher des données en forme
de tableau.
C'est un composant puissant qui
supporte les liaisons de
données, la modification
directe, et bien plus encore.
CONCEPTION INTERFACES AVEC WINFORM
LE COMPOSANTS DE BASE DE WINFORM
Autres Composants
La boite outils regorge tous les
composants qui vous
permettront de de réaliser votre
interface graphique.
CONCEPTION INTERFACES AVEC WINFORM
Gérer les événements et interactions
Chaque composant WinForms possède des événements.
Les événements les plus courants incluent :
Click : Pour un clic sur un bouton ou un autre composant
cliquable.
TextChanged : Déclenché lorsque le texte d’un TextBox change.
SelectedIndexChanged : Pour des composants comme
ComboBox ou ListBox, déclenché quand l’utilisateur sélectionne
un nouvel élément.
Etc.
CONCEPTION INTERFACES AVEC WINFORM
Gérer les événements et interactions
Pour définir l’événement
d’un champs, Sélectionnez
l’élément et aller sur le menu
événement du panel
propriété
Par la suite, choisir le type
d’événement.
Sur l’image, l’événement à
définir c’est celui du click du
bouton Mon Button
Et l’événément est nommé
monClick
CONCEPTION INTERFACES AVEC WINFORM
Gérer les événements et interactions
Et l’événément est nommé
monClick
Ceci génère le code qui
permet d’actionner le click
CONCEPTION INTERFACES AVEC WINFORM
Gestion des formulaires multiples
Créer et ouvrir un formulaire
Pour créer un autre formulaire
dans Visual Studio, fais un clic
droit sur le projet > Ajouter >
Formulaire Windows Forms.
Pour ouvrir ce formulaire
depuis le formulaire principal :
CONCEPTION INTERFACES AVEC WINFORM
Gestion des formulaires multiples
Créer et ouvrir un formulaire
Pour créer un autre formulaire
dans Visual Studio, fais un clic
droit sur le projet > Ajouter >
Formulaire Windows Forms.
Pour ouvrir ce formulaire
depuis le formulaire principal :
CONCEPTION INTERFACES AVEC WINFORM
EXERCICE
Créer un formulaire similaire à celui de la figure
ci-contre
Ajouter l’événement click au bouton CONEXION
Le Login est MOI et le Mot de passe est moi-aussi
Si on entre un login incorrect, le
programme doit afficher « Login
incorrect »
Si on entre un mot de passe incorrect, le
programme doit afficher « mot de passe
incorrect »
Si le login et le mot de passe sont
corrects, le programme doit ouvrir un
nouveau formulaire
