Effet de défilement picture box vb.net

Version imprimable

01/06/2013, 14h40
Logiinx

Effet de défilement picture box vb.net

Bonjour, je cherche comment faire un effet de défilement (comme sur un diapo ) avec deux images, de gauche à droite sur un picturebox de vb.net !
Je m'explique, j'ai deux image, je créer un bouton "précédant" et un autre "suivant" et je veux que quand je clique sur suivant, cela fasse un effet de gauche à droite en affichant l'image suivante ! et l'inverse pour précédant (l'image précédante s'affiche avec un effet de droite a gauche) !
J'espère être clair et que vous pourrez m'aider !
Merci ! :)
01/06/2013, 18h44
Pol63

sur un panel tu poses 2 picturebox
il faut gérer pour qu'un picturebox prenne tout le panel, tu mets l'image actuelle
sur le clic de suivant, tu places les 2ème picturebox à droite du premier (donc sur la partie non visible du panel) et tu le remplis avec l'image qui doit venir s'afficher, et avec un timer tu fais varier le .left des 2
à la fin de l'animation, dans mettre le 2ème panel dans la variable de panelcurrent, et c'est donc l'autre qui sera utilisé pour la prochaine image à afficher

c'est pas très détaillé, mais c'est une idée qui doit fonctionner
01/06/2013, 20h55
Logiinx

J'ai vraiment rien compris, on va dire que je m'y connait en vb mais sur une echelle de 1 à 10 je dois être à 4.5 ^^
01/06/2013, 21h20
Pol63

1ère chose, tu poses 2 picturebox dans un panel, avec 2 images différentes
après tu poses un bouton
après tu poses un timer à 30ms et dans le tick tu fais pct1 et pct2.left -= 10
dans le bouton.click tu fais timer1.Start
tu devrais voir les 2 picturebox se déplacer

quand ca marche à l'exécution tu passes à la suite :

après il faut que le pct1 prenne toute la taille du panel, et que le pct 2 ai la même taille mais en left il faut qu'il ait pct1.left + pct1.width, il sera donc à droite et du coup non visible (si lepanel.width = 400 et que le pct2.left = 500 forcément on ne le vois pas)

à tester aussi ; là on s'approche de l'effet final, reste une chose, que ca ne soit pas figé dans le code et que ca gère avant et après (pas besoin d'un 3ème picturebox pour l'autre sens)

la dernière étape c'est de mettre des variables as picturebox dans le programme pour savoir qui est le picturebox qui est au milieu (oui oui 2 picturebox dont un au milieu :aie:), pour savoir dans quel picturebox mettre l'image qu'on veut voir arriver
en fait si tu as un picturebox qui est à .left = -500 et l'autre à .left = 0 et qu'on clic sur voir celle d'après, il faut mettre le picturebox qui à .left = -500 à .left = 500 (enfin tout en dynamique avec les .width et la gestion du sizechanged sur le panel) avant de faire déplacer les 2 vers la gauche (ca aussi c'est dynamique car ca peut etre à droite)

si tu n'as pas encore compris la fin je l'expliciterais aussi

et l'étape après la dernière étape c'est pour faire joli c'est de modifier l'incrément/décrément dans le tick pour faire un effet d'accélération au début et de décéleration à la fin, voir même un effet de rebondissement amorti ^^

ou sinon tu peux tester wpf, ca se fait plus simplement bien que ca prenne plus de temps à assimiler ^^

bonjour Logiinx

Bah tu peux utiliser 2 methodes:
-celle du listbox qui permet d'aller ver n'importe quelle image

-des boutons suiv & preced...Enquinante car s'il y a beaucoup d'image ,il faut rajouter un 3eme bouton goto X...

code methode du listbox:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
''ajouter :
' -un picturepox 
' -un bouton (btnLoadImages)
' -un control OpenFileDialog
' -1 ListBox1 
' => permet de storer la liste des images charges
' => de naviguer
Imports System.IO
 
Public Class Form1
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me.PictureBox1.SizeMode = PictureBoxSizeMode.Zoom
        Me.PictureBox1.BorderStyle = FormBorderStyle.FixedSingle
        Me.ListBox1.BorderStyle = FormBorderStyle.FixedSingle
    End Sub
    Private Sub btnLoadImages_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLoadImages.Click
        OpenFileDialog1.Filter = "Image(*.bmp)|*.bmp|(*.jpg)|*.jpg"
        OpenFileDialog1.InitialDirectory = Directory.GetCurrentDirectory
        OpenFileDialog1.Multiselect = True
        Dim MyFilenames() As String = New String() {}
        If OpenFileDialog1.ShowDialog = DialogResult.OK Then
            MyFilenames = OpenFileDialog1.FileNames
            If MyFilenames.Length = 0 Then Return
            For Each f As String In MyFilenames
                Me.ListBox1.Items.Add(f)
 
            Next
            Me.ListBox1.SelectedIndex = 0
        End If
    End Sub
 
    Private Sub ListBox1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ListBox1.SelectedIndexChanged
        Dim strFile As String = CType(Me.ListBox1.SelectedItem, String)
        Me.PictureBox1.Image = Image.FromFile(strFile)
    End Sub
 
 
End Class

code methode des 2 boutons:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
'ajouter :
' -un picturepox 
' -un bouton (btnLoadImages)
' -un control OpenFileDialog
' -2 bouton pour navigation (btnNext & btnPrevious)
Imports System.IO
Public Class Form2
    'permet de storer la liste des images charges
    Private picList As List(Of String) = New List(Of String)
    Private Sub Form2_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me.PictureBox1.SizeMode = PictureBoxSizeMode.Zoom
        Me.PictureBox1.BorderStyle = FormBorderStyle.FixedSingle
    End Sub
 
    Private Sub btnLoadImages_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLoadImages.Click
        OpenFileDialog1.Filter = "Image(*.bmp)|*.bmp|(*.jpg)|*.jpg"
        OpenFileDialog1.InitialDirectory = Directory.GetCurrentDirectory
        OpenFileDialog1.Multiselect = True
        Dim MyFilenames() As String = New String() {}
        If OpenFileDialog1.ShowDialog = DialogResult.OK Then
            MyFilenames = OpenFileDialog1.FileNames
            If MyFilenames.Length = 0 Then Return
            For Each f As String In MyFilenames
                picList.Add(f)
            Next
        End If
        Dim strFile As String = picList(num)
        PictureBox1.Image = Image.FromFile(strFile)
    End Sub
 
    Private num As Integer = 0
    Private Sub btnNext_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnNext.Click
        num += 1
        If num > picList.Count - 1 Then
            num = 0
 
        End If
        Dim strFile As String = picList(num)
        PictureBox1.Image = Image.FromFile(strFile)
    End Sub
 
    Private Sub btnPrevious_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnPrevious.Click
        num -= 1
        If num < 0 Then
            num = picList.Count - 1
        End If
        Dim strFile As String = picList(num)
        PictureBox1.Image = Image.FromFile(strFile)
    End Sub
End Class

bon code...........

1 pièce(s) jointe(s)

bonjour, vous avez une méthode simple pour faire défiler une image.

voici les codes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Public Class Form1
    Dim ListPath As New List(Of String)
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        If (OpenFileDialog1.ShowDialog = Windows.Forms.DialogResult.OK) Then
            ListPath.AddRange(OpenFileDialog1.FileNames)
            ListBox1.Items.AddRange(OpenFileDialog1.SafeFileNames)
        End If
    End Sub
    Private Sub ListBox1_SelectedIndexChanged(sender As System.Object, e As System.EventArgs) Handles ListBox1.SelectedIndexChanged
        PictureBox1.ImageLocation = ListPath(ListBox1.SelectedIndex)
    End Sub
 
    Private Sub Button2_Click(sender As System.Object, e As System.EventArgs) Handles Button2.Click
        End
    End Sub
 
    Private Sub Button3_Click(sender As System.Object, e As System.EventArgs) Handles Button3.Click
        ListBox1.SelectedIndex += 1
    End Sub
 
    Private Sub Button4_Click(sender As System.Object, e As System.EventArgs) Handles Button4.Click
        ListBox1.SelectedIndex -= 1
    End Sub
End Class

voici en image:

02/06/2013, 14h32
franticfranz

Bonjour,

Je sais que c'est faux et que c'est à coté de la question, mais il faut que je le dise quand même, tant pis pour le http://www.developpez.net/forums/ima.../vote2left.gif http://www.developpez.net/forums/ima...vote-right.gif : ;)

Créez un bitmap supplémentaire sur lequel vous construisez la transition entre votre image 1 et votre image 2, puis vous associez votre bitmap à votre picturebox. L'inconvénient c'est que c'est que c'est (à peine) plus lourd à gérer (quoique...), l'avantage c'est que vous pourrez varier l'effet de transition et envisager des transitions plus élaborées.

Un timer pourra très bien gérer l'animation.
02/06/2013, 19h56
Pol63

je rappelle qu'il veut un défilement de gauche à droite, pas juste remplir un picturebox selon la sélection d'une listbox
03/06/2013, 21h59
franticfranz

1 pièce(s) jointe(s)

Bonsoir,

J'ai testé la solution que j'ai proposé. En cliquant sur deux images à l'écran, je peux les enchainer avec un effet : soit l'image glisse de droite à gauche, soit il y a un effet de fondu enchaîné.

http://i.imgur.com/MDivsia.gif
(désolé pour le "unregistered version", j'ai utilisé la version démonstration d'un convertisseur video pour créer l'image GIF)

Au final, ça ne répond qu'en partie à la problématique :

- la 1ère image est fixe et ne défile pas, pendant que la deuxième glisse ;
- l'effet de fondu n'était pas demandé ;
- l'effet de superposition n'est prévu que dans un sens.

Mais le code me paraît suffisamment court pour être très facilement transposable et adaptable. Peut-être que ça va intéresser certains.

Il est tout à fait envisageable de faire des effets de transition plus élaborés : 3D, rotation, damier, etc...

Le projet est joint à ce message.
03/06/2013, 22h02
Pol63

Citation:

Envoyé par franticfranz

...

ca doit être beaucoup plus gourmand en ressources que de bouger 2 picturebox
il suffit d'ailleurs de regarder la ram prise par l'appli qui doit grimper en flèche après quelques glissements sans les .dispose ...
03/06/2013, 22h09
franticfranz

Citation:

Envoyé par Pol63

ca doit être beaucoup plus gourmand en ressources que de bouger 2 picturebox
il suffit d'ailleurs de regarder la ram prise par l'appli qui doit grimper en flèche après quelques glissements sans les .dispose ...

Oui, coté gestion de la mémoire tout est à faire. D'ailleurs j'alloue un nouveau bitmap à chaque rendu, je doute que ça soit nécessaire. Mais je me suis contenté de jeter le principe sans aller plus loin, sachant que je m'éloigne de la problématique avec cette solution.

Les 2 picturebox qui se déplacent sont beaucoup moins gourmand en ressources, pour un code au moins aussi simple (un timer et deux picturebox).

EDIT : Test à l'appui, la consommation de mémoire n'est pas si phénoménale, la transition se faisant à l'échelle de la picturebox et pas de l'image. J'ai néanmoins rajouté 2 dispose() qui limitent le grignotage de la mémoire (fichier mis à jour dans le post précédent).