how to make child auto-resize (child is Pane, parent is VBox) in javafx

Question

I have 2 questions

1.in a javafx application, I want to put the child(crosshairArea) at the left-top corner of its parent, with 1/2 width and height as well. think I can do that via override the parent function "layoutChildren" (VBox), is there other way to do that? e.g. property binding?

2.initially VBox will occupy the full scene area, how to make(relocate) it to the half-bottom of scene?

public class Crossh extends Application {

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

    @Override
    public void start(Stage stage) {        
        VBox root = new VBox(5);
        // root.setPadding(new Insets(20,20,20,20));
        root.setStyle("-fx-border-color:red");

        Pane crosshairArea = new Pane();
        crosshairArea.maxWidthProperty().bind(root.widthProperty());
        crosshairArea.setStyle("-fx-border-color:black");       

        root.getChildren().add(crosshairArea);
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.setTitle("Location Crosshair");
        stage.setWidth(900);
        stage.setHeight(700);        
        stage.show();
    }
}

Answer 1

For your first question Have you tried the height property of VBox. For example

root.heightProperty().addListener(new ChangeListener<Number>() {

        @Override
        public void changed(ObservableValue<? extends Number> arg0,
                Number arg1, Number arg2) {
            crosshairArea.setPrefHeight(arg2.doubleValue()/2);

    }
});

For your second question, you will have to put something on top of VBox to occupy the size on the top or you can set the alignment of VBox to Pos.BOTTOM

Answer 2

Set the VBox's last child vgrow property to true.

pane.setVgrow(true);

That will solve the problem.