[TUTO de A à Z] Personnaliser vos boutons krypton

Softwarezatoriens, softwarzatoriennes, bonjour ! 

Connaissez vous l'outil krypton? mais si... les boutons tout bleus par défaut:



Je vais vous apprendre aujourd'hui à les personnaliser totalement.

1°) Démarrez SZ (dur hein?)
2°) Créer une nouvelle solution avec une fenêtre (normal ou krypton, au choix)
3°) Ajouter un boutons (comme sur la capture d'écran ci dessus)

Nous pouvons commencer. Le problème pour les outils krypton, sont leurs propriétés complexes
et hasardeuse dans lesquelles les débutants n'aiment pas s'aventurer  .
Mais ne vous inquiétez pas, je vais vous guider tout le temps (par contre, je ne pourrais pas guider votre
souris à votre place  ).

Bref, cliquez sur votre boutons et allez voir ses propriété (je pense que si vous lisez ce tutoriel, vous savez naturellement
où elles sont ). Descendez jusqu'à la partie nommé "Visuals":



et si vous êtes particulièrement doué en anglais  , vous saurez que visuals = visuel.

Nous allons donc modifier l'apparence, d'accord ! Mais je ne vois aucune propriété que je
connais comme BackColor, Background image, Color...

J'y vient  , comme vous pouvez le voir, il y a différentes propriétés et notamment qui commencent
par "State" ("Etat" (du boutton) en français), en effet la couleur de votre boutton peut changer en
fonction dont la souris se comporte (passage, clic, sortie, pressé...).

Nous avons donc:

- State Common (état commun): tout les autres états s'adaptent en fonction de lui, par exemple un fond 
rouge sera appliqué quel que soit l'état
- State Pressed (état: pressé): design à appliquer lorsque le boutons est pressé

il y a certes d'autre état, mais personnellement je ne m'en sert pas puisque State Common me convient très
bien.

On s'y met prof?

S'est partit! nous allons faire un boutons arrondi à fond rouge avec un texte blanc !
Cliquez sur la petite flèche à gauche de State Common, puis sur Back:



"Back" = "Fond"
Je veut donc un boutons rouge, il me faut donc un fond ? ... Rouge et rouge foncé
pour faire plus joli:



Remarque: rien ne m’empêche de mettre d'abord le rouge puis le rouge foncé, question de gout !

Modifions maintenant la couleur du texte du boutons, déroulez la partie "Content":



"Content" = "Contenu"
Déroulez la partie "Short Text" (texte cours), pourquoi cette partie et pas l'autre? car le 
texte de ce boutons est court (tout simplement  ). Modifier la couleur du texte par 
du blanc.

Occupons nous maintenant de la forme du bouttons en déroulant la partie "Border"

 

"Border" = Et puis zut, cherchez sur internet !  

Comme vous pouvez le voir, on peut modifier la couleur de la bordure, faîte le si sa vous dit
Pour modifier la forme du bouttons et entre autre, modifier sa rondeur, on utilise la propriété
Rounding (= Rondeur). Mettez la à 15 pour obtenir le meilleurs effet.

Voyons ce que ça donne quand on exécute:



AÏE ! arrêtez de me tapez dessus !
En fait le boutons a le focus (c'est lui que l'ordinateur met en valeur) or le focus n'obéis
qu'à moitié avec la propriété State Common. 


Il nous faut donc trouvez une propriété bien sadique qui fait garder au bouton son apparence
quoi qu'il se passe  : La propriété OverrideDefault (remplacer par défaut)



remplissez la comme moi, en effet elle contient les mêmes éléments que dans la propriété 
State Common (n'effacez surtout rien dans State Common au passage). N'oubliez pas
désormais de remplir exactement pareil State Common et OverrideDefault.

Si on execute, ça nous donne:



sympa non ? Mais je suis sadique  , on va allez plus loin.
Nous allons maintenant faire un boutons qui à la même couleur qu'une image.

Pour cela, il nous faut un icon de la taille du boutons (vous pouvez redimensionner le boutons of course  )

Personnellement, j'utilise le site softicons pour me fournir en boutons ( http://www.softicons.com ). Si vous l'utilisez,
il suffit de taper les mots clés de votre recherche en anglais (Never forget mister reader   ) dans la barre de recherche:



tient ! celui en bas à droite me plait bien, et en plus je peut l'utiliser dans un programme payant.  
Cliquez sur le titre de l'icon, sélectionnez le format (32 X 32 chez moi) et enregistrez le (clic droit, enregistrez sous...)

Ajoutons le au bouton:



(remarquez que j'ai remit le boutons avec des bordures normales)
maintenant, j'aimerai bien qu'il n'y ait qu'un icon:



Parfais, maintenant je voudrais que mon boutton ait les mêmes couleurs que mon icon, Comment ? En
les copiant bien sur! Pour cela je vous conseille le logiciel "la boite à couleur": http://www.01net.com/telecharger/windows/Multimedia/outils_internet/fiches/17864.html



utilisez la pipette (à droite) pour récupérer la couleur la plus clair et la plus foncée, notez leur valeur 
RVB (premier onglet au démarrage) et modifiez le fond de votre bouttons par celles-ci:



et voilà  n'hésitez pas à faire d'autres expérimentations sur d'autres contrôles krypton !

Merci de votre lecture 

Très bon tuto, ça pourra aider les débutants^^

merci

Excellent tuto ! Merci

re,

AHHH, Si seulement ce tuto avait existé plus tôt, je n'aurais pas "perdu" des heures de bricole sur le Krypton.

Super tuto ... enfin comme d'hab  Nickel, propre !!!!!  .

Bonne rentrée à tous .....

Cordialement ,
Le réparateur de PC

merci beaucoup  , et bonne rentrée à tous

Petite question: Quel prochain tuto souhaitait vous ?
                       1°) Créer un navigateur internet avec onglet
                       2°) Créer un lecteur de flux RSS
                       3°) Utiliser les arguments d'évènements (permettant d'obtenir les coordonnées de la flèche entre autre)

Deux et Trois pour moi

Superbe tutoriel  !! Bravo !

@Blackorion: merci
@Admin: Je viens de commencer le lecteur de flux RSS, je vais donc bientôt écrire un tutoriel sur ça

Super tuto !!!!!!!!!!!!!!!! Merveilleux !  

Pour les prochains je préférer le 1 et 2 .

1, 2 et 3 :p

Super tuto !

Merci !

Mon logiciel va avoir des beaux boutons !

Et pour les prochains tuto , ce serais le 1 et 2 pour moi !

Merci, le 1 va bientôt sortir