Discussion :

[Gouyon]

Bonjour

Je souhaite modifier le style des scrollBar quis sont dans mon interface.
Après pas mal de fouilles j'ai fini par trouver quelque chose qui me convient et que j'ai ensuite adapté

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
 
.scroll-bar:horizontal .decrement-button {
-fx-pref-height:25.0px;
-fx-pref-width:25.0px;
-fx-background-color:blue;
-fx-shape:"M1 0 L0 0.5 L1 1 L1 0 z"
}
.scroll-bar:horizontal .increment-button {
-fx-pref-height:25.0px;
-fx-pref-width:25.0px;
-fx-background-color:red;
-fx-shape:"M0 0 L1 0.5 L0 1 L0 0 z"
}
.scroll-bar:horizontal .track {
 
-fx-background-color:linear-gradient(to right, blue,red);
 
}

Le problème c'est que tel que c'est mis dans mon fichier CSS ce srtyle s'appique à toutes les ScrollBar et notamment celles des ScrollPane et là ça devient très moche
Du coup il faudrait que je puisse aplique ce style uniquement aux Scroll bar concernée mais j'ai un peu de mal à trouver comment faire
Si quelqu'un peu me dépanner ça m'arrangerais bien
Merci d'avance

[bouye]

Ben tu peux donner un style de class particulier à tes barres de scroll ou à ton control.

[Gouyon]

Ben tu peux donner un style de class particulier à tes barres de scroll ou à ton control.

Oui je me suis mal exprimé dans mon post. C'est bien ce type de solution que je pensais appliquer mais j'ai un peu de mal avec la syntaxe
Je pensais faire un truc du genre

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
 
#maScrollBar{
scroll-bar:horizontal decrement-button {
-fx-pref-height:25.0px;
-fx-pref-width:25.0px;
-fx-background-color:blue;
-fx-shape:"M1 0 L0 0.5 L1 1 L1 0 z"
}
scroll-bar:horizontal increment-button {
-fx-pref-height:25.0px;
-fx-pref-width:25.0px;
-fx-background-color:red;
-fx-shape:"M0 0 L1 0.5 L0 1 L0 0 z"
}
scroll-bar:horizontal track {
 
-fx-background-color:linear-gradient(to right, blue,red);
 
}
}

Malheureusement ça ne fonctionne pas.

[bouye]

Avec un . plutot qu'un # ?

[Gouyon]

C'est pareil
Seulement une partie du style est appliquée
Il n'applique que le premier
scroll-bar:horizontal decrement-button
Mais pas le reste

[bouye]

Aucun soucis pour moi :

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
43
44
45
46
47
48
49
50
51
52
package scrollbar;
 
import java.util.Optional;
import java.util.stream.Stream;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;
 
public final class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) throws Exception {
        final ScrollBar scroll1 = new ScrollBar();
        final ScrollBar scroll2 = new ScrollBar();
        scroll2.getStyleClass().add("my-scroll-bar");
        final ScrollBar scroll3 = new ScrollBar();
        scroll3.setOrientation(Orientation.VERTICAL);
        final ScrollBar scroll4 = new ScrollBar();
        scroll4.setOrientation(Orientation.VERTICAL);
        scroll4.getStyleClass().add("my-scroll-bar");
        final TilePane root = new TilePane(scroll1, scroll2, scroll3, scroll4);
        root.setPrefRows(2);
        root.setPrefColumns(2);
        root.setHgap(3);
        root.setVgap(3);
        root.prefTileWidthProperty().bind(Bindings.subtract(Bindings.divide(root.widthProperty(), root.prefRowsProperty()), root.hgapProperty()));
        root.prefTileHeightProperty().bind(Bindings.subtract(Bindings.divide(root.heightProperty(), root.prefColumnsProperty()), root.vgapProperty()));
        Stream.of(scroll1, scroll2, scroll3, scroll4)
                .map(scrollBar -> {
                    final StackPane result = new StackPane(scrollBar);
                    result.setPrefSize(Region.USE_COMPUTED_SIZE, Region.USE_COMPUTED_SIZE);
                    result.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
                    return result;
                })
                .forEach(root.getChildren()::add);
        final Scene scene = new Scene(root);
        Optional.ofNullable(getClass().getResource("test.css"))
                .ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
        primaryStage.setTitle("Test");
        primaryStage.setScene(scene);
        primaryStage.setWidth(800);
        primaryStage.setHeight(800);
        primaryStage.show();
    }
 
}

Code CSS :

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
.my-scroll-bar:horizontal .decrement-button {
    -fx-pref-height:25.0px;
    -fx-pref-width:25.0px;
    -fx-background-color:blue;
    -fx-shape:"M1 0 L0 0.5 L1 1 L1 0 z";
}
.my-scroll-bar:horizontal .increment-button {
    -fx-pref-height:25.0px;
    -fx-pref-width:25.0px;
    -fx-background-color:red;
    -fx-shape:"M0 0 L1 0.5 L0 1 L0 0 z";
}
.my-scroll-bar:horizontal .track {
    -fx-background-color:linear-gradient(to right, blue,red);
}
 
.my-scroll-bar:vertical .decrement-button {
    -fx-pref-height:25.0px;
    -fx-pref-width:25.0px;
    -fx-background-color:blue;
    -fx-shape:"M1 0 L0 0.5 L1 1 L1 0 z";
    -fx-rotate: 90;
}
.my-scroll-bar:vertical .increment-button {
    -fx-pref-height:25.0px;
    -fx-pref-width:25.0px;
    -fx-background-color:red;
    -fx-shape:"M0 0 L1 0.5 L0 1 L0 0 z";
    -fx-rotate: 90;
}
.my-scroll-bar:vertical .track {
    -fx-background-color:linear-gradient(to bottom, blue,red);
}

[Gouyon]

Je ne sais pas pourquoi je me suis pris la tête mais comme d'habitude la solution était toute bête .
Il fallait juste que je remplace le .scroll-bar par un .my-scroll-bar et ensuite j’affectais ce sytle aux scrollbar à modifier
Merci beaucoup