Changer la couleur de sa progressbar et créer sa progressbar!

Bonjour à tous  
Aujourd'hui je vais vous faire un tutoriel sur:

 1. Modifier la couleur d'une progressbar
 2.Créer sa progressbar personnalisée 


Et bien c'est parti pour la partie 1

1. Modifier la couleur d'une progressbar

Petite précision: le rendu de cette première partie n'est pas très esthétique (du moins à mon gout :p) 


Pour commencer (si ce n'est pas déjà fait) créez un nouveau projet:



Puis allez dans les paramètres du projet et décochez la case suivante:



Maintenant ajoutez une progressbar et un bouton sur votre form:



Ajoutez aussi un Timer (pas besoin de screen )

Pour les événements, je vais mettre un minimum de screen

Dans l'événement "Click" du bouton, ajoutez l'action "Démarrer un minuteur" qui se trouve dans la catégorie "Minuteur". Dans le minuteur à démarrer, vous prenez "Me.Timer1" (évidemment ).

Maintenant, créez une nouvelle variable se nommant.... ba comme vous voulez

Moi je l'appellerai "MaVar" parce-que sa fait joli  

Puis dans l'évenement "Tick" du Timer1, et bien voila un beau code VB avec pleins de commentaires :

Code:

MaVar = Me.ProgressBar1.Value 'Notre variable est égale à la propriété value de la progressbar1
 Me.ProgressBar1.Value = MaVar + 5 'La valeur de la progressbar1 est égale à la valeur de MaVar + 5
 
If Me.ProgressBar1.Value = "50" Then 'Si la valeur de la progressbar est égale à 50 alors...
 Me.ProgressBar1.ForeColor = Color.Red '... la couleur de notre progressbar est rouge
Else 'Sinon...
'On ne fait rien
EndIf 'Ne pas oublier le EndIf sinon il y aura une erreur!

If Me.ProgressBar1.Value = "100" Then 'Si la valeur de la progressbar est égale à 100 (donc au maximum) alors...
 Me.Timer1.Stop 'On arrête le timer sinon il y aura une erreur (car la valeur d'une progressbar ne peut pas être 105)
Else 'Sinon...'
'On ne fait rien
EndIf 'Ne pas oublier le EndIf sinon il y aura une erreur!

Je ne vais pas expliquer vu qu'il y a les commentaires dans le code  

Voila le résultat (fais avec Visual Basic car j'ai eu un problème avec SZ en cours de route  )

Avant 50% :



Après 50% :



Bon voila; comme je l'ai dit, ce n'est pas très joli tout sa hein^^
Vous vous voulez faire une progressbar à la manière launcheur World Of Warcraft hein x)
Et bien c'est le sujet de la 2ème partie!

2. Créer sa progressbar personnalisée

