gridpane resize

Question

I want a gridpane layout as in the attached image. Anyone know how to this or am I using the wrong layout?

Answer 1

You can control how different rows and columns in a GridPane grow using column and row constraints.

The way to do this is to set the hgrow property of the first column to ALWAYS, and the vgrow property of the first row to ALWAYS - this means the top left cell will always expand. You can either set the other cells to fixed widths/heights, or otherwise they will expand to fit their contents and no more.

I've included an FXML example with the GridPane inside an AnchorPane, and anchored to the top, left bottom and right of the AnchorPane. This means that the GridPane will grow to fill the parent AnchorPane:

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <GridPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" />
        <ColumnConstraints prefWidth="150" />
      </columnConstraints>
      <rowConstraints>
        <RowConstraints vgrow="ALWAYS" />
        <RowConstraints prefHeight="150" />
      </rowConstraints>
    </GridPane>
  </children>
</AnchorPane>

This results in the layout shown here, and expands to fill the parent pane: