Discussion :

[guatto]

Bonjour/Bonsoir tout le monde,

je travail en ce moment sur le design de mon programme, et je me heurte à quelques difficultés avec le ScrollPane, j'ai voulu modifier l'apparence de chaque éléments contenu dans celui-ci (track, thumb, bouton-incrément/décrément) en m'inspirant de celui de "Sublime-text", et pour l'instant ça me réussi un peu, sauf que j'ai quelques désagréments dans l'affichage, comme indiqué dans la capture d'écran :



Il y a 3 choses que je n'arrive pas à modifier ou à contrôler/cacher :

-les boutons (incrément/décrément).
-les bordures qui apparaissent en haut à gauche.
-le carré qui s'affiche pour séparer le "ScrollBar" vertical de l'horizontal.

Et voici le code que j'utilise pour modifier l'apparence :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
.scroll-bar {
 
   -fx-background-color: transparent;
 
}
 
 
.scroll-bar:vertical .track {
 
    -fx-border-color:transparent transparent transparent #1D1D1D;
    -fx-background-color: linear-gradient(from 100% 0% to 0% 0%, #323232 0%, #212121 100%);
 
}
 
 
.scroll-bar:horizontal .track{
 
    -fx-border-color:#1D1D1D transparent transparent transparent;
    -fx-background-color: linear-gradient(from 100% 100% to 100% 0%, #323232 0%, #212121 100%);
 
}
 
 
 
.scroll-bar:horizontal .thumb {
 
 -fx-background-color: linear-gradient(from 100% 100% to 100% 0%, #404040 0%, #585858 100%);
 -fx-effect: dropshadow(one-pass-box,#000000,2.0,0.7,0.0,0.0); 
 -fx-background-insets: 3 3 3 3;                 
 -fx-background-radius: 2em;
 
}
 
.scroll-bar:vertical .thumb {
 
 -fx-background-color: linear-gradient(from 100% 0% to 0% 0%, #404040 0%, #585858 100%);
 -fx-effect: dropshadow(one-pass-box,#000000,2.0,0.7,0.0,0.0); 
 -fx-background-insets: 3 3 3 3;                 
 -fx-background-radius: 2em;
 
}

Merci bien pour votre aide !

[guatto]

Re,

problème résolu, il suffisait de régler le "insets" et d'appeler l'objet "Corner" de "Scroll-pane" pour ainsi modifier la couleur et la largeur du "ScrollPane".

[bouye]

Et pour les boutons il faut voir du coté de .scroll-bar:horizontal .increment-button, .scroll-bar:horizontal .decrement-button, .scroll-bar:horizontal .increment-button .increment-arrow, .scroll-bar:horizontal .decrement-button .decrement-arrow, .scroll-bar:vertical .increment-button, .scroll-bar:vertical .decrement-button, .scroll-bar:vertical .increment-button .increment-arrow, .scroll-bar:vertical .decrement-button .decrement-arrow, etc.

Le contenu du skin est assez facile à explorer en utilisant le CSS Analyzer de SceneBuilder. SceneBuilder permet aussi de tester les changements dans le CSS live sans avoir besoin de recompiler / relancer le projet.

[guatto]

Re salut,

Oui, je m'en suis rendu compte mais un peu en retard, merci encore, j'ai juste une question mais j'ignore si je dois ouvrir une nouvelle discussion ou la poser ici :

est-ce possible de modifier le cote de ScrollBar vertical pour le mettre à gauche ? c'est pour des raisons esthétiques bien sûr

Merci encore !

[bouye]

Il est possible de le faire comme en Swing avec JScrollPane en modifiant l'orientation du contrôle setNodeOrientation(NodeOrientation.LEFT_TO_RIGHT) (à tester pour les CSS, je ne connais pas le sélecteur approprié s'il existe). Par contre, ici il faudra faire attention aux contrôles placés dedans après. En effet l'orientation par défaut est NodeOrientation.INHERIT et donc tous les contrôles placés sous le scrolling pane risquent de se retrouver avec cette orientation destinée aux pays écrivant de droite à gauche.

Sinon, j'ai trouvé ça : Move the vertical scroll bar of a scroll panel to the left side sur Stack Overflow dont la solution consiste à tricher en collant une autre barre de défilement coté gauche.

[guatto]

Bonjour,

Merci pour ta réponse, en effet, en se servant de l'orientation on inverse pas seulement les ScrollBars mais aussi le contenu du ScrollPane, mais il y a néanmoins une manière pour corriger cela avec un léger bug, en faisant la même chose pour le contenu du ScrollPane les contrôles retrouvent leur place et orientation.

Merci encore !