logo Pierre AULAS
Visual Basic - Fenêtre mouvante
 Parcours  |   Réalisations  |   Cours  |   Chroniques  |   Divers
Création de l'interface graphique
Définition des propriétés
Ecrire le code du programme

La fenêtre mouvante

Cet exercice doit vous permettre de maîtriser le contrôle bouton de commande (commandButton).
Vous pouvez voir son fonctionnement en cliquant ici.

Cette image vous montre l'aspect de votre application une fois terminée.
Quatre boutons placés dans les quatre coins du formulaire déclenchent le repositionnement du formulaire dans un des coins de l'écran de l'utilisateur (le coin indiqué respectivement par chaque fléche).
Le bouton Quitter permet de quitter l'application. L'utilisateur peut également quitter l'application en appuyant sur la touche Entrée ou sur la touche Echapp.

Les étapes de programmation

Comme indiqué dans le premier exercice, vous essaierez d'organiser votre travail en trois étapes:
  - création de l'interface utilisateur
  - définition des propriétés
  - écriture du programme
Il ne s'agit pas de vous embêter mais de vous éviter de vous mélanger les pinceaux et donc, à l'arrivée, de perdre du temps.

1. Création de l'interface graphique

Commencez par ouvrir un nouveau projet puis redimensionnez le formulaire jusqu'à ce que ses propriétés height et width aient respectivement les valeurs 400 et 500. Si cela vous pose des difficultés, retournez voir l'exercice 1.

Créer un modèle

Comme tous les formulaires que nous allons utiliser dans les exercices sur les contrôles vont avoir cette taille, nous allons créer un modèle.

Après avoir baptisé votre projet "Exercice00" (ainsi vous ne modifierez que légérement son nom à chaque fois que vous ferez appel à ce type de projet) et son formulaire – soigneusement redimensionné – baptisé frm01 ou frmExercice01, vous cliquez sur le menu Fichier > Exporter le modèle.
Vous n'avez plus ensuite qu'à suivre bien sagement les étapes de l'enregistrement en séléctionnant "Modèle de projet"

puis en indiquant les paramètres que vous désirez

Vous pouvez alors fermer votre projet et séléctionner le menu Fichier > Nouveau projet. Dans la fenêtre qui s'ouvre, vous devriez voir apparaître votre modèle comme dans la fenêtre ci-dessous:

Vous venez de réaliser votre premier modèle.

Créer l'interface pour l'exercice

Cet exercice comprend 5 contrôles boutons de commande.
Plutôt que de les poser un à un, appuyez sur la touche Ctrl lors de la séléction dans la boîte à outils. Le contrôle bouton de commande reste séléctionné jusqu'à ce que vous en séléctionnez un autre dans la barre à outil.

En séléctionnant en même temps vos quatre boutons d'angle et en utilisant les options fournies par le menu Format > Uniformiser la taille ou Format > Aligner, etc., uniformisez leur taille et placez-les dans les angles, puis centrez le bouton Quitter.
Vous remarquerez au passage que lorsque vous faîtes un Uniformiser la taille > Hauteur et largeur, l'uniformisation se fait sur le modèle du contrôle avec des poignées blanches (les autres ont des poignées noires).
Ça ne vous paraît pas clair ? Jetez un coup d'œil au dessin ci-dessous  :

À cette étape de votre projet votre formulaire devrait ressembler à cela:

Vous avez remarqué qu'il a déjà un nom et une petite icône ? Prenez l'habitude de donner un titre à votre formulaire avant même de commencer. Après vous allez vous lancer dans votre travail et vous allez oublier (ne niez pas).

2. Définition des propriétés

Commencez par définir si ce n'est pas déjà fait la propriété Name de votre formulaire en frm01 (si vous avez correctement créé votre modèle cela ne devrait pas être nécessaire).

Vous devez ensuite définir les propriétés des 5 contrôles présents sur votre formulaire comme indiqué dans le tableau qui suit:

Pour les petits fléches, vous pouvez télécharger celles-ci  :

Objet  Propriété  Valeur
Form1  Name  frmFenetreMouvante
 Text  Exercice - Fenêtre mouvante
 Icon  À vous de vous trouver une petite icone (en .ico)
 AcceptButton  cmdQuitter (enfin, dès que vous aurez rebaptisé le bouton Quitter cmdQuitter bien sûr)
 CancelButton  cmdQuitter
 StartPosition  CenterScreen
Button5  Name  cmdQuitter
 Text  &Quitter
