logo Pierre AULAS
Visual Basic 2008 - 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 400 et 500. 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. Pensez à utiliser le menu Format pour faire en sorte que tous vos contrôles soient correctement positionnés.

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.

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 - Image redimensionnable
 BackColor Fond de la fenêtre (blanc)
Image1  Name  imgCalvin
 SizeMode  StretchImage
 Image  cou_vb6_imgCalvin.gif
 Size.Height  242
 Size.Width  192
VScrollBar1  Name  vscBarreVerticale
 LargeChange 10
 Maximum  484
 Minimum  242
 SmallChange 1
 Value  242
HScrollBar1  Name  hscBarreHorizontale
 LargeChange 10
 Maximum  384
 Minimum  192
 SmallChange 1
 Value  192

La propriété BackColor du formulaire permet de changer la couleur de fond du formulaire. Dans le cadre de cet exercice, il s'agit 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" (autrement dit: gris...).

Une fois la propriété SizeMode de l'image définie à StretchImage (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é Image pour afficher l'image Calvin.gif. Les propriétés Height et Width sont ici définies à 242 et 192 afin que l'image ne déborde pas trop du formulaire lorsqu'elle sera déformée.

Les propriétés Minimum et Maximum 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 (et oui, 384 = 2 fois 192).

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. La propriété Value permet de déterminer la position du curseur au lancement de votre formulaire: sa valeur doit se situer entre Minimum et Maximum. On verra dans la suite de l'exercice que cette propriété peut être définie mais également testée (ce qui nous permet de récupérer la valeur correspond à la position du curseur dans la barre de défilement, par exemple  : 280 environ si le curseur se trouve à mi-chemin de la barre de défilement.

Il ne vous reste plus qu'à Verrouiller les contrôles et à vérifier que vous avez bien définie la propriété PositionStart du formulaire à CenterScreen.

Si vous lancez l'exécution de votre projet (touche F5 ou menu Déboguer > Démarrer le débogueur) 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. On va maintenant s'occuper de 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 _Scroll et se déclenche lorsque l'utilisateur déplace 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.

Avant d'aller plus loin, tentez de résoudre le problème par vous même.


Solution  : 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 hscBarreHorizontale_Scroll(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles hscBarreHorizontale.Scroll
  'On étire l'image en largeur en fonction du déplacement horizontal du curseur
  imgCalvin.Width = hscBarreHorizontale.Value
  'On repositionne l'image en fonction de ses nouvelles dimensions
  imgCalvin.Location = New Point((Me.Width / 2) - (imgCalvin.Width / 2), imgCalvin.Location.Y)
End Sub

Si vous avez fait un simple copier/coller, cela ne fonctionnera pas. Avez-vous remarqué qu'il s'agissait du code destiné à la barre de définlement horizontal ?

Tout ça pour vous dire que vous ne devriez pas faire des copier/coller sans essayer auparavant de comprendre en détail ce que vous allez réutiliser.

Prenez par exemple la peine de réfléchir deux secondes à l'expression (imgCalvin.Width / 2) et à ce à quoi elle peut bien servir.

Si vous ne omettez ce bout de code vous obtiendrez une déformation du genre  :

Mauvais étirement

Si vous le mettez, ce sera plutôt du genre  :

Bon étirement

Vous avez compris ?

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.

Pour terminer ? Maintenant, votre image déborde par-dessus vos barres de défilement, n'est-ce pas ?
Il reste à faire passer, via le code, le contrôle image (celui qui contient l'image du Calvin) derrière les autres. Cette opération est à effectuer au démarrage de votre formulaire.

Cogitez un peu et essayez de résoudre le problème par vous même (n'oubliez pas que VB vous donne accès, via l'autocomplétion, à toutes les méthodes et propriétés des objets dont vous écrivez le nom suivi d'un point). Bref  : si vous écrivez imgCalvin., vous devez voir apparaître quelque chose dans le genre de ce qui suit  :

Exemple d'autocomplétion

Et si vous passez toute la liste en revue, vous devriez tomber sur la méthode SendToBack() qui comme son nom l'indique (envoyer derrière), place le contrôle derrière les autres. Et hop, c'est dans la poche.

Bon, pour ceux qui n'auraient pas réussi à aller jusqu'au bout, les sources de cet exercice sont disponibles ici en faisant un clic droit "Enregistrer la cible de ce lien".

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