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%;
}

Solution 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

Solution 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.).

Solution 3

Also see here

@FXML
private void mnuUserLevel_onClick(ActionEvent event) {
    FXMLLoader loader = new FXMLLoader(getClass().getResource("DBedit.fxml"));
    loader.setController(new DBeditEntityUserlevel());

    try {
           Node n = (Node)loader.load();
           AnchorPane.setTopAnchor(n, 0.0);
           AnchorPane.setRightAnchor(n, 0.0);
           AnchorPane.setLeftAnchor(n, 0.0);
           AnchorPane.setBottomAnchor(n, 0.0);
           mainContent.getChildren().setAll(n);
    } catch (IOException e){
           System.out.println(e.getMessage());
    }
}

The scenario is to load a child fxml into parent AnchorPane. To make the child to stretch in accords to its parent use AnChorPane.setxxxAnchor command.

Solution 4

No need to cede.

just select pane ,right click then select Fit to parent.

It will automatically resize pane to anchor pane size.

View more solutions

Comments

[blo0p3r]

Can you accept this answer. Will allow us to know that there is a solution to this question. Good findings tho, was searching for this.

[Korki Korkig]

@blo0p3r I will but for now system says "You can accept your own answer in 2 days";) Hopefully there comes more other suggestions.

[Marco R]

Hi. as a button is added. for example. <AnchorPane fx:id="mainContent" ...> <StackPane fx:id="subPane" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" > Button fx:id="button" layoutX="172.0" layoutY="195.0" onAction="#ingresarLogin" prefHeight="35.0" prefWidth="87.0" text="Ingresar" /> </StackPane> </AnchorPane> it is correct?? thanksssss

[Andrew Grothe]

This also works on other controls, not just Panes. I just used this on a TabbedPane, AnchorPane and TreeView and they all stretch to fit. Very helpful.

[Andrew S]

What FXML code does this generate? I'd like to see it.

[specializt]

well how about you start SceneBuilder and see for yourself ... its done in literally less than 20 seconds ...

[cubuspl42]

Why do you keep a StackPane inside AnchorPane, if you want anchors to be 0?

[Korki Korkig]

@cubuspl42 imagine that you want to place at the bottom(inside the green) something like a button and you still want that the panel(red one) stretches along the empty spaces.... I don't remember why precisely but it was usefull and still I think.