Button1  Name  cmdHautGauche
 Text  (vide)
 BackgroundImage  cou_vb_fleHautGauche.gif
 BackgroundImageLayout  Stretch
Button2  Name  cmdHautDroite
 Text  (vide)
 BackgroundImage  cou_vb_fleDroitGauche.gif
 BackgroundImageLayout  Stretch
Button3  Name  cmdBasDroite
 Text  (vide)
 BackgroundImage  cou_vb_fleBasDroite.gif
 BackgroundImageLayout  Stretch
Button4  Name  cmdBasGauche
 Text  (vide)
 BackgroundImage  cou_vb_fleBasGauche.gif
 BackgroundImageLayout  Stretch

Chaque formulaire peut contenir un bouton qui se déclenche par défaut (AcceptButton ou CancelButton). Dans notre cas, il s'agit du bouton cmdQuitter. Il réagit ainsi à la touche Entrée de l'utilisateur. Pensez à faire le test lorsque votre application sera finie.

Pour faire en sorte que votre formulaire apparaisse de manière centré sur l'écran de votre utilisateur, n'oubliez pas de définir la propriété du formulaire StartPosition à CenterScreen

L'entrée (vide) pour les propriétés Text des boutons d'angle signifie que tout texte doit être effacé des boutons.

La définition de la propriété BackgroundImage des boutons permet de définir une image comme fond.
Pour que celle-ci soit redimensionnée à la taille du bouton, il faut définir la propriété Le contenu de cette image est défini par la propriété BackgroundImageLayout à Stretch.

Il ne vous reste plus qu'à faire un Format > Verrouiller les contrôles.

Si vous lancez l'exécution de votre projet (touche F5 ou menu Exécution > Exécuter) maintenant, votre formulaire, bien centré au milieu de votre écran, devrait ressembler à cela:

Pour l'instant il ne réagit pas aux sollications de l'utilisateur. Vous allez rajouter le code qui convient.

3. Ecrire le code du programme

Pour accéder à la fenêtre de code: double-cliquez sur le bouton cmdQuitter.

Commed'habitude, VB a écrit pour vous le début et la fin de la procédure événementielle qui se déclenche lorsque l'utilisateur clique sur le bouton cmdQuitter.

Il ne vous reste plus qu'à écrire au sein de cette procédure le seul mot End qui déclenchera la fermeture de votre formulaire  :

Private Sub cmdQuitter_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdQuitter.Click
  End
End Sub

Il faut maintenant réfléchir un peu à ce que vont faire vos boutons d'angle.

Le but est qu'en appuyant sur chacun d'eux votre formulaire soit repositionné dans chacun des angles de votre écran.
Pour l'angle en haut à gauche c'est facile: il suffit de définir les propriétés X et Y de Location à 0.

Vous pouvez déjà écrire le code pour ce bouton:

Private Sub cmdHautGauche_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdHautGauche.Click
  Me.Location = New Point(0, 0)
End Sub

Quelque chose me dit que vous trouvez cette syntaxe un tantinet complexe. C'est parce que VB2008 adopte une syntaxe objet stricte. C'est-à-dire que pour lui tout est objet  : votre formulaire, un contrôle, un point, tout. Du coup pour chaque chose il faut créer un objet, comme par exemple, lorsqu'on veut affecter les coordonnées d'un point.

On commence par créer un objet Point (de coordonnées 0,0 dans notre exemple)  :

New Point(0, 0)

Et ensuite on affecte son contenu à la propriété Location du formulaire (qui ne fonctionne qu'avec des points) comme indiqué ci-dessus.

Pour calculer la position dans les autres angles, c'est plus compliqué puisqu'il faut connaître la largeur et la hauteur de l'écran. Or celle-ci est variable selon l'écran dont dispose l'utilisateur.
Pour résoudre ce problème, VB a créé un objet appelé Screen qui contient une dizaine de propriétés et méthodes renseignant sur la taille de l'écran et sa définition. Nous utiliserons les propriétés Width (largeur) et Height (hauteur) que l'on peut obtenir avec la syntaxe à point suivante:

My.Computer.Screen.WorkingArea.Width
My.Computer.Screen.WorkingArea.Height

Là encore la syntaxe vous paraît complexe ?
C'est parce que VB2008 aime emboîter les objets les uns dans les autres, vous obligeant ainsi à une syntaxe assez peu économe en caractères (heureusement vous avez l'autocomplétion qui vous fait une partie du travail).

Autrement dit si on traduit les lignes qui précédent  :

Plan du site  |  Mentions légales  |  Crédits  |  Aide