logo Pierre AULAS
Visual Basic 6 - L'image redimensionnable
 Parcours  |   Réalisations  |   Cours  |   Chroniques  |   Divers
Création de l'interface graphique
Définition des propriétés
Écrire le code du programme

L'image redimensionnable

Cet exercice doit vous permettre de maîtriser les contrôles barre de défilement horizontal et vertical (vscScrollbar et hscScrollbar).
Vous pouvez voir son fonctionnement en cliquant ici.

Cette image vous montre l'aspect de votre application une fois terminée.
Deux barres de défilement, à droite et en dessous d'une image, permettent d'étirer celle-ci en largeur et en hauteur au fur et à mesure qu'on déplace les curseurs vers la droite et vers le bas.

Les étapes de programmation

Comme toujours, vous organiserez votre travail en trois étapes  :

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 5000 et 7000. Si cela vous pose des difficultés, retournez voir l'exercice 1.

Cet exercice comprend deux barres de défilement qui doivent épouser la bordure basse et droite de votre formulaire ainsi qu'une image centrée au milieu de votre formulaire.

A cette étape de votre projet votre formulaire doit ressembler à cela (sauf qu'on ne voit pas encore le contenu de l'image):

Haut de page

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 3 contrôles présents sur votre formulaire comme indiqué dans le tableau qui suit:

Objet  Propriété  Valeur
Form1  Name  frm01
 Caption  Exercice - Barres de défilement
 BackColor Fond de la fenêtre (blanc)
Image1  Name  imgCalvin
 Stretch  True
 Picture  cou_vb6_imgCalvin.gif
 Height  2200
 Width  1600
 Left  2700
 Top  1400
VScroll1  Name  vscBarreVerticale
 LargeChange 100
 Max  4400
 Min  2200
 SmallChange 50
 Value  2200
HScroll1  Name  hscBarreHorizontale
 LargeChange 100
 Max  3200
 Min  1600
 SmallChange 50
 Value  1600

La propriété BackColor du formulaire permet de changer la couleur de fond du formulaire. Dans le cadre de cet exercice à visée "ludique", il s'agissait de fournir un formulaire ayant une couleur de fond similaire à celle de l'image.
N'oubliez pas dans le cadre d'une application bureautique de faire "sérieux".

Une fois la propriété Stretch de l'image définie à True (cette propriété permet de contraindre l'image à s'adapter à la zone d'image définie sur le formulaire), on définit la propriété Picture pour afficher l'image Calvin.gif. Les propriétés Height et Width sont ici définies à 2200 et 1600 afin que l'image ne déborde pas du formulaire lorsqu'elle sera déformée. Les propriétés Left et Top sont calculées pour que l'image soit parfaitement centrée dans le formulaire (left = la moitié de la largeur du formulaire - la moitié de la largeur de la zone d'image soit (7000/2) - (1600/2) = 2700; id. pour top).

Les propriétés Min et Max d'une barre de défilement (qu'elle soit verticale ou horizontale) permettent de définir l'étendue des valeurs qui pourront être retournées lorsque l'utilisateur fera varier le curseur. Ici elles sont définies de telle manière que l'image puisse être agrandie à deux fois sa taille en hauteur et en largeur.

Quant aux propriétés LargeChange et SmallChange, elles permettent de spécifier la valeur selon laquelle la barre de défilement change de position lorsqu'on clique sur la hampe. La propriété Value permet de déterminer la position du curseur au lancement de votre formulaire: sa valeur doit se situer entre Min et Max.

Il ne vous reste plus qu'à Verrouiller les contrôles et à faire un clic-droit sur la fenêtre Présentation des feuilles (menu Affichage > Fenêtre présentation des feuilles) et choisir la commande Position de départ > Centrer dans l'écran.

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.

Haut de page

3. Ecrire le code du programme

Pour accéder à la fenêtre de code: double-cliquez sur la barre de défilement verticale vscBarreVerticale.

Comme d'habitude, VB écrit pour vous le début et la fin de la procédure événementielle qui se déclenche lorsque l'utilisateur manipule la barre de défilement.

Cet événement s'appelle _Change et se déclenche lorsque l'utilisateur relâche le curseur de la barre de défilement.
Comme nous avons défini les propriétés de nos contrôles de telle manière que la propriété Value renvoyée par la barre de défilement soit égale à la propriété Width ou Height de l'image, le contenu de la procédure n'est pas trop compliqué à écrire.
Dans le cas de la barre verticale, il suffit d'affecter à la propriété Height le contenu de la propriété Value de la barre de défilement et de repositionner l'image pour qu'elle reste centrée sur le formulaire.

Private Sub vscBarreVerticale_Change()
  'On change la hauteur et la position verticale de l'image
  '(pour que celle-ci reste centrée)

  imgCalvin.Height = vscBarreVerticale.Value
  imgCalvin.Top = (Me.Height / 2) - (imgCalvin.Height / 2)
End Sub

Il ne reste plus qu'à faire la même chose pour la barre de défilement horizontale.

Mais en l'état, vos barres de défilement ne réagissent que lorsque l'utilisateur relâche le curseur.
Or l'utilisateur s'attend à ce que l'image soit redimensionnée en permanence tant qu'il appuie sur le curseur. Cela suppose d'utiliser un autre événement: l'événement _Scroll.

Créez à l'aide des menus déroulant situés en haut de votre fenêtre de code une procédure événementielle vscBarreVerticale_Scroll.
Vous pourriez y reécrire le code de la procédure vscBarreVerticale_Change mais cela compliquerait la maintenance de votre application puisqu'en cas de modification, vous seriez obligé de reporter celle-ci en deux endroits différents. Le plus simple est donc d'appeler la procédure vscBarreVerticale_Change à partir de la procédure vscBarreVerticale_Scroll.
Pour cela il suffit d'utiliser le mot Call suivi du nom de la procédure de la manière suivante:

Private Sub vscBarreVerticale_Scroll()
  Call vscBarreVerticale_Change
End Sub

Il ne vous reste plus qu'à faire la même chose pour la barre de défilement horizontale pour terminer la réalisation de votre application.

Les sources de cet exercice sont disponibles ici en faisant un clic droit "Enregistre la cible de ce lien".

Haut de page
Plan du site  |  Mentions légales  |  Crédits  |  Aide