JavaFX Panel inside Panel auto resizing

Question

I have a JavaFX application which has only one FXML file. In this file I have one AnchorPane which has a StackPane inside it. Here is the screenshot:

When I start this application, I want to resize StackPane automatically with the AnchorPane. Thus; StackPane will get the current avaliable width and height automatically. At the moment when I resize the application, AnchorPane is being resized automatically but StackPane stays as his fixed size.

How can I resize the StackPane automatically and make it fully stretched inside its parent panel?

My Code

Main.java

package app;  import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage;  public class Main extends Application {    public static void main(String[] args) {       Application.launch(args);   }    @Override   public void start(Stage stage) throws Exception {       Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));       Scene scene = new Scene(root,800,600);       scene.getStylesheets().add(this.getClass().getResource("/app/style1.css").toExternalForm());       stage.setScene(scene);       stage.show();   } } 

MainController.java

package app;  import java.net.URL; import java.util.ResourceBundle; import javafx.fxml.FXML; import javafx.fxml.Initializable; import javafx.scene.layout.AnchorPane; import javafx.scene.layout.StackPane;  public class MainController implements Initializable {     @FXML    private AnchorPane anchorPane;    @FXML    private StackPane stackPane;     @Override    public void initialize(URL url, ResourceBundle rb) {      stackPane.setPrefSize(anchorPane.getPrefWidth(), anchorPane.getPrefHeight()); //didn't work    }     } 

Main.fxml

<?xml version="1.0" encoding="UTF-8"?> <?import java.lang.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?>  <AnchorPane fx:id="anchorPane" xmlns:fx="http://javafx.com/fxml" fx:controller="app.MainController">     <StackPane fx:id="stackPane" ></StackPane> </AnchorPane> 

style1.css

#anchorPane {      -fx-border-width: 2px;     -fx-border-color: chartreuse; } #stackPane {     -fx-border-width: 2px;     -fx-border-color: red;      /* didn't work */    -fx-hgap: 100%;    -fx-vgap: 100%; } 

Answer 1

After hours of searching and testing finally got it just after posting the question!

You can use the "AnchorPane.topAnchor, AnchorPane.bottomAnchor, AnchorPane.leftAnchor, AnchorPane.rightAnchor" fxml commands with the value "0.0" to fit/stretch/align the child elements inside a AnchorPane. So, these commands tell to child element to follow its parent while resizing.

My updated code Main.fxml

<?xml version="1.0" encoding="UTF-8"?>  <?import java.lang.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?>  <AnchorPane fx:id="anchorPane" xmlns:fx="http://javafx.com/fxml" fx:controller="app.MainController">     <!--<StackPane fx:id="stackPane" ></StackPane>--> <!-- replace with the following -->     <StackPane fx:id="stackPane" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" ></StackPane> </AnchorPane> 

Here is the result:

For api documentation: http://docs.oracle.com/javafx/2/api/javafx/scene/layout/AnchorPane.html

Answer 2

I was designing a GUI in SceneBuilder, trying to make the main container adapt to whatever the window size is. It should always be 100% wide.

This is where you can set these values in SceneBuilder:

Toggling the dotted/red lines will actually just add/remove the attributes that Korki posted in his solution (AnchorPane.topAnchor etc.).