Scaling/Aligning Elements in a scene when the window is being resized

Question

So I've been searching the internet for about 2 hours now without getting anywhere. I've seen multiple posts already regarding this issue and I tried some of the solutions provided but none seemed to work... or I was just too incompetent to implement them properly...

Anyways, how can I make it so that the elements/controls adjust when the user maximizes the window?

Here's the whole FXML-File:

<GridPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="percolationapplication.controllers.Percolation">
    <!-- CUSTOM WINDOW CONTROLS -->
    <ToolBar fx:id="toolbar" onMousePressed="#moveableWindowOnMousePressed" onMouseDragged="#moveableWindowOnMouseDragged" prefHeight="25" minHeight="25" maxHeight="25"  GridPane.columnIndex="0" GridPane.rowIndex="0">
        <ImageView fitWidth="15" fitHeight="15" smooth="true">
            <image>
                <Image url="/resources/icon.png"/>
            </image>
        </ImageView>
        <Text styleClass="customWindowTitle" text="Percolation Simulation"/>
        <Pane HBox.hgrow="ALWAYS" />
        <Button fx:id="applicationMinimize" onAction="#minimizeWindow" text="_" styleClass="customWindowButtons"/>
        <Button fx:id="applicationMaximize" onAction="#maximizeWindow" text="O" styleClass="customWindowButtons"/>
        <Button fx:id="applicationClose" onAction="#closeWindow" text="X" styleClass="customWindowButtons"/>
    </ToolBar>

    <GridPane hgap="10" GridPane.columnIndex="0" GridPane.rowIndex="1">
        <!-- CANVAS -->
        <Canvas fx:id="canvas" height="700" width="1100" GridPane.columnIndex="0" GridPane.rowIndex="0"/>

        <!-- CONTROLS -->
        <GridPane hgap="10" vgap="10" GridPane.columnIndex="1" GridPane.rowIndex="0">
            <Label text="Number Of Sites:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
            <TextField fx:id="quantityInput" text="25" GridPane.columnIndex="1" GridPane.rowIndex="0"/>

            <Label text="Probability:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
            <TextField fx:id="probabilityInput" text="0.6" GridPane.columnIndex="1" GridPane.rowIndex="1"/>

            <Label text="Algorithms:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
            <HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="2">
                <fx:define>
                    <ToggleGroup fx:id="algs"/>
                </fx:define>
                <RadioButton fx:id="algNormal" text="Normal" selected="true" toggleGroup="$algs"/>
                <RadioButton fx:id="algStack" text="Stack" toggleGroup="$algs"/>
            </HBox>

            <Label text="System Percolates:" GridPane.columnIndex="0" GridPane.rowIndex="3"/>
            <Label fx:id="outputPerc" GridPane.columnIndex="1" GridPane.rowIndex="3"/>

            <Button fx:id="perc" onAction="#handlePerc" text="Go" GridPane.columnIndex="0" GridPane.rowIndex="4"/>
        </GridPane>
        <padding>
            <Insets top="10" right="10" bottom="10" left="10"/>
        </padding>
    </GridPane>
    <stylesheets>
        <URL value="@/resources/style.css"/>
    </stylesheets>
</GridPane>

Here's the window in normal sized mode: Here's the window in maximized mode. All elements should "grow" to the right and only the canvas should reach the bottom:

Answer 1

You can try this template. You may need to set the height on your ToolBar. You also might need to set your min, max and preferred width to the same number on your right Panel

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>


<VBox 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>
      <AnchorPane style="-fx-background-color: green;">
         <children>
            <Label alignment="CENTER" text="Remove this label and put your toolbar here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
         </children>
      </AnchorPane>
      <HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
         <children>
            <AnchorPane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: blue;" HBox.hgrow="ALWAYS">
               <children>
                  <Label alignment="CENTER" layoutX="58.0" layoutY="50.0" text="Remove this label and put your picture here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
            <AnchorPane maxWidth="200.0" minWidth="200.0" prefWidth="200.0" style="-fx-background-color: yellow;">
               <children>
                  <Label alignment="CENTER" layoutY="40.0" text="Remove this label and put your right panel here" textAlignment="CENTER" wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
         </children>
      </HBox>
   </children>
</VBox>