JavaFX- scaling the inner elements of a Pane

Question

When I increase the window, the inner elements stay at the same size.

I want that when I increase the window, that the elements also get larger/scale

Main.fxml:

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane cacheHint="SCALE_AND_ROTATE" focusTraversable="true" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
     <TableView fx:id="finalTable" layoutX="27.0" layoutY="358.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="190.0" prefWidth="766.0" />
     <Label layoutX="27.0" layoutY="21.0" prefHeight="25.0" prefWidth="149.0" text="   Quell-Datei" />
     <TableView fx:id="sourceTable" editable="true" layoutX="27.0" layoutY="50.0" maxHeight="900.0" maxWidth="900.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="190.0" prefWidth="766.0" />
     <Label layoutX="27.0" layoutY="329.0" prefHeight="25.0" prefWidth="149.0" text="   Konvertierte-Datei" />
     <Button fx:id="linkBtn" layoutX="313.0" layoutY="282.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#linkAction" prefHeight="30.0" prefWidth="90.0" text="Verbinden" />
     <Button fx:id="splitBtn" layoutX="437.0" layoutY="282.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#splitAction" prefHeight="30.0" prefWidth="90.0" text="Trennen" />
     </children>
</AnchorPane>

Im working with SceneBuilder 2.0, and I have also tried to "anchor" a button
(see here: https://i.sstatic.net/X9SuX.png)
...but the scaling is completely wrong (see here: https://i.sstatic.net/2QvDc.png)

I searched the whole internet for an answer, but I found nothing that could help.

Answer 1

Well your layout is typically a VBox layout. If your Windows isn't at a fixed size this will be a good solution, because your Buttons stay at the same height and in the center of your window. The TableViews grow and shrink as you resize the window. Like you want.

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

<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<VBox xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
     <Label prefHeight="25.0" prefWidth="149.0" text="   Quell-Datei" VBox.vgrow="NEVER" />
     <TableView fx:id="sourceTable" editable="true" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
      <Label />
      <HBox alignment="CENTER" prefHeight="61.0" prefWidth="766.0" spacing="20.0" VBox.vgrow="NEVER">
         <children>
           <Button fx:id="linkBtn" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" onAction="#linkAction" prefHeight="30.0" prefWidth="90.0" text="Verbinden" HBox.hgrow="NEVER" />
           <Button fx:id="splitBtn" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" onAction="#splitAction" prefHeight="30.0" prefWidth="90.0" text="Trennen" HBox.hgrow="NEVER" />
         </children>
      </HBox>
     <Label prefHeight="25.0" prefWidth="149.0" text="   Konvertierte-Datei" VBox.vgrow="NEVER" />
     <TableView fx:id="finalTable" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
   </children>
   <padding>
      <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
   </padding>
</VBox>