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:

my panel inside panel application

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

score 83 · Accepted Answer · edited Jan 22 '19 at 03:45

83

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:

enter image description here

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

edited Jan 22 '19 at 03:45

xxfelixxx

6,512
3
31
38

answered Mar 05 '13 at 12:59

Korki Korkig

2,736
9
34
51

3

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. – blo0p3r Mar 05 '13 at 13:42
2

@blo0p3r I will but for now system says "You can accept your own answer in 2 days";) Hopefully there comes more other suggestions. – Korki Korkig Mar 05 '13 at 14:32
Hi. as a button is added. for example. Button fx:id="button" layoutX="172.0" layoutY="195.0" onAction="#ingresarLogin" prefHeight="35.0" prefWidth="87.0" text="Ingresar" /> it is correct?? thanksssss – Marco R Feb 09 '15 at 14:28
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 Grothe May 27 '15 at 00:21
Why do you keep a StackPane inside AnchorPane, if you want anchors to be 0? – cubuspl42 Mar 06 '17 at 18:35
@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. – Korki Korkig Mar 22 '17 at 15:16

score 17 · Answer 2 · edited Jun 16 '15 at 15:19

17

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:

AnchorPane Constraints in SceneBuilder

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

edited Jun 16 '15 at 15:19

GmodCake

427
3
11
24

answered Nov 18 '13 at 13:13

Ginchen

790
7
20

What FXML code does this generate? I'd like to see it. – Andrew S Mar 22 '16 at 15:52
1

well how about you start SceneBuilder and see for yourself ... its done in literally less than 20 seconds ... – specializt May 11 '16 at 10:04

score 10 · Answer 3 · edited Jun 20 '17 at 11:41

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.

score 1 · Answer 4 · edited Nov 14 '17 at 06:04

1

No need to cede.

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

It will automatically resize pane to anchor pane size.

edited Nov 14 '17 at 06:04

Regolith

2,944
9
33
50

answered Nov 14 '17 at 05:08

Paragfalle

11
2

score 0 · Answer 5 · edited Oct 14 '14 at 06:34

0

It is quite simple because you are using the FXMLBuilder.

Just follow these simple steps:

Open FXML file into FXMLBuilder.
Select the stack pane.
Open the Layout tab [left side tab of FXMLBuilder].
Set the sides value by which you want to compute the pane size during stage resize like TOP, LEFT, RIGHT, BOTTOM.

edited Oct 14 '14 at 06:34

ani627

5,578
8
39
45

answered Oct 14 '14 at 05:20

Sandeep Kumar

596
5
7

score 0 · Answer 6 · answered Dec 18 '14 at 08:37

If you are using Scene Builder, you will see at the right an accordion panel which normally has got three options ("Properties", "Layout" and "Code"). In the second one ("Layout"), you will see an option called "[parent layout] Constraints" (in your case "AnchorPane Constrainsts").

You should put "0" in the four sides of the element wich represents the parent layout.

JavaFX Panel inside Panel auto resizing

6 Answers6

Linked