Javafx: Change in-line css style during runtime

Question

I am attempting to change the background image of a pane when the application is maximized. My background is set using in-line css. I've set up two different variables for the styling and an if statement. However, I'm not having any luck getting it to change the styling.

String cssStyle = "-fx-background-image: url(\'file:images/poker_table.png\');" +
                 "-fx-background-position: center center;" +
                 "-fx-background-radius: 15;" + // ************* For rounded corners
                 "-fx-background-size: 100% 100%;";
String cssStyle2 = "-fx-background-image: url(\'file:images/poker_table.jpg\');" +
                  "-fx-background-position: center center;" +
                  "-fx-background-radius: 15;" +
                  "-fx-background-size: 100% 100%;";
if (!primaryStage.isMaximized())
{   gameScreen.setStyle(cssStyle);
}
else
{   gameScreen.setStyle(cssStyle2);
}

Answer 1

Simply add a listener to the stage's maximizedProperty(). Properties and listeners are a fundamental part of the JavaFX API: you can read about them in the standard documentation, or any good JavaFX tutorial.

primaryStage.maximizedProperty().addListener((obs, wasMaximized, isNowMaximized) -> {
    if (isNowMaximized) {
        gameScreen.setStyle(cssStyle2);
    } else {
        gameScreen.setStyle(cssStyle);
    }
});

You probably also need to set the appropriate style immediately, using the code you already have.

You can use a binding instead, if you prefer:

gameScreen.styleProperty().bind(Bindings.createStringBinding(
    () -> primaryStage.isMaximized() ? cssStyle2 : cssStyle,
    primaryStage.maximizedProperty()
);

The binding can replace the code you already have; it will both be applied immediately and any time the maxmizedProperty changes.