Resize scene when opening & closing TitledPane

Question

I was wondering, how I can resize Scene, when expanding & collapsing TitledPane.

I had tried case with only 1 TitledPane

1 TitledPane

package fxinswing;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class FXInSwing extends Application {

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

    @Override public void start(Stage stage) {

        TitledPane tp = new TitledPane();

        GridPane grid = new GridPane();
        grid.setVgap(4);
        grid.setPadding(new Insets(5, 5, 5, 5));
        grid.add(new Label("First Name: "), 0, 0);
        grid.add(new TextField(), 1, 0);
        grid.add(new Label("Last Name: "), 0, 1);
        grid.add(new TextField(), 1, 1);
        grid.add(new Label("Email: "), 0, 2);
        grid.add(new TextField(), 1, 2);        
        tp.setText("Grid 1");
        tp.setContent(grid);

        stage.setTitle("TitledPane");
        Scene scene = new Scene(new Group());
        scene.setFill(Color.GHOSTWHITE);

        Group root = (Group)scene.getRoot();
        root.getChildren().add(tp);

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

What I'm expecting during closing

and Here's what I'm expecting during opening

However, currently, when it is opening or closing, it always stay the same way (Except the direction of arrow)

I was wondering, how can I pack my Scene's size changed accordingly, so that it will always "fit" to the actual size of TitledPane, during opening & closing.

Update:

@James_D proposed a great way to overcome 1 TitledPane case.

However, when using 2 TitledPanes

2 TitledPanes

package fxinswing;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class FXInSwing extends Application {

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

    @Override public void start(final Stage stage) {
        stage.setTitle("TitledPane");
        Scene scene = new Scene(new GridPane());
        scene.setFill(Color.GHOSTWHITE);

        final GridPane  root = (GridPane )scene.getRoot();

        TitledPane tp = new TitledPane();

        GridPane grid = new GridPane();
        grid.setVgap(4);
        grid.setPadding(new Insets(5, 5, 5, 5));
        grid.add(new Label("First Name: "), 0, 0);
        grid.add(new TextField(), 1, 0);
        grid.add(new Label("Last Name: "), 0, 1);
        grid.add(new TextField(), 1, 1);
        grid.add(new Label("Email: "), 0, 2);
        grid.add(new TextField(), 1, 2);        
        tp.setText("Grid 1");
        tp.setContent(grid);

        tp.heightProperty().addListener(new ChangeListener() {

            @Override
            public void changed(ObservableValue ov, Object t, Object t1) {
                stage.sizeToScene();
            }

        });

        TitledPane tp2 = new TitledPane();

        GridPane grid2 = new GridPane();
        grid2.setVgap(4);
        grid2.setPadding(new Insets(5, 5, 5, 5));
        grid2.add(new Label("First Name: "), 0, 0);
        grid2.add(new TextField(), 1, 0);
        grid2.add(new Label("Last Name: "), 0, 1);
        grid2.add(new TextField(), 1, 1);
        grid2.add(new Label("Email: "), 0, 2);
        grid2.add(new TextField(), 1, 2);        
        tp2.setText("Grid 2");
        tp2.setContent(grid2);


        tp2.heightProperty().addListener(new ChangeListener() {
            @Override
            public void changed(ObservableValue ov, Object t, Object t1) {
                stage.sizeToScene();
            }            
        });

        root.add(tp, 0, 0);
        root.add(tp2, 0, 1);

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

The outcome looks like following. The Scene will never resize, doesn't matter you are opening or closing the TitledPanes.

I don't use Accordion, as I want two TitledPanes to be independent from each others.

I had try

root.requestLayout();

But, still, nothing has changed. Any idea how I can make 2 TitledPanes work?

Answer 1

This seems to work:

    tp.heightProperty().addListener((obs, oldHeight, newHeight) -> stage.sizeToScene());