JavaFX: resize GridPane with window resizing

Question

I have a GridPane object in my scene. I want to be able to resize the window and have the pane resized with it. I also want to put a VBox next to my pane.

So far I've managed to produced either a completely resizable GridPane or an AnchorPane that contains both the GridPane and the VBox objects but when I resize the window the pane does not resize along with it.

Here's the FXML with AnchorPane :

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>

<AnchorPane prefHeight="750.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1" fx:controller="%controllername%">
    <children>
        <GridPane layoutX="50" layoutY="25" maxHeight="Infinity" maxWidth="Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700" prefWidth="700">
            <columnConstraints>
                <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" percentWidth="33.3" prefWidth="100.0" />
                <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" prefWidth="100.0" />
                <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" prefWidth="100.0" />
            </columnConstraints>
            <rowConstraints>
                <RowConstraints minHeight="10.0" percentHeight="33.3" prefHeight="100.0" vgrow="ALWAYS" />
                <RowConstraints minHeight="10.0" prefHeight="100.0" vgrow="ALWAYS" />
                <RowConstraints minHeight="10.0" prefHeight="100.0" vgrow="ALWAYS" />
            </rowConstraints>
            <children>
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" />
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" GridPane.columnIndex="1" />
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" GridPane.rowIndex="1" />
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" GridPane.columnIndex="1" GridPane.rowIndex="1" />
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" GridPane.columnIndex="1" GridPane.rowIndex="2" />
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" GridPane.columnIndex="0" GridPane.rowIndex="2" />
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" GridPane.columnIndex="2" GridPane.rowIndex="0" />
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" GridPane.columnIndex="2" GridPane.rowIndex="1" />
                <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" onAction="#boardButtonAction" GridPane.columnIndex="2" GridPane.rowIndex="2" />
            </children>
        </GridPane>
      <VBox layoutX="813.0" layoutY="266.0" prefHeight="218.0" prefWidth="137.0">
          <children>
              <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false"  />
              <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false"  />
              <Button maxHeight="Infinity" maxWidth="Infinity" mnemonicParsing="false" />
          </children>
      </VBox>
    </children>
</AnchorPane>

The version with just the GridPane is basically the GridPane code used in the AnchorPane version but with xmlns and fx:controller attributes.

How do I make a scene which would feature resizable GridPane and VBox next to each other?

Answer 1

I've found the easiest way to do this is to create an HBox and add the GridPane and the VBox to it. Set the "fillHeight" property to true on the HBox. The "fillWidth" properties on the GridPane and VBox should be set to true, and their HGrow properties set to "always," (or "sometimes"). The HBox should resize with the window it's in, while the GridPane and VBox should expand to divide the available space between them.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>


<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane style="-fx-border-color: black;" HBox.hgrow="ALWAYS">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
      </GridPane>
      <VBox prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: red;" HBox.hgrow="ALWAYS" />
   </children>
</HBox>