Home / Questions / 90554
Accepted
Oundroni
Asked: 2020-07-26 14:47:46 +0800 CST 2020-07-26 14:47:46 +0800 CST

Change background image of a TitledPane

  • 772

Through a listener I intend to change the background image of a TitledPanealthough I have not succeeded. When starting the code, the style sheet shows the 'DownArrow.png' but when expanding/collapsing TitledPanethe image the image disappears and nothing is displayed. The images that I use are in the same folder as the code and the style sheet. The code I am using is the following:

    titledPane.expandedProperty().addListener((obs, contraído, expandido) -> {
            if (expandido) {        
                titledPane.lookup(".title").setStyle(
                     "-fx-background-image : url('flechaAbajo.png'); "    
                );
            } else {
                titledPane.lookup(".title").setStyle(
                    "-fx-background-image : url('flechaArriba.png'); " 
                );                
            }
        });

The style sheet is:

.titled-pane > .title {
    -fx-background-image : url('flechaAbajo.png'); 
    -fx-background-repeat: stretch;   
    -fx-background-position: right;
}
javafx

1 Answers

  1. Best Answer

    Try with CSS:

    .titled-pane > .title {
    -fx-background-repeat: stretch;   
    -fx-background-position: right;
}
.titled-pane:expanded > .title {
    -fx-background-image : url('flechaAbajo.png'); 
}
.titled-pane:collapsed > .title {
    -fx-background-image : url('flechaArriba.png'); 
}
    • 0