javafx shape resize dynamically

Question

i need to have an AnchorPane with a stroke around it that resizes when the stage is being resized, let me put some images to explain myself better:

i achieved this by using a Rectangle with fill color White and Alpha = 0 (its transparent), this is my fxml file:

when i make the stage bigger i want the rectangle to resize and always fit exactly the size of the AnchorPane

but it doesn't work like that, instead i end up with this:

there is a way to bind the area of the rectangle to the area of the AnchorPane in which the rectangle is? or i am doing it wrong by using a shape for this and there is a more efficient way of achieving what i need?

One last thing! i need to be able to change the color of that stroke around the AnchorPane! Thanks so much, if you need any more information about my code or if my explanation it's too poor let me know and i will improve my question!

James_D · Accepted Answer

To achieve what you want the way you describe doing it, you can use a controller class and bind the size of the rectangle to the size of the pane:

and then

package com.mycompany.myproject ;

import javafx.fxml.FXML ;
import javafx.scene.shape.Rectangle ;
import javafx.scene.layout.AnchorPane ;

public class Controller {

    @FXML
    private AnchorPane root ;
    @FXML
    private Rectangle border ;

    public void initialize() {
        border.widthProperty().bind(root.widthProperty());
        border.heightProperty().bind(border.heightProperty());
    }

}

You can change the color of the rectangle in the controller simply by calling border.setStroke(...);.

Using a Rectangle may not be the best way. You can omit the rectangle entirely, and use CSS to style the anchor pane itself. The CSS you need is

-fx-background-color: red, -fx-color ;
-fx-background-insets: 0, 10 ;

You could set this directly on the anchor pane:

but it's probably better to put it in an external style sheet:

and then in your main class:

Parent root = FXMLLoader.load(getClass().getResource("path/to/fxml"));
Scene scene = new Scene(root);
scene.getStylesheets().add("my-stylesheet.css");
// ...

with my-stylesheet.css containing:

.root {
    -fx-background-color: red, -fx-color ;
    -fx-background-insets: 0, 10 ;
}

Finally, if you use a stylesheet like this, you can change the border color dynamically by using a looked-up color. Modify the stylesheet to:

.root {
    my-border-color: red ;
    -fx-background-color: my-border-color, -fx-color ;
    -fx-background-insets: 0, 10 ;
}

and then you can change the border at any time by calling

root.setStyle("my-border-color: green;")

where root is a reference to the anchor pane.

SSCCE

Here is a complete example using the last technique:

DynamicBorderColor.fxml:

Controller.java:

import javafx.fxml.FXML;
import javafx.scene.layout.AnchorPane;

public class Controller {

    private int colorIndex ;
    private String[] colors = {"red", "orange", "yellow", "green", "blue", "indigo", "violet"} ;

    @FXML
    private AnchorPane root ;

    @FXML
    private void changeColor() {
        colorIndex = (colorIndex + 1) % colors.length ;
        root.setStyle("border-color: "+colors[colorIndex]+";");
    }
}

DynamicBorderColor.java (main app class):

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class DynamicBorderColor extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        Scene scene = new Scene(FXMLLoader.load(getClass().getResource("DynamicBorderColor.fxml")));
        scene.getStylesheets().add("my-stylesheet.css");

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

my-stylesheet.css:

.root {
    border-color: red ;
    -fx-background-color: border-color, -fx-base ;
    -fx-background-insets: 0, 10 ;
}

Start:

Resize:

Press button a few times:

javafx shape resize dynamically

Answers (1)

SSCCE

Related Questions