JavaFX Panel inside Panel auto resizing
css, fxml, java, javafx-2, pane
Solution
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
Problem
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%; } ```