Pour cette 2ème partie vous devez posséder Visual Studio (peu importe la version). Évidemment version Visual Basic^^ et un logiciel de dessin (optionnel mais recommandé (paint fera l'affaire )), j'utiliserai Photoshop

On va commencer par notre logiciel de dessin  

 1. Le dessin!


Ouvrez votre logiciel et créez une image de la taille de votre contrôle utilisateur.
Dans votre image, mettez ce que vous voulez
Moi j'ai fait ça:




Et voila c'est tout pour le logiciel de dessin

 2. Microsoft Visual Basic 2010 Express (ou non)

Créez un nouveau projet (je vais pas faire de screenshot, vous êtes assez grand xD )
Dans ce projet, nous aurons besoin de: 

-une windows form
-un contrôle utilisateur (User Control)

Redimensionnez votre contrôle utilisateur de façon à ce que sa ressemble à une progressbar normale
Modifiez sa couleur de fond, puis ajoutez une PictureBox que vous remplirez avec la couleur de votre choix ou alors vous mettrez l'image qu'on viens de faire dans la partie 1 (Le dessin).
Dans ce cas là, il faut mettre la propriété "BackgroundImageLayout" de la picturebox sur "None".

Allez c'est parti! La partie code! Je tiens à préciser que je n'expliquerais pas le code car je ne le comprends pas spécialement et personne sur les sites où je l'ai trouvé ne l'explique^^
Let's go!


Double-cliquez sur votre Contrôle utilisateur (pour voir le code) puis déclarez les variables init (integer = 0); max (integer = 100);

Code:

Dim init As Integer = 0
Dim max As Integer = 100

(Ce code doit être inséré en dessous du "Public Class")

Puis sautez une ligne et tapez:

Code:

Sub setinit()
   PictureBox1.Width = (Me.Width / max) * init

End Sub

Sautez encore une ligne et tapez:

Code:

Property value As Integer
   Get

Appuyez sur la touche "Entrée" et normalement ça vous affiche:

Code:

Property value As Integer
   Get

   End Get
   Set (ByVal value As Integer)

   End Set

End Property

Entre le "Get" et le "End Get", ajoutez:

Code:

Return init

Et entre le "Set (ByVal value As Integer)" et le "End Set", ajoutez:

Code:

init = value
setinit()

Et voila
Non je blague c'est pas fini  (mais on approche de la fin!)

Allez on continue!

Sous le End Property, vous ajoutez:

Code:

Property maximum As Integer
   Get

Et en appuyant sur "Entrée", normalement, sa vous écrit automatiquement dans le code:

Code:

Property maximum As Integer
   Get

   End Get
   Set (ByVal maximum As Integer)

   End Set

End Property

 
Entre le "Get" et le "End Get", vous vous en doutez je suppose, vous entrez:

Code:

Return max

Et entre le "Set (ByVal maximum As Integer)" et le "End Set", vous marquez:

Code:

max = value

Puis pour terminer dans le code, vous supprimez le Private Sub accompagné de son End Sub (le "myprogressbar_Load" si vous préférez )

Et pour vérifier si vous avez tout bien marqué  :

Code:

Public Class UserControl1
    Dim init As Integer = 0
    Dim max As Integer = 100
    Sub setinit()
        PictureBox1.Width = (Me.Width / max) * init

    End Sub
    Property value As Integer
        Get
            Return init
        End Get
        Set(ByVal value As Integer)
            init = value
            setinit()
        End Set
    End Property
    Property maximum As Integer
        Get
            Return max
        End Get
        Set(ByVal value As Integer)
            max = value
        End Set
    End Property
End Class

Le dernier petit bout de code:

Créez un événement "Resize" pour votre Contrôle utilisateur dans lequel vous entrerez:

Code:

setinit

Et voila! Le code est fini (enfin !).
Maintenant générez votre projet.

Maintenant retournez sur votre form et regardez dans la boite à outils.... MAGIE! Un nouvel outil est apparu: votre progressbar. Moi elle s'appelle UserControl1 vu que je n'ai pas changé le nom du contrôle utilisateur quand je l'ai créé...
Si vous ne la trouvez pas, et bien ne désespérez pas! Elle se trouve dans la catégorie "Composants WindowsApplication1" (WindowsApplication1 est le nom de mon projet!).

Maintenant sur votre form, ajoutez votre progressbar personnalisée et un bouton. Mettez aussi un Timer. Quand on clique sur le bouton:

Code:

Timer1.Start

Et dans l'événement Tick de votre Timer:

Code:

Me.maprogressbar1.value += 1


Comme sa votre progressbar sera incrémentée de 1 toutes les 100ms (vous pouvez modifier le nombre de ms dans la propriété Interval de votre Timer.

Et là vous allez me dire: "On a fait tout ça pour une progressbar utilisable uniquement sur Visual Basic, et dans ce projet???" Et bien oui! Alors où est l’intérêt? Et bien vous pouvez faire ça à la fin de votre projet sur SZ. Quand vous avez tout fini, vous exportez votre projet sur Visual Studio et vous remplacez toutes les progressbar par une progressbar personnalisée  

Et voila, ce tuto est fini!
J'éspère qu'il vous aura plu
Dites-moi ce que vous en pensez (en sachant que c'est mon premier tuto que j'écrit^^)...

Bonne journée avec votre progressbar

P.S: je ferai peut-être un tuto pour pouvoir mettre votre progressbar en .dll mais ce sera plus tard

Excellent tutoriel ! Merci pour ton temps

Merci  Effectivement, j'ai mis beaucoup de temps pour faire ce tutoriel^^

En tout cas merci il fonctionne nickel et très clair et facile à comprendre pour un débutant

Okay^^

J'ai essayé de faire le plus compréhensible possible  Je sais que certains n'ont aucunes notions en VB donc par exemple pour la déclaration des variables j'ai précisé le code^^

Désolé pour le double post :/

Après avoir compris le code (tout seul  ), je me suis amusé à rajouter des choses dans le code du contrôle utilisateur.
Par exemple, pour modifier la couleur de la progressbar (de la PictureBox de notre contrôle utilisateur) vous devez déclarer une autre variable (à déclarer en dessous de la variable max):

Code:

Dim couleur As Color


puis vous ajoutez en dessous du dernier "End Sub"

Code:

Sub setcolor
  PictureBox1.BackColor = couleur

et puis vous rajoutez en dessous du dernier End Property

Code:

Property BarColor As Color
  Get
    Return couleur
  End Get
  Set (ByVal value As Color)
    couleur = value
    setcolor()
  End Set
End Property

Maintenant nous avons ajouté la propriété "BarColor" à notre progressbar personnalisée.
Dans le code du Timer dans la WindowsForm1, on peut ajouter le code:

Code:

Me.ProgressBarPerso1.BarColor = Color.Red 'La couleur rouge n'est qu'un exemple!

ATTENTION!

Remplacez "ProgressBarPerso1" par le nom de votre progressbar personnalisée (qui est le nom du contrôle utilisateur).
Par exemple si votre progressbar s'appelle "progressbarp" et bien mettez:

Code:

Me.progressbarp1.BarColor = Color.Red

Voila  
Bonne journée!

re,

Perso, j'utilise des contrôles bien plus simplement, dans la dll VistaControle ou autre.
La progressBar est la même que dans Win7 mais elle à 3 couleurs : Verte, jaune, rouge.

Cordialement ,
Le réparateur de PC

Je suis d'accord mais ma méthode à presque aucune limite

re,

"Ma" méthode est si simple mais non personnalisable .....

La tienne, bien plus complexe, mais tu as eu le plaisir de la concevoir tout en ou en partie.
De plus, elle est complètement personnalisable au niveau choix des couleurs (ForeColor a une grande palette à la Picasso).Mais son style à la win 98 ne plait pas ...

Sinon, pour conclure, franchement bon boulot ! :)Bonne vac et bonne continuation !

PS: Je n'ai franchement pas le temps de faire des tuto comme ça! (je n'ai que 2 semaines de vac dont 1 vraiment pour moi cet été même si c'est mon choix ....)

EDIT: SZMAN, si tu recrée le même projet en dll ... tu pourra l'intégrer dans SZ
Dans ton projet (dll) ajoute simplement un UserControl ! et supprime la Classe1 qui ne sers à rien !

Cordialement ,
Le réparateur de PC

Okay merci Lereparateurdepc, je vais tester de la mettre en DLL^^

EDIT: petit problème, je ne peux plus déclarer de variable de type "Color"... Une idée?

re,

il faut importer System.drawing :

Code:

Imports System.Drawing
Public Class UserControl1
    Dim tata As color
End Class

Cordialement ,
Le réparateur de PC

Effectivement, merci^^
Sinon, j'ai créé mon projet (qui est une bibliothèque de classe donc un dll normalement si je me trompe pas) et quand je génère mon projet, il n'y a rien dans bin\debug ou bin\realease

Bonjour

Ou sinon tu as la DLL Qios.DevSuite.Components qui se trouve à la racine du projet ArionNovaGX .  

En tout cas trés bon tuto !  

Merci Galxy
Je vais voir cette fameuse DLL^^

EDIT: je ne sais pas comment la modifier :/

re,

Il faut générer et non debugger .....
C'est quoi l'erreur?

Cordialement ,
Le réparateur de PC

Je vais essayer mais pas tout de suite car je pars en vacances  Donc je vais pas pouvoir vous répondre jusqu'au 16 aout.

Re

ok, bonne vac

Cordialement,
le réparateur de pc

Bonsoir

Tu vas dans ColorScheme pour la couleur de progression et aprés tu as apparence pour choisir (Solid,Gradient ou Metalic)
et bien sur tu choisi 2 BackColor (Seulement pour Gradient et Metalic)

Voila (C'est vrai que je m'explique mal désolé,en espérant que tu as bien compris)