ListView styling in JavaFX

Question

I have a listview. I want to change the color of the background and the text fill. I have tried doing the following:

playlistView.setStyle("-fx-background-color: blue; -fx-text-fill: black;");

But, this doesn't work. However, the following is working:

playlistView.setStyle("-fx-font-size: 24px; -fx-font-family: 'SketchFlow Print';");

Can you please tell me how to get the background and text-fill to work? Thank you.

Solution 1

You can use the following CSS styles:

.list-view .list-cell:even {
-fx-background-color: blue;
-fx-text-fill: black;
}
.list-view .list-cell:odd {
-fx-background-color: blue;
-fx-text-fill: black;
}

1. Save the content of this style in a lisStyles.css.

2. Add the URL for the lisStyles.css style sheet to the scene:

   scene.getStylesheets().add(getClass().getResource("lisStyles.css").toExternalForm());

Solution 2

You are styling the ListView, but the background color is determined by styles on the list cells. So style the cells. If you change the value of the looked-up color -fx-control-inner-background you will preserve both the "striping" of alternate rows, and the changing text color so that it contrasts the background. Use

.list-cell {
    -fx-control-inner-background: blue ;
}

in an external style sheet. Note the striping is very subtle (almost invisible) when the background is this dark: you might want to adjust it with

.list-cell {
    -fx-control-inner-background: blue ;
    -fx-control-inner-background-alt: derive(-fx-control-inner-background, 50%);
}

As a quick hack, you can set that looked-up color directly on the list view, and it will propagate to the cells it contains:

playlistView.setStyle("-fx-control-inner-background: blue;");

however, it is better (better separation of code, and more robust) to define it on the cells in an external style sheet.